Skip to content

Commit 20561d6

Browse files
zombieJzombieJ
authored
docs: Fix component doc alignment & support import usage (ant-design#48004)
* docs: init ref * docs all support * docs: fix link show
1 parent be1d14d commit 20561d6

File tree

140 files changed

+359
-307
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

140 files changed

+359
-307
lines changed

‎.dumi/theme/builtins/ComponentMeta/index.tsx

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
/* eslint-disable lodash/import-scope */
2+
import React from 'react';
3+
import { GithubOutlined } from '@ant-design/icons';
4+
import { Descriptions, theme, Tooltip, Typography, type GetProp } from 'antd';
5+
import { createStyles, css } from 'antd-style';
6+
import { kebabCase } from 'lodash';
7+
import CopyToClipboard from 'react-copy-to-clipboard';
8+
9+
import useLocale from '../../../hooks/useLocale';
10+
11+
const locales = {
12+
cn: {
13+
import: '使用',
14+
copy: '复制',
15+
copied: '已复制',
16+
source: '源码',
17+
},
18+
en: {
19+
import: 'Import',
20+
copy: 'Copy',
21+
copied: 'Copied',
22+
source: 'Source',
23+
},
24+
};
25+
26+
const useStyle = createStyles(({ token }) => ({
27+
code: css`
28+
cursor: pointer;
29+
position: relative;
30+
display: inline-block;
31+
border-radius: 3px;
32+
padding-inline: ${token.paddingXS}px;
33+
transition: all ${token.motionDurationSlow} !important;
34+
35+
&:hover {
36+
background: ${token.controlItemBgHover};
37+
}
38+
`,
39+
}));
40+
41+
export interface ComponentMetaProps {
42+
component: string;
43+
source: string | true;
44+
}
45+
46+
const ComponentMeta = (props: ComponentMetaProps) => {
47+
const { component, source } = props;
48+
const { token } = theme.useToken();
49+
50+
const [locale] = useLocale(locales);
51+
52+
const { styles } = useStyle();
53+
54+
// ========================= Copy =========================
55+
const [copied, setCopied] = React.useState(false);
56+
57+
const onCopy = () => {
58+
setCopied(true);
59+
};
60+
61+
const onOpenChange = (open: boolean) => {
62+
if (open) {
63+
setCopied(false);
64+
}
65+
};
66+
67+
// ======================== Source ========================
68+
const [filledSource, abbrSource] = React.useMemo(() => {
69+
if (String(source) === 'true') {
70+
const kebabComponent = kebabCase(component);
71+
return [
72+
`https://github.com/ant-design/ant-design/blob/master/components/${kebabComponent}`,
73+
`components/${kebabComponent}`,
74+
];
75+
}
76+
77+
if (typeof source !== 'string') {
78+
return [null, null];
79+
}
80+
81+
return [source, source];
82+
}, [component, source]);
83+
84+
// ======================== Render ========================
85+
const importList = [
86+
<span key="import" style={{ color: token.magenta8 }}>
87+
import
88+
</span>,
89+
<span key="component" style={{ color: token.colorText }}>{` { ${component} } `}</span>,
90+
<span key="from" style={{ color: token.magenta8 }}>
91+
from
92+
</span>,
93+
<span key="antd" style={{ color: token.green8 }}>
94+
{`'antd'`}
95+
</span>,
96+
<span key="semicolon" style={{ color: token.colorText }}>
97+
;
98+
</span>,
99+
];
100+
101+
return (
102+
<Descriptions
103+
size="small"
104+
colon={false}
105+
column={1}
106+
style={{ marginTop: token.margin }}
107+
labelStyle={{
108+
paddingInlineEnd: token.padding,
109+
}}
110+
items={
111+
[
112+
{
113+
label: locale.import,
114+
children: (
115+
<Tooltip
116+
placement="right"
117+
title={copied ? locale.copied : locale.copy}
118+
onOpenChange={onOpenChange}
119+
>
120+
<span>
121+
<CopyToClipboard text={`import { ${component} } from 'antd';`} onCopy={onCopy}>
122+
<Typography.Text className={styles.code} onClick={onCopy}>
123+
{importList.map((txt, index) => (index === 0 ? txt : [' ', txt]))}
124+
</Typography.Text>
125+
</CopyToClipboard>
126+
</span>
127+
</Tooltip>
128+
),
129+
},
130+
filledSource && {
131+
label: locale.source,
132+
children: (
133+
<Typography.Link className={styles.code} href={filledSource} target="_blank">
134+
<GithubOutlined /> {abbrSource}
135+
</Typography.Link>
136+
),
137+
},
138+
].filter((v) => v) as GetProp<typeof Descriptions, 'items'>
139+
}
140+
/>
141+
);
142+
};
143+
144+
export default ComponentMeta;

‎.dumi/theme/slots/Content/index.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { FormattedMessage, useRouteMeta } from 'dumi';
66

77
import useLayoutState from '../../../hooks/useLayoutState';
88
import useLocation from '../../../hooks/useLocation';
9+
import ComponentMeta from '../../builtins/ComponentMeta';
910
import type { DemoContextProps } from '../DemoContext';
1011
import DemoContext from '../DemoContext';
1112
import SiteContext from '../SiteContext';
@@ -92,6 +93,13 @@ const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
9293
<DocMeta />
9394
</InViewSuspense>
9495
{!meta.frontmatter.__autoDescription && meta.frontmatter.description}
96+
97+
{/* Import Info */}
98+
{meta.frontmatter.category === 'Components' &&
99+
String(meta.frontmatter.showImport) !== 'false' && (
100+
<ComponentMeta component={meta.frontmatter.title} source />
101+
)}
102+
95103
<div style={{ minHeight: 'calc(100vh - 64px)' }}>{children}</div>
96104
<InViewSuspense>
97105
<ColumnCard

‎components/_util/index.en-US.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
---
22
category: Components
33
title: Util
4+
description: Utilities are used to assist development and provide some common utility methods.
5+
showImport: false
46
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*rRDlT7ST8DUAAAAAAAAAAAAADrJ8AQ/original
57
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*rRDlT7ST8DUAAAAAAAAAAAAADrJ8AQ/original
68
demo:
@@ -10,8 +12,6 @@ group:
1012
order: 99
1113
---
1214

13-
Utilities are used to assist development and provide some common utility methods.
14-
1515
## GetRef
1616

1717
Get the `ref` property definition of the component, which is very useful for components that are not directly exposed or child components.

‎components/_util/index.zh-CN.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
category: Components
33
title: Util
44
subtitle: 工具类
5+
description: 辅助开发，提供一些常用的工具方法。
6+
showImport: false
57
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*rRDlT7ST8DUAAAAAAAAAAAAADrJ8AQ/original
68
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*rRDlT7ST8DUAAAAAAAAAAAAADrJ8AQ/original
79
demo:
@@ -11,8 +13,6 @@ group:
1113
order: 99
1214
---
1315

14-
工具类用于辅助开发，提供一些常用的工具方法。
15-
1616
## GetRef
1717

1818
获取组件的 `ref` 属性定义，这对于未直接暴露或者子组件的 `ref` 属性定义非常有用。

‎components/affix/index.en-US.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
category: Components
33
title: Affix
4+
description: Stick an element to the viewport.
45
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YSm4RI3iOJ8AAAAAAAAAAAAADrJ8AQ/original
56
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*03dxS64LxeQAAAAAAAAAAAAADrJ8AQ/original
67
demo:
@@ -10,8 +11,6 @@ group:
1011
order: 7
1112
---
1213

13-
Wrap Affix around another component to make it stick the viewport.
14-
1514
## When To Use
1615

1716
On longer web pages, it's helpful to stick component into the viewport. This is common for menus and actions.

‎components/affix/index.zh-CN.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
category: Components
33
title: Affix
44
subtitle: 固钉
5+
description: 将页面元素钉在可视范围。
56
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YSm4RI3iOJ8AAAAAAAAAAAAADrJ8AQ/original
67
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*03dxS64LxeQAAAAAAAAAAAAADrJ8AQ/original
78
demo:
@@ -11,8 +12,6 @@ group:
1112
order: 7
1213
---
1314

14-
将页面元素钉在可视范围。
15-
1615
## 何时使用
1716

1817
当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。

‎components/alert/index.en-US.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
category: Components
33
title: Alert
4+
description: Display warning messages that require attention.
45
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*QsvtS41m45UAAAAAAAAAAAAADrJ8AQ/original
56
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*gOTISoMFZV0AAAAAAAAAAAAADrJ8AQ/original
67
demo:
@@ -10,8 +11,6 @@ group:
1011
order: 6
1112
---
1213

13-
Alert component for feedback.
14-
1514
## When To Use
1615

1716
- When you need to show alert messages to users.

‎components/alert/index.zh-CN.md

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
---
22
category: Components
3-
subtitle: 警告提示
43
title: Alert
4+
subtitle: 警告提示
5+
description: 警告提示，展现需要关注的信息。
56
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*QsvtS41m45UAAAAAAAAAAAAADrJ8AQ/original
67
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*gOTISoMFZV0AAAAAAAAAAAAADrJ8AQ/original
78
demo:
@@ -11,8 +12,6 @@ group:
1112
order: 6
1213
---
1314

14-
警告提示，展现需要关注的信息。
15-
1615
## 何时使用
1716

1817
- 当某个页面需要向用户显示警告的信息时。

‎components/anchor/index.en-US.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
category: Components
33
title: Anchor
4+
description: Hyperlinks to scroll on one page.
45
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ufP1TLS5VvIAAAAAAAAAAAAADrJ8AQ/original
56
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*_9_eTrgvHNQAAAAAAAAAAAAADrJ8AQ/original
67
demo:
@@ -9,8 +10,6 @@ group:
910
order: 3
1011
---
1112

12-
Hyperlinks to scroll on one page.
13-
1413
## When To Use
1514

1615
For displaying anchor hyperlinks on page and jumping between them.

‎components/anchor/index.zh-CN.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
category: Components
33
title: Anchor
44
subtitle: 锚点
5+
description: 用于跳转到页面指定位置。
56
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ufP1TLS5VvIAAAAAAAAAAAAADrJ8AQ/original
67
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*_9_eTrgvHNQAAAAAAAAAAAAADrJ8AQ/original
78
demo:
@@ -10,8 +11,6 @@ group:
1011
order: 3
1112
---
1213

13-
用于跳转到页面指定位置。
14-
1514
## 何时使用
1615

1716
需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。

0 commit comments

Comments
 (0)