diff --git a/.dumi/theme/builtins/ComponentOverview/index.tsx b/.dumi/theme/builtins/ComponentOverview/index.tsx index 2347962cb1..6582b05f5b 100644 --- a/.dumi/theme/builtins/ComponentOverview/index.tsx +++ b/.dumi/theme/builtins/ComponentOverview/index.tsx @@ -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 = (event) => { if (event.keyCode === 13 && search.trim().length) { - sectionRef.current?.querySelector('.components-overview-card')?.click(); + sectionRef.current?.querySelector(`.${styles.componentsOverviewCard}`)?.click(); } }; diff --git a/.dumi/theme/builtins/ComponentTokenTable/index.tsx b/.dumi/theme/builtins/ComponentTokenTable/index.tsx index c67edab7b9..7d64eb2d5a 100644 --- a/.dumi/theme/builtins/ComponentTokenTable/index.tsx +++ b/.dumi/theme/builtins/ComponentTokenTable/index.tsx @@ -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 = ({ defaultOpen, tokens, title, component }) => { +const SubTokenTable: React.FC = ({ + defaultOpen, + tokens, + title, + helpText, + helpLink, + component, +}) => { const [, lang] = useLocale(locales); const token = useTheme(); const columns = useColumns(); @@ -104,11 +128,53 @@ const SubTokenTable: React.FC = ({ defaultOpen, tokens, titl }) .filter(Boolean); + const code = component + ? ` + ... +` + : ` + ... +`; + return ( -
+ <>
setOpen(!open)}> -

{title}

+

+ {title} + + 
{code}
+ + + {helpText} + + + } + > + + + {helpText} + + +

{open && ( @@ -123,7 +189,7 @@ const SubTokenTable: React.FC = ({ defaultOpen, tokens, titl /> )} -
+ ); }; @@ -152,11 +218,19 @@ const ComponentTokenTable: React.FC = ({ component }) {tokenMeta.components[component] && ( item.token)} component={component} + defaultOpen /> )} - + ); }; diff --git a/rome.json b/biome.json similarity index 80% rename from rome.json rename to biome.json index 618edc3e25..9bf6ce31fd 100644 --- a/rome.json +++ b/biome.json @@ -1,4 +1,5 @@ { + "$schema": "https://biomejs.dev/schemas/1.0.0/schema.json", "formatter": { "enabled": true, "ignore": ["./dist/*", "./es/**/*", "./lib/**/*", "_site/**/*"], diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md index fc988e824e..5745c52bb4 100644 --- a/components/anchor/index.zh-CN.md +++ b/components/anchor/index.zh-CN.md @@ -76,6 +76,6 @@ group: | target | 该属性指定在何处显示链接的资源 | string | - | | | title | 文字内容 | ReactNode | - | | -## Design Token +## 主题变量（Design Token） diff --git a/components/app/index.zh-CN.md b/components/app/index.zh-CN.md index 2be00c5bd5..7d6ee0c970 100644 --- a/components/app/index.zh-CN.md +++ b/components/app/index.zh-CN.md @@ -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） diff --git a/components/auto-complete/index.zh-CN.md b/components/auto-complete/index.zh-CN.md index 7c358bc32f..edd2df6dd9 100644 --- a/components/auto-complete/index.zh-CN.md +++ b/components/auto-complete/index.zh-CN.md @@ -79,7 +79,7 @@ demo: | blur() | 移除焦点 | | | focus() | 获取焦点 | | -## Design Token +## 主题变量（Design Token） diff --git a/components/avatar/index.zh-CN.md b/components/avatar/index.zh-CN.md index cf242ff013..1424b00085 100644 --- a/components/avatar/index.zh-CN.md +++ b/components/avatar/index.zh-CN.md @@ -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） diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md index 54b5b4b444..e6c84ba9e8 100644 --- a/components/badge/index.zh-CN.md +++ b/components/badge/index.zh-CN.md @@ -71,6 +71,6 @@ group: 数据展示 | root | 设置根元素 | 5.7.0 | | indicator | 设置徽标元素 | 5.7.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/breadcrumb/index.zh-CN.md b/components/breadcrumb/index.zh-CN.md index ad95f72632..25754eaf0d 100644 --- a/components/breadcrumb/index.zh-CN.md +++ b/components/breadcrumb/index.zh-CN.md @@ -131,6 +131,6 @@ function itemRender(item, params, items, paths) { return ; ``` -## Design Token +## 主题变量（Design Token） diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md index 9893866ff6..bd237c7756 100644 --- a/components/button/index.zh-CN.md +++ b/components/button/index.zh-CN.md @@ -86,7 +86,7 @@ group: | ---- | ------------ | ----- | | icon | 设置图标元素 | 5.5.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/calendar/index.zh-CN.md b/components/calendar/index.zh-CN.md index 592b5838cb..dbda79cb72 100644 --- a/components/calendar/index.zh-CN.md +++ b/components/calendar/index.zh-CN.md @@ -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） diff --git a/components/card/index.zh-CN.md b/components/card/index.zh-CN.md index 8aff97ab1a..776e76f449 100644 --- a/components/card/index.zh-CN.md +++ b/components/card/index.zh-CN.md @@ -76,6 +76,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a-8zR6rrupgAAA | style | 定义容器类名的样式 | CSSProperties | - | | | title | 标题内容 | ReactNode | - | | -## Design Token +## 主题变量（Design Token） diff --git a/components/carousel/index.zh-CN.md b/components/carousel/index.zh-CN.md index 2c545c879e..4b53c62f12 100644 --- a/components/carousel/index.zh-CN.md +++ b/components/carousel/index.zh-CN.md @@ -51,7 +51,7 @@ demo: 更多 API 可参考： -## Design Token +## 主题变量（Design Token） diff --git a/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap index 944d8c73f5..a58009b954 100644 --- a/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -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`] = ` Unselect - + Change city
Unselect - + Change city diff --git a/components/cascader/demo/custom-trigger.tsx b/components/cascader/demo/custom-trigger.tsx index 799ff0cd0a..0424d713e0 100644 --- a/components/cascader/demo/custom-trigger.tsx +++ b/components/cascader/demo/custom-trigger.tsx @@ -42,7 +42,7 @@ const App: React.FC = () => { {text}   - Change city + Change city ); diff --git a/components/cascader/index.zh-CN.md b/components/cascader/index.zh-CN.md index ae87c790d8..d41debe236 100644 --- a/components/cascader/index.zh-CN.md +++ b/components/cascader/index.zh-CN.md @@ -124,6 +124,6 @@ interface Option { > 注意，如果需要获得中国省市区数据，可以参考 [china-division](https://gist.github.com/afc163/7582f35654fd03d5be7009444345ea17)。 -## Design Token +## 主题变量（Design Token） diff --git a/components/checkbox/index.zh-CN.md b/components/checkbox/index.zh-CN.md index 727c7d90c2..d55074ba34 100644 --- a/components/checkbox/index.zh-CN.md +++ b/components/checkbox/index.zh-CN.md @@ -73,6 +73,6 @@ interface Option { | blur() | 移除焦点 | | | focus() | 获取焦点 | | -## Design Token +## 主题变量（Design Token） diff --git a/components/collapse/index.zh-CN.md b/components/collapse/index.zh-CN.md index 7086faa51f..a15f052d30 100644 --- a/components/collapse/index.zh-CN.md +++ b/components/collapse/index.zh-CN.md @@ -106,6 +106,6 @@ const items: CollapseProps['items'] = [ | key | 对应 activeKey | string \| number | - | | | showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能置为 icon） | boolean | true | | -## Design Token +## 主题变量（Design Token） diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index d4bf19f265..545d041302 100644 --- a/components/date-picker/index.zh-CN.md +++ b/components/date-picker/index.zh-CN.md @@ -59,6 +59,7 @@ demo: ```jsx import locale from 'antd/es/date-picker/locale/zh_CN'; + import 'dayjs/locale/zh-cn'; ; @@ -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'; @@ -217,7 +219,7 @@ type GenericFn = (value: Dayjs) => string; export type FormatType = Generic | GenericFn | Array; ``` -## Design Token +## 主题变量（Design Token） @@ -245,7 +247,9 @@ export type FormatType = Generic | GenericFn | Array; ```js import dayjs from 'dayjs'; + import 'dayjs/locale/zh-cn'; + import updateLocale from 'dayjs/plugin/updateLocale'; dayjs.extend(updateLocale); diff --git a/components/descriptions/index.zh-CN.md b/components/descriptions/index.zh-CN.md index 8d32de7ee7..e8bd3940a8 100644 --- a/components/descriptions/index.zh-CN.md +++ b/components/descriptions/index.zh-CN.md @@ -103,6 +103,6 @@ const items: DescriptionsProps['items'] = [ > span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。 -## Design Token +## 主题变量（Design Token） diff --git a/components/divider/index.zh-CN.md b/components/divider/index.zh-CN.md index b4d96b0f62..04c4c6e6e5 100644 --- a/components/divider/index.zh-CN.md +++ b/components/divider/index.zh-CN.md @@ -43,6 +43,6 @@ group: | style | 分割线样式对象 | CSSProperties | - | | | type | 水平还是垂直类型 | `horizontal` \| `vertical` | `horizontal` | | -## Design Token +## 主题变量（Design Token） diff --git a/components/drawer/index.zh-CN.md b/components/drawer/index.zh-CN.md index 06ac5808f7..28bdd2a447 100644 --- a/components/drawer/index.zh-CN.md +++ b/components/drawer/index.zh-CN.md @@ -72,6 +72,6 @@ demo: | zIndex | 设置 Drawer 的 `z-index` | number | 1000 | | | onClose | 点击遮罩层或左上角叉或取消按钮的回调 | function(e) | - | | -## Design Token +## 主题变量（Design Token） diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md index b460404089..0d2e12f4cb 100644 --- a/components/dropdown/index.zh-CN.md +++ b/components/dropdown/index.zh-CN.md @@ -80,7 +80,7 @@ demo: 请确保 `Dropdown` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。 -## Design Token +## 主题变量（Design Token） diff --git a/components/empty/index.zh-CN.md b/components/empty/index.zh-CN.md index 568a4fb64c..f2f5499fd6 100644 --- a/components/empty/index.zh-CN.md +++ b/components/empty/index.zh-CN.md @@ -66,6 +66,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*obM7S5lIxeMAAA } -## Design Token +## 主题变量（Design Token） diff --git a/components/float-button/index.zh-CN.md b/components/float-button/index.zh-CN.md index 165cb98726..3b9efdc5e8 100644 --- a/components/float-button/index.zh-CN.md +++ b/components/float-button/index.zh-CN.md @@ -71,6 +71,6 @@ tag: New | visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 | | | onClick | 点击按钮的回调函数 | () => void | - | | -## Design Token +## 主题变量（Design Token） diff --git a/components/form/__tests__/__snapshots__/demo.test.tsx.snap b/components/form/__tests__/__snapshots__/demo.test.tsx.snap index 2f72b165fc..e4627c14cb 100644 --- a/components/form/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/form/__tests__/__snapshots__/demo.test.tsx.snap @@ -4563,6 +4563,7 @@ exports[`renders components/form/demo/inline-login.tsx correctly 1`] = ` >
``` -## Design Token +## 主题变量（Design Token） diff --git a/components/message/index.zh-CN.md b/components/message/index.zh-CN.md index b140e999dc..9fcf97ac22 100644 --- a/components/message/index.zh-CN.md +++ b/components/message/index.zh-CN.md @@ -112,7 +112,7 @@ message.config({ | rtl | 是否开启 RTL 模式 | boolean | false | | | top | 消息距离顶部的位置 | number | 8 | | -## Design Token +## 主题变量（Design Token） diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md index a12cf85467..f1abafee83 100644 --- a/components/modal/index.zh-CN.md +++ b/components/modal/index.zh-CN.md @@ -190,7 +190,7 @@ const confirmed = await modal.confirm({ ... }); | originNode | 默认节点 | React.ReactNode | - | | extra | 扩展选项 | { OkBtn: FC; CancelBtn: FC } | - | -## Design Token +## 主题变量（Design Token） diff --git a/components/notification/index.zh-CN.md b/components/notification/index.zh-CN.md index 53bdfb4e08..cc84cfccd8 100644 --- a/components/notification/index.zh-CN.md +++ b/components/notification/index.zh-CN.md @@ -110,7 +110,7 @@ notification.config({ | top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 | | | maxCount | 最大显示数, 超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/pagination/index.zh-CN.md b/components/pagination/index.zh-CN.md index 7085ca1589..cd390892df 100644 --- a/components/pagination/index.zh-CN.md +++ b/components/pagination/index.zh-CN.md @@ -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） diff --git a/components/popconfirm/index.zh-CN.md b/components/popconfirm/index.zh-CN.md index 7f289f4b01..743256bbb9 100644 --- a/components/popconfirm/index.zh-CN.md +++ b/components/popconfirm/index.zh-CN.md @@ -52,7 +52,7 @@ demo: 更多属性请参考 [Tooltip](/components/tooltip-cn/#api)。 -## Design Token +## 主题变量（Design Token） diff --git a/components/popover/index.zh-CN.md b/components/popover/index.zh-CN.md index 27ded634f5..218e67f144 100644 --- a/components/popover/index.zh-CN.md +++ b/components/popover/index.zh-CN.md @@ -45,7 +45,7 @@ demo: 请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。 -## Design Token +## 主题变量（Design Token） diff --git a/components/progress/index.zh-CN.md b/components/progress/index.zh-CN.md index 6d8d5a84d0..f7ebd0217a 100644 --- a/components/progress/index.zh-CN.md +++ b/components/progress/index.zh-CN.md @@ -77,6 +77,6 @@ demo: | gapPosition | 仪表盘进度条缺口位置 | `top` \| `bottom` \| `left` \| `right` | `bottom` | - | | strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | - | -## Design Token +## 主题变量（Design Token） diff --git a/components/qr-code/index.zh-CN.md b/components/qr-code/index.zh-CN.md index b14cd3b2aa..1e31634998 100644 --- a/components/qr-code/index.zh-CN.md +++ b/components/qr-code/index.zh-CN.md @@ -53,7 +53,7 @@ tag: New | status | 二维码状态 | `active \| expired \| loading ` | `active` | | onRefresh | 点击"点击刷新"的回调 | `() => void` | - | -## Design Token +## 主题变量（Design Token） diff --git a/components/radio/index.zh-CN.md b/components/radio/index.zh-CN.md index f7c35d6f87..4a9d2ef1dc 100644 --- a/components/radio/index.zh-CN.md +++ b/components/radio/index.zh-CN.md @@ -74,6 +74,6 @@ demo: | blur() | 移除焦点 | | focus() | 获取焦点 | -## Design Token +## 主题变量（Design Token） diff --git a/components/rate/index.zh-CN.md b/components/rate/index.zh-CN.md index cb0b429363..d554adbf53 100644 --- a/components/rate/index.zh-CN.md +++ b/components/rate/index.zh-CN.md @@ -58,6 +58,6 @@ demo: | blur() | 移除焦点 | | focus() | 获取焦点 | -## Design Token +## 主题变量（Design Token） diff --git a/components/result/index.zh-CN.md b/components/result/index.zh-CN.md index afb3d7bff3..1867fb5835 100644 --- a/components/result/index.zh-CN.md +++ b/components/result/index.zh-CN.md @@ -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） diff --git a/components/segmented/index.zh-CN.md b/components/segmented/index.zh-CN.md index c38be07ee8..8962c30fe5 100644 --- a/components/segmented/index.zh-CN.md +++ b/components/segmented/index.zh-CN.md @@ -50,6 +50,6 @@ demo: | size | 控件尺寸 | `large` \| `middle` \| `small` | `middle` | | | value | 当前选中的值 | string \| number | | | -## Design Token +## 主题变量（Design Token） diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md index 9e01d57f02..023d2d4704 100644 --- a/components/select/index.zh-CN.md +++ b/components/select/index.zh-CN.md @@ -137,7 +137,7 @@ demo: | key | Key | string | - | | | label | 组名 | string \| React.Element | - | | -## Design Token +## 主题变量（Design Token） diff --git a/components/skeleton/index.zh-CN.md b/components/skeleton/index.zh-CN.md index c5b12708c1..3b670bbbc8 100644 --- a/components/skeleton/index.zh-CN.md +++ b/components/skeleton/index.zh-CN.md @@ -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） diff --git a/components/slider/index.zh-CN.md b/components/slider/index.zh-CN.md index 438a12a56b..1bf140a85f 100644 --- a/components/slider/index.zh-CN.md +++ b/components/slider/index.zh-CN.md @@ -80,6 +80,6 @@ demo: | blur() | 移除焦点 | | | focus() | 获取焦点 | | -## Design Token +## 主题变量（Design Token） diff --git a/components/space/index.zh-CN.md b/components/space/index.zh-CN.md index 1c3f05aea4..6bc6b20114 100644 --- a/components/space/index.zh-CN.md +++ b/components/space/index.zh-CN.md @@ -81,6 +81,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*37T2R6O9oi0AAA | ---- | --------------------- | ----- | | item | 设置 `Space` 包裹的子组件 | 5.6.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/spin/index.zh-CN.md b/components/spin/index.zh-CN.md index 47eefecae4..ad3f977fca 100644 --- a/components/spin/index.zh-CN.md +++ b/components/spin/index.zh-CN.md @@ -45,6 +45,6 @@ demo: 你可以自定义全局默认 Spin 的元素。 -## Design Token +## 主题变量（Design Token） diff --git a/components/statistic/index.zh-CN.md b/components/statistic/index.zh-CN.md index 363b491563..ec0224fcd1 100644 --- a/components/statistic/index.zh-CN.md +++ b/components/statistic/index.zh-CN.md @@ -58,6 +58,6 @@ demo: | onFinish | 倒计时完成时触发 | () => void | - | | | onChange | 倒计时时间变化时触发 | (value: number) => void | - | 4.16.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/steps/index.zh-CN.md b/components/steps/index.zh-CN.md index 768fdf5546..596915b0f2 100644 --- a/components/steps/index.zh-CN.md +++ b/components/steps/index.zh-CN.md @@ -84,6 +84,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cFsBQLA0b7UAAA | subTitle | 子标题 | ReactNode | - | | | title | 标题 | ReactNode | - | | -## Design Token +## 主题变量（Design Token） diff --git a/components/switch/index.zh-CN.md b/components/switch/index.zh-CN.md index dbff8205ce..ffe1712c68 100644 --- a/components/switch/index.zh-CN.md +++ b/components/switch/index.zh-CN.md @@ -51,6 +51,6 @@ demo: | blur() | 移除焦点 | | focus() | 获取焦点 | -## Design Token +## 主题变量（Design Token） diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md index 125d3f3eeb..35b6b49d90 100644 --- a/components/table/index.zh-CN.md +++ b/components/table/index.zh-CN.md @@ -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） diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md index ad4d33cb4f..b25430ceb5 100644 --- a/components/tabs/index.zh-CN.md +++ b/components/tabs/index.zh-CN.md @@ -85,6 +85,6 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。 | label | 选项卡头显示文字 | ReactNode | - | | children | 选项卡头显示内容 | ReactNode | - | -## Design Token +## 主题变量（Design Token） diff --git a/components/tag/index.zh-CN.md b/components/tag/index.zh-CN.md index 2898ec49b8..f2706c2f2f 100644 --- a/components/tag/index.zh-CN.md +++ b/components/tag/index.zh-CN.md @@ -54,6 +54,6 @@ demo: | checked | 设置标签的选中状态 | boolean | false | | onChange | 点击标签时触发的回调 | (checked) => void | - | -## Design Token +## 主题变量（Design Token） diff --git a/components/time-picker/index.zh-CN.md b/components/time-picker/index.zh-CN.md index 07364a66ea..1702aae787 100644 --- a/components/time-picker/index.zh-CN.md +++ b/components/time-picker/index.zh-CN.md @@ -121,7 +121,7 @@ type RangeDisabledTime = ( }; ``` -## Design Token +## 主题变量（Design Token） diff --git a/components/timeline/index.zh-CN.md b/components/timeline/index.zh-CN.md index d25d9d7f0a..8879f4ef46 100644 --- a/components/timeline/index.zh-CN.md +++ b/components/timeline/index.zh-CN.md @@ -70,6 +70,6 @@ return ( | children | 设置内容 | ReactNode | - | | position | 自定义节点位置 | `left` \| `right` | - | -## Design Token +## 主题变量（Design Token） diff --git a/components/tooltip/index.zh-CN.md b/components/tooltip/index.zh-CN.md index f0de98cdfc..23d538f7e5 100644 --- a/components/tooltip/index.zh-CN.md +++ b/components/tooltip/index.zh-CN.md @@ -63,7 +63,7 @@ demo: | zIndex | 设置 Tooltip 的 `z-index` | number | - | | | onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/tour/index.zh-CN.md b/components/tour/index.zh-CN.md index 430dc1ae25..1659123255 100644 --- a/components/tour/index.zh-CN.md +++ b/components/tour/index.zh-CN.md @@ -66,6 +66,6 @@ tag: New | prevButtonProps | 上一步按钮的属性 | `{ children: ReactNode; onClick: Function }` | - | | | scrollIntoViewOptions | 是否支持当前元素滚动到视窗内，也可传入配置指定滚动视窗的相关参数，默认跟随 Tour 的 `scrollIntoViewOptions` 属性 | `boolean \| ScrollIntoViewOptions` | `true` | 5.2.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/transfer/index.zh-CN.md b/components/transfer/index.zh-CN.md index a06ab72715..fcd9c20690 100644 --- a/components/transfer/index.zh-CN.md +++ b/components/transfer/index.zh-CN.md @@ -97,7 +97,7 @@ Transfer 支持接收 `children` 自定义渲染列表，并返回以下参数 return record.uid} />; ``` -## Design Token +## 主题变量（Design Token） diff --git a/components/tree-select/index.zh-CN.md b/components/tree-select/index.zh-CN.md index 3dff748c62..b6fec9f363 100644 --- a/components/tree-select/index.zh-CN.md +++ b/components/tree-select/index.zh-CN.md @@ -111,7 +111,7 @@ demo: | title | 树节点显示的内容 | ReactNode | `---` | | | value | 默认根据此属性值进行筛选（其值在整个树范围内唯一） | string | - | | -## Design Token +## 主题变量（Design Token） diff --git a/components/tree/index.zh-CN.md b/components/tree/index.zh-CN.md index 810614e118..20b066c177 100644 --- a/components/tree/index.zh-CN.md +++ b/components/tree/index.zh-CN.md @@ -127,7 +127,7 @@ demo: | --- | --- | | scrollTo({ key: string \| number; align?: 'top' \| 'bottom' \| 'auto'; offset?: number }) | 虚拟滚动下，滚动到指定 key 条目 | -## Design Token +## 主题变量（Design Token） diff --git a/components/typography/Base/Ellipsis.tsx b/components/typography/Base/Ellipsis.tsx index 9e840e3a04..9383e13694 100644 --- a/components/typography/Base/Ellipsis.tsx +++ b/components/typography/Base/Ellipsis.tsx @@ -86,6 +86,8 @@ const Ellipsis: React.FC = ({ 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(NONE); const [singleRowHeight, setSingleRowHeight] = React.useState(0); @@ -98,6 +100,10 @@ const Ellipsis: React.FC = ({ 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 = ({ setCutLength([nextStartLen, nextMidLen, nextEndLen]); } else { setWalkingState(DONE_WITH_ELLIPSIS); + setLastLen(midLen); onEllipsis(true); } } diff --git a/components/typography/__tests__/ellipsis.test.tsx b/components/typography/__tests__/ellipsis.test.tsx index 0306cad46f..e50a47e06d 100644 --- a/components/typography/__tests__/ellipsis.test.tsx +++ b/components/typography/__tests__/ellipsis.test.tsx @@ -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(); + 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( + + {fullStr} + , + ); + + // 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; + }); }); diff --git a/components/typography/index.zh-CN.md b/components/typography/index.zh-CN.md index c9af276415..8ef789c95d 100644 --- a/components/typography/index.zh-CN.md +++ b/components/typography/index.zh-CN.md @@ -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） diff --git a/components/upload/index.zh-CN.md b/components/upload/index.zh-CN.md index 8a2cd417cd..08f2ede318 100644 --- a/components/upload/index.zh-CN.md +++ b/components/upload/index.zh-CN.md @@ -123,7 +123,7 @@ demo: 3. `event` 上传中的服务端响应内容，包含了上传进度等信息，高级浏览器支持。 -## Design Token +## 主题变量（Design Token） diff --git a/components/watermark/index.zh-CN.md b/components/watermark/index.zh-CN.md index 2f37cd6b41..672c87c2cc 100644 --- a/components/watermark/index.zh-CN.md +++ b/components/watermark/index.zh-CN.md @@ -55,7 +55,7 @@ tag: New | fontFamily | 字体类型 | string | sans-serif | | | fontStyle | 字体样式 | `none` \| `normal` \| `italic` \| `oblique` | normal | | -## Design Token +## 主题变量（Design Token） diff --git a/package.json b/package.json index ff8aee033b..f68284fdbc 100644 --- a/package.json +++ b/package.json @@ -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" } }