mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-05 23:46:28 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

chore: merge master into feature

Browse Source
This commit is contained in:
栗嘉男 2023-09-01 00:02:50 +08:00
commit b12d69cf42
76 changed files with 307 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
.dumi/theme/builtins/ComponentOverview/index.tsx
View File

@ -1,57 +1,61 @@
import React, { memo, useContext, useMemo, useRef, useState } from 'react';
import type { CSSProperties } from 'react';
import { Link, useIntl, useSidebarData, useLocation } from 'dumi';
import { createStyles, useTheme } from 'antd-style';
import debounce from 'lodash/debounce';
import { SearchOutlined } from '@ant-design/icons';
import { Card, Col, Divider, Input, Row, Space, Tag, Typography, Affix } from 'antd';
import { Affix, Card, Col, Divider, Input, Row, Space, Tag, Typography } from 'antd';
import { createStyles, useTheme } from 'antd-style';
import { Link, useIntl, useLocation, useSidebarData } from 'dumi';
import debounce from 'lodash/debounce';
import SiteContext from '../../slots/SiteContext';
import type { Component } from './ProComponentsList';
import proComponentsList from './ProComponentsList';
import SiteContext from '../../slots/SiteContext';
const useStyle = createStyles(({ token, css }) => ({
componentsOverviewGroupTitle: css`
margin-bottom: 24px !important;
`,
margin-bottom: 24px !important;
`,
componentsOverviewTitle: css`
overflow: hidden;
color: ${token.colorTextHeading};
text-overflow: ellipsis;
`,
overflow: hidden;
color: ${token.colorTextHeading};
text-overflow: ellipsis;
`,
componentsOverviewImg: css`
display: flex;
align-items: center;
justify-content: center;
height: 152px;
`,
display: flex;
align-items: center;
justify-content: center;
height: 152px;
`,
componentsOverviewCard: css`
cursor: pointer;
transition: all 0.5s;
&:hover {
box-shadow: 0 6px 16px -8px #00000014, 0 9px 28px #0000000d, 0 12px 48px 16px #00000008;
}
`,
cursor: pointer;
transition: all 0.5s;
&:hover {
box-shadow:
0 6px 16px -8px #00000014,
0 9px 28px #0000000d,
0 12px 48px 16px #00000008;
}
`,
componentsOverviewAffix: css`
display: flex;
transition: all 0.3s;
justify-content: space-between;
`,
display: flex;
transition: all 0.3s;
justify-content: space-between;
`,
componentsOverviewSearch: css`
padding: 0;
.anticon-search {
color: ${token.colorTextDisabled};
}
`,
padding: 0;
.anticon-search {
color: ${token.colorTextDisabled};
}
`,
componentsOverviewContent: css`
&:empty:after {
display: block;
padding: 16px 0 40px;
color: ${token.colorTextDisabled};
text-align: center;
border-bottom: 1px solid ${token.colorSplit};
content: 'Not Found';
}
`,
&:empty:after {
display: block;
padding: 16px 0 40px;
color: ${token.colorTextDisabled};
text-align: center;
border-bottom: 1px solid ${token.colorSplit};
content: 'Not Found';
}
`,
}));
const onClickCard = (pathname: string) => {
@ -107,7 +111,7 @@ const Overview: React.FC = () => {
const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
if (event.keyCode === 13 && search.trim().length) {
sectionRef.current?.querySelector<HTMLElement>('.components-overview-card')?.click();
sectionRef.current?.querySelector<HTMLElement>(`.${styles.componentsOverviewCard}`)?.click();
}
};

88
.dumi/theme/builtins/ComponentTokenTable/index.tsx
View File

@ -1,10 +1,10 @@
import { RightOutlined } from '@ant-design/icons';
import { RightOutlined, LinkOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { createStyles, css, useTheme } from 'antd-style';
import { getDesignToken } from 'antd-token-previewer';
import React, { useMemo, useState } from 'react';
import tokenMeta from 'antd/es/version/token-meta.json';
import tokenData from 'antd/es/version/token.json';
import { ConfigProvider, Table } from 'antd';
import { ConfigProvider, Table, Popover, Typography } from 'antd';
import useLocale from '../../../hooks/useLocale';
import { useColumns } from '../TokenTable';
@ -18,6 +18,9 @@ const locales = {
value: '默认值',
componentToken: '组件 Token',
globalToken: '全局 Token',
help: '如何定制？',
customizeTokenLink: '/docs/react/customize-theme-cn#修改主题变量',
customizeComponentTokenLink: '/docs/react/customize-theme-cn#修改组件变量',
},
en: {
token: 'Token Name',
@ -26,6 +29,9 @@ const locales = {
value: 'Default Value',
componentToken: 'Component Token',
globalToken: 'Global Token',
help: 'How to use?',
customizeTokenLink: '/docs/react/customize-theme#customize-design-token',
customizeComponentTokenLink: 'docs/react/customize-theme#customize-component-token',
},
};
@ -45,16 +51,34 @@ const useStyle = createStyles(() => ({
transition: all 0.3s;
}
`,
help: css`
margin-left: 8px;
font-size: 12px;
font-weight: normal;
color: #999;
a {
color: #999;
}
`,
}));
interface SubTokenTableProps {
defaultOpen?: boolean;
title: string;
helpText: React.ReactNode;
helpLink: string;
tokens: string[];
component?: string;
}
const SubTokenTable: React.FC<SubTokenTableProps> = ({ defaultOpen, tokens, title, component }) => {
const SubTokenTable: React.FC<SubTokenTableProps> = ({
defaultOpen,
tokens,
title,
helpText,
helpLink,
component,
}) => {
const [, lang] = useLocale(locales);
const token = useTheme();
const columns = useColumns();
@ -104,11 +128,53 @@ const SubTokenTable: React.FC<SubTokenTableProps> = ({ defaultOpen, tokens, titl
})
.filter(Boolean);
const code = component
? `<ConfigProvider
theme={{
components: {
${component}: {
/* here is your component tokens */
},
},
}}
>
...
</ConfigProvider>`
: `<ConfigProvider
theme={{
token: {
/* here is your global tokens */
},
}}
>
...
</ConfigProvider>`;
return (
<div>
<>
<div className={styles.tableTitle} onClick={() => setOpen(!open)}>
<RightOutlined className={styles.arrowIcon} rotate={open ? 90 : 0} />
<h3>{title}</h3>
<h3>
{title}
<Popover
title={null}
popupStyle={{ width: 400 }}
content={
<Typography>
<pre style={{ fontSize: 12 }}>{code}</pre>
<a href={helpLink} target="_blank" rel="noreferrer">
<LinkOutlined style={{ marginRight: 4 }} />
{helpText}
</a>
</Typography>
}
>
<span className={styles.help}>
<QuestionCircleOutlined style={{ marginRight: 3 }} />
{helpText}
</span>
</Popover>
</h3>
</div>
{open && (
<ConfigProvider theme={{ token: { borderRadius: 0 } }}>
@ -123,7 +189,7 @@ const SubTokenTable: React.FC<SubTokenTableProps> = ({ defaultOpen, tokens, titl
/>
</ConfigProvider>
)}
</div>
</>
);
};
@ -152,11 +218,19 @@ const ComponentTokenTable: React.FC<ComponentTokenTableProps> = ({ component })
{tokenMeta.components[component] && (
<SubTokenTable
title={locale.componentToken}
helpText={locale.help}
helpLink={locale.customizeTokenLink}
tokens={tokenMeta.components[component].map((item) => item.token)}
component={component}
defaultOpen
/>
)}
<SubTokenTable title={locale.globalToken} tokens={mergedGlobalTokens} />
<SubTokenTable
title={locale.globalToken}
helpText={locale.help}
helpLink={locale.customizeComponentTokenLink}
tokens={mergedGlobalTokens}
/>
</>
);
};

1
rome.json → biome.json
View File

@ -1,4 +1,5 @@
{
"$schema": "https://biomejs.dev/schemas/1.0.0/schema.json",
"formatter": {
"enabled": true,
"ignore": ["./dist/*", "./es/**/*", "./lib/**/*", "_site/**/*"],

2
components/anchor/index.zh-CN.md
View File

@ -76,6 +76,6 @@ group:
| target | 该属性指定在何处显示链接的资源 | string | - | |
| title | 文字内容 | ReactNode | - | |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Anchor"></ComponentTokenTable>

7
components/app/index.zh-CN.md
View File

@ -30,8 +30,8 @@ tag: New
App 组件通过 `Context` 提供上下文方法调用，因而 useApp 需要作为子组件才能使用，我们推荐在应用中顶层包裹 App。
```tsx
import { App } from 'antd';
import React from 'react';
import { App } from 'antd';
const MyPage: React.FC = () => {
const { message, notification, modal } = App.useApp();
@ -103,8 +103,9 @@ export { message, notification, modal };
```tsx
// sub page
import { Button, Space } from 'antd';
import React from 'react';
import { Button, Space } from 'antd';
import { message } from './store';
export default () => {
@ -133,6 +134,6 @@ export default () => {
| message | App 内 Message 的全局配置 | [MessageConfig](/components/message-cn/#messageconfig) | - | 5.3.0 |
| notification | App 内 Notification 的全局配置 | [NotificationConfig](/components/notification-cn/#notificationconfig) | - | 5.3.0 |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="App"></ComponentTokenTable>

2
components/auto-complete/index.zh-CN.md
View File

@ -79,7 +79,7 @@ demo:
| blur() | 移除焦点 | |
| focus() | 获取焦点 | |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Select"></ComponentTokenTable>

2
components/avatar/index.zh-CN.md
View File

@ -62,6 +62,6 @@ group:
| size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.8.0 |
| shape | 设置头像的形状 | `circle` \| `square` | `circle` | 5.8.0 |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Avatar"></ComponentTokenTable>

2
components/badge/index.zh-CN.md
View File

@ -71,6 +71,6 @@ group: 数据展示
| root | 设置根元素 | 5.7.0 |
| indicator | 设置徽标元素 | 5.7.0 |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Badge"></ComponentTokenTable>

2
components/breadcrumb/index.zh-CN.md
View File

@ -131,6 +131,6 @@ function itemRender(item, params, items, paths) {
return <Breadcrumb itemRender={itemRender} items={items} />;
```
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Breadcrumb"></ComponentTokenTable>

2
components/button/index.zh-CN.md
View File

@ -86,7 +86,7 @@ group:
| ---- | ------------ | ----- |
| icon | 设置图标元素 | 5.5.0 |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Button"></ComponentTokenTable>

2
components/calendar/index.zh-CN.md
View File

@ -66,7 +66,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA
| onPanelChange | 日期面板变化回调 | function(date: Dayjs, mode: string) | - | |
| onSelect | 选择日期回调，包含来源信息 | function(date: Dayjs, info: { source: 'year' \| 'month' \| 'date' \| 'customize' }) | - | `info`: 5.6.0 |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Calendar"></ComponentTokenTable>

2
components/card/index.zh-CN.md
View File

@ -76,6 +76,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a-8zR6rrupgAAA
| style | 定义容器类名的样式 | CSSProperties | - | |
| title | 标题内容 | ReactNode | - | |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Card"></ComponentTokenTable>

2
components/carousel/index.zh-CN.md
View File

@ -51,7 +51,7 @@ demo:
更多 API 可参考：<https://react-slick.neostack.com/docs/api>
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Carousel"></ComponentTokenTable>

4
components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -665,9 +665,7 @@ exports[`renders components/cascader/demo/custom-render.tsx extend context corre
exports[`renders components/cascader/demo/custom-trigger.tsx extend context correctly 1`] = `
<span>
Unselect
<a
href="#"
>
<a>
Change city
</a>
<div

4
components/cascader/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -296,9 +296,7 @@ exports[`renders components/cascader/demo/custom-trigger.tsx correctly 1`] = `
<span>
Unselect
<!-- -->
<a
href="#"
>
<a>
Change city
</a>
</span>

2
components/cascader/demo/custom-trigger.tsx
View File

@ -42,7 +42,7 @@ const App: React.FC = () => {
{text}
&nbsp;
<Cascader options={options} onChange={onChange}>
<a href="#">Change city</a>
<a>Change city</a>
</Cascader>
</span>
);

2
components/cascader/index.zh-CN.md
View File

@ -124,6 +124,6 @@ interface Option {
> 注意，如果需要获得中国省市区数据，可以参考 [china-division](https://gist.github.com/afc163/7582f35654fd03d5be7009444345ea17)。
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Cascader"></ComponentTokenTable>

2
components/checkbox/index.zh-CN.md
View File

@ -73,6 +73,6 @@ interface Option {
| blur() | 移除焦点 | |
| focus() | 获取焦点 | |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Checkbox"></ComponentTokenTable>

2
components/collapse/index.zh-CN.md
View File

@ -106,6 +106,6 @@ const items: CollapseProps['items'] = [
| key | 对应 activeKey | string \| number | - | |
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能置为 icon） | boolean | true | |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Collapse"></ComponentTokenTable>

6
components/date-picker/index.zh-CN.md
View File

@ -59,6 +59,7 @@ demo:
```jsx
import locale from 'antd/es/date-picker/locale/zh_CN';
import 'dayjs/locale/zh-cn';
<DatePicker locale={locale} />;
@ -68,6 +69,7 @@ import 'dayjs/locale/zh-cn';
// 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale
import locale from 'antd/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
<ConfigProvider locale={locale}>
@ -217,7 +219,7 @@ type GenericFn = (value: Dayjs) => string;
export type FormatType = Generic | GenericFn | Array<Generic | GenericFn>;
```
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="DatePicker"></ComponentTokenTable>
@ -245,7 +247,9 @@ export type FormatType = Generic | GenericFn | Array<Generic | GenericFn>;
```js
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import updateLocale from 'dayjs/plugin/updateLocale';
dayjs.extend(updateLocale);

2
components/descriptions/index.zh-CN.md
View File

@ -103,6 +103,6 @@ const items: DescriptionsProps['items'] = [
> span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Descriptions"></ComponentTokenTable>

2
components/divider/index.zh-CN.md
View File

@ -43,6 +43,6 @@ group:
| style | 分割线样式对象 | CSSProperties | - | |
| type | 水平还是垂直类型 | `horizontal` \| `vertical` | `horizontal` | |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Divider"></ComponentTokenTable>

2
components/drawer/index.zh-CN.md
View File

@ -72,6 +72,6 @@ demo:
| zIndex | 设置 Drawer 的 `z-index` | number | 1000 | |
| onClose | 点击遮罩层或左上角叉或取消按钮的回调 | function(e) | - | |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Drawer"></ComponentTokenTable>

2
components/dropdown/index.zh-CN.md
View File

@ -80,7 +80,7 @@ demo:
请确保 `Dropdown` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Dropdown"></ComponentTokenTable>

2
components/empty/index.zh-CN.md
View File

@ -66,6 +66,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*obM7S5lIxeMAAA
}
</style>
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Empty"></ComponentTokenTable>

2
components/float-button/index.zh-CN.md
View File

@ -71,6 +71,6 @@ tag: New
| visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 | |
| onClick | 点击按钮的回调函数 | () => void | - | |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="FloatButton"></ComponentTokenTable>

1
components/form/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -4563,6 +4563,7 @@ exports[`renders components/form/demo/inline-login.tsx correctly 1`] = `
>
<button
class="ant-btn ant-btn-primary"
disabled=""
type="submit"
>
<span>

5
components/form/demo/inline-login.tsx
View File

@ -4,11 +4,11 @@ import { Button, Form, Input } from 'antd';
const App: React.FC = () => {
const [form] = Form.useForm();
const [, forceUpdate] = useState({});
const [clientReady, setClientReady] = useState<boolean>(false);
// To disable submit button at the beginning.
useEffect(() => {
forceUpdate({});
setClientReady(true);
}, []);
const onFinish = (values: any) => {
@ -39,6 +39,7 @@ const App: React.FC = () => {
type="primary"
htmlType="submit"
disabled={
!clientReady ||
!form.isFieldsTouched(true) ||
!!form.getFieldsError().filter(({ errors }) => errors.length).length
}

4
components/form/index.en-US.md
View File

@ -162,7 +162,9 @@ Used when there are dependencies between fields. If a field has the `dependencie
Form updates only the modified field-related components for performance optimization purposes by incremental update. In most cases, you only need to write code or do validation with the [`dependencies`](#dependencies) property. In some specific cases, such as when a new field option appears with a field value changed, or you just want to keep some area updating by form update, you can modify the update logic of Form.Item via the `shouldUpdate`.
When `shouldUpdate` is `true`, any Form update will cause the Form.Item to be re-rendered. This is very helpful for custom rendering some areas:
When `shouldUpdate` is `true`, any Form update will cause the Form.Item to be re-rendered. This is very helpful for custom rendering some areas. It should be noted that the child component should be returned in a function, otherwise `shouldUpdate` won't behave correctly:
related issue: [#34500](https://github.com/ant-design/ant-design/issues/34500)
```jsx
<Form.Item shouldUpdate>

6
components/form/index.zh-CN.md
View File

@ -163,7 +163,9 @@ const validateMessages = {
Form 通过增量更新方式，只更新被修改的字段相关组件以达到性能优化目的。大部分场景下，你只需要编写代码或者与 [`dependencies`](#dependencies) 属性配合校验即可。而在某些特定场景，例如修改某个字段值后出现新的字段选项、或者纯粹希望表单任意变化都对某一个区域进行渲染。你可以通过 `shouldUpdate` 修改 Form.Item 的更新逻辑。
当 `shouldUpdate` 为 `true` 时，Form 的任意变化都会使该 Form.Item 重新渲染。这对于自定义渲染一些区域十分有帮助：
当 `shouldUpdate` 为 `true` 时，Form 的任意变化都会使该 Form.Item 重新渲染。这对于自定义渲染一些区域十分有帮助，要注意 Form.Item 里包裹的子组件必须由函数返回，否则 `shouldUpdate` 不会起作用：
相关issue：[#34500](https://github.com/ant-design/ant-design/issues/34500)
```jsx
<Form.Item shouldUpdate>
@ -525,7 +527,7 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
| form | 指定 Form 实例 | FormInstance | 当前 context 中的 Form | 5.4.0 |
| preserve | 是否监视没有对应的 `Form.Item` 的字段 | boolean | false | 5.4.0 |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Form"></ComponentTokenTable>

11
components/form/style/index.ts
View File

@ -384,7 +384,7 @@ const genFormItemStyle: GenerateStyle<FormToken> = (token) => {
};
const genHorizontalStyle: GenerateStyle<FormToken> = (token) => {
const { componentCls, formItemCls, rootPrefixCls } = token;
const { componentCls, formItemCls } = token;
return {
[`${componentCls}-horizontal`]: {
@ -399,9 +399,14 @@ const genHorizontalStyle: GenerateStyle<FormToken> = (token) => {
minWidth: 0,
},
// Do not change this to `ant-col-24`! `-24` match all the responsive rules
// https://github.com/ant-design/ant-design/issues/32980
[`${formItemCls}-label.${rootPrefixCls}-col-24 + ${formItemCls}-control`]: {
minWidth: 'unset',
// https://github.com/ant-design/ant-design/issues/34903
// https://github.com/ant-design/ant-design/issues/44538
[`${formItemCls}-label[class$='-24'], ${formItemCls}-label[class*='-24 ']`]: {
[`& + ${formItemCls}-control`]: {
minWidth: 'unset',
},
},
},
};

2
components/grid/index.zh-CN.md
View File

@ -87,6 +87,6 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
响应式栅格的断点扩展自 [BootStrap 4 的规则](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)（不包含链接里 `occasionally` 的部分)。
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Grid"></ComponentTokenTable>

7
components/icon/index.zh-CN.md
View File

@ -103,8 +103,8 @@ getTwoToneColor(); // #eb2f96
```jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { createFromIconfontCN } from '@ant-design/icons';
import ReactDOM from 'react-dom/client';
const MyIcon = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成
@ -152,9 +152,10 @@ module.exports = {
```jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import Icon from '@ant-design/icons';
import MessageSvg from 'path/to/message.svg'; // 你的 '*.svg' 文件路径
import ReactDOM from 'react-dom/client';
// in create-react-app:
// import { ReactComponent as MessageSvg } from 'path/to/message.svg';
@ -171,6 +172,6 @@ ReactDOM.createRoot(mountNode).render(<Icon component={MessageSvg} />);
| style | 计算后的 `svg` 元素样式 | CSSProperties | - | |
| width | `svg` 元素宽度 | string \| number | `1em` | |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Icon"></ComponentTokenTable>

2
components/image/index.zh-CN.md
View File

@ -162,6 +162,6 @@ type TransformAction =
}
```
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Image"></ComponentTokenTable>

2
components/input-number/index.zh-CN.md
View File

@ -71,7 +71,7 @@ demo:
| blur() | 移除焦点 |
| focus() | 获取焦点 |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="InputNumber"></ComponentTokenTable>

2
components/input/index.zh-CN.md
View File

@ -141,7 +141,7 @@ Input 的其他属性和 React 自带的 [input](https://reactjs.org/docs/dom-el
| textarea | `textarea` 元素 | 5.4.0 |
| count | 文字计数元素 | 5.4.0 |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Input"></ComponentTokenTable>

2
components/layout/index.zh-CN.md
View File

@ -132,6 +132,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HdS6Q5vUCDcAAA
}
```
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Layout"></ComponentTokenTable>

2
components/list/index.zh-CN.md
View File

@ -92,6 +92,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tBzwQ7raKX8AAA
| description | 列表元素的描述内容 | ReactNode | - | |
| title | 列表元素的标题 | ReactNode | - | |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="List"></ComponentTokenTable>

2
components/mentions/index.zh-CN.md
View File

@ -92,6 +92,6 @@ return (
| className | css 类名 | string | - |
| style | 选项样式 | React.CSSProperties | - |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Mentions"></ComponentTokenTable>

2
components/menu/index.zh-CN.md
View File

@ -146,6 +146,6 @@ Menu 初始化时会先全部渲染，然后根据宽度裁剪内容。当处于
</div>
```
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Menu"></ComponentTokenTable>

2
components/message/index.zh-CN.md
View File

@ -112,7 +112,7 @@ message.config({
| rtl | 是否开启 RTL 模式 | boolean | false | |
| top | 消息距离顶部的位置 | number | 8 | |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Message"></ComponentTokenTable>

2
components/modal/index.zh-CN.md
View File

@ -190,7 +190,7 @@ const confirmed = await modal.confirm({ ... });
| originNode | 默认节点 | React.ReactNode | - |
| extra | 扩展选项 | { OkBtn: FC; CancelBtn: FC } | - |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Modal"></ComponentTokenTable>

2
components/notification/index.zh-CN.md
View File

@ -110,7 +110,7 @@ notification.config({
| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 | |
| maxCount | 最大显示数, 超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Notification"></ComponentTokenTable>

2
components/pagination/index.zh-CN.md
View File

@ -60,6 +60,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WM86SrBC8TsAAA
| onChange | 页码或 `pageSize` 改变的回调，参数是改变后的页码及每页条数 | function(page, pageSize) | - | |
| onShowSizeChange | pageSize 变化的回调 | function(current, size) | - | |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Pagination"></ComponentTokenTable>

2
components/popconfirm/index.zh-CN.md
View File

@ -52,7 +52,7 @@ demo:
更多属性请参考 [Tooltip](/components/tooltip-cn/#api)。
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Popconfirm"></ComponentTokenTable>

2
components/popover/index.zh-CN.md
View File

@ -45,7 +45,7 @@ demo:
请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Popover"></ComponentTokenTable>

2
components/progress/index.zh-CN.md
View File

@ -77,6 +77,6 @@ demo:
| gapPosition | 仪表盘进度条缺口位置 | `top` \| `bottom` \| `left` \| `right` | `bottom` | - |
| strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | - |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Progress"></ComponentTokenTable>

2
components/qr-code/index.zh-CN.md
View File

@ -53,7 +53,7 @@ tag: New
| status | 二维码状态 | `active \| expired \| loading ` | `active` |
| onRefresh | 点击"点击刷新"的回调 | `() => void` | - |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="QRCode"></ComponentTokenTable>

2
components/radio/index.zh-CN.md
View File

@ -74,6 +74,6 @@ demo:
| blur() | 移除焦点 |
| focus() | 获取焦点 |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Radio"></ComponentTokenTable>

2
components/rate/index.zh-CN.md
View File

@ -58,6 +58,6 @@ demo:
| blur() | 移除焦点 |
| focus() | 获取焦点 |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Rate"></ComponentTokenTable>

2
components/result/index.zh-CN.md
View File

@ -38,6 +38,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-0kxQrbHx2kAAA
| subTitle | subTitle 文字 | ReactNode | - |
| title | title 文字 | ReactNode | - |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Result"></ComponentTokenTable>

2
components/segmented/index.zh-CN.md
View File

@ -50,6 +50,6 @@ demo:
| size | 控件尺寸 | `large` \| `middle` \| `small` | `middle` | |
| value | 当前选中的值 | string \| number | | |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Segmented"></ComponentTokenTable>

2
components/select/index.zh-CN.md
View File

@ -137,7 +137,7 @@ demo:
| key | Key | string | - | |
| label | 组名 | string \| React.Element | - | |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Select"></ComponentTokenTable>

2
components/skeleton/index.zh-CN.md
View File

@ -79,6 +79,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*VcjGQLSrYdcAAA
| active | 是否展示动画效果 | boolean | false |
| size | 设置输入框的大小 | `large` \| `small` \| `default` | - |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Skeleton"></ComponentTokenTable>

2
components/slider/index.zh-CN.md
View File

@ -80,6 +80,6 @@ demo:
| blur() | 移除焦点 | |
| focus() | 获取焦点 | |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Slider"></ComponentTokenTable>

2
components/space/index.zh-CN.md
View File

@ -81,6 +81,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*37T2R6O9oi0AAA
| ---- | --------------------- | ----- |
| item | 设置 `Space` 包裹的子组件 | 5.6.0 |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Space"></ComponentTokenTable>

2
components/spin/index.zh-CN.md
View File

@ -45,6 +45,6 @@ demo:
你可以自定义全局默认 Spin 的元素。
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Spin"></ComponentTokenTable>

2
components/statistic/index.zh-CN.md
View File

@ -58,6 +58,6 @@ demo:
| onFinish | 倒计时完成时触发 | () => void | - | |
| onChange | 倒计时时间变化时触发 | (value: number) => void | - | 4.16.0 |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Statistic"></ComponentTokenTable>

2
components/steps/index.zh-CN.md
View File

@ -84,6 +84,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cFsBQLA0b7UAAA
| subTitle | 子标题 | ReactNode | - | |
| title | 标题 | ReactNode | - | |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Steps"></ComponentTokenTable>

2
components/switch/index.zh-CN.md
View File

@ -51,6 +51,6 @@ demo:
| blur() | 移除焦点 |
| focus() | 获取焦点 |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Switch"></ComponentTokenTable>

4
components/table/index.zh-CN.md
View File

@ -291,9 +291,9 @@ const columns = [
## 在 TypeScript 中使用
```tsx
import React from 'react';
import { Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React from 'react';
interface User {
key: number;
@ -330,7 +330,7 @@ export default Demo;
TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/serene-platform-0jo5t)。
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Table"></ComponentTokenTable>

2
components/tabs/index.zh-CN.md
View File

@ -85,6 +85,6 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
| label | 选项卡头显示文字 | ReactNode | - |
| children | 选项卡头显示内容 | ReactNode | - |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Tabs"></ComponentTokenTable>

2
components/tag/index.zh-CN.md
View File

@ -54,6 +54,6 @@ demo:
| checked | 设置标签的选中状态 | boolean | false |
| onChange | 点击标签时触发的回调 | (checked) => void | - |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Tag"></ComponentTokenTable>

2
components/time-picker/index.zh-CN.md
View File

@ -121,7 +121,7 @@ type RangeDisabledTime = (
};
```
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="DatePicker"></ComponentTokenTable>

2
components/timeline/index.zh-CN.md
View File

@ -70,6 +70,6 @@ return (
| children | 设置内容 | ReactNode | - |
| position | 自定义节点位置 | `left` \| `right` | - |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Timeline"></ComponentTokenTable>

2
components/tooltip/index.zh-CN.md
View File

@ -63,7 +63,7 @@ demo:
| zIndex | 设置 Tooltip 的 `z-index` | number | - | |
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Tooltip"></ComponentTokenTable>

2
components/tour/index.zh-CN.md
View File

@ -66,6 +66,6 @@ tag: New
| prevButtonProps | 上一步按钮的属性 | `{ children: ReactNode; onClick: Function }` | - | |
| scrollIntoViewOptions | 是否支持当前元素滚动到视窗内，也可传入配置指定滚动视窗的相关参数，默认跟随 Tour 的 `scrollIntoViewOptions` 属性 | `boolean \| ScrollIntoViewOptions` | `true` | 5.2.0 |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Tour"></ComponentTokenTable>

2
components/transfer/index.zh-CN.md
View File

@ -97,7 +97,7 @@ Transfer 支持接收 `children` 自定义渲染列表，并返回以下参数
return <Transfer rowKey={(record) => record.uid} />;
```
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Transfer"></ComponentTokenTable>

2
components/tree-select/index.zh-CN.md
View File

@ -111,7 +111,7 @@ demo:
| title | 树节点显示的内容 | ReactNode | `---` | |
| value | 默认根据此属性值进行筛选（其值在整个树范围内唯一） | string | - | |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="TreeSelect"></ComponentTokenTable>

2
components/tree/index.zh-CN.md
View File

@ -127,7 +127,7 @@ demo:
| --- | --- |
| scrollTo({ key: string \| number; align?: 'top' \| 'bottom' \| 'auto'; offset?: number }) | 虚拟滚动下，滚动到指定 key 条目 |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Tree"></ComponentTokenTable>

7
components/typography/Base/Ellipsis.tsx
View File

@ -86,6 +86,8 @@ const Ellipsis: React.FC<EllipsisProps> = ({
const [[startLen, midLen, endLen], setCutLength] = React.useState<
[startLen: number, midLen: number, endLen: number]
>([0, 0, 0]);
// record last done with ellipsis width
const [lastLen, setLastLen] = React.useState(0);
const [walkingState, setWalkingState] = React.useState<WalkingState>(NONE);
const [singleRowHeight, setSingleRowHeight] = React.useState(0);
@ -98,6 +100,10 @@ const Ellipsis: React.FC<EllipsisProps> = ({
const mergedChildren = React.useMemo(() => {
if (!enabledMeasure || walkingState !== DONE_WITH_ELLIPSIS) {
// if has lastLen, use it as temporary width to avoid lots of text to squeeze space.
if (lastLen && walkingState !== DONE_WITHOUT_ELLIPSIS && enabledMeasure)
return children(sliceNodes(nodeList, lastLen), lastLen < totalLen);
return children(nodeList, false);
}
@ -153,6 +159,7 @@ const Ellipsis: React.FC<EllipsisProps> = ({
setCutLength([nextStartLen, nextMidLen, nextEndLen]);
} else {
setWalkingState(DONE_WITH_ELLIPSIS);
setLastLen(midLen);
onEllipsis(true);
}
}

76
components/typography/__tests__/ellipsis.test.tsx
View File

@ -45,7 +45,7 @@ describe('Typography.Ellipsis', () => {
computeSpy = jest
.spyOn(window, 'getComputedStyle')
.mockImplementation(() => ({ fontSize: 12 } as unknown as CSSStyleDeclaration));
.mockImplementation(() => ({ fontSize: 12 }) as unknown as CSSStyleDeclaration);
});
afterEach(() => {
@ -433,4 +433,78 @@ describe('Typography.Ellipsis', () => {
});
mockRectSpy.mockRestore();
});
it('should not throw default dom nodes', async () => {
let currentWidth = 100;
// string count is different with different width
const getLineStrCount = (width: number) => {
const res = width === 100 ? 20 : 17;
return res;
};
const ref = React.createRef<HTMLElement>();
const resize = (width: number) => {
currentWidth = width;
if (ref.current) triggerResize(ref.current);
};
mockRectSpy = spyElementPrototypes(HTMLElement, {
offsetHeight: {
get() {
let html = this.innerHTML;
html = html.replace(/<[^>]*>/g, '');
const lines = Math.ceil(html.length / getLineStrCount(currentWidth));
return lines * 16;
},
},
offsetWidth: {
get: () => currentWidth,
},
getBoundingClientRect() {
let html = this.innerHTML;
html = html.replace(/<[^>]*>/g, '');
const lines = Math.ceil(html.length / getLineStrCount(currentWidth));
return { height: lines * 16 };
},
});
const { container } = render(
<Base
ellipsis={{
rows: 2,
}}
ref={ref}
editable
component="p"
>
{fullStr}
</Base>,
);
// hijackings Math.ceil
const originalCeil = Math.ceil;
let hasDefaultStr = false;
// Math.ceil will be used for ellipsis's calculations;
Math.ceil = (value) => {
const text = container.querySelector('p')?.innerHTML.replace(/<[^>]*>/g, '');
if (text && !text.includes('...')) {
hasDefaultStr = true;
}
return originalCeil.call(Math, value);
};
resize(50);
await waitFakeTimer(20, 1);
// ignore last result
hasDefaultStr = false;
resize(100);
await waitFakeTimer();
expect(hasDefaultStr).not.toBeTruthy();
// reset
mockRectSpy.mockRestore();
Math.ceil = originalCeil;
});
});

2
components/typography/index.zh-CN.md
View File

@ -156,7 +156,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA
| onEllipsis | 触发省略时的回调 | function(ellipsis) | - | 4.2.0 |
| onExpand | 点击展开时的回调 | function(event) | - | |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Typography"></ComponentTokenTable>

2
components/upload/index.zh-CN.md
View File

@ -123,7 +123,7 @@ demo:
3. `event` 上传中的服务端响应内容，包含了上传进度等信息，高级浏览器支持。
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Upload"></ComponentTokenTable>

2
components/watermark/index.zh-CN.md
View File

@ -55,7 +55,7 @@ tag: New
| fontFamily | 字体类型 | string | sans-serif | |
| fontStyle | 字体样式 | `none` \| `normal` \| `italic` \| `oblique` | normal | |
## Design Token
## 主题变量（Design Token）
<ComponentTokenTable component="Watermark"></ComponentTokenTable>

6
package.json
View File

@ -82,7 +82,7 @@
"pre-publish": "npm run test-all -- --skip-build && node ./scripts/pre-publish-notice.js",
"prettier": "prettier -c --write **/* --cache",
"pub": "npm run version && npm run collect-token-statistic && npm run token-meta && antd-tools run pub",
"rome:format": "rome format --write .",
"biome:format": "biome format --write .",
"prepublishOnly": "antd-tools run guard",
"postpublish": "node ./scripts/post-script.js",
"site": "dumi build && cp .surgeignore _site",
@ -165,6 +165,7 @@
"@antv/g6": "^4.8.13",
"@argos-ci/core": "^0.9.0",
"@babel/eslint-plugin": "^7.19.1",
"@biomejs/biome": "^1.0.0",
"@codesandbox/sandpack-react": "^2.6.9",
"@dnd-kit/core": "^6.0.7",
"@dnd-kit/modifiers": "^6.0.1",
@ -289,7 +290,6 @@
"remark-cli": "^11.0.0",
"remark-lint": "^9.0.0",
"remark-preset-lint-recommended": "^6.0.0",
"rome": "12.1.3-nightly.f65b0d9",
"semver": "^7.3.5",
"simple-git": "^3.0.0",
"size-limit": "^8.1.0",
@ -327,7 +327,7 @@
"mode": "npm"
},
"lint-staged": {
"*.{ts,tsx,js,jsx}": "rome format --write",
"*.{ts,tsx,js,jsx}": "biome format --write",
"*.{json,less,md}": "prettier --ignore-unknown --write"
}
}