kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-01-31 09:08:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #64 from unix/chinese

Browse Source 
docs: reduce the weight of component name in chinese title
This commit is contained in:
witt
2020-04-06 15:41:48 +08:00
committed by GitHub
parent 67a1a4756a 49cea7f48f
commit b3e9720768
2 changed files with 63 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
lib/components/sidebar/active-link.tsx
View File

@@ -1,25 +1,74 @@
import React, { Children } from 'react'
import React, { useMemo } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useTheme } from 'components'
export interface Props {
onAcitve?: Function
href: string
text: string
}
const ActiveLink: React.FC<React.PropsWithChildren<Props>> = React.memo(
({ children, href }) => {
const { pathname } = useRouter()
const isActive = pathname === href
const child = Children.only(children)
const ActiveLink: React.FC<Props> = React.memo(({
href, text,
}) => {
const theme = useTheme()
const { pathname } = useRouter()
const [title, subtitle] = useMemo(() => {
if (!/[\u4E00-\u9FA5]/.test(text)) return [text, null]
if (/zeit|ui|ZEIT|UI/.test(text)) return [text, null]
return [
text.replace(/[^\u4E00-\u9FA5]/g, ''),
text.replace(/[^a-zA-Z]/g, ''),
]
}, [text])
const isActive = pathname === href
return (
return (
<div className="link">
<Link href={href}>
{React.cloneElement(child as React.ReactElement, {
className: isActive ? 'active' : null,
})}
<a className={isActive ? 'active' : ''}>
{title}{subtitle && <span>&nbsp;{subtitle}</span>}
</a>
</Link>
)
})
<style jsx>{`
.link {
width: 100%;
color: ${theme.palette.accents_5};
display: flex;
height: 2.25rem;
align-items: center;
justify-content: flex-start;
cursor: pointer;
text-transform: capitalize;
}
a {
color: ${theme.palette.accents_7};
font-size: 1rem;
transition: all 200ms ease;
font-weight: 400;
display: inline-flex;
align-items: baseline;
}
a.active {
color: ${theme.palette.success};
font-weight: 600;
}
a.active span {
color: ${theme.palette.successLight};
}
span {
font-size: .75rem;
color: ${theme.palette.accents_4};
font-weight: 400;
}
`}</style>
</div>
)
})
export default ActiveLink

33
lib/components/sidebar/side-item.tsx
View File

@@ -24,14 +24,8 @@ const SideItem: React.FC<React.PropsWithChildren<SideItemProps>> = React.memo(({
{sides.map((side, index) => {
return (
<div key={`${side.localeName || side.name}-${index}`} className="item">
{!side.url && <ActiveCatalog name={side.name}
localeName={side.localeName}
key={side.localeName || side.name} />}
{side.url && (
<div className="link">
<ActiveLink href={side.url}><a>{side.name}</a></ActiveLink>
</div>
)}
{!side.url && <ActiveCatalog name={side.name} localeName={side.localeName} />}
{side.url && <ActiveLink href={side.url} text={side.name} />}
{side.children && <div className="children">
{React.cloneElement(children as ReactElement, {
@@ -46,29 +40,6 @@ const SideItem: React.FC<React.PropsWithChildren<SideItemProps>> = React.memo(({
width: 100%;
}
.link {
width: 100%;
color: ${theme.palette.accents_5};
display: flex;
height: 2.25rem;
align-items: center;
justify-content: flex-start;
cursor: pointer;
text-transform: capitalize;
}
.link :global(a) {
color: ${theme.palette.accents_7};
font-size: 1rem;
transition: all 200ms ease;
font-weight: 400;
}
.link :global(a.active) {
color: ${theme.palette.success};
font-weight: 600;
}
.children {
display: flex;
justify-content: center;