From 02396c986c9539b9140cc05f911bb913e8fdb563 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Sat, 9 Dec 2023 19:32:10 +0800 Subject: [PATCH] site: update demo Tabs usage (#46351) --- .../builtins/InstallDependencies/index.tsx | 85 ++++++------------- .../builtins/InstallDependencies/npm.tsx | 39 ++++++--- .../builtins/InstallDependencies/pnpm.tsx | 43 ++++++---- .../builtins/InstallDependencies/yarn.tsx | 41 ++++++--- .dumi/theme/slots/ContentTabs/index.tsx | 23 ++--- components/_util/PurePanel.tsx | 6 +- .../date-picker/design/behavior-pattern.tsx | 3 +- .../design/demo/date-extra-info.tsx | 8 +- .../date-picker/design/demo/preset-range.tsx | 21 +++-- .../__tests__/__snapshots__/demo.test.ts.snap | 8 +- components/tabs/demo/icon.tsx | 2 +- components/tabs/demo/nest.tsx | 2 - 12 files changed, 135 insertions(+), 146 deletions(-) diff --git a/.dumi/theme/builtins/InstallDependencies/index.tsx b/.dumi/theme/builtins/InstallDependencies/index.tsx index bf32a72f52..777241401f 100644 --- a/.dumi/theme/builtins/InstallDependencies/index.tsx +++ b/.dumi/theme/builtins/InstallDependencies/index.tsx @@ -1,8 +1,8 @@ -import SourceCode from 'dumi/theme-default/builtins/SourceCode'; import React from 'react'; -import type { TabsProps } from 'antd'; import { ConfigProvider, Tabs } from 'antd'; -import { createStyles, css } from 'antd-style'; +import SourceCode from 'dumi/theme-default/builtins/SourceCode'; +import type { Tab } from 'rc-tabs/lib/interface'; + import NpmLogo from './npm'; import PnpmLogo from './pnpm'; import YarnLogo from './yarn'; @@ -13,68 +13,31 @@ interface InstallProps { pnpm?: string; } -const useStyle = createStyles(() => ({ - packageManager: css` - display: flex; - align-items: center; - justify-content: center; - svg { - margin-inline-end: 8px; - } - `, -})); - const InstallDependencies: React.FC = (props) => { const { npm, yarn, pnpm } = props; - const { styles } = useStyle(); - - const items = React.useMemo( - () => - [ - { - key: 'npm', - children: npm ? {npm} : null, - label: ( -
- - npm -
- ), - }, - { - key: 'yarn', - children: yarn ? {yarn} : null, - label: ( -
- - yarn -
- ), - }, - { - key: 'pnpm', - children: pnpm ? {pnpm} : null, - label: ( -
- - pnpm -
- ), - }, - ].filter((item) => item.children), - [npm, yarn, pnpm], - ); + const items: Tab[] = [ + { + key: 'npm', + label: 'npm', + children: npm ? {npm} : null, + icon: , + }, + { + key: 'yarn', + label: 'yarn', + children: yarn ? {yarn} : null, + icon: , + }, + { + key: 'pnpm', + label: 'pnpm', + children: pnpm ? {pnpm} : null, + icon: , + }, + ].filter((item) => item.children); return ( - + ); diff --git a/.dumi/theme/builtins/InstallDependencies/npm.tsx b/.dumi/theme/builtins/InstallDependencies/npm.tsx index ffd6755688..63937b0322 100644 --- a/.dumi/theme/builtins/InstallDependencies/npm.tsx +++ b/.dumi/theme/builtins/InstallDependencies/npm.tsx @@ -1,26 +1,39 @@ import React from 'react'; +import { createStyles, css } from 'antd-style'; +import classNames from 'classnames'; interface IconProps { className?: string; style?: React.CSSProperties; } +const useStyle = createStyles(() => ({ + iconWrap: css` + display: inline-flex; + align-items: center; + line-height: 0; + text-align: center; + vertical-align: -0.125em; + `, +})); + const NpmIcon: React.FC = (props) => { const { className, style } = props; + const { styles } = useStyle(); return ( - - - + + + + + ); }; diff --git a/.dumi/theme/builtins/InstallDependencies/pnpm.tsx b/.dumi/theme/builtins/InstallDependencies/pnpm.tsx index 1be5a1ce3a..67cb132e2e 100644 --- a/.dumi/theme/builtins/InstallDependencies/pnpm.tsx +++ b/.dumi/theme/builtins/InstallDependencies/pnpm.tsx @@ -1,28 +1,41 @@ import React from 'react'; +import { createStyles, css } from 'antd-style'; +import classNames from 'classnames'; interface IconProps { className?: string; style?: React.CSSProperties; } +const useStyle = createStyles(() => ({ + iconWrap: css` + display: inline-flex; + align-items: center; + line-height: 0; + text-align: center; + vertical-align: -0.125em; + `, +})); + const PnpmIcon: React.FC = (props) => { const { className, style } = props; + const { styles } = useStyle(); return ( - + + + ); }; diff --git a/.dumi/theme/builtins/InstallDependencies/yarn.tsx b/.dumi/theme/builtins/InstallDependencies/yarn.tsx index c79ac4eee7..7f73b97efd 100644 --- a/.dumi/theme/builtins/InstallDependencies/yarn.tsx +++ b/.dumi/theme/builtins/InstallDependencies/yarn.tsx @@ -1,27 +1,40 @@ import React from 'react'; +import { createStyles, css } from 'antd-style'; +import classNames from 'classnames'; interface IconProps { className?: string; style?: React.CSSProperties; } +const useStyle = createStyles(() => ({ + iconWrap: css` + display: inline-flex; + align-items: center; + line-height: 0; + text-align: center; + vertical-align: -0.125em; + `, +})); + const YarnIcon: React.FC = (props) => { const { className, style } = props; + const { styles } = useStyle(); return ( - + + + ); }; diff --git a/.dumi/theme/slots/ContentTabs/index.tsx b/.dumi/theme/slots/ContentTabs/index.tsx index ae16a912c4..09ac67ce03 100644 --- a/.dumi/theme/slots/ContentTabs/index.tsx +++ b/.dumi/theme/slots/ContentTabs/index.tsx @@ -1,12 +1,12 @@ import type { FC, ReactNode } from 'react'; import React from 'react'; import { CodeOutlined, SkinOutlined } from '@ant-design/icons'; +import { Tabs } from 'antd'; import { useRouteMeta } from 'dumi'; import type { IContentTabsProps } from 'dumi/theme-default/slots/ContentTabs'; import type { TabsProps } from 'rc-tabs'; -import { Tabs } from 'antd'; -const titleMap: Record = { +const titleMap: Record = { design: '设计', }; @@ -23,24 +23,17 @@ const ContentTabs: FC = ({ tabs, tabKey, onChange }) => { const items: TabsProps['items'] = [ { - label: ( - - - 开发 - - ), key: 'development', + label: '开发', + icon: , }, ]; + tabs?.forEach((tab) => { items.push({ - label: ( - - {iconMap[tab.key]} - {titleMap[tab.key]} - - ), key: tab.key, + label: titleMap[tab.key], + icon: iconMap[tab.key], }); }); @@ -48,7 +41,7 @@ const ContentTabs: FC = ({ tabs, tabKey, onChange }) => { onChange(tabs.find((tab) => tab.key === key))} + onChange={(key) => onChange(tabs?.find((tab) => tab.key === key))} style={{ margin: '32px 0 -16px' }} /> ); diff --git a/components/_util/PurePanel.tsx b/components/_util/PurePanel.tsx index 004e26d220..beb473177e 100644 --- a/components/_util/PurePanel.tsx +++ b/components/_util/PurePanel.tsx @@ -4,7 +4,7 @@ import useMergedState from 'rc-util/lib/hooks/useMergedState'; import ConfigProvider, { ConfigContext } from '../config-provider'; import type { AnyObject } from './type'; -export function withPureRenderTheme(Component: React.FC) { +export function withPureRenderTheme(Component: React.FC) { return (props: T) => ( @@ -81,7 +81,7 @@ const genPurePanel = ( }; if (postProps) { - mergedProps = postProps(mergedProps as ComponentProps); + mergedProps = postProps(mergedProps); } const mergedStyle: React.CSSProperties = { paddingBottom: popupHeight, @@ -95,7 +95,7 @@ const genPurePanel = ( ); }; - return withPureRenderTheme(PurePanel); + return withPureRenderTheme(PurePanel); }; export default genPurePanel; diff --git a/components/date-picker/design/behavior-pattern.tsx b/components/date-picker/design/behavior-pattern.tsx index 2e0958bfd2..07ccabdaa3 100644 --- a/components/date-picker/design/behavior-pattern.tsx +++ b/components/date-picker/design/behavior-pattern.tsx @@ -1,7 +1,8 @@ import React from 'react'; + import BehaviorMap from '../../../.dumi/theme/common/BehaviorMap'; -const BehaviorPattern = () => ( +const BehaviorPattern: React.FC = () => ( ({ } `, minus: css` - color: #52C41A80; + color: #52c41a80; .ant-picker-cell-in-view & { - color: #52C41A; + color: #52c41a; } .ant-picker-cell-selected & { color: #fff; diff --git a/components/date-picker/design/demo/preset-range.tsx b/components/date-picker/design/demo/preset-range.tsx index fad946e0d5..4e37687938 100644 --- a/components/date-picker/design/demo/preset-range.tsx +++ b/components/date-picker/design/demo/preset-range.tsx @@ -1,18 +1,17 @@ import React from 'react'; -import dayjs from 'dayjs'; import { DatePicker } from 'antd'; +import type { TimeRangePickerProps } from 'antd'; +import dayjs from 'dayjs'; const { _InternalRangePanelDoNotUseOrYouWillBeFired: PureRangePicker } = DatePicker; -const App: React.FC = () => ( - -); +const rangePresets: TimeRangePickerProps['presets'] = [ + { label: 'Last 7 Days', value: [dayjs().add(-7, 'd'), dayjs()] }, + { label: 'Last 14 Days', value: [dayjs().add(-14, 'd'), dayjs()] }, + { label: 'Last 30 Days', value: [dayjs().add(-30, 'd'), dayjs()] }, + { label: 'Last 90 Days', value: [dayjs().add(-90, 'd'), dayjs()] }, +]; + +const App: React.FC = () => ; export default App; diff --git a/components/tabs/__tests__/__snapshots__/demo.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo.test.ts.snap index 318ed33a8a..b895fdead2 100644 --- a/components/tabs/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/tabs/__tests__/__snapshots__/demo.test.ts.snap @@ -2733,9 +2733,7 @@ exports[`renders components/tabs/demo/icon.tsx correctly 1`] = ` - Tab - - 1 + Tab 1 @@ -2773,9 +2771,7 @@ exports[`renders components/tabs/demo/icon.tsx correctly 1`] = ` - Tab - - 2 + Tab 2 diff --git a/components/tabs/demo/icon.tsx b/components/tabs/demo/icon.tsx index 70bd0a1990..104229a437 100644 --- a/components/tabs/demo/icon.tsx +++ b/components/tabs/demo/icon.tsx @@ -8,8 +8,8 @@ const App: React.FC = () => ( items={[AppleOutlined, AndroidOutlined].map((Icon, i) => { const id = String(i + 1); return { - label: Tab {id}, key: id, + label: `Tab ${id}`, children: `Tab ${id}`, icon: , }; diff --git a/components/tabs/demo/nest.tsx b/components/tabs/demo/nest.tsx index 8764d147c4..0b727d7729 100644 --- a/components/tabs/demo/nest.tsx +++ b/components/tabs/demo/nest.tsx @@ -60,7 +60,6 @@ const App: React.FC = () => { - { style={{ height: 300 }} items={new Array(20).fill(null).map((_, index) => { const key = String(index); - return { label: `Tab ${key}`, key,