test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 03:59:01 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

site: update demo Tabs usage (#46351)

Browse Source
This commit is contained in:
lijianan 2023-12-09 19:32:10 +08:00 committed by GitHub
parent 985b7ac889
commit 02396c986c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 135 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
.dumi/theme/builtins/InstallDependencies/index.tsx
View File

@ -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<InstallProps> = (props) => {
const { npm, yarn, pnpm } = props;
const { styles } = useStyle();
const items = React.useMemo<TabsProps['items']>(
() =>
[
{
key: 'npm',
children: npm ? <SourceCode lang="bash">{npm}</SourceCode> : null,
label: (
<div className={styles.packageManager}>
<NpmLogo />
<span>npm</span>
</div>
),
},
{
key: 'yarn',
children: yarn ? <SourceCode lang="bash">{yarn}</SourceCode> : null,
label: (
<div className={styles.packageManager}>
<YarnLogo />
<span>yarn</span>
</div>
),
},
{
key: 'pnpm',
children: pnpm ? <SourceCode lang="bash">{pnpm}</SourceCode> : null,
label: (
<div className={styles.packageManager}>
<PnpmLogo />
<span>pnpm</span>
</div>
),
},
].filter((item) => item.children),
[npm, yarn, pnpm],
);
const items: Tab[] = [
{
key: 'npm',
label: 'npm',
children: npm ? <SourceCode lang="bash">{npm}</SourceCode> : null,
icon: <NpmLogo />,
},
{
key: 'yarn',
label: 'yarn',
children: yarn ? <SourceCode lang="bash">{yarn}</SourceCode> : null,
icon: <YarnLogo />,
},
{
key: 'pnpm',
label: 'pnpm',
children: pnpm ? <SourceCode lang="bash">{pnpm}</SourceCode> : null,
icon: <PnpmLogo />,
},
].filter((item) => item.children);
return (
<ConfigProvider
theme={{
components: {
Tabs: {
horizontalMargin: '0',
},
},
}}
>
<ConfigProvider theme={{ components: { Tabs: { horizontalMargin: '0' } } }}>
<Tabs className="markdown" size="small" defaultActiveKey="npm" items={items} />
</ConfigProvider>
);

39
.dumi/theme/builtins/InstallDependencies/npm.tsx
View File

@ -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<IconProps> = (props) => {
const { className, style } = props;
const { styles } = useStyle();
return (
<svg
className={className}
style={style}
fill="#E53E3E"
focusable="false"
height="1em"
stroke="#E53E3E"
strokeWidth="0"
viewBox="0 0 16 16"
width="1em"
>
<path d="M0 0v16h16v-16h-16zM13 13h-2v-8h-3v8h-5v-10h10v10z" />
</svg>
<span className={classNames(styles.iconWrap, className)} style={style}>
<svg
fill="#E53E3E"
focusable="false"
height="1em"
stroke="#E53E3E"
strokeWidth="0"
viewBox="0 0 16 16"
width="1em"
>
<path d="M0 0v16h16v-16h-16zM13 13h-2v-8h-3v8h-5v-10h10v10z" />
</svg>
</span>
);
};

43
.dumi/theme/builtins/InstallDependencies/pnpm.tsx
View File

@ -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<IconProps> = (props) => {
const { className, style } = props;
const { styles } = useStyle();
return (
<svg
className={className}
style={style}
aria-hidden="true"
fill="#F69220"
focusable="false"
height="1em"
role="img"
stroke="#F69220"
strokeWidth="0"
viewBox="0 0 24 24"
width="1em"
>
<path d="M0 0v7.5h7.5V0zm8.25 0v7.5h7.498V0zm8.25 0v7.5H24V0zM8.25 8.25v7.5h7.498v-7.5zm8.25 0v7.5H24v-7.5zM0 16.5V24h7.5v-7.5zm8.25 0V24h7.498v-7.5zm8.25 0V24H24v-7.5z" />
</svg>
<span className={classNames(styles.iconWrap, className)} style={style}>
<svg
aria-hidden="true"
fill="#F69220"
focusable="false"
height="1em"
role="img"
stroke="#F69220"
strokeWidth="0"
viewBox="0 0 24 24"
width="1em"
>
<path d="M0 0v7.5h7.5V0zm8.25 0v7.5h7.498V0zm8.25 0v7.5H24V0zM8.25 8.25v7.5h7.498v-7.5zm8.25 0v7.5H24v-7.5zM0 16.5V24h7.5v-7.5zm8.25 0V24h7.498v-7.5zm8.25 0V24H24v-7.5z" />
</svg>
</span>
);
};

41
.dumi/theme/builtins/InstallDependencies/yarn.tsx
View File

@ -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<IconProps> = (props) => {
const { className, style } = props;
const { styles } = useStyle();
return (
<svg
className={className}
style={style}
aria-hidden="true"
fill="#2C8EBB"
focusable="false"
height="1em"
stroke="#2C8EBB"
strokeWidth="0"
viewBox="0 0 496 512"
width="1em"
>
<path d="M393.9 345.2c-39 9.3-48.4 32.1-104 47.4 0 0-2.7 4-10.4 5.8-13.4 3.3-63.9 6-68.5 6.1-12.4.1-19.9-3.2-22-8.2-6.4-15.3 9.2-22 9.2-22-8.1-5-9-9.9-9.8-8.1-2.4 5.8-3.6 20.1-10.1 26.5-8.8 8.9-25.5 5.9-35.3.8-10.8-5.7.8-19.2.8-19.2s-5.8 3.4-10.5-3.6c-6-9.3-17.1-37.3 11.5-62-1.3-10.1-4.6-53.7 40.6-85.6 0 0-20.6-22.8-12.9-43.3 5-13.4 7-13.3 8.6-13.9 5.7-2.2 11.3-4.6 15.4-9.1 20.6-22.2 46.8-18 46.8-18s12.4-37.8 23.9-30.4c3.5 2.3 16.3 30.6 16.3 30.6s13.6-7.9 15.1-5c8.2 16 9.2 46.5 5.6 65.1-6.1 30.6-21.4 47.1-27.6 57.5-1.4 2.4 16.5 10 27.8 41.3 10.4 28.6 1.1 52.7 2.8 55.3.8 1.4 13.7.8 36.4-13.2 12.8-7.9 28.1-16.9 45.4-17 16.7-.5 17.6 19.2 4.9 22.2zM496 256c0 136.9-111.1 248-248 248S0 392.9 0 256 111.1 8 248 8s248 111.1 248 248zm-79.3 75.2c-1.7-13.6-13.2-23-28-22.8-22 .3-40.5 11.7-52.8 19.2-4.8 3-8.9 5.2-12.4 6.8 3.1-44.5-22.5-73.1-28.7-79.4 7.8-11.3 18.4-27.8 23.4-53.2 4.3-21.7 3-55.5-6.9-74.5-1.6-3.1-7.4-11.2-21-7.4-9.7-20-13-22.1-15.6-23.8-1.1-.7-23.6-16.4-41.4 28-12.2.9-31.3 5.3-47.5 22.8-2 2.2-5.9 3.8-10.1 5.4h.1c-8.4 3-12.3 9.9-16.9 22.3-6.5 17.4.2 34.6 6.8 45.7-17.8 15.9-37 39.8-35.7 82.5-34 36-11.8 73-5.6 79.6-1.6 11.1 3.7 19.4 12 23.8 12.6 6.7 30.3 9.6 43.9 2.8 4.9 5.2 13.8 10.1 30 10.1 6.8 0 58-2.9 72.6-6.5 6.8-1.6 11.5-4.5 14.6-7.1 9.8-3.1 36.8-12.3 62.2-28.7 18-11.7 24.2-14.2 37.6-17.4 12.9-3.2 21-15.1 19.4-28.2z" />
</svg>
<span className={classNames(styles.iconWrap, className)} style={style}>
<svg
aria-hidden="true"
fill="#2C8EBB"
focusable="false"
height="1em"
stroke="#2C8EBB"
strokeWidth="0"
viewBox="0 0 496 512"
width="1em"
>
<path d="M393.9 345.2c-39 9.3-48.4 32.1-104 47.4 0 0-2.7 4-10.4 5.8-13.4 3.3-63.9 6-68.5 6.1-12.4.1-19.9-3.2-22-8.2-6.4-15.3 9.2-22 9.2-22-8.1-5-9-9.9-9.8-8.1-2.4 5.8-3.6 20.1-10.1 26.5-8.8 8.9-25.5 5.9-35.3.8-10.8-5.7.8-19.2.8-19.2s-5.8 3.4-10.5-3.6c-6-9.3-17.1-37.3 11.5-62-1.3-10.1-4.6-53.7 40.6-85.6 0 0-20.6-22.8-12.9-43.3 5-13.4 7-13.3 8.6-13.9 5.7-2.2 11.3-4.6 15.4-9.1 20.6-22.2 46.8-18 46.8-18s12.4-37.8 23.9-30.4c3.5 2.3 16.3 30.6 16.3 30.6s13.6-7.9 15.1-5c8.2 16 9.2 46.5 5.6 65.1-6.1 30.6-21.4 47.1-27.6 57.5-1.4 2.4 16.5 10 27.8 41.3 10.4 28.6 1.1 52.7 2.8 55.3.8 1.4 13.7.8 36.4-13.2 12.8-7.9 28.1-16.9 45.4-17 16.7-.5 17.6 19.2 4.9 22.2zM496 256c0 136.9-111.1 248-248 248S0 392.9 0 256 111.1 8 248 8s248 111.1 248 248zm-79.3 75.2c-1.7-13.6-13.2-23-28-22.8-22 .3-40.5 11.7-52.8 19.2-4.8 3-8.9 5.2-12.4 6.8 3.1-44.5-22.5-73.1-28.7-79.4 7.8-11.3 18.4-27.8 23.4-53.2 4.3-21.7 3-55.5-6.9-74.5-1.6-3.1-7.4-11.2-21-7.4-9.7-20-13-22.1-15.6-23.8-1.1-.7-23.6-16.4-41.4 28-12.2.9-31.3 5.3-47.5 22.8-2 2.2-5.9 3.8-10.1 5.4h.1c-8.4 3-12.3 9.9-16.9 22.3-6.5 17.4.2 34.6 6.8 45.7-17.8 15.9-37 39.8-35.7 82.5-34 36-11.8 73-5.6 79.6-1.6 11.1 3.7 19.4 12 23.8 12.6 6.7 30.3 9.6 43.9 2.8 4.9 5.2 13.8 10.1 30 10.1 6.8 0 58-2.9 72.6-6.5 6.8-1.6 11.5-4.5 14.6-7.1 9.8-3.1 36.8-12.3 62.2-28.7 18-11.7 24.2-14.2 37.6-17.4 12.9-3.2 21-15.1 19.4-28.2z" />
</svg>
</span>
);
};

23
.dumi/theme/slots/ContentTabs/index.tsx
View File

@ -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<string, string> = {
const titleMap: Record<string, ReactNode> = {
design: '设计',
};
@ -23,24 +23,17 @@ const ContentTabs: FC<IContentTabsProps> = ({ tabs, tabKey, onChange }) => {
const items: TabsProps['items'] = [
{
label: (
<span>
<CodeOutlined />
开发
</span>
),
key: 'development',
label: '开发',
icon: <CodeOutlined />,
},
];
tabs?.forEach((tab) => {
items.push({
label: (
<span>
{iconMap[tab.key]}
{titleMap[tab.key]}
</span>
),
key: tab.key,
label: titleMap[tab.key],
icon: iconMap[tab.key],
});
});
@ -48,7 +41,7 @@ const ContentTabs: FC<IContentTabsProps> = ({ tabs, tabKey, onChange }) => {
<Tabs
items={items}
activeKey={tabKey || 'development'}
onChange={(key) => onChange(tabs.find((tab) => tab.key === key))}
onChange={(key) => onChange(tabs?.find((tab) => tab.key === key))}
style={{ margin: '32px 0 -16px' }}
/>
);

6
components/_util/PurePanel.tsx
View File

@ -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<T extends AnyObject = AnyObject>(Component: React.FC) {
export function withPureRenderTheme<T extends AnyObject = AnyObject>(Component: React.FC<T>) {
return (props: T) => (
<ConfigProvider theme={{ token: { motion: false, zIndexPopupBase: 0 } }}>
<Component {...props} />
@ -81,7 +81,7 @@ const genPurePanel = <ComponentProps extends BaseProps = BaseProps>(
};
if (postProps) {
mergedProps = postProps(mergedProps as ComponentProps);
mergedProps = postProps(mergedProps);
}
const mergedStyle: React.CSSProperties = {
paddingBottom: popupHeight,
@ -95,7 +95,7 @@ const genPurePanel = <ComponentProps extends BaseProps = BaseProps>(
);
};
return withPureRenderTheme(PurePanel);
return withPureRenderTheme<AnyObject>(PurePanel);
};
export default genPurePanel;

3
components/date-picker/design/behavior-pattern.tsx
View File

@ -1,7 +1,8 @@
import React from 'react';
import BehaviorMap from '../../../.dumi/theme/common/BehaviorMap';
const BehaviorPattern = () => (
const BehaviorPattern: React.FC = () => (
<BehaviorMap
data={{
id: '200000004',

8
components/date-picker/design/demo/date-extra-info.tsx
View File

@ -1,9 +1,9 @@
import type { FC } from 'react';
import React from 'react';
import type { Dayjs } from 'dayjs';
import { DatePicker } from 'antd';
import { createStyles, css } from 'antd-style';
import classNames from 'classnames';
import { DatePicker } from 'antd';
import type { Dayjs } from 'dayjs';
const { _InternalPanelDoNotUseOrYouWillBeFired: PureDatePicker } = DatePicker;
@ -48,9 +48,9 @@ const useStyle = createStyles(({ token }) => ({
}
`,
minus: css`
color: #52C41A80;
color: #52c41a80;
.ant-picker-cell-in-view & {
color: #52C41A;
color: #52c41a;
}
.ant-picker-cell-selected & {
color: #fff;

21
components/date-picker/design/demo/preset-range.tsx
View File

@ -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 = () => (
<PureRangePicker
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 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 = () => <PureRangePicker presets={rangePresets} />;
export default App;

8
components/tabs/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -2733,9 +2733,7 @@ exports[`renders components/tabs/demo/icon.tsx correctly 1`] = `
</span>
</span>
<span>
Tab
<!-- -->
1
Tab 1
</span>
</div>
</div>
@ -2773,9 +2771,7 @@ exports[`renders components/tabs/demo/icon.tsx correctly 1`] = `
</span>
</span>
<span>
Tab
<!-- -->
2
Tab 2
</span>
</div>
</div>

2
components/tabs/demo/icon.tsx
View File

@ -8,8 +8,8 @@ const App: React.FC = () => (
items={[AppleOutlined, AndroidOutlined].map((Icon, i) => {
const id = String(i + 1);
return {
label: <span>Tab {id}</span>,
key: id,
label: `Tab ${id}`,
children: `Tab ${id}`,
icon: <Icon />,
};

2
components/tabs/demo/nest.tsx
View File

@ -60,7 +60,6 @@ const App: React.FC = () => {
<Option value="card">Child - card</Option>
<Option value="editable-card">Parent - card edit</Option>
</Select>
<Tabs
defaultActiveKey="1"
tabPosition={parentPos}
@ -77,7 +76,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,