diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..c65c7943f3 --- /dev/null +++ b/.devcontainer/devcontainer.json @@ -0,0 +1,16 @@ +// For format details, see https://aka.ms/devcontainer.json. For config options, see the +// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node +{ + "name": "ant-design", + "image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm", + "postCreateCommand": "pnpm install", + "customizations": { + "vscode": { + "extensions": [ + "dbaeumer.vscode-eslint", + "shezhangzhang.antd-design-token", + "fi3ework.vscode-antd-rush" + ] + } + } +} diff --git a/.dumi/components/SemanticPreview.tsx b/.dumi/components/SemanticPreview.tsx index c02a00de95..1ee09799d4 100644 --- a/.dumi/components/SemanticPreview.tsx +++ b/.dumi/components/SemanticPreview.tsx @@ -66,7 +66,7 @@ const useStyle = createStyles(({ token }, markPos: [number, number, number, numb })); export interface SemanticPreviewProps { - componentName?: string; + componentName: string; semantics: { name: string; desc: string; version?: string }[]; children: React.ReactElement; height?: number; diff --git a/.dumi/components/TemplateSemanticPreview.tsx b/.dumi/components/TemplateSemanticPreview.tsx index 52eeacb5d5..14bf3f10de 100644 --- a/.dumi/components/TemplateSemanticPreview.tsx +++ b/.dumi/components/TemplateSemanticPreview.tsx @@ -1,4 +1,5 @@ import React from 'react'; + import useLocale from '../hooks/useLocale'; import SemanticPreview from './SemanticPreview'; @@ -42,6 +43,7 @@ const Block: React.FC = ({ component: Component, options, defaultVal export interface TemplateSemanticPreviewProps { component: React.ComponentType; + componentName: string; defaultValue?: string; options?: { value: string; label: string }[]; height?: number; @@ -57,12 +59,14 @@ const TemplateSemanticPreview: React.FC = ({ options, height, style, + componentName, ...restProps }) => { const [locale] = useLocale(locales); return ( { + ({ slug: toSlug } = await import('github-slugger')); +})(); + +const isNil = (value: any) => value == null; + +const toArr = (value: T | T[]) => { + if (isNil(value)) return []; + return Array.isArray(value) ? value : [value]; +}; + +const patch = (context: Record, key: string, value: any) => { + if (!context[key]) { + context[key] = value; + } + return context[key]; +}; + +interface Options { + level?: number; +} + +const remarkAnchor = (opt: Options = {}): UnifiedTransformer => { + // https://regex101.com/r/WDjkK0/1 + const RE = /\s*\{#([^}]+)\}$/; + + const realOpt = { + level: [1, 2, 3, 4, 5, 6], + ...opt, + }; + + return function transformer(tree) { + const ids = new Set(); + + unistUtilVisit.visit(tree, 'heading', (node) => { + if (toArr(realOpt.level).indexOf(node.depth) === -1) { + return unistUtilVisit.CONTINUE; + } + + const lastChild = node.children.at(-1); + + if (lastChild?.type === 'text') { + const text = lastChild.value; + const match = text.match(RE); + if (match) { + const id = match[1]; + if (id !== toSlug(id)) { + throw new Error( + `Expected header ID to be a valid slug. You specified: {#${id}}. Replace it with: {#${toSlug(id)}}`, + ); + } + + node.data ??= {}; + node.data.hProperties = { ...node.data.hProperties, id }; + + lastChild.value = text.replace(RE, ''); + + if (lastChild.value === '') { + node.children.pop(); + } + if (ids.has(id)) { + throw new Error(`Cannot have a duplicate header with id "${id}" on the page. + Rename the section or give it an explicit unique ID. For example: #### Arguments {#setstate-arguments}`); + } + + ids.add(id); + + const data = patch(node, 'data', {}); + patch(data, 'id', id); + patch(data, 'htmlAttributes', {}); + patch(data, 'hProperties', {}); + patch(data.htmlAttributes, 'id', id); + patch(data.hProperties, 'id', id); + } + } + }); + }; +}; + +export default remarkAnchor; diff --git a/.dumi/theme/builtins/ComponentMeta/index.tsx b/.dumi/theme/builtins/ComponentMeta/index.tsx index 5908e2f990..c56203a663 100644 --- a/.dumi/theme/builtins/ComponentMeta/index.tsx +++ b/.dumi/theme/builtins/ComponentMeta/index.tsx @@ -1,10 +1,11 @@ import React from 'react'; -import { EditOutlined, GithubOutlined, HistoryOutlined } from '@ant-design/icons'; +import { EditOutlined, GithubOutlined, HistoryOutlined, CompassOutlined } from '@ant-design/icons'; import type { GetProp } from 'antd'; import { Descriptions, Flex, theme, Tooltip, Typography } from 'antd'; import { createStyles, css } from 'antd-style'; import kebabCase from 'lodash/kebabCase'; import CopyToClipboard from 'react-copy-to-clipboard'; +import Link from '../../common/Link'; import useLocale from '../../../hooks/useLocale'; import ComponentChangelog from '../../common/ComponentChangelog'; @@ -18,6 +19,7 @@ const locales = { docs: '文档', edit: '编辑此页', changelog: '更新日志', + design: '设计指南', version: '版本', }, en: { @@ -28,6 +30,7 @@ const locales = { docs: 'Docs', edit: 'Edit this page', changelog: 'Changelog', + design: 'Design', version: 'Version', }, }; @@ -57,24 +60,8 @@ const useStyle = createStyles(({ token }) => ({ text-decoration: underline !important; } `, - import: css` - color: ${token.magenta8}; - `, - component: css` - color: ${token.colorText}; - `, - from: css` - color: ${token.magenta8}; - margin-inline-end: 0.5em; - `, - antd: css` - color: ${token.green8}; - `, - semicolon: css` - color: ${token.colorText}; - `, icon: css` - margin-inline-end: ${token.marginXXS}px; + margin-inline-end: 3px; `, })); @@ -83,10 +70,11 @@ export interface ComponentMetaProps { source: string | true; filename?: string; version?: string; + designUrl?: string; } const ComponentMeta: React.FC = (props) => { - const { component, source, filename, version } = props; + const { component, source, filename, version, designUrl } = props; const { token } = theme.useToken(); const [locale, lang] = useLocale(locales); const isZhCN = lang === 'cn'; @@ -130,23 +118,7 @@ const ComponentMeta: React.FC = (props) => { }; // ======================== Render ======================== - const importList = [ - - import - , - {`{ ${transformComponentName( - component, - )} }`}, - - from - , - - {`"antd"`} - , - - ; - , - ]; + const importList = `import { ${transformComponentName(component)} } from "antd";`; return ( = (props) => { filename && { label: locale.docs, children: ( - + = (props) => { {locale.edit} + {designUrl && ( + + + {locale.design} + + )} diff --git a/.dumi/theme/common/ComponentChangelog/index.tsx b/.dumi/theme/common/ComponentChangelog/index.tsx index 8eb06b603c..752708baee 100644 --- a/.dumi/theme/common/ComponentChangelog/index.tsx +++ b/.dumi/theme/common/ComponentChangelog/index.tsx @@ -3,7 +3,7 @@ import React from 'react'; import ComponentChangelog from './ComponentChangelog'; const ChangeLog: React.FC> = ({ children }) => ( - + {children} ); diff --git a/.dumi/theme/common/styles/HeadingAnchor.tsx b/.dumi/theme/common/styles/HeadingAnchor.tsx index 84211c2943..79fd94e6f1 100644 --- a/.dumi/theme/common/styles/HeadingAnchor.tsx +++ b/.dumi/theme/common/styles/HeadingAnchor.tsx @@ -34,6 +34,8 @@ export default () => { > .icon-link::before { font-size: ${token.fontSizeXL}px; content: '#'; + color: ${token.colorTextSecondary}; + font-family: ${token.codeFamily}; } } diff --git a/.dumi/theme/slots/Content/index.tsx b/.dumi/theme/slots/Content/index.tsx index a7eebbddb5..01c5c49f31 100644 --- a/.dumi/theme/slots/Content/index.tsx +++ b/.dumi/theme/slots/Content/index.tsx @@ -89,6 +89,7 @@ const Content: React.FC = ({ children }) => { component={meta.frontmatter.title} filename={meta.frontmatter.filename} version={meta.frontmatter.tag} + designUrl={meta.frontmatter.designUrl} /> )}
{children}
diff --git a/.dumirc.ts b/.dumirc.ts index 57672e5d8e..f645c2d937 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -5,6 +5,7 @@ import os from 'node:os'; import rehypeAntd from './.dumi/rehypeAntd'; import remarkAntd from './.dumi/remarkAntd'; +import remarkAnchor from './.dumi/remarkAnchor'; import { version } from './package.json'; export default defineConfig({ @@ -52,7 +53,7 @@ export default defineConfig({ '@ant-design/icons$': '@ant-design/icons/lib', }, extraRehypePlugins: [rehypeAntd], - extraRemarkPlugins: [remarkAntd], + extraRemarkPlugins: [remarkAntd, remarkAnchor], metas: [ { name: 'theme-color', content: '#1677ff' }, { name: 'build-time', content: Date.now().toString() }, diff --git a/.gitignore b/.gitignore index 61966b0dbc..216abd2574 100644 --- a/.gitignore +++ b/.gitignore @@ -68,7 +68,6 @@ __image_snapshots__/ /imageDiffSnapshots /visualRegressionReport* -.devcontainer* .husky/prepare-commit-msg .eslintcache diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index d0b5dc16bf..41575a8970 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -15,6 +15,13 @@ tag: vVERSION --- +## 5.24.6 + +`2025-04-01` + +- 🐞 Fix Modal show loading with async call, still can close with click outer space. [#53227](https://github.com/ant-design/ant-design/pull/53227) [@jin19980928](https://github.com/jin19980928) +- 🐞 Fix when Table `size` is `small`, the theme config will take effect on the sub Pagination. [#52829](https://github.com/ant-design/ant-design/pull/52829) [@Can-Chen](https://github.com/Can-Chen) + ## 5.24.5 `2025-03-24` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index ad59080362..59ff6ef316 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -15,6 +15,13 @@ tag: vVERSION --- +## 5.24.6 + +`2025-04-01` + +- 🐞 修复 Modal 通过异步方法显示 loading 态时,点击外侧仍能触发关闭的问题。[#53227](https://github.com/ant-design/ant-design/pull/53227) [@jin19980928](https://github.com/jin19980928) +- 🐞 修复 Table 在 `size` 为 `small` 时,主题配置 Pagination 无效的问题。[#52829](https://github.com/ant-design/ant-design/pull/52829) [@Can-Chen](https://github.com/Can-Chen) + ## 5.24.5 `2025-03-24` diff --git a/components/affix/index.zh-CN.md b/components/affix/index.zh-CN.md index bb6ca7ade6..0113f1fc93 100644 --- a/components/affix/index.zh-CN.md +++ b/components/affix/index.zh-CN.md @@ -12,7 +12,7 @@ group: order: 7 --- -## 何时使用 +## 何时使用 {#when-to-use} 当内容区域比较长,需要滚动页面时,这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。 diff --git a/components/alert/index.zh-CN.md b/components/alert/index.zh-CN.md index e587661ada..58b3a18beb 100644 --- a/components/alert/index.zh-CN.md +++ b/components/alert/index.zh-CN.md @@ -12,7 +12,7 @@ group: order: 6 --- -## 何时使用 +## 何时使用 {#when-to-use} - 当某个页面需要向用户显示警告的信息时。 - 非浮层的静态展现形式,始终展现,不会自动消失,用户可以点击关闭。 diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md index 733f3ade86..0f9fbd99a6 100644 --- a/components/anchor/index.zh-CN.md +++ b/components/anchor/index.zh-CN.md @@ -11,7 +11,7 @@ group: order: 3 --- -## 何时使用 +## 何时使用 {#when-to-use} 需要展现当前页面上可供跳转的锚点链接,以及快速在锚点之间跳转。 diff --git a/components/app/index.zh-CN.md b/components/app/index.zh-CN.md index bdc65e76fe..28281e5f6d 100644 --- a/components/app/index.zh-CN.md +++ b/components/app/index.zh-CN.md @@ -11,7 +11,7 @@ demo: tag: 5.1.0 --- -## 何时使用 +## 何时使用 {#when-to-use} - 提供可消费 React context 的 `message.xxx`、`Modal.xxx`、`notification.xxx` 的静态方法,可以简化 useMessage 等方法需要手动植入 `contextHolder` 的问题。 - 提供基于 `.ant-app` 的默认重置样式,解决原生元素没有 antd 规范样式的问题。 diff --git a/components/auto-complete/demo/_semantic.tsx b/components/auto-complete/demo/_semantic.tsx index ee7bf405f2..b238edfb4b 100644 --- a/components/auto-complete/demo/_semantic.tsx +++ b/components/auto-complete/demo/_semantic.tsx @@ -8,18 +8,19 @@ const mockVal = (str: string, repeat = 1) => ({ label: str.repeat(repeat), }); +const getPanelValue = (searchText: string) => + !searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)]; + const App: React.FC = () => { const [options, setOptions] = React.useState([ { value: 'aojunhao123', label: 'aojunhao123' }, { value: 'thinkasany', label: 'thinkasany' }, ]); - const getPanelValue = (searchText: string) => - !searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)]; - return ( setOptions(getPanelValue(text))} diff --git a/components/auto-complete/index.zh-CN.md b/components/auto-complete/index.zh-CN.md index c21f4dec63..7c80ca0f5e 100644 --- a/components/auto-complete/index.zh-CN.md +++ b/components/auto-complete/index.zh-CN.md @@ -12,7 +12,7 @@ demo: cols: 2 --- -## 何时使用 +## 何时使用 {#when-to-use} - 需要一个输入框而不是选择器。 - 需要输入建议/辅助提示。 diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md index b53b26acc2..f55390e442 100644 --- a/components/badge/index.zh-CN.md +++ b/components/badge/index.zh-CN.md @@ -10,7 +10,7 @@ demo: group: 数据展示 --- -## 何时使用 +## 何时使用 {#when-to-use} 一般出现在通知图标或头像的右上角,用于显示需要处理的消息条数,通过醒目视觉形式吸引用户处理。 diff --git a/components/breadcrumb/index.zh-CN.md b/components/breadcrumb/index.zh-CN.md index 5bb44942b0..7f0e951e8e 100644 --- a/components/breadcrumb/index.zh-CN.md +++ b/components/breadcrumb/index.zh-CN.md @@ -10,7 +10,7 @@ demo: cols: 2 --- -## 何时使用 +## 何时使用 {#when-to-use} - 当系统拥有超过两级以上的层级结构时; - 当需要告知用户『你在哪里』时; @@ -129,7 +129,7 @@ function itemRender(currentRoute, params, items, paths) { return isLast ? ( {currentRoute.title} ) : ( - {currentRoute.title} + {currentRoute.title} ); } diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md index 3c7964fda6..c2c5cfcfe4 100644 --- a/components/button/index.en-US.md +++ b/components/button/index.en-US.md @@ -4,6 +4,7 @@ title: Button description: To trigger an operation. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*7va7RKs3YzIAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3T4cRqxH9-8AAAAAAAAAAAAADrJ8AQ/original +designUrl: /docs/spec/buttons demo: cols: 2 group: @@ -17,18 +18,18 @@ A button means an operation (or a series of operations). Clicking a button will In Ant Design we provide 5 types of button. -- Primary button: used for the main action, there can be at most one primary button in a section. -- Default button: used for a series of actions without priority. -- Dashed button: commonly used for adding more actions. -- Text button: used for the most secondary action. -- Link button: used for external links. +- 🔵 Primary button: used for the main action, there can be at most one primary button in a section. +- ⚪️ Default button: used for a series of actions without priority. +- 🫥 Dashed button: commonly used for adding more actions. +- 🔤 Text button: used for the most secondary action. +- 🔗 Link button: used for external links. And 4 other properties additionally. -- `danger`: used for actions of risk, like deletion or authorization. -- `ghost`: used in situations with complex background, home pages usually. -- `disabled`: used when actions are not available. -- `loading`: adds a loading spinner in button, avoids multiple submits too. +- 🔴 `danger`: used for actions of risk, like deletion or authorization. +- 👻 `ghost`: used in situations with complex background, home pages usually. +- 🚫 `disabled`: used when actions are not available. +- 🔃 `loading`: adds a loading spinner in button, avoids multiple submits too. ## Examples @@ -96,7 +97,7 @@ It accepts all props which native buttons support. ## FAQ -### How to choose type and color & variant? +### How to choose type and color & variant? {#faq-type-color-variant} Type is essentially syntactic sugar for colors and variants. It internally provides a set of mapping relationships between colors and variants for the type. If both exist at the same time, the colors and variants will be used first. @@ -112,7 +113,7 @@ Equivalent ``` -### How to close the click wave effect? +### How to close the click wave effect? {#faq-close-wave-effect} If you don't need this feature, you can set `disabled` of `wave` in [ConfigProvider](/components/config-provider#api) as `true`. diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md index e281fc491d..891cd22eef 100644 --- a/components/button/index.zh-CN.md +++ b/components/button/index.zh-CN.md @@ -5,6 +5,7 @@ subtitle: 按钮 description: 按钮用于开始一个即时操作。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*7va7RKs3YzIAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3T4cRqxH9-8AAAAAAAAAAAAADrJ8AQ/original +designUrl: /docs/spec/buttons-cn demo: cols: 2 group: @@ -12,28 +13,26 @@ group: order: 1 --- -## 何时使用 +## 何时使用 {#when-to-use} 标记了一个(或封装一组)操作命令,响应用户点击行为,触发相应的业务逻辑。 在 Ant Design 中我们提供了五种按钮。 -- 主按钮:用于主行动点,一个操作区域只能有一个主按钮。 -- 默认按钮:用于没有主次之分的一组行动点。 -- 虚线按钮:常用于添加操作。 -- 文本按钮:用于最次级的行动点。 -- 链接按钮:一般用于链接,即导航至某位置。 +- 🔵 主按钮:用于主行动点,一个操作区域只能有一个主按钮。 +- ⚪️ 默认按钮:用于没有主次之分的一组行动点。 +- 🫥 虚线按钮:常用于添加操作。 +- 🔤 文本按钮:用于最次级的行动点。 +- 🔗 链接按钮:一般用于链接,即导航至某位置。 以及四种状态属性与上面配合使用。 -- 危险:删除/移动/修改权限等危险操作,一般需要二次确认。 -- 幽灵:用于背景色比较复杂的地方,常用在首页/产品页等展示场景。 -- 禁用:行动点不可用的时候,一般需要文案解释。 -- 加载中:用于异步操作等待反馈的时候,也可以避免多次提交。 +- ⚠️ 危险:删除/移动/修改权限等危险操作,一般需要二次确认。 +- 👻 幽灵:用于背景色比较复杂的地方,常用在首页/产品页等展示场景。 +- 🚫 禁用:行动点不可用的时候,一般需要文案解释。 +- 🔃 加载中:用于异步操作等待反馈的时候,也可以避免多次提交。 -[完整设计指南](https://ant.design/docs/spec/buttons-cn) - -## 代码演示 +## 代码演示 {#examples} 语法糖 @@ -92,17 +91,17 @@ group: > type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold'; -## Semantic DOM +## Semantic DOM {#semantic-dom} -## 主题变量(Design Token) +## 主题变量(Design Token){#design-token} ## FAQ -### 类型和颜色与变体如何选择? +### 类型和颜色与变体如何选择? {#faq-type-color-variant} 类型本质上是颜色与变体的语法糖,内部为其提供了一组颜色与变体的映射关系。如果两者同时存在,优先使用颜色与变体。 @@ -118,7 +117,7 @@ group: ``` -### 如何关闭点击波纹效果? +### 如何关闭点击波纹效果? {#faq-close-wave-effect} 如果你不需要这个特性,可以设置 [ConfigProvider](/components/config-provider-cn#api) 的 `wave` 的 `disabled` 为 `true`。 @@ -135,6 +134,6 @@ group: } -## 设计指引 +## 设计指引 {#design-guide} - [我的按钮究竟该放哪儿!?| Ant Design 4.0 系列分享](https://zhuanlan.zhihu.com/p/109644406) diff --git a/components/calendar/index.zh-CN.md b/components/calendar/index.zh-CN.md index 707911d643..328d5b558a 100644 --- a/components/calendar/index.zh-CN.md +++ b/components/calendar/index.zh-CN.md @@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*nF6_To7pDSAAAAAAAA coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAAAAAAAAAAAADrJ8AQ/original --- -## 何时使用 +## 何时使用 {#when-to-use} 当数据是日期或按照日期划分时,例如日程、课表、价格日历等,农历等。目前支持年/月切换。 diff --git a/components/card/index.zh-CN.md b/components/card/index.zh-CN.md index 1d3071c890..f0564f87bc 100644 --- a/components/card/index.zh-CN.md +++ b/components/card/index.zh-CN.md @@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*QXO1SKEdIzYAAAAAAA coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*5WDvQp_H7LUAAAAAAAAAAAAADrJ8AQ/original --- -## 何时使用 +## 何时使用 {#when-to-use} 最基础的卡片容器,可承载文字、列表、图片、段落,常用于后台概览页面。 diff --git a/components/carousel/index.zh-CN.md b/components/carousel/index.zh-CN.md index 57704d242b..a37acdb08f 100644 --- a/components/carousel/index.zh-CN.md +++ b/components/carousel/index.zh-CN.md @@ -10,7 +10,7 @@ demo: cols: 2 --- -## 何时使用 +## 何时使用 {#when-to-use} - 当有一组平级的内容。 - 当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。 diff --git a/components/cascader/index.en-US.md b/components/cascader/index.en-US.md index f36eb18d12..06bc00ee46 100644 --- a/components/cascader/index.en-US.md +++ b/components/cascader/index.en-US.md @@ -54,7 +54,9 @@ Common props ref:[Common props](/docs/react/common-props) | autoClearSearchValue | Whether the current search will be cleared on selecting an item. Only applies when `multiple` is `true` | boolean | true | 5.9.0 | | autoFocus | If get focus when component mounted | boolean | false | | | changeOnSelect | Change value on each selection if set to true, see above demo for details | boolean | false | | +| className | The additional css class | string | - | | | classNames | Semantic DOM class | [Record](#semantic-dom) | - | 5.25.0 | +| defaultOpen | Initial visible of cascader popup | boolean | - | | | defaultValue | Initial selected value | string\[] \| number\[] | \[] | | | disabled | Whether disabled select | boolean | false | | | displayRender | The render function of displaying selected options | (label, selectedOptions) => ReactNode | label => label.join(`/`) | `multiple`: 4.18.0 | diff --git a/components/cascader/index.zh-CN.md b/components/cascader/index.zh-CN.md index de3a0f5829..f9bc8b5e9a 100644 --- a/components/cascader/index.zh-CN.md +++ b/components/cascader/index.zh-CN.md @@ -10,7 +10,7 @@ demo: cols: 2 --- -## 何时使用 +## 何时使用 {#when-to-use} - 需要从一组相关联的数据集合进行选择,例如省市区,公司层级,事物分类等。 - 从一个较大的数据集合中进行选择时,用多级分类进行分隔,方便选择。 @@ -55,7 +55,9 @@ demo: | autoClearSearchValue | 是否在选中项后清空搜索框,只在 `multiple` 为 `true` 时有效 | boolean | true | 5.9.0 | | autoFocus | 自动获取焦点 | boolean | false | | | changeOnSelect | 单选时生效(multiple 下始终都可以选择),点选每级菜单选项值都会发生变化。 | boolean | false | | +| className | 自定义类名 | string | - | | | classNames | 语义化结构 class | [Record](#semantic-dom) | - | 5.25.0 | +| defaultOpen | 是否默认展示浮层 | boolean | - | | | defaultValue | 默认的选中项 | string\[] \| number\[] | \[] | | | disabled | 禁用 | boolean | false | | | displayRender | 选择后展示的渲染函数 | (label, selectedOptions) => ReactNode | label => label.join(`/`) | `multiple`: 4.18.0 | diff --git a/components/checkbox/index.zh-CN.md b/components/checkbox/index.zh-CN.md index a46363ccf5..668c513af9 100644 --- a/components/checkbox/index.zh-CN.md +++ b/components/checkbox/index.zh-CN.md @@ -10,7 +10,7 @@ demo: cols: 2 --- -## 何时使用 +## 何时使用 {#when-to-use} - 在一组可选项中进行多项选择时; - 单独使用可以表示两种状态之间的切换,和 `switch` 类似。区别在于切换 `switch` 会直接触发状态改变,而 `checkbox` 一般用于状态标记,需要和提交操作配合。 diff --git a/components/collapse/index.zh-CN.md b/components/collapse/index.zh-CN.md index 05ae793ba2..8835d4374e 100644 --- a/components/collapse/index.zh-CN.md +++ b/components/collapse/index.zh-CN.md @@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*B7HKR5OBe8gAAAAAAA coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*sir-TK0HkWcAAAAAAAAAAAAADrJ8AQ/original --- -## 何时使用 +## 何时使用 {#when-to-use} - 对复杂区域进行分组和隐藏,保持页面的整洁。 - `手风琴` 是一种特殊的折叠面板,只允许单个内容区域展开。 diff --git a/components/color-picker/index.zh-CN.md b/components/color-picker/index.zh-CN.md index 694b1db41b..c373988ea5 100644 --- a/components/color-picker/index.zh-CN.md +++ b/components/color-picker/index.zh-CN.md @@ -12,7 +12,7 @@ group: title: 数据录入 --- -## 何时使用 +## 何时使用 {#when-to-use} 当用户需要自定义颜色选择的时候使用。 diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md index c535ca9426..98ae3a9b23 100644 --- a/components/date-picker/index.en-US.md +++ b/components/date-picker/index.en-US.md @@ -97,6 +97,7 @@ The following APIs are shared by DatePicker, RangePicker. | dateRender | Custom rendering function for date cells, >= 5.4.0 use `cellRender` instead. | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | < 5.4.0 | | cellRender | Custom rendering function for picker cells | (current: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 | | components | Custom panels | Record | - | 5.14.0 | +| defaultOpen | Initial open state of picker | boolean | - | | | disabled | Determine whether the DatePicker is disabled | boolean | false | | | disabledDate | Specify the date that cannot be selected | (currentDate: dayjs, info: { from?: dayjs, type: Picker }) => boolean | - | `info`: 5.14.0 | | format | To set the date format, support multi-format matching when it is an array, display the first one shall prevail. refer to [dayjs#format](https://day.js.org/docs/en/display/format). for example: [Custom Format](#date-picker-demo-format) | [formatType](#formattype) | [rc-picker](https://github.com/react-component/picker/blob/f512f18ed59d6791280d1c3d7d37abbb9867eb0b/src/utils/uiUtil.ts#L155-L177) | | diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index 03d51f969d..87affb963e 100644 --- a/components/date-picker/index.zh-CN.md +++ b/components/date-picker/index.zh-CN.md @@ -10,7 +10,7 @@ demo: cols: 2 --- -## 何时使用 +## 何时使用 {#when-to-use} 当用户需要输入一个日期,可以点击标准输入框,弹出日期面板进行选择。 @@ -98,6 +98,7 @@ dayjs.locale('zh-cn'); | dateRender | 自定义日期单元格的内容,5.4.0 起用 `cellRender` 代替 | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | < 5.4.0 | | cellRender | 自定义单元格的内容 | (current: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 | | components | 自定义面板 | Record | - | 5.14.0 | +| defaultOpen | 是否默认展开控制弹层 | boolean | - | | | disabled | 禁用 | boolean | false | | | disabledDate | 不可选择的日期 | (currentDate: dayjs, info: { from?: dayjs, type: Picker }) => boolean | - | `info`: 5.14.0 | | format | 设置日期格式,为数组时支持多格式匹配,展示以第一个为准。配置参考 [dayjs#format](https://day.js.org/docs/zh-CN/display/format#%E6%94%AF%E6%8C%81%E7%9A%84%E6%A0%BC%E5%BC%8F%E5%8C%96%E5%8D%A0%E4%BD%8D%E7%AC%A6%E5%88%97%E8%A1%A8)。示例:[自定义格式](#date-picker-demo-format) | [formatType](#formattype) | [rc-picker](https://github.com/react-component/picker/blob/f512f18ed59d6791280d1c3d7d37abbb9867eb0b/src/utils/uiUtil.ts#L155-L177) | | diff --git a/components/descriptions/index.zh-CN.md b/components/descriptions/index.zh-CN.md index a82550ecb0..9053086b92 100644 --- a/components/descriptions/index.zh-CN.md +++ b/components/descriptions/index.zh-CN.md @@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*fHdlTpif6XQAAAAAAA coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*d27AQJrowGAAAAAAAAAAAAAADrJ8AQ/original --- -## 何时使用 +## 何时使用 {#when-to-use} 常见于详情页的信息展示。 diff --git a/components/divider/index.zh-CN.md b/components/divider/index.zh-CN.md index a397ad835c..303d9ea983 100644 --- a/components/divider/index.zh-CN.md +++ b/components/divider/index.zh-CN.md @@ -12,7 +12,7 @@ group: order: 2 --- -## 何时使用 +## 何时使用 {#when-to-use} - 对不同章节的文本段落进行分割。 - 对行内文字/链接进行分割,例如表格的操作列。 diff --git a/components/drawer/index.zh-CN.md b/components/drawer/index.zh-CN.md index a78d23a2c7..5e9a77f475 100644 --- a/components/drawer/index.zh-CN.md +++ b/components/drawer/index.zh-CN.md @@ -10,7 +10,7 @@ demo: cols: 2 --- -## 何时使用 +## 何时使用 {#when-to-use} 抽屉从父窗体边缘滑入,覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务,操作完成后,可以平滑地回到原任务。 diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md index 0661c50d59..4ce78659d7 100644 --- a/components/dropdown/index.zh-CN.md +++ b/components/dropdown/index.zh-CN.md @@ -10,7 +10,7 @@ demo: cols: 2 --- -## 何时使用 +## 何时使用 {#when-to-use} 当页面上的操作命令过多时,用此组件可以收纳操作元素。点击或移入触点,会出现一个下拉菜单。可在列表中进行选择,并执行相应的命令。 diff --git a/components/empty/index.zh-CN.md b/components/empty/index.zh-CN.md index 16c162b433..29093cdfc7 100644 --- a/components/empty/index.zh-CN.md +++ b/components/empty/index.zh-CN.md @@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ZdiZSLzEV0wAAAAAAA coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*obM7S5lIxeMAAAAAAAAAAAAADrJ8AQ/original --- -## 何时使用 +## 何时使用 {#when-to-use} - 当目前没有数据时,用于显式的用户提示。 - 初始化场景时的引导创建流程。 diff --git a/components/flex/index.zh-CN.md b/components/flex/index.zh-CN.md index a657a637df..5d52c4b4a5 100644 --- a/components/flex/index.zh-CN.md +++ b/components/flex/index.zh-CN.md @@ -9,7 +9,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAA tag: 5.10.0 --- -## 何时使用 +## 何时使用 {#when-to-use} - 适合设置元素之间的间距。 - 适合设置各种水平、垂直对齐方式。 diff --git a/components/float-button/index.zh-CN.md b/components/float-button/index.zh-CN.md index 069226bbdc..39a2f55b9c 100644 --- a/components/float-button/index.zh-CN.md +++ b/components/float-button/index.zh-CN.md @@ -11,7 +11,7 @@ demo: tag: 5.0.0 --- -## 何时使用 +## 何时使用 {#when-to-use} - 用于网站上的全局功能; - 无论浏览到何处都可以看见的按钮。 diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md index b044173f97..6e15eb0dcd 100644 --- a/components/form/index.en-US.md +++ b/components/form/index.en-US.md @@ -7,7 +7,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-lcdS5Qm1bsAAAAAAA coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAAAAAAAAAAAADrJ8AQ/original --- -## When to use +## When to use {#when-to-use} - When you need to create an instance or collect information. - When you need to validate fields in certain rules. diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index 929aed7332..879919a5a4 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-lcdS5Qm1bsAAAAAAA coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAAAAAAAAAAAADrJ8AQ/original --- -## 何时使用 +## 何时使用 {#when-to-use} - 用于创建一个实体或收集信息。 - 需要对输入的数据类型进行校验时。 diff --git a/components/image/index.zh-CN.md b/components/image/index.zh-CN.md index 9ab6f69424..fe4c076bfc 100644 --- a/components/image/index.zh-CN.md +++ b/components/image/index.zh-CN.md @@ -9,7 +9,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*FbOCS6aFMeUAAAAAAA coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAAAAAAAAAAAADrJ8AQ/original --- -## 何时使用 +## 何时使用 {#when-to-use} - 需要展示图片时使用。 - 加载显示大图或加载失败时容错处理。 diff --git a/components/input-number/index.zh-CN.md b/components/input-number/index.zh-CN.md index e7f5055817..932d74e683 100644 --- a/components/input-number/index.zh-CN.md +++ b/components/input-number/index.zh-CN.md @@ -10,7 +10,7 @@ demo: cols: 2 --- -## 何时使用 +## 何时使用 {#when-to-use} 当需要获取标准数值时。 diff --git a/components/input/index.zh-CN.md b/components/input/index.zh-CN.md index 9e8a40f42c..0352a91c87 100644 --- a/components/input/index.zh-CN.md +++ b/components/input/index.zh-CN.md @@ -10,7 +10,7 @@ demo: cols: 2 --- -## 何时使用 +## 何时使用 {#when-to-use} - 需要用户输入表单域内容时。 - 提供组合型输入框,带搜索的输入框,还可以进行大小选择。 diff --git a/components/list/index.zh-CN.md b/components/list/index.zh-CN.md index 4a83d5fb0c..8cc59032ac 100644 --- a/components/list/index.zh-CN.md +++ b/components/list/index.zh-CN.md @@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*EYuhSpw1iSwAAAAAAA coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tBzwQ7raKX8AAAAAAAAAAAAADrJ8AQ/original --- -## 何时使用 +## 何时使用 {#when-to-use} 最基础的列表展示,可承载文字、列表、图片、段落,常用于后台数据展示页面。 diff --git a/components/mentions/index.zh-CN.md b/components/mentions/index.zh-CN.md index 9d455efe31..2c7c716100 100644 --- a/components/mentions/index.zh-CN.md +++ b/components/mentions/index.zh-CN.md @@ -10,7 +10,7 @@ demo: cols: 2 --- -## 何时使用 +## 何时使用 {#when-to-use} 用于在输入中提及某人或某事,常用于发布、聊天或评论功能。 diff --git a/components/menu/index.zh-CN.md b/components/menu/index.zh-CN.md index 0a6b1cb3a6..3ce9457aa3 100644 --- a/components/menu/index.zh-CN.md +++ b/components/menu/index.zh-CN.md @@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*KeyQQL5iKkkAAAAAAA coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Vn4XSqJFAxcAAAAAAAAAAAAADrJ8AQ/original --- -## 何时使用 +## 何时使用 {#when-to-use} 导航菜单是一个网站的灵魂,用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航,顶部导航提供全局性的类目和功能,侧边导航提供多级结构来收纳和排列网站架构。 diff --git a/components/message/index.zh-CN.md b/components/message/index.zh-CN.md index fa8a7d25b8..f12d23c32c 100644 --- a/components/message/index.zh-CN.md +++ b/components/message/index.zh-CN.md @@ -11,7 +11,7 @@ demo: cols: 2 --- -## 何时使用 +## 何时使用 {#when-to-use} - 可提供成功、警告和错误等反馈信息。 - 顶部居中显示并自动消失,是一种不打断用户操作的轻量级提示方式。 diff --git a/components/modal/index.en-US.md b/components/modal/index.en-US.md index bd04d5c6d5..112ec1b268 100644 --- a/components/modal/index.en-US.md +++ b/components/modal/index.en-US.md @@ -58,7 +58,7 @@ Common props ref:[Common props](/docs/react/common-props) | confirmLoading | Whether to apply loading visual effect for OK button or not | boolean | false | | | destroyOnClose | Whether to unmount child components on onClose | boolean | false | | | focusTriggerAfterClose | Whether need to focus trigger element after dialog is closed | boolean | true | 4.9.0 | -| footer | Footer content, set as `footer={null}` when you don't need default buttons | React.ReactNode \| ((params:[footerRenderParams](/components/modal#footerrenderparams))=> React.ReactNode) | (OK and Cancel buttons) | renderFunction: 5.9.0 | +| footer | Footer content, set as `footer={null}` when you don't need default buttons | ReactNode \| (originNode: ReactNode, extra: { OkBtn: React.FC, CancelBtn: React.FC }) => ReactNode | (OK and Cancel buttons) | renderFunction: 5.9.0 | | forceRender | Force render Modal | boolean | false | | | getContainer | The mounted node for Modal but still display at fullscreen | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body | | | keyboard | Whether support press esc to close | boolean | true | | @@ -108,7 +108,7 @@ The items listed above are all functions, expecting a settings object as paramet | closable | Whether a close (x) button is visible on top right of the confirm dialog or not | boolean | false | 4.9.0 | | closeIcon | Custom close icon | ReactNode | undefined | 4.9.0 | | content | Content | ReactNode | - | | -| footer | Footer content, set as `footer: null` when you don't need default buttons | React.ReactNode \| ((params:[footerRenderParams](/components/modal#footerrenderparams))=> React.ReactNode) | - | renderFunction: 5.9.0 | +| footer | Footer content, set as `footer: null` when you don't need default buttons | ReactNode \| (originNode: ReactNode, extra: { OkBtn: React.FC, CancelBtn: React.FC }) => ReactNode | - | renderFunction: 5.9.0 | | getContainer | Return the mount node for Modal | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body | | | icon | Custom icon | ReactNode | <ExclamationCircleFilled /> | | | keyboard | Whether support press esc to close | boolean | true | | @@ -184,14 +184,6 @@ return
{contextHolder}
; const confirmed = await modal.confirm({ ... }); ``` -#### footerRenderParams - - -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| originNode | default node | React.ReactNode | - | -| extra | extended options | { OkBtn: FC; CancelBtn: FC } | - | - ## Semantic DOM diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md index 7f2446217e..0a8c3873e6 100644 --- a/components/modal/index.zh-CN.md +++ b/components/modal/index.zh-CN.md @@ -10,7 +10,7 @@ demo: cols: 2 --- -## 何时使用 +## 何时使用 {#when-to-use} 需要用户处理事务,又不希望跳转页面以致打断工作流程时,可以使用 `Modal` 在当前页面正中打开一个浮层,承载相应的操作。 @@ -59,7 +59,7 @@ demo: | confirmLoading | 确定按钮 loading | boolean | false | | | destroyOnClose | 关闭时销毁 Modal 里的子元素 | boolean | false | | | focusTriggerAfterClose | 对话框关闭后是否需要聚焦触发元素 | boolean | true | 4.9.0 | -| footer | 底部内容,当不需要默认底部按钮时,可以设为 `footer={null}` | React.ReactNode \| ((params:[footerRenderParams](/components/modal-cn#footerrenderparams))=> React.ReactNode) | (确定取消按钮) | renderFunction: 5.9.0 | +| footer | 底部内容,当不需要默认底部按钮时,可以设为 `footer={null}` | ReactNode \| (originNode: ReactNode, extra: { OkBtn: React.FC, CancelBtn: React.FC }) => ReactNode | (确定取消按钮) | renderFunction: 5.9.0 | | forceRender | 强制渲染 Modal | boolean | false | | | getContainer | 指定 Modal 挂载的节点,但依旧为全屏展示,`false` 为挂载在当前位置 | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body | | | keyboard | 是否支持键盘 esc 关闭 | boolean | true | | @@ -109,7 +109,7 @@ demo: | closable | 是否显示右上角的关闭按钮 | boolean | false | 4.9.0 | | closeIcon | 自定义关闭图标 | ReactNode | undefined | 4.9.0 | | content | 内容 | ReactNode | - | | -| footer | 底部内容,当不需要默认底部按钮时,可以设为 `footer: null` | React.ReactNode \| ((params:[footerRenderParams](/components/modal-cn#footerrenderparams))=> React.ReactNode) | - | renderFunction: 5.9.0 | +| footer | 底部内容,当不需要默认底部按钮时,可以设为 `footer: null` | ReactNode \| (originNode: ReactNode, extra: { OkBtn: React.FC, CancelBtn: React.FC }) => ReactNode | - | renderFunction: 5.9.0 | | getContainer | 指定 Modal 挂载的 HTML 节点,false 为挂载在当前 dom | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body | | | icon | 自定义图标 | ReactNode | <ExclamationCircleFilled /> | | | keyboard | 是否支持键盘 esc 关闭 | boolean | true | | @@ -185,14 +185,6 @@ return
{contextHolder}
; const confirmed = await modal.confirm({ ... }); ``` -#### footerRenderParams - - -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| originNode | 默认节点 | React.ReactNode | - | -| extra | 扩展选项 | { OkBtn: FC; CancelBtn: FC } | - | - ## Semantic DOM diff --git a/components/notification/index.zh-CN.md b/components/notification/index.zh-CN.md index d469a3f632..33c85cac18 100644 --- a/components/notification/index.zh-CN.md +++ b/components/notification/index.zh-CN.md @@ -11,7 +11,7 @@ demo: cols: 2 --- -## 何时使用 +## 何时使用 {#when-to-use} 在系统四个角显示通知提醒信息。经常用于以下情况: diff --git a/components/pagination/index.zh-CN.md b/components/pagination/index.zh-CN.md index 130b58a21e..a17d88a25a 100644 --- a/components/pagination/index.zh-CN.md +++ b/components/pagination/index.zh-CN.md @@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8y_iTJGY_aUAAAAAAA coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WM86SrBC8TsAAAAAAAAAAAAADrJ8AQ/original --- -## 何时使用 +## 何时使用 {#when-to-use} - 当加载/渲染所有数据将花费很多时间时; - 可切换页码浏览数据。 diff --git a/components/popconfirm/index.zh-CN.md b/components/popconfirm/index.zh-CN.md index fad688b07a..e1172c76c3 100644 --- a/components/popconfirm/index.zh-CN.md +++ b/components/popconfirm/index.zh-CN.md @@ -10,7 +10,7 @@ demo: cols: 2 --- -## 何时使用 +## 何时使用 {#when-to-use} 目标元素的操作需要用户进一步的确认时,在目标元素附近弹出浮层提示,询问用户。 diff --git a/components/popover/index.zh-CN.md b/components/popover/index.zh-CN.md index b4343f11f2..b3cb276302 100644 --- a/components/popover/index.zh-CN.md +++ b/components/popover/index.zh-CN.md @@ -10,7 +10,7 @@ demo: cols: 2 --- -## 何时使用 +## 何时使用 {#when-to-use} 当目标元素有进一步的描述和相关操作时,可以收纳到卡片中,根据用户的操作行为进行展现。 diff --git a/components/progress/index.zh-CN.md b/components/progress/index.zh-CN.md index d5b9c4b616..6c271df7bf 100644 --- a/components/progress/index.zh-CN.md +++ b/components/progress/index.zh-CN.md @@ -10,7 +10,7 @@ demo: cols: 2 --- -## 何时使用 +## 何时使用 {#when-to-use} 在操作需要较长时间才能完成时,为用户显示该操作的当前进度和状态。 diff --git a/components/qr-code/index.zh-CN.md b/components/qr-code/index.zh-CN.md index dc88f9a88c..9d7ad41337 100644 --- a/components/qr-code/index.zh-CN.md +++ b/components/qr-code/index.zh-CN.md @@ -13,7 +13,7 @@ group: tag: 5.1.0 --- -## 何时使用 +## 何时使用 {#when-to-use} 当需要将文本转换成为二维码时使用。 diff --git a/components/radio/index.zh-CN.md b/components/radio/index.zh-CN.md index a63cfc725a..97411fe1fc 100644 --- a/components/radio/index.zh-CN.md +++ b/components/radio/index.zh-CN.md @@ -10,7 +10,7 @@ demo: cols: 2 --- -## 何时使用 +## 何时使用 {#when-to-use} - 用于在多个备选项中选中单个状态。 - 和 Select 的区别是,Radio 所有选项默认可见,方便用户在比较中选择,因此选项不宜过多。 diff --git a/components/rate/index.zh-CN.md b/components/rate/index.zh-CN.md index 25cabeb297..0955b0f3bc 100644 --- a/components/rate/index.zh-CN.md +++ b/components/rate/index.zh-CN.md @@ -10,7 +10,7 @@ demo: cols: 2 --- -## 何时使用 +## 何时使用 {#when-to-use} - 对评价进行展示。 - 对事物进行快速的评级操作。 diff --git a/components/result/index.zh-CN.md b/components/result/index.zh-CN.md index 641a0eca5c..0c8f1387cf 100644 --- a/components/result/index.zh-CN.md +++ b/components/result/index.zh-CN.md @@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-e2IRroDJyEAAAAAAA coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-0kxQrbHx2kAAAAAAAAAAAAADrJ8AQ/original --- -## 何时使用 +## 何时使用 {#when-to-use} 当有重要操作需告知用户处理结果,且反馈内容较为复杂时使用。 diff --git a/components/segmented/index.zh-CN.md b/components/segmented/index.zh-CN.md index ca8dbf8fe8..7c25fcff3c 100644 --- a/components/segmented/index.zh-CN.md +++ b/components/segmented/index.zh-CN.md @@ -12,7 +12,7 @@ demo: 自 `antd@4.20.0` 版本开始提供该组件。 -## 何时使用 +## 何时使用 {#when-to-use} - 用于展示多个选项并允许用户选择其中单个选项; - 当切换选中选项时,关联区域的内容会发生变化。 diff --git a/components/select/demo/_semantic.tsx b/components/select/demo/_semantic.tsx index bb46a1d828..9bd9f18581 100644 --- a/components/select/demo/_semantic.tsx +++ b/components/select/demo/_semantic.tsx @@ -7,6 +7,7 @@ const App: React.FC = () => { return ( ](#semantic-dom) | - | 5.25.0 | +| defaultOpen | Initial open state of dropdown | boolean | - | | | defaultValue | To set the initial selected treeNode(s) | string \| string\[] | - | | | disabled | Disabled or not | boolean | false | | | ~~popupClassName~~ | The className of dropdown menu, use `classNames.popup` instead | string | - | 4.23.0 | @@ -60,6 +61,7 @@ Common props ref:[Common props](/docs/react/common-props) | maxTagTextLength | Max tag text length to show | number | - | | | multiple | Support multiple or not, will be `true` when enable `treeCheckable` | boolean | false | | | notFoundContent | Specify content to show when no result matches | ReactNode | `Not Found` | | +| open | Controlled open state of dropdown | boolean | - | | | placeholder | Placeholder of the select input | string | - | | | placement | The position where the selection box pops up | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft | | | prefix | The custom prefix | ReactNode | - | 5.22.0 | diff --git a/components/tree-select/index.zh-CN.md b/components/tree-select/index.zh-CN.md index 613bf593ea..6f73792d12 100644 --- a/components/tree-select/index.zh-CN.md +++ b/components/tree-select/index.zh-CN.md @@ -10,7 +10,7 @@ demo: cols: 2 --- -## 何时使用 +## 何时使用 {#when-to-use} 类似 Select 的选择控件,可选择的数据结构是一个树形结构时,可以使用 TreeSelect,例如公司层级、学科系统、分类目录等等。 @@ -42,6 +42,7 @@ demo: | allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | false | 5.8.0: 支持对象形式 | | autoClearSearchValue | 当多选模式下值被选择,自动清空搜索框 | boolean | true | | | classNames | 语义化结构 class | [Record](#semantic-dom) | - | 5.25.0 | +| defaultOpen | 是否默认展开下拉菜单 | boolean | - | | | defaultValue | 指定默认选中的条目 | string \| string\[] | - | | | disabled | 是否禁用 | boolean | false | | | ~~popupClassName~~ | 下拉菜单的 className 属性,使用 `classNames.popup` 替换 | string | - | 4.23.0 | @@ -61,6 +62,7 @@ demo: | maxTagTextLength | 最大显示的 tag 文本长度 | number | - | | | multiple | 支持多选(当设置 treeCheckable 时自动变为 true) | boolean | false | | | notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | `Not Found` | | +| open | 是否展开下拉菜单 | boolean | - | | | placeholder | 选择框默认文字 | string | - | | | placement | 选择框弹出的位置 | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft | | | prefix | 自定义前缀 | ReactNode | - | 5.22.0 | diff --git a/components/tree/index.zh-CN.md b/components/tree/index.zh-CN.md index df9cdb2b86..8d11a47c70 100644 --- a/components/tree/index.zh-CN.md +++ b/components/tree/index.zh-CN.md @@ -10,7 +10,7 @@ demo: cols: 2 --- -## 何时使用 +## 何时使用 {#when-to-use} 文件夹、组织架构、生物分类、国家地区等等,世间万物的大多数结构都是树形结构。使用 `树控件` 可以完整展现其中的层级关系,并具有展开收起选择等交互功能。 diff --git a/components/typography/index.zh-CN.md b/components/typography/index.zh-CN.md index 126e6369d6..b2b80954fb 100644 --- a/components/typography/index.zh-CN.md +++ b/components/typography/index.zh-CN.md @@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*MLt3R6m9huoAAAAAAA coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAAAAAAAAAAAADrJ8AQ/original --- -## 何时使用 +## 何时使用 {#when-to-use} - 当需要展示标题、段落、列表内容时使用,如文章/博客/日志的文本样式。 - 当需要一列基于文本的基础操作时,如拷贝/省略/可编辑。 diff --git a/components/upload/index.zh-CN.md b/components/upload/index.zh-CN.md index 51a6a901a4..9570f16d09 100644 --- a/components/upload/index.zh-CN.md +++ b/components/upload/index.zh-CN.md @@ -10,7 +10,7 @@ demo: cols: 2 --- -## 何时使用 +## 何时使用 {#when-to-use} 上传是将信息(网页、文字、图片、视频等)通过网页或者上传工具发布到远程服务器上的过程。 diff --git a/components/watermark/index.zh-CN.md b/components/watermark/index.zh-CN.md index 110f7c6a10..87c1341348 100644 --- a/components/watermark/index.zh-CN.md +++ b/components/watermark/index.zh-CN.md @@ -11,7 +11,7 @@ demo: tag: 5.1.0 --- -## 何时使用 +## 何时使用 {#when-to-use} - 页面需要添加水印标识版权时使用。 - 适用于防止信息盗用。 diff --git a/eslint.config.mjs b/eslint.config.mjs index a75693c638..eddccc9337 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -65,6 +65,7 @@ export default antfu( 'react/no-forward-ref': 'off', 'react/no-context-provider': 'off', 'react/no-use-context': 'off', + 'react-hooks-extra/no-unnecessary-use-prefix': 'off', }, }, compat.configs['flat/recommended'], diff --git a/package.json b/package.json index 395ce96f7b..f9a9e6f707 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "5.24.5", + "version": "5.24.6", "description": "An enterprise-class UI design language and React components implementation", "license": "MIT", "funding": { @@ -148,7 +148,7 @@ "rc-steps": "~6.0.1", "rc-switch": "~4.1.0", "rc-table": "~7.50.4", - "rc-tabs": "~15.5.1", + "rc-tabs": "~15.5.2", "rc-textarea": "~1.9.0", "rc-tooltip": "~6.4.0", "rc-tree": "~5.13.1", @@ -239,7 +239,7 @@ "cypress-image-diff-html-report": "2.2.0", "dekko": "^0.2.1", "dotenv": "^16.4.5", - "dumi": "~2.4.17", + "dumi": "~2.4.20", "dumi-plugin-color-chunk": "^2.1.0", "env-paths": "^3.0.0", "eslint": "^9.23.0", @@ -251,6 +251,7 @@ "fast-glob": "^3.3.2", "fs-extra": "^11.2.0", "gh-pages": "^6.2.0", + "github-slugger": "^2.0.0", "glob": "^11.0.0", "html2sketch": "^1.0.2", "http-server": "^14.1.1", diff --git a/scripts/__snapshots__/check-site.ts.snap b/scripts/__snapshots__/check-site.ts.snap index fb39511dc1..3480b544d6 100644 --- a/scripts/__snapshots__/check-site.ts.snap +++ b/scripts/__snapshots__/check-site.ts.snap @@ -144,9 +144,9 @@ exports[`site test Component components/message en Page 1`] = `3`; exports[`site test Component components/message zh Page 1`] = `3`; -exports[`site test Component components/modal en Page 1`] = `3`; +exports[`site test Component components/modal en Page 1`] = `2`; -exports[`site test Component components/modal zh Page 1`] = `3`; +exports[`site test Component components/modal zh Page 1`] = `2`; exports[`site test Component components/notification en Page 1`] = `3`; diff --git a/scripts/pre-publish.ts b/scripts/pre-publish.ts index 1afdb00c72..33d26de193 100644 --- a/scripts/pre-publish.ts +++ b/scripts/pre-publish.ts @@ -4,8 +4,9 @@ import { Octokit } from '@octokit/rest'; import AdmZip from 'adm-zip'; import axios from 'axios'; import chalk from 'chalk'; -import Spinnies from 'spinnies'; import dotnev from 'dotenv'; +import Spinnies from 'spinnies'; + import checkRepo from './check-repo'; dotnev.config({ override: true }); @@ -13,13 +14,9 @@ dotnev.config({ override: true }); const { Notification: Notifier } = require('node-notifier'); const simpleGit = require('simple-git'); -const blockStatus = ['failure', 'cancelled', 'timed_out'] as const; - const spinner = { interval: 80, frames: ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'] }; const spinnies = new Spinnies({ spinner }); -const IGNORE_ACTIONS = ['Check Virtual Regression Approval', 'issue-remove-inactive']; - let spinniesId = 0; // `spinnies` 为按条目进度,需要做简单的封装变成接近 `ora` 的形态 @@ -67,27 +64,6 @@ process.on('SIGINT', () => { process.exit(1); }); -const emojify = (status = '') => { - if (!status) { - return ''; - } - const emoji = { - /* status */ - completed: '✅', - queued: '🕒', - in_progress: '⌛', - /* conclusion */ - success: '✅', - failure: '❌', - neutral: '⚪', - cancelled: '❌', - skipped: '⏭️', - timed_out: '⌛', - action_required: '🔴', - }[status]; - return `${emoji || ''} ${(status || '').padEnd(15)}`; -}; - const toMB = (bytes: number) => (bytes / 1024 / 1024).toFixed(2); async function downloadArtifact(msgKey: string, url: string, filepath: string, token?: string) { @@ -144,26 +120,15 @@ const runPrePublish = async () => { showMessage(`开始检查远程分支 ${currentBranch} 的 CI 状态`, true); const failureUrlList: string[] = []; - let { - data: { check_runs }, - } = await octokit.checks.listForRef({ + + const { data } = await octokit.rest.repos.getCombinedStatusForRef({ owner, repo, ref: sha, - filter: 'all', }); - showMessage(`远程分支 CI 状态(${check_runs.length}):`, 'succeed'); - check_runs = check_runs.filter((run) => - IGNORE_ACTIONS.every((action) => !run.name.includes(action)), - ); - check_runs.forEach((run) => { - showMessage(` ${run.name.padEnd(36)} ${emojify(run.status)} ${emojify(run.conclusion || '')}`); - if (blockStatus.some((status) => run.conclusion === status)) { - failureUrlList.push(run.html_url!); - } - }); - const conclusions = check_runs.map((run) => run.conclusion); - if (blockStatus.some((status) => conclusions.includes(status))) { + + showMessage(`远程分支 CI 状态:${data.state}`, 'succeed'); + if (data.state === 'failure') { showMessage(chalk.bgRedBright('远程分支 CI 执行异常,无法继续发布,请尝试修复或重试'), 'fail'); showMessage(` 点此查看状态:https://github.com/${owner}/${repo}/commit/${sha}`); @@ -174,12 +139,18 @@ const runPrePublish = async () => { process.exit(1); } - const statuses = check_runs.map((run) => run.status); - if (check_runs.length < 1 || statuses.includes('queued') || statuses.includes('in_progress')) { + if (data.state === 'pending') { showMessage(chalk.bgRedBright('远程分支 CI 还在执行中,请稍候再试'), 'fail'); showMessage(` 点此查看状态:https://github.com/${owner}/${repo}/commit/${sha}`); process.exit(1); } + + if (data.state !== 'success') { + showMessage(chalk.bgRedBright('远程分支 CI 状态异常'), 'fail'); + showMessage(` 点此查看状态:https://github.com/${owner}/${repo}/commit/${sha}`); + process.exit(1); + } + showMessage(`远程分支 CI 已通过`, 'succeed'); // clean up await runScript({ event: 'clean', path: '.', stdio: 'inherit' });