kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-04-28 12:15:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(prettier): format code style

Browse Source
This commit is contained in:
unix
2020-05-06 14:18:28 +08:00
parent cf8e277324
commit 112c826575
263 changed files with 4927 additions and 3992 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
components/link/__tests__/index.test.tsx
View File

@@ -7,16 +7,24 @@ describe('Link', () => {
const wrapper = mount(
<div>
<Link href="https://react.zeit-ui.co">link</Link>
<Link href="https://react.zeit-ui.co" color>link</Link>
<Link href="https://react.zeit-ui.co" pure>link</Link>
<Link href="https://react.zeit-ui.co" underline>link</Link>
<Link href="https://react.zeit-ui.co" block>link</Link>
</div>
<Link href="https://react.zeit-ui.co" color>
link
</Link>
<Link href="https://react.zeit-ui.co" pure>
link
</Link>
<Link href="https://react.zeit-ui.co" underline>
link
</Link>
<Link href="https://react.zeit-ui.co" block>
link
</Link>
</div>,
)
expect(wrapper.html()).toMatchSnapshot()
expect(() => wrapper.unmount()).not.toThrow()
})
it('should be no errors when href missing', () => {
const errorSpy = jest.spyOn(console, 'error')
const wrapper = mount(<Link />)
@@ -24,12 +32,12 @@ describe('Link', () => {
expect(() => wrapper.unmount()).not.toThrow()
errorSpy.mockRestore()
})
it('should forward ref', () => {
let ref = React.createRef<HTMLAnchorElement>()
const errorSpy = jest.spyOn(console, 'error')
const wrapper = mount(<Link ref={ref} />)
expect(errorSpy).not.toHaveBeenCalled()
expect(ref.current).not.toBeNull()
expect(() => wrapper.unmount()).not.toThrow()

22
components/link/icon.tsx
View File

@@ -6,12 +6,22 @@ interface Props {
export const LinkIcon: React.FC<Props> = ({ color }) => {
return (
<svg viewBox="0 0 24 24" width="1em" height="1em" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"
strokeLinejoin="round" fill="none" shapeRendering="geometricPrecision" style={{ color }} className="icon">
<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/>
<path d="M15 3h6v6"/>
<path d="M10 14L21 3"/>
<svg
viewBox="0 0 24 24"
width="1em"
height="1em"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
shapeRendering="geometricPrecision"
style={{ color }}
className="icon">
<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" />
<path d="M15 3h6v6" />
<path d="M10 14L21 3" />
<style jsx>{`
.icon {
margin: 0 5px;

73
components/link/link.tsx
View File

@@ -24,41 +24,46 @@ const defaultProps = {
type NativeAttrs = Omit<React.AnchorHTMLAttributes<any>, keyof Props>
export type LinkProps = Props & typeof defaultProps & NativeAttrs
const Link = React.forwardRef<HTMLAnchorElement, React.PropsWithChildren<LinkProps>>(({
href, color, underline, pure, children, className, block, ...props
}, ref: React.Ref<HTMLAnchorElement>) => {
const theme = useTheme()
const linkColor = color || block ? theme.palette.link : 'inherit'
const padding = block ? theme.layout.gapQuarter : '0'
const decoration = underline ? 'underline' : 'none'
const Link = React.forwardRef<HTMLAnchorElement, React.PropsWithChildren<LinkProps>>(
(
{ href, color, underline, pure, children, className, block, ...props },
ref: React.Ref<HTMLAnchorElement>,
) => {
const theme = useTheme()
const linkColor = color || block ? theme.palette.link : 'inherit'
const padding = block ? theme.layout.gapQuarter : '0'
const decoration = underline ? 'underline' : 'none'
return (
<a className={`link ${className}`} href={href} {...props} ref={ref}>
{children}
{!pure && <LinkIcon color={linkColor}/>}
<style jsx>{`
.link {
display: inline-flex;
align-items: baseline;
line-height: inherit;
color: ${linkColor};
text-decoration: none;
padding: calc(${padding} * .8) calc(${padding} * 1.7);
border-radius: ${block ? theme.layout.radius : 0};
width: fit-content;
}
.link:hover, .link:active, .link:focus {
text-decoration: ${decoration};
}
.link:hover {
background-color: ${block ? '#0076ff1a' : 'unset'};
}
`}</style>
</a>
)
})
return (
<a className={`link ${className}`} href={href} {...props} ref={ref}>
{children}
{!pure && <LinkIcon color={linkColor} />}
<style jsx>{`
.link {
display: inline-flex;
align-items: baseline;
line-height: inherit;
color: ${linkColor};
text-decoration: none;
padding: calc(${padding} * 0.8) calc(${padding} * 1.7);
border-radius: ${block ? theme.layout.radius : 0};
width: fit-content;
}
.link:hover,
.link:active,
.link:focus {
text-decoration: ${decoration};
}
.link:hover {
background-color: ${block ? '#0076ff1a' : 'unset'};
}
`}</style>
</a>
)
},
)
const MemoLink = React.memo(Link)