diff --git a/.dumi/theme/common/styles/Demo.tsx b/.dumi/theme/common/styles/Demo.tsx index 1e3fb71b47..44ebeb6d47 100644 --- a/.dumi/theme/common/styles/Demo.tsx +++ b/.dumi/theme/common/styles/Demo.tsx @@ -357,9 +357,9 @@ const GlobalDemoStyles: React.FC = () => { } ${antCls}-row-rtl { - #components-tooltip-demo-placement, - #components-popover-demo-placement, - #components-popconfirm-demo-placement { + #tooltip-demo-placement, + #popover-demo-placement, + #popconfirm-demo-placement { .code-box-demo { direction: ltr; } diff --git a/.dumi/theme/common/styles/Markdown.tsx b/.dumi/theme/common/styles/Markdown.tsx index fd9aea1d30..633bf2b974 100644 --- a/.dumi/theme/common/styles/Markdown.tsx +++ b/.dumi/theme/common/styles/Markdown.tsx @@ -389,7 +389,7 @@ const GlobalStyle: React.FC = () => { } .grid-demo, - [id^='components-grid-demo-'] { + [id^='grid-demo-'] { ${antCls}-row > div, .code-box-demo ${antCls}-row > div { min-height: 30px; @@ -467,8 +467,8 @@ const GlobalStyle: React.FC = () => { } } - [id='components-grid-demo-playground'], - [id='components-grid-demo-gutter'] { + [id='grid-demo-playground'], + [id='grid-demo-gutter'] { > .code-box-demo ${antCls}-row > div { margin-top: 0; margin-bottom: 0; diff --git a/.dumi/theme/layouts/GlobalLayout.tsx b/.dumi/theme/layouts/GlobalLayout.tsx index dc9ef040d5..3b7da72e52 100644 --- a/.dumi/theme/layouts/GlobalLayout.tsx +++ b/.dumi/theme/layouts/GlobalLayout.tsx @@ -35,6 +35,16 @@ export const ANT_DESIGN_NOT_SHOW_BANNER = 'ANT_DESIGN_NOT_SHOW_BANNER'; // (global as any).styleCache = styleCache; // } +// Compatible with old anchors +if (typeof window !== 'undefined') { + const hashId = location.hash.slice(1); + if (hashId.startsWith('components-')) { + if (!document.querySelector(`#${hashId}`)) { + location.hash = `#${hashId.replace(/^components-/, '')}`; + } + } +} + const getAlgorithm = (themes: ThemeName[] = []) => themes .map((theme) => { diff --git a/components/alert/design/behavior-pattern.tsx b/components/alert/design/behavior-pattern.tsx index 631ea06304..98bc6d80b7 100644 --- a/components/alert/design/behavior-pattern.tsx +++ b/components/alert/design/behavior-pattern.tsx @@ -16,12 +16,12 @@ const BehaviorPattern: React.FC = () => ( { id: '707000085', label: '了解提示内容', - link: 'components-alert-index-tab-design-demo-content', + link: 'alert-index-tab-design-demo-content', }, { id: '707000086', label: '了解提示类型', - link: 'components-alert-index-tab-design-demo-type', + link: 'alert-index-tab-design-demo-type', }, ], }, @@ -29,7 +29,7 @@ const BehaviorPattern: React.FC = () => ( id: '200000005', label: '针对提示进行操作', targetType: 'extension', - link: 'components-alert-index-tab-design-demo-action', + link: 'alert-index-tab-design-demo-action', }, ], }} diff --git a/components/alert/index.ts b/components/alert/index.tsx similarity index 100% rename from components/alert/index.ts rename to components/alert/index.tsx diff --git a/components/anchor/__tests__/Anchor.test.tsx b/components/anchor/__tests__/Anchor.test.tsx index 760bf21b67..ab584d7f18 100644 --- a/components/anchor/__tests__/Anchor.test.tsx +++ b/components/anchor/__tests__/Anchor.test.tsx @@ -67,12 +67,12 @@ describe('Anchor Render', () => { items={[ { key: '1', - href: '#components-anchor-demo-basic', + href: '#anchor-demo-basic', title: 'Item Basic Demo', }, { key: '2', - href: '#components-anchor-demo-static', + href: '#anchor-demo-static', title: 'Static demo', }, { @@ -101,8 +101,8 @@ describe('Anchor Render', () => { const linkTitles = Array.from(container.querySelector('.ant-anchor')?.childNodes!).map((n) => (n as HTMLElement).querySelector('.ant-anchor-link-title'), ); - expect((linkTitles[1] as HTMLAnchorElement).href).toContain('#components-anchor-demo-basic'); - expect((linkTitles[2] as HTMLAnchorElement).href).toContain('#components-anchor-demo-static'); + expect((linkTitles[1] as HTMLAnchorElement).href).toContain('#anchor-demo-basic'); + expect((linkTitles[2] as HTMLAnchorElement).href).toContain('#anchor-demo-static'); expect((linkTitles[3] as HTMLAnchorElement).href).toContain('#api'); expect( ( @@ -127,12 +127,12 @@ describe('Anchor Render', () => { items={[ { key: '1', - href: '#components-anchor-demo-basic', + href: '#anchor-demo-basic', title: 'Item Basic Demo', }, { key: '2', - href: '#components-anchor-demo-static', + href: '#anchor-demo-static', title: 'Static demo', }, { @@ -147,8 +147,8 @@ describe('Anchor Render', () => { const linkTitles = Array.from(container.querySelector('.ant-anchor')?.childNodes!).map((n) => (n as HTMLElement).querySelector('.ant-anchor-link-title'), ); - expect((linkTitles[1] as HTMLAnchorElement).href).toContain('#components-anchor-demo-basic'); - expect((linkTitles[2] as HTMLAnchorElement).href).toContain('#components-anchor-demo-static'); + expect((linkTitles[1] as HTMLAnchorElement).href).toContain('#anchor-demo-basic'); + expect((linkTitles[2] as HTMLAnchorElement).href).toContain('#anchor-demo-static'); expect((linkTitles[3] as HTMLAnchorElement).href).toContain('#api'); expect(asFragment().firstChild).toMatchSnapshot(); }); @@ -159,7 +159,7 @@ describe('Anchor Render', () => { items={[ { key: '1', - href: '#components-anchor-demo-basic', + href: '#anchor-demo-basic', title: 'Item Basic Demo', }, ]} @@ -170,7 +170,7 @@ describe('Anchor Render', () => { expect(container.querySelectorAll('.ant-anchor .ant-anchor-link').length).toBe(1); expect( (container.querySelector('.ant-anchor .ant-anchor-link-title') as HTMLAnchorElement).href, - ).toContain('#components-anchor-demo-basic'); + ).toContain('#anchor-demo-basic'); expect(asFragment().firstChild).toMatchSnapshot(); }); @@ -694,12 +694,12 @@ describe('Anchor Render', () => { items={[ { key: '1', - href: '#components-anchor-demo-basic', + href: '#anchor-demo-basic', title: 'Item Basic Demo', }, { key: '2', - href: '#components-anchor-demo-static', + href: '#anchor-demo-static', title: 'Static demo', }, { @@ -725,12 +725,12 @@ describe('Anchor Render', () => { items={[ { key: '1', - href: '#components-anchor-demo-basic', + href: '#anchor-demo-basic', title: 'Item Basic Demo', }, { key: '2', - href: '#components-anchor-demo-static', + href: '#anchor-demo-static', title: 'Static demo', }, { @@ -759,8 +759,8 @@ describe('Anchor Render', () => { it('nested children via jsx should be filtered out when direction is horizontal', () => { const { container } = render( - - + + @@ -904,12 +904,12 @@ describe('Anchor Render', () => { items={[ { key: '1', - href: '#components-anchor-demo-basic', + href: '#anchor-demo-basic', title: 'Item Basic Demo', }, { key: '2', - href: '#components-anchor-demo-static', + href: '#anchor-demo-static', title: 'Static demo', }, { @@ -935,8 +935,8 @@ describe('Anchor Render', () => { it('deprecated jsx style', () => { render( - - + + , ); expect(errSpy).toHaveBeenCalledWith( @@ -947,8 +947,8 @@ describe('Anchor Render', () => { it('deprecated jsx style for direction#vertical', () => { render( - - + + , ); expect(errSpy).toHaveBeenCalledWith( diff --git a/components/anchor/__tests__/__snapshots__/Anchor.test.tsx.snap b/components/anchor/__tests__/__snapshots__/Anchor.test.tsx.snap index aa6da33ae7..44b7d8b28f 100644 --- a/components/anchor/__tests__/__snapshots__/Anchor.test.tsx.snap +++ b/components/anchor/__tests__/__snapshots__/Anchor.test.tsx.snap @@ -20,7 +20,7 @@ exports[`Anchor Render render items and ignore jsx children 1`] = ` > Item Basic Demo @@ -52,7 +52,7 @@ exports[`Anchor Render renders items correctly 1`] = ` > Item Basic Demo @@ -63,7 +63,7 @@ exports[`Anchor Render renders items correctly 1`] = ` > Static demo @@ -128,7 +128,7 @@ exports[`Anchor Render renders items correctly#horizontal 1`] = ` > Item Basic Demo @@ -139,7 +139,7 @@ exports[`Anchor Render renders items correctly#horizontal 1`] = ` > Static demo diff --git a/components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap index f51fde5aca..01f64b906c 100644 --- a/components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -179,7 +179,7 @@ exports[`renders components/anchor/demo/customizeHighlight.tsx extend context co > Basic demo @@ -190,7 +190,7 @@ exports[`renders components/anchor/demo/customizeHighlight.tsx extend context co > Static demo @@ -328,7 +328,7 @@ exports[`renders components/anchor/demo/legacy-anchor.tsx extend context correct > Basic demo @@ -339,7 +339,7 @@ exports[`renders components/anchor/demo/legacy-anchor.tsx extend context correct > Static demo @@ -404,7 +404,7 @@ exports[`renders components/anchor/demo/onChange.tsx extend context correctly 1` > Basic demo @@ -415,7 +415,7 @@ exports[`renders components/anchor/demo/onChange.tsx extend context correctly 1` > Static demo @@ -476,7 +476,7 @@ exports[`renders components/anchor/demo/onClick.tsx extend context correctly 1`] > Basic demo @@ -487,7 +487,7 @@ exports[`renders components/anchor/demo/onClick.tsx extend context correctly 1`] > Static demo @@ -629,7 +629,7 @@ exports[`renders components/anchor/demo/static.tsx extend context correctly 1`] > Basic demo @@ -640,7 +640,7 @@ exports[`renders components/anchor/demo/static.tsx extend context correctly 1`] > Static demo diff --git a/components/anchor/__tests__/__snapshots__/demo.test.tsx.snap b/components/anchor/__tests__/__snapshots__/demo.test.tsx.snap index d388bea819..33362c6d36 100644 --- a/components/anchor/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/anchor/__tests__/__snapshots__/demo.test.tsx.snap @@ -172,7 +172,7 @@ exports[`renders components/anchor/demo/customizeHighlight.tsx correctly 1`] = ` > Basic demo @@ -183,7 +183,7 @@ exports[`renders components/anchor/demo/customizeHighlight.tsx correctly 1`] = ` > Static demo @@ -316,7 +316,7 @@ exports[`renders components/anchor/demo/legacy-anchor.tsx correctly 1`] = ` > Basic demo @@ -327,7 +327,7 @@ exports[`renders components/anchor/demo/legacy-anchor.tsx correctly 1`] = ` > Static demo @@ -386,7 +386,7 @@ exports[`renders components/anchor/demo/onChange.tsx correctly 1`] = ` > Basic demo @@ -397,7 +397,7 @@ exports[`renders components/anchor/demo/onChange.tsx correctly 1`] = ` > Static demo @@ -456,7 +456,7 @@ exports[`renders components/anchor/demo/onClick.tsx correctly 1`] = ` > Basic demo @@ -467,7 +467,7 @@ exports[`renders components/anchor/demo/onClick.tsx correctly 1`] = ` > Static demo @@ -604,7 +604,7 @@ exports[`renders components/anchor/demo/static.tsx correctly 1`] = ` > Basic demo @@ -615,7 +615,7 @@ exports[`renders components/anchor/demo/static.tsx correctly 1`] = ` > Static demo diff --git a/components/anchor/demo/customizeHighlight.tsx b/components/anchor/demo/customizeHighlight.tsx index fed1ebb932..dc0f4dd03b 100644 --- a/components/anchor/demo/customizeHighlight.tsx +++ b/components/anchor/demo/customizeHighlight.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Anchor } from 'antd'; -const getCurrentAnchor = () => '#components-anchor-demo-static'; +const getCurrentAnchor = () => '#anchor-demo-static'; const App: React.FC = () => ( ( items={[ { key: '1', - href: '#components-anchor-demo-basic', + href: '#anchor-demo-basic', title: 'Basic demo', }, { key: '2', - href: '#components-anchor-demo-static', + href: '#anchor-demo-static', title: 'Static demo', }, { diff --git a/components/anchor/demo/legacy-anchor.tsx b/components/anchor/demo/legacy-anchor.tsx index a5dabdc510..fffb844a2e 100644 --- a/components/anchor/demo/legacy-anchor.tsx +++ b/components/anchor/demo/legacy-anchor.tsx @@ -5,8 +5,8 @@ const { Link } = Anchor; const App: React.FC = () => ( - - + + diff --git a/components/anchor/demo/onChange.tsx b/components/anchor/demo/onChange.tsx index da2f7b587e..0fb21dcf3e 100644 --- a/components/anchor/demo/onChange.tsx +++ b/components/anchor/demo/onChange.tsx @@ -12,12 +12,12 @@ const App: React.FC = () => ( items={[ { key: '1', - href: '#components-anchor-demo-basic', + href: '#anchor-demo-basic', title: 'Basic demo', }, { key: '2', - href: '#components-anchor-demo-static', + href: '#anchor-demo-static', title: 'Static demo', }, { diff --git a/components/anchor/demo/onClick.tsx b/components/anchor/demo/onClick.tsx index 4f9866572d..73bbcbf9c8 100644 --- a/components/anchor/demo/onClick.tsx +++ b/components/anchor/demo/onClick.tsx @@ -19,12 +19,12 @@ const App: React.FC = () => ( items={[ { key: '1', - href: '#components-anchor-demo-basic', + href: '#anchor-demo-basic', title: 'Basic demo', }, { key: '2', - href: '#components-anchor-demo-static', + href: '#anchor-demo-static', title: 'Static demo', }, { diff --git a/components/anchor/demo/static.tsx b/components/anchor/demo/static.tsx index be2d34c053..2be1d61028 100644 --- a/components/anchor/demo/static.tsx +++ b/components/anchor/demo/static.tsx @@ -7,12 +7,12 @@ const App: React.FC = () => ( items={[ { key: '1', - href: '#components-anchor-demo-basic', + href: '#anchor-demo-basic', title: 'Basic demo', }, { key: '2', - href: '#components-anchor-demo-static', + href: '#anchor-demo-static', title: 'Static demo', }, { diff --git a/components/anchor/index.en-US.md b/components/anchor/index.en-US.md index 60e87db3c6..5aaf25f4fb 100644 --- a/components/anchor/index.en-US.md +++ b/components/anchor/index.en-US.md @@ -46,7 +46,7 @@ Common props ref：[Common props](/docs/react/common-props) | getCurrentAnchor | Customize the anchor highlight | (activeLink: string) => string | - | | | offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 | | | showInkInFixed | Whether show ink-square when `affix={false}` | boolean | false | | -| targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetoffset) | number | - | | +| targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#anchor-demo-targetoffset) | number | - | | | onChange | Listening for anchor link change | (currentActiveLink: string) => void | | | | onClick | Set the handler to handle `click` event | (e: MouseEvent, link: object) => void | - | | | items | Data configuration option content, support nesting through children | { key, href, title, target, children }\[] [see](#anchoritem) | - | 5.1.0 | diff --git a/components/anchor/index.ts b/components/anchor/index.tsx similarity index 100% rename from components/anchor/index.ts rename to components/anchor/index.tsx diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md index 32429b230b..733f3ade86 100644 --- a/components/anchor/index.zh-CN.md +++ b/components/anchor/index.zh-CN.md @@ -47,7 +47,7 @@ group: | getCurrentAnchor | 自定义高亮的锚点 | (activeLink: string) => string | - | | | offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | | | showInkInFixed | `affix={false}` 时是否显示小方块 | boolean | false | | -| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#components-anchor-demo-targetoffset) | number | - | | +| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#anchor-demo-targetoffset) | number | - | | | onChange | 监听锚点链接改变 | (currentActiveLink: string) => void | - | | | onClick | `click` 事件的 handler | (e: MouseEvent, link: object) => void | - | | | items | 数据化配置选项内容，支持通过 children 嵌套 | { key, href, title, target, children }\[] [具体见](#anchoritem) | - | 5.1.0 | diff --git a/components/avatar/index.ts b/components/avatar/index.tsx similarity index 100% rename from components/avatar/index.ts rename to components/avatar/index.tsx diff --git a/components/breadcrumb/design/behavior-pattern.tsx b/components/breadcrumb/design/behavior-pattern.tsx index da5ea9f5e9..e6447fa51b 100644 --- a/components/breadcrumb/design/behavior-pattern.tsx +++ b/components/breadcrumb/design/behavior-pattern.tsx @@ -16,12 +16,12 @@ const BehaviorPattern: React.FC = () => ( { id: '707000085', label: '了解当前页面的位置', - link: 'components-breadcrumb-index-tab-design-demo-basic', + link: 'breadcrumb-index-tab-design-demo-basic', }, { id: '707000086', label: '了解系统层级结构', - link: 'components-breadcrumb-index-tab-design-demo-basic', + link: 'breadcrumb-index-tab-design-demo-basic', }, ], }, @@ -29,13 +29,13 @@ const BehaviorPattern: React.FC = () => ( id: '200000005', label: '向上导航', targetType: 'mvp', - link: 'components-breadcrumb-index-tab-design-demo-basic', + link: 'breadcrumb-index-tab-design-demo-basic', }, { id: '200000006', label: '快捷导航', targetType: 'extension', - link: 'components-breadcrumb-index-tab-design-demo-overlay', + link: 'breadcrumb-index-tab-design-demo-overlay', }, ], }} diff --git a/components/breadcrumb/index.ts b/components/breadcrumb/index.tsx similarity index 100% rename from components/breadcrumb/index.ts rename to components/breadcrumb/index.tsx diff --git a/components/button/demo/multiple.md b/components/button/demo/multiple.md index 8b674dec9d..c0a9b1159b 100644 --- a/components/button/demo/multiple.md +++ b/components/button/demo/multiple.md @@ -1,7 +1,7 @@ ## zh-CN -按钮组合使用时，推荐使用 1 个主操作 + n 个次操作，3 个以上操作时把更多操作放到 [Dropdown.Button](/components/dropdown-cn/#components-dropdown-demo-dropdown-button) 中组合使用。 +按钮组合使用时，推荐使用 1 个主操作 + n 个次操作，3 个以上操作时把更多操作放到 [Dropdown.Button](/components/dropdown-cn/#dropdown-demo-dropdown-button) 中组合使用。 ## en-US -If you need several buttons, we recommend that you use 1 primary button + n secondary buttons. If there are more than three operations, you can group some of them into a [Dropdown.Button](/components/dropdown/#components-dropdown-demo-dropdown-button). +If you need several buttons, we recommend that you use 1 primary button + n secondary buttons. If there are more than three operations, you can group some of them into a [Dropdown.Button](/components/dropdown/#dropdown-demo-dropdown-button). diff --git a/components/button/index.ts b/components/button/index.tsx similarity index 100% rename from components/button/index.ts rename to components/button/index.tsx diff --git a/components/calendar/index.ts b/components/calendar/index.tsx similarity index 100% rename from components/calendar/index.ts rename to components/calendar/index.tsx diff --git a/components/card/index.ts b/components/card/index.tsx similarity index 100% rename from components/card/index.ts rename to components/card/index.tsx diff --git a/components/checkbox/index.ts b/components/checkbox/index.tsx similarity index 100% rename from components/checkbox/index.ts rename to components/checkbox/index.tsx diff --git a/components/col/index.ts b/components/col/index.tsx similarity index 100% rename from components/col/index.ts rename to components/col/index.tsx diff --git a/components/collapse/demo/collapsible.md b/components/collapse/demo/collapsible.md index 6c5ebe3c40..66f095e414 100644 --- a/components/collapse/demo/collapsible.md +++ b/components/collapse/demo/collapsible.md @@ -7,7 +7,7 @@ Specify the trigger area of collapsible by `collapsible`. diff --git a/components/collapse/index.en-US.md b/components/collapse/index.en-US.md index 186fe2478e..9fa8614a0e 100644 --- a/components/collapse/index.en-US.md +++ b/components/collapse/index.en-US.md @@ -79,7 +79,7 @@ Common props ref：[Common props](/docs/react/common-props) | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | accordion | If true, Collapse renders as Accordion | boolean | false | | -| activeKey | Key of the active panel | string\[] \| string
number\[] \| number | No default value. In [accordion mode](#components-collapse-demo-accordion), it's the key of the first panel | | +| activeKey | Key of the active panel | string\[] \| string
number\[] \| number | No default value. In [accordion mode](#collapse-demo-accordion), it's the key of the first panel | | | bordered | Toggles rendering of the border around the collapse block | boolean | true | | | collapsible | Specify whether the panels of children be collapsible or the trigger area of collapsible | `header` \| `icon` \| `disabled` | - | 4.9.0 | | defaultActiveKey | Key of the initial active panel | string\[] \| string
number\[] \| number | - | | diff --git a/components/collapse/index.ts b/components/collapse/index.tsx similarity index 100% rename from components/collapse/index.ts rename to components/collapse/index.tsx diff --git a/components/collapse/index.zh-CN.md b/components/collapse/index.zh-CN.md index e261004812..5b9733e808 100644 --- a/components/collapse/index.zh-CN.md +++ b/components/collapse/index.zh-CN.md @@ -80,7 +80,7 @@ const items: CollapseProps['items'] = [ | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | | accordion | 手风琴模式 | boolean | false | | -| activeKey | 当前激活 tab 面板的 key | string\[] \| string
number\[] \| number | [手风琴模式](#components-collapse-demo-accordion)下默认第一个元素 | | +| activeKey | 当前激活 tab 面板的 key | string\[] \| string
number\[] \| number | [手风琴模式](#collapse-demo-accordion)下默认第一个元素 | | | bordered | 带边框风格的折叠面板 | boolean | true | | | collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | `header` \| `icon` \| `disabled` | - | 4.9.0 | | defaultActiveKey | 初始化选中面板的 key | string\[] \| string
number\[] \| number | - | | diff --git a/components/color-picker/index.ts b/components/color-picker/index.tsx similarity index 100% rename from components/color-picker/index.ts rename to components/color-picker/index.tsx diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md index 72ab63e81c..281f394bbf 100644 --- a/components/config-provider/index.en-US.md +++ b/components/config-provider/index.en-US.md @@ -55,7 +55,7 @@ Some components use dynamic style to support wave effect. You can config `csp` p | componentDisabled | Config antd component `disabled` | boolean | - | 4.21.0 | | componentSize | Config antd component size | `small` \| `middle` \| `large` | - | | | csp | Set [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) config | { nonce: string } | - | | -| direction | Set direction of layout. See [demo](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | | +| direction | Set direction of layout. See [demo](#config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | | | getPopupContainer | To set the container of the popup element. The default is to create a `div` element in `body` | function(triggerNode) | () => document.body | | | getTargetContainer | Config Affix, Anchor scroll target container | () => HTMLElement | () => window | 4.2.0 | | iconPrefixCls | Set icon prefix className | string | `anticon` | 4.11.0 | diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index ff100fd55f..1101c32c18 100644 --- a/components/config-provider/index.zh-CN.md +++ b/components/config-provider/index.zh-CN.md @@ -56,7 +56,7 @@ export default Demo; | componentDisabled | 设置 antd 组件禁用状态 | boolean | - | 4.21.0 | | componentSize | 设置 antd 组件大小 | `small` \| `middle` \| `large` | - | | | csp | 设置 [Content Security Policy](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP) 配置 | { nonce: string } | - | | -| direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | | +| direction | 设置文本展示方向。 [示例](#config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | | | getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | function(triggerNode) | () => document.body | | | getTargetContainer | 配置 Affix、Anchor 滚动监听容器。 | () => HTMLElement | () => window | 4.2.0 | | iconPrefixCls | 设置图标统一样式前缀 | string | `anticon` | 4.11.0 | diff --git a/components/date-picker/design/behavior-pattern.tsx b/components/date-picker/design/behavior-pattern.tsx index 07ccabdaa3..e583121e08 100644 --- a/components/date-picker/design/behavior-pattern.tsx +++ b/components/date-picker/design/behavior-pattern.tsx @@ -16,32 +16,32 @@ const BehaviorPattern: React.FC = () => ( { id: '707000085', label: '选择某天', - link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-date', + link: 'date-picker-index-tab-design-zh-cn-demo-pick-date', }, { id: '707000086', label: '选择某周', - link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-week', + link: 'date-picker-index-tab-design-zh-cn-demo-pick-week', }, { id: '707000087', label: '选择某月', - link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-month', + link: 'date-picker-index-tab-design-zh-cn-demo-pick-month', }, { id: '707000088', label: '选择某季度', - link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-quarter', + link: 'date-picker-index-tab-design-zh-cn-demo-pick-quarter', }, { id: '707000089', label: '选择某年', - link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-year', + link: 'date-picker-index-tab-design-zh-cn-demo-pick-year', }, { id: '707000090', label: '选择某时间', - link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-time', + link: 'date-picker-index-tab-design-zh-cn-demo-pick-time', }, ], }, @@ -53,32 +53,32 @@ const BehaviorPattern: React.FC = () => ( { id: '7070000851', label: '选择某天至某天', - link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-date-range', + link: 'date-picker-index-tab-design-zh-cn-demo-pick-date-range', }, { id: '7070000861', label: '选择某周至某周', - link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-week-range', + link: 'date-picker-index-tab-design-zh-cn-demo-pick-week-range', }, { id: '7070000871', label: '选择某月至某月', - link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-month-range', + link: 'date-picker-index-tab-design-zh-cn-demo-pick-month-range', }, { id: '7070000881', label: '选择某季度至某季度', - link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-quarter-range', + link: 'date-picker-index-tab-design-zh-cn-demo-pick-quarter-range', }, { id: '7070000891', label: '选择某年至某年', - link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-year-range', + link: 'date-picker-index-tab-design-zh-cn-demo-pick-year-range', }, { id: '7070000901', label: '选择某时间至某时间', - link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-time-range', + link: 'date-picker-index-tab-design-zh-cn-demo-pick-time-range', }, ], }, @@ -90,12 +90,12 @@ const BehaviorPattern: React.FC = () => ( { id: '70700008912', label: '快捷选择时间点', - link: 'components-date-picker-index-tab-design-zh-cn-demo-preset-time', + link: 'date-picker-index-tab-design-zh-cn-demo-preset-time', }, { id: '70700009012', label: '快捷选择时间段', - link: 'components-date-picker-index-tab-design-zh-cn-demo-preset-range', + link: 'date-picker-index-tab-design-zh-cn-demo-preset-range', }, ], }, @@ -103,7 +103,7 @@ const BehaviorPattern: React.FC = () => ( id: '200000007', label: '查看日期附属信息', targetType: 'extension', - link: 'components-date-picker-index-tab-design-zh-cn-demo-date-extra-info', + link: 'date-picker-index-tab-design-zh-cn-demo-date-extra-info', }, ], }} diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md index 58414846e9..fd1be24bd4 100644 --- a/components/date-picker/index.en-US.md +++ b/components/date-picker/index.en-US.md @@ -99,7 +99,7 @@ The following APIs are shared by DatePicker, RangePicker. | components | Custom panels | Record | - | 5.14.0 | | disabled | Determine whether the DatePicker is disabled | boolean | false | | | disabledDate | Specify the date that cannot be selected | (currentDate: dayjs, info: { from?: dayjs }) => 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](#components-date-picker-demo-format) | [formatType](#formattype) | [rc-picker](https://github.com/react-component/picker/blob/f512f18ed59d6791280d1c3d7d37abbb9867eb0b/src/utils/uiUtil.ts#L155-L177) | | +| 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) | | | order | Auto order date when multiple or range selection | boolean | true | 5.14.0 | | popupClassName | To customize the className of the popup calendar | string | - | 4.23.0 | | preserveInvalidOnBlur | Not clean input on blur even when the typing is invalidate | boolean | false | 5.14.0 | @@ -149,7 +149,7 @@ The following APIs are shared by DatePicker, RangePicker. | renderExtraFooter | Render extra footer in panel | (mode) => React.ReactNode | - | | | showNow | Show the fast access of current datetime | boolean | - | 4.4.0 | | showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#api) | | -| showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/) | dayjs() | | +| showTime.defaultValue | To set default time of selected date, [demo](#date-picker-demo-disabled-date) | [dayjs](https://day.js.org/) | dayjs() | | | showWeek | Show week info when in DatePicker | boolean | false | 5.14.0 | | value | To set date | [dayjs](https://day.js.org/) | - | | | onChange | Callback function, can be executed when the selected time is changing | function(date: dayjs, dateString: string) | - | | @@ -220,7 +220,7 @@ Added in `4.1.0`. | renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | | | separator | Set separator between inputs | React.ReactNode | `` | | | showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#api) | | -| showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/)\[] | \[dayjs(), dayjs()] | | +| showTime.defaultValue | To set default time of selected date, [demo](#date-picker-demo-disabled-date) | [dayjs](https://day.js.org/)\[] | \[dayjs(), dayjs()] | | | value | To set date | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - | | | onCalendarChange | Callback function, can be executed when the start time or the end time of the range is changing. `info` argument is added in 4.4.0 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - | | | onChange | Callback function, can be executed when the selected time is changing | function(dates: \[dayjs, dayjs], dateStrings: \[string, string]) | - | | diff --git a/components/date-picker/index.ts b/components/date-picker/index.tsx similarity index 100% rename from components/date-picker/index.ts rename to components/date-picker/index.tsx diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index c76ce5f290..0a08d5af82 100644 --- a/components/date-picker/index.zh-CN.md +++ b/components/date-picker/index.zh-CN.md @@ -100,7 +100,7 @@ dayjs.locale('zh-cn'); | components | 自定义面板 | Record | - | 5.14.0 | | disabled | 禁用 | boolean | false | | | disabledDate | 不可选择的日期 | (currentDate: dayjs, info: { from?: dayjs }) => 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)。示例：[自定义格式](#components-date-picker-demo-format) | [formatType](#formattype) | [rc-picker](https://github.com/react-component/picker/blob/f512f18ed59d6791280d1c3d7d37abbb9867eb0b/src/utils/uiUtil.ts#L155-L177) | | +| 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) | | | order | 多选、范围时是否自动排序 | boolean | true | 5.14.0 | | preserveInvalidOnBlur | 失去焦点是否要清空输入框内无效内容 | boolean | false | 5.14.0 | | popupClassName | 额外的弹出日历 className | string | - | 4.23.0 | @@ -150,7 +150,7 @@ dayjs.locale('zh-cn'); | renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | | | showNow | 显示当前日期时间的快捷选择 | boolean | - | | | showTime | 增加时间选择功能 | Object \| boolean | [TimePicker Options](/components/time-picker-cn#api) | | -| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/) | dayjs() | | +| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#date-picker-demo-disabled-date) | [dayjs](https://day.js.org/) | dayjs() | | | showWeek | DatePicker 下展示当前周 | boolean | false | 5.14.0 | | value | 日期 | [dayjs](https://day.js.org/) | - | | | onChange | 时间发生变化的回调 | function(date: dayjs, dateString: string) | - | | @@ -221,7 +221,7 @@ dayjs.locale('zh-cn'); | renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | | | separator | 设置分隔符 | React.ReactNode | `` | | | showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker-cn#api) | | -| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/)\[] | \[dayjs(), dayjs()] | | +| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#date-picker-demo-disabled-date) | [dayjs](https://day.js.org/)\[] | \[dayjs(), dayjs()] | | | value | 日期 | [dayjs](https://day.js.org/)\[] | - | | | onCalendarChange | 待选日期发生变化的回调。`info` 参数自 4.4.0 添加 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - | | | onChange | 日期范围发生变化的回调 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string]) | - | | diff --git a/components/dropdown/index.ts b/components/dropdown/index.tsx similarity index 100% rename from components/dropdown/index.ts rename to components/dropdown/index.tsx diff --git a/components/float-button/index.ts b/components/float-button/index.tsx similarity index 100% rename from components/float-button/index.ts rename to components/float-button/index.tsx diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md index 24e4cabf81..9969e6f225 100644 --- a/components/form/index.en-US.md +++ b/components/form/index.en-US.md @@ -69,7 +69,7 @@ Common props ref：[Common props](/docs/react/common-props) | colon | Configure the default value of `colon` for Form.Item. Indicates whether the colon after the label is displayed (only effective when prop layout is horizontal) | boolean | true | | | disabled | Set form component disable, only available for antd components | boolean | false | 4.21.0 | | component | Set the Form rendering element. Do not create a DOM node for `false` | ComponentType \| false | form | | -| fields | Control of form fields through state management (such as redux). Not recommended for non-strong demand. View [example](#components-form-demo-global-state) | [FieldData](#fielddata)\[] | - | | +| fields | Control of form fields through state management (such as redux). Not recommended for non-strong demand. View [example](#form-demo-global-state) | [FieldData](#fielddata)\[] | - | | | form | Form control instance created by `Form.useForm()`. Automatically created when not provided | [FormInstance](#forminstance) | - | | | feedbackIcons | Can be passed custom icons while `Form.Item` element has `hasFeedback` | [FeedbackIcons](#feedbackicons) | - | 5.9.0 | | initialValues | Set value by Form initialization or reset | object | - | | @@ -143,10 +143,10 @@ Form field component for data bidirectional binding, validation, layout, and so | noStyle | No style for `true`, used as a pure field control. Will inherit parent Form.Item `validateStatus` if self `validateStatus` not configured | boolean | false | | | preserve | Keep field value even when field removed | boolean | true | 4.4.0 | | required | Display required style. It will be generated by the validation rule | boolean | false | | -| rules | Rules for field validation. Click [here](#components-form-demo-basic) to see an example | [Rule](#rule)\[] | - | | +| rules | Rules for field validation. Click [here](#form-demo-basic) to see an example | [Rule](#rule)\[] | - | | | shouldUpdate | Custom field update logic. See [below](#shouldupdate) | boolean \| (prevValue, curValue) => boolean | false | | | tooltip | Config tooltip info | ReactNode \| [TooltipProps & { icon: ReactNode }](/components/tooltip#api) | - | 4.7.0 | -| trigger | When to collect the value of children node. Click [here](#components-form-demo-customized-form-controls) to see an example | string | `onChange` | | +| trigger | When to collect the value of children node. Click [here](#form-demo-customized-form-controls) to see an example | string | `onChange` | | | validateDebounce | Delay milliseconds to start validation | number | - | 5.9.0 | | validateFirst | Whether stop validate on first rule of error for this field. Will parallel validate when `parallel` configured | boolean \| `parallel` | false | `parallel`: 4.5.0 | | validateStatus | The validation status. If not provided, it will be generated by validation rule. options: `success` `warning` `error` `validating` | string | - | | @@ -163,7 +163,7 @@ After wrapped by `Form.Item` with `name` property, `value`(or other property def ### dependencies -Used when there are dependencies between fields. If a field has the `dependencies` prop, this field will automatically trigger updates and validations when upstream is updated. A common scenario is a user registration form with "password" and "confirm password" fields. The "Confirm Password" validation depends on the "Password" field. After setting `dependencies`, the "Password" field update will re-trigger the validation of "Check Password". You can refer [examples](#components-form-demo-dependencies). +Used when there are dependencies between fields. If a field has the `dependencies` prop, this field will automatically trigger updates and validations when upstream is updated. A common scenario is a user registration form with "password" and "confirm password" fields. The "Confirm Password" validation depends on the "Password" field. After setting `dependencies`, the "Password" field update will re-trigger the validation of "Check Password". You can refer [examples](#form-demo-dependencies). `dependencies` shouldn't be used together with `shouldUpdate`, since it may result in conflicting update logic. @@ -187,7 +187,7 @@ related issue: [#34500](https://github.com/ant-design/ant-design/issues/34500) ``` -You can ref [example](#components-form-demo-horizontal-login) to see detail. +You can ref [example](#form-demo-horizontal-login) to see detail. When `shouldUpdate` is a function, it will be called by form values update. Providing original values and current value to compare. This is very helpful for rendering additional fields based on values: @@ -203,7 +203,7 @@ When `shouldUpdate` is a function, it will be called by form values update. Prov ``` -You can ref [example](#components-form-demo-control-hooks) to see detail. +You can ref [example](#form-demo-control-hooks) to see detail. ### messageVariables @@ -267,7 +267,7 @@ Some operator functions in render form of Form.List. ## Form.ErrorList -New in 4.7.0. Show error messages, should only work with `rules` of Form.List. See [example](#components-form-demo-dynamic-form-item). +New in 4.7.0. Show error messages, should only work with `rules` of Form.List. See [example](#form-demo-dynamic-form-item). | Property | Description | Type | Default | | -------- | ----------- | ------------ | ------- | @@ -275,7 +275,7 @@ New in 4.7.0. Show error messages, should only work with `rules` of Form.List. S ## Form.Provider -Provide linkage between forms. If a sub form with `name` prop update, it will auto trigger Provider related events. See [example](#components-form-demo-form-context). +Provide linkage between forms. If a sub form with `name` prop update, it will auto trigger Provider related events. See [example](#form-demo-form-context). | Property | Description | Type | Default | | --- | --- | --- | --- | @@ -546,7 +546,7 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig); | transform | Transform value to the rule before validation | (value) => any | | | type | Normally `string` \|`number` \|`boolean` \|`url` \| `email`. More type to ref [here](https://github.com/react-component/async-validator#type) | string | | | validateTrigger | Set validate trigger event. Must be the sub set of `validateTrigger` in Form.Item | string \| string\[] | | -| validator | Customize validation rule. Accept Promise as return. See [example](#components-form-demo-register) | ([rule](#rule), value) => Promise | | +| validator | Customize validation rule. Accept Promise as return. See [example](#form-demo-register) | ([rule](#rule), value) => Promise | | | warningOnly | Warning only. Not block form submit | boolean | 4.17.0 | | whitespace | Failed if only has whitespace, only work with `type: 'string'` rule | boolean | | diff --git a/components/form/index.ts b/components/form/index.tsx similarity index 100% rename from components/form/index.ts rename to components/form/index.tsx diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index e8c06b4001..b29423b837 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -70,7 +70,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAA | colon | 配置 Form.Item 的 `colon` 的默认值。表示是否显示 label 后面的冒号 (只有在属性 layout 为 horizontal 时有效) | boolean | true | | | disabled | 设置表单组件禁用，仅对 antd 组件有效 | boolean | false | 4.21.0 | | component | 设置 Form 渲染元素，为 `false` 则不创建 DOM 节点 | ComponentType \| false | form | | -| fields | 通过状态管理（如 redux）控制表单字段，如非强需求不推荐使用。查看[示例](#components-form-demo-global-state) | [FieldData](#fielddata)\[] | - | | +| fields | 通过状态管理（如 redux）控制表单字段，如非强需求不推荐使用。查看[示例](#form-demo-global-state) | [FieldData](#fielddata)\[] | - | | | form | 经 `Form.useForm()` 创建的 form 控制实例，不提供时会自动创建 | [FormInstance](#forminstance) | - | | | feedbackIcons | 当 `Form.Item` 有 `hasFeedback` 属性时可以自定义图标 | [FeedbackIcons](#feedbackicons) | - | 5.9.0 | | initialValues | 表单默认值，只有初始化以及重置时生效 | object | - | | @@ -144,10 +144,10 @@ const validateMessages = { | noStyle | 为 `true` 时不带样式，作为纯字段控件使用。当自身没有 `validateStatus` 而父元素存在有 `validateStatus` 的 Form.Item 会继承父元素的 `validateStatus` | boolean | false | | | preserve | 当字段被删除时保留字段值 | boolean | true | 4.4.0 | | required | 必填样式设置。如不设置，则会根据校验规则自动生成 | boolean | false | | -| rules | 校验规则，设置字段的校验逻辑。点击[此处](#components-form-demo-basic)查看示例 | [Rule](#rule)\[] | - | | +| rules | 校验规则，设置字段的校验逻辑。点击[此处](#form-demo-basic)查看示例 | [Rule](#rule)\[] | - | | | shouldUpdate | 自定义字段更新逻辑，说明[见下](#shouldupdate) | boolean \| (prevValue, curValue) => boolean | false | | | tooltip | 配置提示信息 | ReactNode \| [TooltipProps & { icon: ReactNode }](/components/tooltip-cn#api) | - | 4.7.0 | -| trigger | 设置收集字段值变更的时机。点击[此处](#components-form-demo-customized-form-controls)查看示例 | string | `onChange` | | +| trigger | 设置收集字段值变更的时机。点击[此处](#form-demo-customized-form-controls)查看示例 | string | `onChange` | | | validateFirst | 当某一规则校验不通过时，是否停止剩下的规则的校验。设置 `parallel` 时会并行校验 | boolean \| `parallel` | false | `parallel`: 4.5.0 | | validateDebounce | 设置防抖，延迟毫秒数后进行校验 | number | - | 5.9.0 | | validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | - | | @@ -164,7 +164,7 @@ const validateMessages = { ### dependencies -当字段间存在依赖关系时使用。如果一个字段设置了 `dependencies` 属性。那么它所依赖的字段更新时，该字段将自动触发更新与校验。一种常见的场景，就是注册用户表单的“密码”与“确认密码”字段。“确认密码”校验依赖于“密码”字段，设置 `dependencies` 后，“密码”字段更新会重新触发“校验密码”的校验逻辑。你可以参考[具体例子](#components-form-demo-dependencies)。 +当字段间存在依赖关系时使用。如果一个字段设置了 `dependencies` 属性。那么它所依赖的字段更新时，该字段将自动触发更新与校验。一种常见的场景，就是注册用户表单的“密码”与“确认密码”字段。“确认密码”校验依赖于“密码”字段，设置 `dependencies` 后，“密码”字段更新会重新触发“校验密码”的校验逻辑。你可以参考[具体例子](#form-demo-dependencies)。 `dependencies` 不应和 `shouldUpdate` 一起使用，因为这可能带来更新逻辑的混乱。 @@ -188,7 +188,7 @@ Form 通过增量更新方式，只更新被修改的字段相关组件以达到 ``` -你可以参考[示例](#components-form-demo-horizontal-login)查看具体使用场景。 +你可以参考[示例](#form-demo-horizontal-login)查看具体使用场景。 当 `shouldUpdate` 为方法时，表单的每次数值更新都会调用该方法，提供原先的值与当前的值以供你比较是否需要更新。这对于是否根据值来渲染额外字段十分有帮助： @@ -204,7 +204,7 @@ Form 通过增量更新方式，只更新被修改的字段相关组件以达到 ``` -你可以参考[示例](#components-form-demo-control-hooks)查看具体使用场景。 +你可以参考[示例](#form-demo-control-hooks)查看具体使用场景。 ### messageVariables @@ -266,7 +266,7 @@ Form.List 渲染表单相关操作函数。 ## Form.ErrorList -4.7.0 新增。错误展示组件，仅限配合 Form.List 的 rules 一同使用。参考[示例](#components-form-demo-dynamic-form-item)。 +4.7.0 新增。错误展示组件，仅限配合 Form.List 的 rules 一同使用。参考[示例](#form-demo-dynamic-form-item)。 | 参数 | 说明 | 类型 | 默认值 | | ------ | -------- | ------------ | ------ | @@ -274,7 +274,7 @@ Form.List 渲染表单相关操作函数。 ## Form.Provider -提供表单间联动功能，其下设置 `name` 的 Form 更新时，会自动触发对应事件。查看[示例](#components-form-demo-form-context)。 +提供表单间联动功能，其下设置 `name` 的 Form 更新时，会自动触发对应事件。查看[示例](#form-demo-form-context)。 | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | @@ -545,7 +545,7 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig); | transform | 将字段值转换成目标值后进行校验 | (value) => any | | | type | 类型，常见有 `string` \|`number` \|`boolean` \|`url` \| `email`。更多请参考[此处](https://github.com/react-component/async-validator#type) | string | | | validateTrigger | 设置触发验证时机，必须是 Form.Item 的 `validateTrigger` 的子集 | string \| string\[] | | -| validator | 自定义校验，接收 Promise 作为返回值。[示例](#components-form-demo-register)参考 | ([rule](#rule), value) => Promise | | +| validator | 自定义校验，接收 Promise 作为返回值。[示例](#form-demo-register)参考 | ([rule](#rule), value) => Promise | | | warningOnly | 仅警告，不阻塞表单提交 | boolean | 4.17.0 | | whitespace | 如果字段仅包含空格则校验不通过，只在 `type: 'string'` 时生效 | boolean | | diff --git a/components/grid/demo/flex-align.md b/components/grid/demo/flex-align.md index 250fa734ee..a29e70f3c7 100644 --- a/components/grid/demo/flex-align.md +++ b/components/grid/demo/flex-align.md @@ -7,7 +7,7 @@ Child elements vertically aligned. ```css -#components-grid-demo-flex-align [class~='ant-row'] { +#grid-demo-flex-align [class~='ant-row'] { background: rgba(128, 128, 128, 0.08); } ``` diff --git a/components/grid/demo/flex-order.md b/components/grid/demo/flex-order.md index c467f5df62..f1645cf025 100644 --- a/components/grid/demo/flex-order.md +++ b/components/grid/demo/flex-order.md @@ -7,7 +7,7 @@ To change the element sort by `order`. ```css -#components-grid-demo-flex-order [class~='ant-row'] { +#grid-demo-flex-order [class~='ant-row'] { background: rgba(128, 128, 128, 0.08); } ``` diff --git a/components/grid/demo/flex.md b/components/grid/demo/flex.md index d9d7897bec..42228d5b15 100644 --- a/components/grid/demo/flex.md +++ b/components/grid/demo/flex.md @@ -9,7 +9,7 @@ Child elements depending on the value of the `start`, `center`, `end`, `space-between`, `space-around` and `space-evenly`, which are defined in its parent node typesetting mode. ```css -#components-grid-demo-flex [class~='ant-row'] { +#grid-demo-flex [class~='ant-row'] { background: rgba(128, 128, 128, 0.08); } ``` diff --git a/components/grid/demo/playground.md b/components/grid/demo/playground.md index 6fd4ce39b9..4a85166e55 100644 --- a/components/grid/demo/playground.md +++ b/components/grid/demo/playground.md @@ -7,27 +7,27 @@ A simple playground for column count and gutter. ```css -#components-grid-demo-playground [class~='ant-col'] { +#grid-demo-playground [class~='ant-col'] { background: transparent; border: 0; } -#components-grid-demo-playground [class~='ant-col'] > div { +#grid-demo-playground [class~='ant-col'] > div { height: 120px; font-size: 14px; line-height: 120px; background: #0092ff; border-radius: 4px; } -#components-grid-demo-playground pre { +#grid-demo-playground pre { padding: 8px 16px; font-size: 14px; background: #f9f9f9; border-radius: 6px; } -#components-grid-demo-playground pre.demo-code { +#grid-demo-playground pre.demo-code { direction: ltr; } -#components-grid-demo-playground .ant-col { +#grid-demo-playground .ant-col { padding: 0; } ``` diff --git a/components/grid/index.ts b/components/grid/index.tsx similarity index 100% rename from components/grid/index.ts rename to components/grid/index.tsx diff --git a/components/icon/index.ts b/components/icon/index.tsx similarity index 100% rename from components/icon/index.ts rename to components/icon/index.tsx diff --git a/components/input/index.ts b/components/input/index.tsx similarity index 100% rename from components/input/index.ts rename to components/input/index.tsx diff --git a/components/input/style/index.ts b/components/input/style/index.ts index 8bc0e4425f..b2890b6068 100644 --- a/components/input/style/index.ts +++ b/components/input/style/index.ts @@ -657,7 +657,7 @@ const genSearchInputStyle: GenerateStyle = (token: InputToken) => { }, // fix slight height diff in Firefox: - // https://ant.design/components/auto-complete-cn/#components-auto-complete-demo-certain-category + // https://ant.design/components/auto-complete-cn/#auto-complete-demo-certain-category [`${componentCls}-lg`]: { lineHeight: token.calc(token.lineHeightLG).sub(0.0002).equal(), }, diff --git a/components/layout/index.ts b/components/layout/index.tsx similarity index 100% rename from components/layout/index.ts rename to components/layout/index.tsx diff --git a/components/menu/demo/inline-collapsed.md b/components/menu/demo/inline-collapsed.md index 87c9869034..1e3cc4f503 100644 --- a/components/menu/demo/inline-collapsed.md +++ b/components/menu/demo/inline-collapsed.md @@ -2,10 +2,10 @@ 内嵌菜单可以被缩起/展开。 -你可以在 [Layout](/components/layout-cn/#components-layout-demo-side) 里查看侧边布局结合的完整示例。 +你可以在 [Layout](/components/layout-cn/#layout-demo-side) 里查看侧边布局结合的完整示例。 ## en-US Inline menu could be collapsed. -Here is [a complete demo](/components/layout/#components-layout-demo-side) with sider layout. +Here is [a complete demo](/components/layout/#layout-demo-side) with sider layout. diff --git a/components/modal/demo/dark.tsx b/components/modal/demo/dark.tsx index 922c7fb861..c7b4d4ce4c 100644 --- a/components/modal/demo/dark.tsx +++ b/components/modal/demo/dark.tsx @@ -455,10 +455,10 @@ export default () => { style={{ marginTop: 16 }} /> - - + + diff --git a/components/modal/index.ts b/components/modal/index.tsx similarity index 100% rename from components/modal/index.ts rename to components/modal/index.tsx diff --git a/components/pagination/demo/mini.md b/components/pagination/demo/mini.md index 7a2ade4ba4..8b6d3df61f 100644 --- a/components/pagination/demo/mini.md +++ b/components/pagination/demo/mini.md @@ -7,7 +7,7 @@ Mini size pagination. diff --git a/components/pagination/design/behavior-pattern.tsx b/components/pagination/design/behavior-pattern.tsx index 04682aebb3..4a8dd9880b 100644 --- a/components/pagination/design/behavior-pattern.tsx +++ b/components/pagination/design/behavior-pattern.tsx @@ -17,19 +17,19 @@ const BehaviorPattern: React.FC = () => ( id: '200000005', label: '调整单页展示条数', targetType: 'extension', - link: 'components-pagination-index-tab-design-demo-page-size', + link: 'pagination-index-tab-design-demo-page-size', }, { id: '200000006', label: '快速跳转', targetType: 'extension', - link: 'components-pagination-index-tab-design-demo-quick-jump', + link: 'pagination-index-tab-design-demo-quick-jump', }, { id: '200000007', label: '了解数据总量', targetType: 'extension', - link: 'components-pagination-index-tab-design-demo-total', + link: 'pagination-index-tab-design-demo-total', }, ], }} diff --git a/components/pagination/index.ts b/components/pagination/index.tsx similarity index 100% rename from components/pagination/index.ts rename to components/pagination/index.tsx diff --git a/components/popconfirm/demo/placement.md b/components/popconfirm/demo/placement.md index 0ec797858c..8cac05bd1d 100755 --- a/components/popconfirm/demo/placement.md +++ b/components/popconfirm/demo/placement.md @@ -7,7 +7,7 @@ There are 12 `placement` options available. Use `arrow: { pointAtCenter: true }` if you want the arrow to point at the center of target. diff --git a/components/statistic/index.ts b/components/statistic/index.tsx similarity index 100% rename from components/statistic/index.ts rename to components/statistic/index.tsx diff --git a/components/style/index.ts b/components/style/index.tsx similarity index 100% rename from components/style/index.ts rename to components/style/index.tsx diff --git a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap index 9427e2eaa2..3307227b39 100644 --- a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -867,7 +867,7 @@ exports[`renders components/table/demo/colspan-rowspan.tsx extend context correc exports[`renders components/table/demo/component-token.tsx extend context correctly 1`] = ` Array [
{ <> diff --git a/components/table/demo/dynamic-settings.md b/components/table/demo/dynamic-settings.md index ee6616bc89..498dbb8796 100644 --- a/components/table/demo/dynamic-settings.md +++ b/components/table/demo/dynamic-settings.md @@ -7,7 +7,7 @@ Select different settings to see the result. + diff --git a/components/table/index.ts b/components/table/index.tsx similarity index 100% rename from components/table/index.ts rename to components/table/index.tsx diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md index 062decf05c..17c6ac1511 100644 --- a/components/tabs/index.en-US.md +++ b/components/tabs/index.en-US.md @@ -13,7 +13,7 @@ Ant Design has 3 types of Tabs for different situations. - Card Tabs: for managing too many closeable views. - Normal Tabs: for functional aspects of a page. -- [Radio.Button](/components/radio/#components-radio-demo-radiobutton): for secondary tabs. +- [Radio.Button](/components/radio/#radio-demo-radiobutton): for secondary tabs. ## Examples diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md index c0c3a03d14..940e3f678a 100644 --- a/components/tabs/index.zh-CN.md +++ b/components/tabs/index.zh-CN.md @@ -16,7 +16,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。 - 卡片式的页签，提供可关闭的样式，常用于容器顶部。 - 既可用于容器顶部，也可用于容器内部，是最通用的 Tabs。 -- [Radio.Button](/components/radio-cn/#components-radio-demo-radiobutton) 可作为更次级的页签来使用。 +- [Radio.Button](/components/radio-cn/#radio-demo-radiobutton) 可作为更次级的页签来使用。 ## 代码演示 diff --git a/components/theme/index.ts b/components/theme/index.tsx similarity index 100% rename from components/theme/index.ts rename to components/theme/index.tsx diff --git a/components/timeline/index.ts b/components/timeline/index.tsx similarity index 100% rename from components/timeline/index.ts rename to components/timeline/index.tsx diff --git a/components/tree-select/index.en-US.md b/components/tree-select/index.en-US.md index b5f327648d..0a2a26fb06 100644 --- a/components/tree-select/index.en-US.md +++ b/components/tree-select/index.en-US.md @@ -76,7 +76,7 @@ Common props ref：[Common props](/docs/react/common-props) | treeExpandedKeys | Set expanded keys | string\[] | - | | | treeIcon | Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to `true` | boolean | false | | | treeLoadedKeys | (Controlled) Set loaded tree nodes, work with `loadData` only | string[] | [] | | -| treeLine | Show the line. Ref [Tree - showLine](/components/tree/#components-tree-demo-line) | boolean \| object | false | 4.17.0 | +| treeLine | Show the line. Ref [Tree - showLine](/components/tree/#tree-demo-line) | boolean \| object | false | 4.17.0 | | treeNodeFilterProp | Will be used for filtering if `filterTreeNode` returns true | string | `value` | | | treeNodeLabelProp | Will render as content of select | string | `title` | | | value | To set the current selected treeNode(s) | string \| string\[] | - | | diff --git a/components/tree-select/index.zh-CN.md b/components/tree-select/index.zh-CN.md index ad9cdec245..7b92298b8b 100644 --- a/components/tree-select/index.zh-CN.md +++ b/components/tree-select/index.zh-CN.md @@ -76,7 +76,7 @@ demo: | treeExpandAction | 点击节点 title 时的展开逻辑，可选：false \| `click` \| `doubleClick` | string \| boolean | false | 4.21.0 | | treeExpandedKeys | 设置展开的树节点 | string\[] | - | | | treeIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false | | -| treeLine | 是否展示线条样式，请参考 [Tree - showLine](/components/tree-cn#components-tree-demo-line) | boolean \| object | false | 4.17.0 | +| treeLine | 是否展示线条样式，请参考 [Tree - showLine](/components/tree-cn#tree-demo-line) | boolean \| object | false | 4.17.0 | | treeLoadedKeys | （受控）已经加载的节点，需要配合 `loadData` 使用 | string[] | [] | | | treeNodeFilterProp | 输入项过滤对应的 treeNode 属性 | string | `value` | | | treeNodeLabelProp | 作为显示的 prop 设置 | string | `title` | | diff --git a/components/tree/index.ts b/components/tree/index.tsx similarity index 100% rename from components/tree/index.ts rename to components/tree/index.tsx diff --git a/components/typography/index.ts b/components/typography/index.tsx similarity index 100% rename from components/typography/index.ts rename to components/typography/index.tsx diff --git a/components/upload/index.ts b/components/upload/index.tsx similarity index 100% rename from components/upload/index.ts rename to components/upload/index.tsx diff --git a/components/version/index.ts b/components/version/index.tsx similarity index 100% rename from components/version/index.ts rename to components/version/index.tsx diff --git a/docs/blog/virtual-table.en-US.md b/docs/blog/virtual-table.en-US.md index 5255330ce2..7259aafa82 100644 --- a/docs/blog/virtual-table.en-US.md +++ b/docs/blog/virtual-table.en-US.md @@ -31,7 +31,7 @@ Table supports virtual scrolling by setting the `virtual` prop. At the same time ![Rowspan & Colspan](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DYkYQo8tU6sAAAAAAAAAAAAADrJ8AQ/original) -You can visit the [virtual list](/components/table#components-table-demo-virtual-list) example to experience it. +You can visit the [virtual list](/components/table#table-demo-virtual-list) example to experience it. ## Some details diff --git a/docs/blog/virtual-table.zh-CN.md b/docs/blog/virtual-table.zh-CN.md index 4b7de88d92..38503a6800 100644 --- a/docs/blog/virtual-table.zh-CN.md +++ b/docs/blog/virtual-table.zh-CN.md @@ -31,7 +31,7 @@ Table 通过 `virtual` 属性即可开启虚拟滚动能力。同时，原 Table ![Rowspan & Colspan](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DYkYQo8tU6sAAAAAAAAAAAAADrJ8AQ/original) -你可以直接访问 [虚拟列表](/components/table#components-table-demo-virtual-list) 示例进行体验。 +你可以直接访问 [虚拟列表](/components/table#table-demo-virtual-list) 示例进行体验。 ## 一些细节 diff --git a/docs/react/faq.en-US.md b/docs/react/faq.en-US.md index 2ba15d870d..ef024fb076 100644 --- a/docs/react/faq.en-US.md +++ b/docs/react/faq.en-US.md @@ -177,7 +177,7 @@ Or you can simply upgrade to [antd@4.0](https://github.com/ant-design/ant-design Static methods like message/notification/Modal.confirm are not using the same render tree as `