From ea80119057a2147a6a187b6c0c50de5d2f6c739b Mon Sep 17 00:00:00 2001 From: unix Date: Fri, 20 Mar 2020 21:07:08 +0800 Subject: [PATCH 1/2] feat(link): display as a separate block --- components/link/link.tsx | 15 ++++++++++++--- pages/docs/components/link.mdx | 20 ++++++++++++++------ 2 files changed, 26 insertions(+), 9 deletions(-) diff --git a/components/link/link.tsx b/components/link/link.tsx index 99a3560..4f901bb 100644 --- a/components/link/link.tsx +++ b/components/link/link.tsx @@ -7,7 +7,8 @@ interface Props { href?: string color?: boolean pure?: boolean - underline: boolean + underline?: boolean + block?: boolean className?: string } @@ -16,16 +17,18 @@ const defaultProps = { color: false, pure: false, underline: false, + block: false, className: '', } export type LinkProps = Props & typeof defaultProps & React.AllHTMLAttributes const Link: React.FC> = React.memo(({ - href, color, underline, pure, children, className, ...props + href, color, underline, pure, children, className, block, ...props }) => { const theme = useTheme() - const linkColor = color ? theme.palette.success : 'inherit' + const linkColor = color || block ? theme.palette.success : 'inherit' + const padding = block ? theme.layout.gapQuarter : '0' const decoration = underline ? 'underline' : 'none' return ( @@ -38,12 +41,18 @@ const Link: React.FC> = React.memo(({ 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'}; + } `} ) diff --git a/pages/docs/components/link.mdx b/pages/docs/components/link.mdx index af80215..715f6b4 100644 --- a/pages/docs/components/link.mdx +++ b/pages/docs/components/link.mdx @@ -30,13 +30,20 @@ Hyperlinks between pages. desc="Use `Text` to standardize text content." scope={{ Link, Text }} code={` -
-The Evil Rabbit Jumped over the Fence. -The Evil Rabbit Jumped over the Fence. -The Evil Rabbit Jumped over the Fence. -The Evil Rabbit Jumped over the Fence. +<> + The Evil Rabbit Jumped over the Fence. + The Evil Rabbit Jumped over the Fence. + The Evil Rabbit Jumped over the Fence. + The Evil Rabbit Jumped over the Fence. + +`} /> -
+The Evil Rabbit Jumped over the Fence. `} /> @@ -48,6 +55,7 @@ Hyperlinks between pages. | **color** | display color for link | `boolean` | - | `false` | | **pure** | hide icon | `boolean` | - | `false` | | **underline** | display underline | `boolean` | - | `false` | +| **block** | display as a separate block | `boolean` | - | `false` | | ... | native props | `LinkHTMLAttributes` | `'alt', 'className', ...` | - | From 198a57f2a78e4fefc85378e29c9424b402eae2a8 Mon Sep 17 00:00:00 2001 From: unix Date: Fri, 20 Mar 2020 21:13:18 +0800 Subject: [PATCH 2/2] docs(sidebar): fix active state rendering error on the server --- lib/components/index.ts | 4 ++-- lib/components/{ => sidebar}/active-catalog.tsx | 0 lib/components/{ => sidebar}/active-link.tsx | 7 ++++--- lib/components/sidebar/side-item.tsx | 6 +++--- 4 files changed, 9 insertions(+), 8 deletions(-) rename lib/components/{ => sidebar}/active-catalog.tsx (100%) rename lib/components/{ => sidebar}/active-link.tsx (90%) diff --git a/lib/components/index.ts b/lib/components/index.ts index f486cce..dc424a1 100644 --- a/lib/components/index.ts +++ b/lib/components/index.ts @@ -1,7 +1,7 @@ export { default as Layout } from './layout' -export { default as ActiveLink } from './active-link' -export { default as ActiveCatalog } from './active-catalog' +export { default as ActiveLink } from 'lib/components/sidebar/active-link' +export { default as ActiveCatalog } from 'lib/components/sidebar/active-catalog' export { default as Sidebar } from './sidebar' export { default as Playground } from './playground' export { default as ExampleBlock } from './example-block' diff --git a/lib/components/active-catalog.tsx b/lib/components/sidebar/active-catalog.tsx similarity index 100% rename from lib/components/active-catalog.tsx rename to lib/components/sidebar/active-catalog.tsx diff --git a/lib/components/active-link.tsx b/lib/components/sidebar/active-link.tsx similarity index 90% rename from lib/components/active-link.tsx rename to lib/components/sidebar/active-link.tsx index 28bf2aa..b4a9d87 100644 --- a/lib/components/active-link.tsx +++ b/lib/components/sidebar/active-link.tsx @@ -13,12 +13,13 @@ export interface Props { const ActiveLink: React.FC> = React.memo( ({ children, index, href }) => { const { updateShouldScroll } = useConfigs() - const { asPath } = useRouter() - const isActive = asPath === href + const { pathname } = useRouter() + const isActive = pathname === href const child = Children.only(children) - + useEffect(() => { if (!isActive) return + updateShouldScroll && updateShouldScroll(index > 16) }, [isActive]) diff --git a/lib/components/sidebar/side-item.tsx b/lib/components/sidebar/side-item.tsx index 5cc7d99..fb2104d 100644 --- a/lib/components/sidebar/side-item.tsx +++ b/lib/components/sidebar/side-item.tsx @@ -1,7 +1,7 @@ import React, { useState, ReactElement, useCallback } from 'react' -import ArrowIcon from 'lib/components/icons/arrow' -import ActiveLink from 'lib/components/active-link' -import ActiveCatalog from 'lib/components/active-catalog' +import ActiveLink from './active-link' +import ArrowIcon from '../icons/arrow' +import ActiveCatalog from './active-catalog' import { useTheme } from 'components' export type Sides = {