From ad8dd24cc8da09d74fc260840294eb99bede4ca6 Mon Sep 17 00:00:00 2001 From: dingkang Date: Tue, 13 Jun 2023 11:05:05 +0800 Subject: [PATCH 01/51] dome: optimize FloatBotton demo style (#42980) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs: FloatBotton open 属性说明 * test: update snapshots * demo: add controlled demo * demo: update demo * feat: add warning * feat: update warning * demo: update controlled demo * demo: prettify demo style * demo: update snapshots --------- Co-authored-by: 二货机器人 --- .../__tests__/__snapshots__/demo-extend.test.ts.snap | 1 + .../float-button/__tests__/__snapshots__/demo.test.ts.snap | 1 + components/float-button/demo/controlled.tsx | 2 +- 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/components/float-button/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/float-button/__tests__/__snapshots__/demo-extend.test.ts.snap index 8e9c5799a2..993db3167a 100644 --- a/components/float-button/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/float-button/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -855,6 +855,7 @@ Array [ aria-checked="true" class="ant-switch ant-switch-checked" role="switch" + style="margin: 16px;" type="button" >
{ } /> - + ); }; From 1d1f4efcf4036240307ba98b194ab309d5cefbba Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Tue, 13 Jun 2023 11:48:01 +0800 Subject: [PATCH 02/51] type: update type unknown with UploadRef (#42985) * type: update type unknown with UploadRef * type: fix type --- components/upload/Dragger.tsx | 11 +++++++---- components/upload/Upload.tsx | 22 +++++++++++++++------- 2 files changed, 22 insertions(+), 11 deletions(-) diff --git a/components/upload/Dragger.tsx b/components/upload/Dragger.tsx index 4e6efed30a..8f62e9a411 100644 --- a/components/upload/Dragger.tsx +++ b/components/upload/Dragger.tsx @@ -1,12 +1,15 @@ import * as React from 'react'; -import type { UploadProps } from './interface'; +import type { UploadRef } from './Upload'; import Upload from './Upload'; +import type { UploadProps } from './interface'; export type DraggerProps = UploadProps & { height?: number }; -const Dragger = React.forwardRef(({ style, height, ...restProps }, ref) => ( - -)); +const Dragger = React.forwardRef( + ({ style, height, ...restProps }, ref) => ( + + ), +); if (process.env.NODE_ENV !== 'production') { Dragger.displayName = 'Dragger'; diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx index d13ffac898..5bb802a004 100644 --- a/components/upload/Upload.tsx +++ b/components/upload/Upload.tsx @@ -4,11 +4,12 @@ import RcUpload from 'rc-upload'; import useMergedState from 'rc-util/lib/hooks/useMergedState'; import * as React from 'react'; import { flushSync } from 'react-dom'; +import warning from '../_util/warning'; import { ConfigContext } from '../config-provider'; import DisabledContext from '../config-provider/DisabledContext'; -import defaultLocale from '../locale/en_US'; import { useLocale } from '../locale'; -import warning from '../_util/warning'; +import defaultLocale from '../locale/en_US'; +import UploadList from './UploadList'; import type { RcFile, ShowUploadListInterface, @@ -16,16 +17,23 @@ import type { UploadFile, UploadProps, } from './interface'; -import UploadList from './UploadList'; -import { file2Obj, getFileItem, removeFileItem, updateFileList } from './utils'; - import useStyle from './style'; +import { file2Obj, getFileItem, removeFileItem, updateFileList } from './utils'; export const LIST_IGNORE = `__LIST_IGNORE_${Date.now()}__`; export type { UploadProps }; -const InternalUpload: React.ForwardRefRenderFunction = (props, ref) => { +export interface UploadRef { + onBatchStart: RcUploadProps['onBatchStart']; + onSuccess: (response: any, file: RcFile, xhr: any) => void; + onProgress: (e: { percent: number }, file: RcFile) => void; + onError: (error: Error, response: any, file: RcFile) => void; + fileList: UploadFile[]; + upload: RcUpload | null; +} + +const InternalUpload: React.ForwardRefRenderFunction = (props, ref) => { const { fileList, defaultFileList, @@ -461,7 +469,7 @@ const InternalUpload: React.ForwardRefRenderFunction = (pr ); }; -const Upload = React.forwardRef(InternalUpload); +const Upload = React.forwardRef(InternalUpload); if (process.env.NODE_ENV !== 'production') { Upload.displayName = 'Upload'; From 38105982c06106da1c741962b03e9596939ec4e1 Mon Sep 17 00:00:00 2001 From: Dunqing Date: Tue, 13 Jun 2023 12:00:39 +0800 Subject: [PATCH 03/51] chore: update eslint configuration to avoid lint errors in json files (#42895) --- .eslintrc.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/.eslintrc.js b/.eslintrc.js index 5e01410968..25d5d9f7f1 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -119,6 +119,13 @@ module.exports = { 'react/no-danger': 0, }, }, + { + files: ['**/*.json'], + rules: { + 'no-unused-expressions': 0, + 'comma-dangle': 0, + }, + }, ], rules: { 'react/jsx-one-expression-per-line': 0, From 8dba94b3890808954baa2addcde060de81c7decf Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 13 Jun 2023 12:55:09 +0800 Subject: [PATCH 04/51] chore: fix site-deploy.yml from OOM (#42990) * Update site-deploy.yml * Update site-deploy.yml --- .github/workflows/site-deploy.yml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.github/workflows/site-deploy.yml b/.github/workflows/site-deploy.yml index 5a19ca0cfb..c29009f69c 100644 --- a/.github/workflows/site-deploy.yml +++ b/.github/workflows/site-deploy.yml @@ -69,11 +69,14 @@ jobs: - name: build site run: npm run predeploy + env: + NODE_OPTIONS: "--max_old_space_size=4096" - name: build dist and bundle analyzer report run: npm run dist env: ANALYZER: 1 + NODE_OPTIONS: "--max_old_space_size=4096" - name: Get version id: publish-version From c7a80f88de24f8426aad8eeda163a23af3258aa2 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Tue, 13 Jun 2023 13:11:02 +0800 Subject: [PATCH 05/51] docs: title level (#42988) --- docs/react/migrate-less-variables.en-US.md | 12 ++++++------ docs/react/migrate-less-variables.zh-CN.md | 12 ++++++------ 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md index 15c9a7a913..2a6709f67c 100644 --- a/docs/react/migrate-less-variables.en-US.md +++ b/docs/react/migrate-less-variables.en-US.md @@ -42,7 +42,7 @@ export default App; -## Anchor +### Anchor | Less variables | Component Token | Note | @@ -89,7 +89,7 @@ export default App; -## Calendar +### Calendar | Less variables | Component Token | Note | @@ -127,7 +127,7 @@ export default App; | `@card-head-tabs-margin-bottom` | `tabsMarginBottom` | - | | `@card-head-extra-color` | `extraColor` | - | -## Carousel +### Carousel | Less variables | Component Token | Note | @@ -140,7 +140,7 @@ export default App; -## Checkbox +### Checkbox | Less variables | Component Token | Note | @@ -344,7 +344,7 @@ export default App; | `@radio-disabled-button-checked-color` | `buttonCheckdColorDisabled` | - | | `@radio-wrapper-margin-right` | `wrapperMarginInlineEnd` | - | -## Rate +### Rate | Less variables | Component Token | Note | @@ -464,7 +464,7 @@ export default App; | `@tabs-card-gutter` | `cardGutter` | - | | `@tabs-card-tab-active-border-top` | - | Deprecated | -## Tag +### Tag | Less variables | Component Token | Note | diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md index 389f46c7d8..0c5da0e6ab 100644 --- a/docs/react/migrate-less-variables.zh-CN.md +++ b/docs/react/migrate-less-variables.zh-CN.md @@ -42,7 +42,7 @@ export default App; -## Anchor 锚点 +### Anchor 锚点 | Less 变量 | Component Token | 备注 | @@ -89,7 +89,7 @@ export default App; -## Calendar 日历 +### Calendar 日历 | Less 变量 | Component Token | 备注 | @@ -138,7 +138,7 @@ export default App; -## Checkbox 多选框 +### Checkbox 多选框 | Less 变量 | Component Token | 备注 | @@ -320,7 +320,7 @@ Mentions 提及 -## Radio 单选框 +### Radio 单选框 | less 变量 | Component Token | 备注 | @@ -342,7 +342,7 @@ Mentions 提及 | `@radio-disabled-button-checked-color` | `buttonCheckdColorDisabled` | - | | `@radio-wrapper-margin-right` | `wrapperMarginInlineEnd` | - | -## Rate 评分 +### Rate 评分 | less 变量 | Component Token | 备注 | @@ -461,7 +461,7 @@ Mentions 提及 | `@tabs-card-gutter` | `cardGutter` | - | | `@tabs-card-tab-active-border-top` | - | 已废弃 | -## Tag 标签 +### Tag 标签 | less 变量 | Component Token | 备注 | From 43d2a7fa19107351cad11e2b37f119f66bd70ce4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9C=AA=E8=A7=89=E9=9B=A8=E5=A3=B0?= <544022268@qq.com> Date: Tue, 13 Jun 2023 15:45:34 +0800 Subject: [PATCH 06/51] docs: fix incorrect styles (#42992) * docs: fix incorrect styles * chore: update --- .dumi/theme/common/styles/BrowserMockup.tsx | 2 +- .dumi/theme/common/styles/Reset.tsx | 2 +- .dumi/theme/common/styles/Responsive.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.dumi/theme/common/styles/BrowserMockup.tsx b/.dumi/theme/common/styles/BrowserMockup.tsx index 1313b7620a..f0c5266bc8 100644 --- a/.dumi/theme/common/styles/BrowserMockup.tsx +++ b/.dumi/theme/common/styles/BrowserMockup.tsx @@ -47,7 +47,7 @@ export default () => ( top: -1.6em; left: 5.5em; display: block; - width: ~'calc(100% - 6em)'; + width: calc(100% - 6em); height: 1.2em; background-color: white; border-radius: 2px; diff --git a/.dumi/theme/common/styles/Reset.tsx b/.dumi/theme/common/styles/Reset.tsx index 8b91989889..bb4dc5fa48 100644 --- a/.dumi/theme/common/styles/Reset.tsx +++ b/.dumi/theme/common/styles/Reset.tsx @@ -53,7 +53,7 @@ export default () => { font-family: ${token.fontFamily}; line-height: ${token.lineHeight}; background: ${token.colorBgContainer}; - transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1); + transition: background-color 1s cubic-bezier(0.075, 0.82, 0.165, 1); } `} /> diff --git a/.dumi/theme/common/styles/Responsive.tsx b/.dumi/theme/common/styles/Responsive.tsx index 2b99062a57..fdb84fcf35 100644 --- a/.dumi/theme/common/styles/Responsive.tsx +++ b/.dumi/theme/common/styles/Responsive.tsx @@ -87,7 +87,7 @@ export default () => { } .prev-next-nav { - width: ~'calc(100% - 32px)'; + width: calc(100% - 32px); margin-left: 16px; .ant-row-rtl & { From 478a2a9086b9fe5d3fb78f18aaa080818ef1d6c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=98=91=E8=8F=87?= <719405450@qq.com> Date: Tue, 13 Jun 2023 19:22:36 +0800 Subject: [PATCH 07/51] docs(Tree): update docs (#42989) * docs: update docs * docs: update docs * docs: update docs --- components/tree/index.en-US.md | 2 +- components/tree/index.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/tree/index.en-US.md b/components/tree/index.en-US.md index cce32867fe..a1af71257e 100644 --- a/components/tree/index.en-US.md +++ b/components/tree/index.en-US.md @@ -61,7 +61,7 @@ Almost anything can be represented in a tree structure. Examples include directo | rootClassName | ClassName on the root element | string | - | 4.20.0 | | rootStyle | Style on the root element | CSSProperties | - | 4.20.0 | | selectable | Whether can be selected | boolean | true | | -| selectedKeys | (Controlled) Specifies the keys of the selected treeNodes | string\[] | - | | +| selectedKeys | (Controlled) Specifies the keys of the selected treeNodes, multiple selection needs to set `multiple` to true | string\[] | - | | | showIcon | 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 | | | showLine | Shows a connecting line | boolean \| {showLeafIcon: boolean \| ReactNode \| ((props: AntTreeNodeProps) => ReactNode)} | false | | | switcherIcon | Customize collapse/expand icon of tree node | ReactNode \| ((props: AntTreeNodeProps) => ReactNode) | - | renderProps: 4.20.0 | diff --git a/components/tree/index.zh-CN.md b/components/tree/index.zh-CN.md index 23959929d5..c05c883ae0 100644 --- a/components/tree/index.zh-CN.md +++ b/components/tree/index.zh-CN.md @@ -63,7 +63,7 @@ demo: | rootClassName | 添加在 Tree 最外层的 className | string | - | 4.20.0 | | rootStyle | 添加在 Tree 最外层的 style | CSSProperties | - | 4.20.0 | | selectable | 是否可选中 | boolean | true | | -| selectedKeys | （受控）设置选中的树节点 | string\[] | - | | +| selectedKeys | （受控）设置选中的树节点，多选需设置 `multiple` 为 true | string\[] | - | | | showIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false | | | showLine | 是否展示连接线 | boolean \| {showLeafIcon: boolean \| ReactNode \| ((props: AntTreeNodeProps) => ReactNode)} | false | | | switcherIcon | 自定义树节点的展开/折叠图标 | ReactNode \| ((props: AntTreeNodeProps) => ReactNode) | - | renderProps: 4.20.0 | From 3efb68ce6f264d8d1c74cb0c4161112da69733f2 Mon Sep 17 00:00:00 2001 From: muxin <434980373@qq.com> Date: Tue, 13 Jun 2023 20:55:39 +0800 Subject: [PATCH 08/51] refactor: rc-input-number refactored with baseInput (#42762) * refactor: refactor with BaseInput * chore: bump rc-mentions & rc-textarea * test: update snapshots * test: update snapshots * chore: bump rc-input * fix: bump rc-input * test: update snapshot * test: update snapshot penta * test: update snapshot * fix: optimize function props * test: update test * test: update test * test: update test * fix: delete useless className * feat: let baseInput cal class * chore: bump rc-input-number * test: update test * Revert "test: update test" This reverts commit a44b35a7447b8a282abccd32640d47510a2963fa. * test: update snapshot * test: update snapshot * test: update snapshot * chore: bump rc-input-number * chore: bump rc-input-number & rc-mentions --------- Co-authored-by: MadCcc <1075746765@qq.com> --- .../input-number/__tests__/prefix.test.tsx | 2 +- components/input-number/index.tsx | 153 ++++++------------ package.json | 8 +- 3 files changed, 58 insertions(+), 105 deletions(-) diff --git a/components/input-number/__tests__/prefix.test.tsx b/components/input-number/__tests__/prefix.test.tsx index 2588e1d2ed..de367d8c10 100644 --- a/components/input-number/__tests__/prefix.test.tsx +++ b/components/input-number/__tests__/prefix.test.tsx @@ -18,7 +18,7 @@ describe('prefix', () => { const { container } = render(123} />); const mockFocus = jest.spyOn(container.querySelector('input')!, 'focus'); - fireEvent.mouseUp(container.querySelector('i')!); + fireEvent.click(container.querySelector('i')!); expect(mockFocus).toHaveBeenCalled(); }); }); diff --git a/components/input-number/index.tsx b/components/input-number/index.tsx index b08cbe483b..976c12c4db 100644 --- a/components/input-number/index.tsx +++ b/components/input-number/index.tsx @@ -5,7 +5,6 @@ import classNames from 'classnames'; import type { InputNumberProps as RcInputNumberProps } from 'rc-input-number'; import RcInputNumber from 'rc-input-number'; import * as React from 'react'; -import { cloneElement } from '../_util/reactNode'; import type { InputStatus } from '../_util/statusUtils'; import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils'; import ConfigProvider, { ConfigContext } from '../config-provider'; @@ -33,7 +32,6 @@ export interface InputNumberProps const InputNumber = React.forwardRef((props, ref) => { const { getPrefixCls, direction } = React.useContext(ConfigContext); - const [focused, setFocus] = React.useState(false); const inputRef = React.useRef(null); React.useImperativeHandle(ref, () => inputRef.current!); @@ -89,9 +87,6 @@ const InputNumber = React.forwardRef((props, const mergedSize = useSize((ctx) => compactSize ?? customizeSize ?? ctx); - const hasPrefix = prefix != null || hasFeedback; - const hasAddon = !!(addonBefore || addonAfter); - // ===================== Disabled ===================== const disabled = React.useContext(DisabledContext); const mergedDisabled = customDisabled ?? disabled; @@ -107,115 +102,73 @@ const InputNumber = React.forwardRef((props, getStatusClassNames(prefixCls, mergedStatus), compactItemClassnames, hashId, - className, - !hasPrefix && !hasAddon && rootClassName, ); + const wrapperClassName = `${prefixCls}-group`; - let element = ( + const element = ( + + {addonAfter} + + + ) + } + addonBefore={ + addonBefore && ( + + + {addonBefore} + + + ) + } + classNames={{ + input: inputNumberClass, + }} + classes={{ + affixWrapper: classNames( + getStatusClassNames(`${prefixCls}-affix-wrapper`, mergedStatus, hasFeedback), + { + [`${prefixCls}-affix-wrapper-sm`]: mergedSize === 'small', + [`${prefixCls}-affix-wrapper-lg`]: mergedSize === 'large', + [`${prefixCls}-affix-wrapper-rtl`]: direction === 'rtl', + [`${prefixCls}-affix-wrapper-borderless`]: !bordered, + }, + hashId, + ), + wrapper: classNames( + { + [`${wrapperClassName}-rtl`]: direction === 'rtl', + }, + hashId, + ), + group: classNames( + { + [`${prefixCls}-group-wrapper-sm`]: mergedSize === 'small', + [`${prefixCls}-group-wrapper-lg`]: mergedSize === 'large', + [`${prefixCls}-group-wrapper-rtl`]: direction === 'rtl', + }, + getStatusClassNames(`${prefixCls}-group-wrapper`, mergedStatus, hasFeedback), + hashId, + ), + }} {...others} /> ); - if (hasPrefix) { - const affixWrapperCls = classNames( - `${prefixCls}-affix-wrapper`, - getStatusClassNames(`${prefixCls}-affix-wrapper`, mergedStatus, hasFeedback), - { - [`${prefixCls}-affix-wrapper-focused`]: focused, - [`${prefixCls}-affix-wrapper-disabled`]: props.disabled, - [`${prefixCls}-affix-wrapper-sm`]: mergedSize === 'small', - [`${prefixCls}-affix-wrapper-lg`]: mergedSize === 'large', - [`${prefixCls}-affix-wrapper-rtl`]: direction === 'rtl', - [`${prefixCls}-affix-wrapper-readonly`]: readOnly, - [`${prefixCls}-affix-wrapper-borderless`]: !bordered, - }, - - // className will go to addon wrapper - !hasAddon && className, - !hasAddon && rootClassName, - hashId, - ); - - element = ( -
inputRef.current!.focus()} - > - {prefix && {prefix}} - {cloneElement(element, { - style: null, - value: props.value, - onFocus: (event: React.FocusEvent) => { - setFocus(true); - props.onFocus?.(event); - }, - onBlur: (event: React.FocusEvent) => { - setFocus(false); - props.onBlur?.(event); - }, - })} - {hasFeedback && {feedbackIcon}} -
- ); - } - - if (hasAddon) { - const wrapperClassName = `${prefixCls}-group`; - const addonClassName = `${wrapperClassName}-addon`; - const addonBeforeNode = addonBefore ? ( -
{addonBefore}
- ) : null; - const addonAfterNode = addonAfter ?
{addonAfter}
: null; - - const mergedWrapperClassName = classNames(`${prefixCls}-wrapper`, wrapperClassName, hashId, { - [`${wrapperClassName}-rtl`]: direction === 'rtl', - }); - - const mergedGroupClassName = classNames( - `${prefixCls}-group-wrapper`, - { - [`${prefixCls}-group-wrapper-sm`]: mergedSize === 'small', - [`${prefixCls}-group-wrapper-lg`]: mergedSize === 'large', - [`${prefixCls}-group-wrapper-rtl`]: direction === 'rtl', - }, - getStatusClassNames(`${prefixCls}-group-wrapper`, mergedStatus, hasFeedback), - hashId, - className, - rootClassName, - ); - element = ( -
-
- {addonBeforeNode && ( - - - {addonBeforeNode} - - - )} - {cloneElement(element, { style: null, disabled: mergedDisabled })} - {addonAfterNode && ( - - - {addonAfterNode} - - - )} -
-
- ); - } - return wrapSSR(element); }); diff --git a/package.json b/package.json index ac188e75c7..5aa67337ca 100644 --- a/package.json +++ b/package.json @@ -130,9 +130,9 @@ "rc-dropdown": "~4.1.0", "rc-field-form": "~1.32.0", "rc-image": "~5.17.1", - "rc-input": "~1.0.4", - "rc-input-number": "~7.4.0", - "rc-mentions": "~2.3.0", + "rc-input": "~1.1.0", + "rc-input-number": "~8.0.0", + "rc-mentions": "~2.4.1", "rc-menu": "~9.9.2", "rc-motion": "^2.7.3", "rc-notification": "~5.0.4", @@ -148,7 +148,7 @@ "rc-switch": "~4.1.0", "rc-table": "~7.32.1", "rc-tabs": "~12.7.0", - "rc-textarea": "~1.2.2", + "rc-textarea": "~1.3.0", "rc-tooltip": "~6.0.0", "rc-tree": "~5.7.4", "rc-tree-select": "~5.9.0", From 3eb62fad15772daac3b12bfad0d1a3542d85bd60 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Tue, 13 Jun 2023 21:36:40 +0800 Subject: [PATCH 09/51] Revert "refactor: rc-input-number refactored with baseInput (#42762)" This reverts commit 3efb68ce6f264d8d1c74cb0c4161112da69733f2. --- .../input-number/__tests__/prefix.test.tsx | 2 +- components/input-number/index.tsx | 153 ++++++++++++------ package.json | 8 +- 3 files changed, 105 insertions(+), 58 deletions(-) diff --git a/components/input-number/__tests__/prefix.test.tsx b/components/input-number/__tests__/prefix.test.tsx index de367d8c10..2588e1d2ed 100644 --- a/components/input-number/__tests__/prefix.test.tsx +++ b/components/input-number/__tests__/prefix.test.tsx @@ -18,7 +18,7 @@ describe('prefix', () => { const { container } = render(123} />); const mockFocus = jest.spyOn(container.querySelector('input')!, 'focus'); - fireEvent.click(container.querySelector('i')!); + fireEvent.mouseUp(container.querySelector('i')!); expect(mockFocus).toHaveBeenCalled(); }); }); diff --git a/components/input-number/index.tsx b/components/input-number/index.tsx index 976c12c4db..b08cbe483b 100644 --- a/components/input-number/index.tsx +++ b/components/input-number/index.tsx @@ -5,6 +5,7 @@ import classNames from 'classnames'; import type { InputNumberProps as RcInputNumberProps } from 'rc-input-number'; import RcInputNumber from 'rc-input-number'; import * as React from 'react'; +import { cloneElement } from '../_util/reactNode'; import type { InputStatus } from '../_util/statusUtils'; import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils'; import ConfigProvider, { ConfigContext } from '../config-provider'; @@ -32,6 +33,7 @@ export interface InputNumberProps const InputNumber = React.forwardRef((props, ref) => { const { getPrefixCls, direction } = React.useContext(ConfigContext); + const [focused, setFocus] = React.useState(false); const inputRef = React.useRef(null); React.useImperativeHandle(ref, () => inputRef.current!); @@ -87,6 +89,9 @@ const InputNumber = React.forwardRef((props, const mergedSize = useSize((ctx) => compactSize ?? customizeSize ?? ctx); + const hasPrefix = prefix != null || hasFeedback; + const hasAddon = !!(addonBefore || addonAfter); + // ===================== Disabled ===================== const disabled = React.useContext(DisabledContext); const mergedDisabled = customDisabled ?? disabled; @@ -102,73 +107,115 @@ const InputNumber = React.forwardRef((props, getStatusClassNames(prefixCls, mergedStatus), compactItemClassnames, hashId, + className, + !hasPrefix && !hasAddon && rootClassName, ); - const wrapperClassName = `${prefixCls}-group`; - const element = ( + let element = ( - - {addonAfter} - - - ) - } - addonBefore={ - addonBefore && ( - - - {addonBefore} - - - ) - } - classNames={{ - input: inputNumberClass, - }} - classes={{ - affixWrapper: classNames( - getStatusClassNames(`${prefixCls}-affix-wrapper`, mergedStatus, hasFeedback), - { - [`${prefixCls}-affix-wrapper-sm`]: mergedSize === 'small', - [`${prefixCls}-affix-wrapper-lg`]: mergedSize === 'large', - [`${prefixCls}-affix-wrapper-rtl`]: direction === 'rtl', - [`${prefixCls}-affix-wrapper-borderless`]: !bordered, - }, - hashId, - ), - wrapper: classNames( - { - [`${wrapperClassName}-rtl`]: direction === 'rtl', - }, - hashId, - ), - group: classNames( - { - [`${prefixCls}-group-wrapper-sm`]: mergedSize === 'small', - [`${prefixCls}-group-wrapper-lg`]: mergedSize === 'large', - [`${prefixCls}-group-wrapper-rtl`]: direction === 'rtl', - }, - getStatusClassNames(`${prefixCls}-group-wrapper`, mergedStatus, hasFeedback), - hashId, - ), - }} {...others} /> ); + if (hasPrefix) { + const affixWrapperCls = classNames( + `${prefixCls}-affix-wrapper`, + getStatusClassNames(`${prefixCls}-affix-wrapper`, mergedStatus, hasFeedback), + { + [`${prefixCls}-affix-wrapper-focused`]: focused, + [`${prefixCls}-affix-wrapper-disabled`]: props.disabled, + [`${prefixCls}-affix-wrapper-sm`]: mergedSize === 'small', + [`${prefixCls}-affix-wrapper-lg`]: mergedSize === 'large', + [`${prefixCls}-affix-wrapper-rtl`]: direction === 'rtl', + [`${prefixCls}-affix-wrapper-readonly`]: readOnly, + [`${prefixCls}-affix-wrapper-borderless`]: !bordered, + }, + + // className will go to addon wrapper + !hasAddon && className, + !hasAddon && rootClassName, + hashId, + ); + + element = ( +
inputRef.current!.focus()} + > + {prefix && {prefix}} + {cloneElement(element, { + style: null, + value: props.value, + onFocus: (event: React.FocusEvent) => { + setFocus(true); + props.onFocus?.(event); + }, + onBlur: (event: React.FocusEvent) => { + setFocus(false); + props.onBlur?.(event); + }, + })} + {hasFeedback && {feedbackIcon}} +
+ ); + } + + if (hasAddon) { + const wrapperClassName = `${prefixCls}-group`; + const addonClassName = `${wrapperClassName}-addon`; + const addonBeforeNode = addonBefore ? ( +
{addonBefore}
+ ) : null; + const addonAfterNode = addonAfter ?
{addonAfter}
: null; + + const mergedWrapperClassName = classNames(`${prefixCls}-wrapper`, wrapperClassName, hashId, { + [`${wrapperClassName}-rtl`]: direction === 'rtl', + }); + + const mergedGroupClassName = classNames( + `${prefixCls}-group-wrapper`, + { + [`${prefixCls}-group-wrapper-sm`]: mergedSize === 'small', + [`${prefixCls}-group-wrapper-lg`]: mergedSize === 'large', + [`${prefixCls}-group-wrapper-rtl`]: direction === 'rtl', + }, + getStatusClassNames(`${prefixCls}-group-wrapper`, mergedStatus, hasFeedback), + hashId, + className, + rootClassName, + ); + element = ( +
+
+ {addonBeforeNode && ( + + + {addonBeforeNode} + + + )} + {cloneElement(element, { style: null, disabled: mergedDisabled })} + {addonAfterNode && ( + + + {addonAfterNode} + + + )} +
+
+ ); + } + return wrapSSR(element); }); diff --git a/package.json b/package.json index 5aa67337ca..ac188e75c7 100644 --- a/package.json +++ b/package.json @@ -130,9 +130,9 @@ "rc-dropdown": "~4.1.0", "rc-field-form": "~1.32.0", "rc-image": "~5.17.1", - "rc-input": "~1.1.0", - "rc-input-number": "~8.0.0", - "rc-mentions": "~2.4.1", + "rc-input": "~1.0.4", + "rc-input-number": "~7.4.0", + "rc-mentions": "~2.3.0", "rc-menu": "~9.9.2", "rc-motion": "^2.7.3", "rc-notification": "~5.0.4", @@ -148,7 +148,7 @@ "rc-switch": "~4.1.0", "rc-table": "~7.32.1", "rc-tabs": "~12.7.0", - "rc-textarea": "~1.3.0", + "rc-textarea": "~1.2.2", "rc-tooltip": "~6.0.0", "rc-tree": "~5.7.4", "rc-tree-select": "~5.9.0", From f777da867ed22cafecc789422ac3aab0dca0964d Mon Sep 17 00:00:00 2001 From: daisy <47104575+linxianxi@users.noreply.github.com> Date: Wed, 14 Jun 2023 10:55:18 +0800 Subject: [PATCH 11/51] fix(Picker): dynamic disabledTime should be correct (#42991) * fix(Picker): dynamic disabledTime should be correct * fix: version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ac188e75c7..4b65da9ccd 100644 --- a/package.json +++ b/package.json @@ -137,7 +137,7 @@ "rc-motion": "^2.7.3", "rc-notification": "~5.0.4", "rc-pagination": "~3.5.0", - "rc-picker": "~3.8.0", + "rc-picker": "~3.8.2", "rc-progress": "~3.4.1", "rc-rate": "~2.12.0", "rc-resize-observer": "^1.2.0", From 02d03ba4ca6e00aa13f96f05a273f4816998361e Mon Sep 17 00:00:00 2001 From: Dunqing Date: Wed, 14 Jun 2023 13:23:40 +0800 Subject: [PATCH 12/51] docs: replace vite with Vite (#43004) --- docs/react/use-with-vite.en-US.md | 6 +++--- docs/react/use-with-vite.zh-CN.md | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/react/use-with-vite.en-US.md b/docs/react/use-with-vite.en-US.md index 1d8e9785bb..f5618153f0 100644 --- a/docs/react/use-with-vite.en-US.md +++ b/docs/react/use-with-vite.en-US.md @@ -1,9 +1,9 @@ --- order: 4 -title: Usage with vite +title: Usage with Vite --- -[vite](https://vitejs.dev/) is one of the best React application development tools. We are going to use `antd` within it and modify the vite config for some customized needs. +[Vite](https://vitejs.dev/) is one of the best React application development tools. We are going to use `antd` within it and modify the vite config for some customized needs. ## Install and Initialization @@ -64,6 +64,6 @@ const App = () => ( export default App; ``` -OK, you should now see a blue primary button displayed on the page. Next you can choose any components of `antd` to develop your application. Visit other workflows of `vite` at its [User Guide](https://vitejs.dev/). +OK, you should now see a blue primary button displayed on the page. Next you can choose any components of `antd` to develop your application. Visit other workflows of `Vite` at its [User Guide](https://vitejs.dev/). We are successfully running antd components now, go build your own application! diff --git a/docs/react/use-with-vite.zh-CN.md b/docs/react/use-with-vite.zh-CN.md index 1be2e9b28f..4a0b8d8e1f 100644 --- a/docs/react/use-with-vite.zh-CN.md +++ b/docs/react/use-with-vite.zh-CN.md @@ -1,9 +1,9 @@ --- order: 4 -title: 在 vite 中使用 +title: 在 Vite 中使用 --- -[vite](https://cn.vitejs.dev/) 是业界最优秀的 React 应用开发工具之一，本文会尝试在 vite 创建的工程中使用 `antd` 组件，并自定义 vite 的配置以满足各类工程化需求。 +[Vite](https://cn.vitejs.dev/) 是业界最优秀的 React 应用开发工具之一，本文会尝试在 Vite 创建的工程中使用 `antd` 组件，并自定义 Vite 的配置以满足各类工程化需求。 ## 安装和初始化 @@ -64,6 +64,6 @@ const App = () => ( export default App; ``` -好了，现在你应该能看到页面上已经有了 `antd` 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 vite 的[官方文档](https://cn.vitejs.dev/)。 +好了，现在你应该能看到页面上已经有了 `antd` 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 Vite 的[官方文档](https://cn.vitejs.dev/)。 我们现在已经把 antd 组件成功运行起来了，开始开发你的应用吧！ From 4a6c09ca2a5b2f62f020699f7f03f5e7fa1e2e2d Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Wed, 14 Jun 2023 16:28:38 +0800 Subject: [PATCH 13/51] site: site optimization (#43007) * site: site optimization * Update practical-projects.zh-CN.md --- .../builtins/InstallDependencies/index.tsx | 18 ++++----- .../builtins/InstallDependencies/npm.tsx | 36 +++++++++++------ .../builtins/InstallDependencies/pnpm.tsx | 40 ++++++++++++------- .../builtins/InstallDependencies/yarn.tsx | 38 +++++++++++------- .dumi/theme/common/styles/Markdown.tsx | 16 ++++++-- docs/react/introduce.en-US.md | 26 ++---------- docs/react/introduce.zh-CN.md | 24 ++--------- docs/react/practical-projects.zh-CN.md | 4 +- 8 files changed, 103 insertions(+), 99 deletions(-) diff --git a/.dumi/theme/builtins/InstallDependencies/index.tsx b/.dumi/theme/builtins/InstallDependencies/index.tsx index 56a0ae043a..5cfa9d42fb 100644 --- a/.dumi/theme/builtins/InstallDependencies/index.tsx +++ b/.dumi/theme/builtins/InstallDependencies/index.tsx @@ -22,30 +22,30 @@ const InstallDependencies: React.FC = (props) => { key: 'npm', children: {npm}, label: ( -
+ - npm -
+ npm + ), }, { key: 'yarn', children: {yarn}, label: ( -
+ - yarn -
+ yarn + ), }, { key: 'pnpm', children: {pnpm}, label: ( -
+ - pnpm -
+ pnpm + ), }, ]} diff --git a/.dumi/theme/builtins/InstallDependencies/npm.tsx b/.dumi/theme/builtins/InstallDependencies/npm.tsx index e8f9ce55ee..ffd6755688 100644 --- a/.dumi/theme/builtins/InstallDependencies/npm.tsx +++ b/.dumi/theme/builtins/InstallDependencies/npm.tsx @@ -1,17 +1,27 @@ import React from 'react'; -const NpmIcon: React.FC = () => ( - - - -); +interface IconProps { + className?: string; + style?: React.CSSProperties; +} + +const NpmIcon: React.FC = (props) => { + const { className, style } = props; + return ( + + + + ); +}; export default NpmIcon; diff --git a/.dumi/theme/builtins/InstallDependencies/pnpm.tsx b/.dumi/theme/builtins/InstallDependencies/pnpm.tsx index 62d1620937..1be5a1ce3a 100644 --- a/.dumi/theme/builtins/InstallDependencies/pnpm.tsx +++ b/.dumi/theme/builtins/InstallDependencies/pnpm.tsx @@ -1,19 +1,29 @@ import React from 'react'; -const PnpmIcon: React.FC = () => ( - -); +interface IconProps { + className?: string; + style?: React.CSSProperties; +} + +const PnpmIcon: React.FC = (props) => { + const { className, style } = props; + return ( + + ); +}; export default PnpmIcon; diff --git a/.dumi/theme/builtins/InstallDependencies/yarn.tsx b/.dumi/theme/builtins/InstallDependencies/yarn.tsx index 95eec5ea8d..c79ac4eee7 100644 --- a/.dumi/theme/builtins/InstallDependencies/yarn.tsx +++ b/.dumi/theme/builtins/InstallDependencies/yarn.tsx @@ -1,18 +1,28 @@ import React from 'react'; -const YarnIcon: React.FC = () => ( - -); +interface IconProps { + className?: string; + style?: React.CSSProperties; +} + +const YarnIcon: React.FC = (props) => { + const { className, style } = props; + return ( + + ); +}; export default YarnIcon; diff --git a/.dumi/theme/common/styles/Markdown.tsx b/.dumi/theme/common/styles/Markdown.tsx index 03cfb0e4ff..efe65e2f57 100644 --- a/.dumi/theme/common/styles/Markdown.tsx +++ b/.dumi/theme/common/styles/Markdown.tsx @@ -180,15 +180,25 @@ const GlobalStyle: React.FC = () => { line-height: 2; } } - + .pic-plus { + & > * { + display: inline-block !important; + vertical-align: middle; + } + span { + margin: 0 20px; + color: #aaa; + font-size: 30px; + } + } .antd-site-snippet { .ant-tabs-tab { .snippet-label { display: flex; align-items: center; justify-content: center; - span { - margin-inline-start: 8px; + svg { + margin-inline-end: 8px; } } } diff --git a/docs/react/introduce.en-US.md b/docs/react/introduce.en-US.md index 7e87404d26..d7cd0b3dc9 100644 --- a/docs/react/introduce.en-US.md +++ b/docs/react/introduce.en-US.md @@ -8,21 +8,9 @@ Following the Ant Design specification, we developed a React UI library `antd` t
+ - +
- - --- ## ✨ Features @@ -56,17 +44,11 @@ You can subscribe to this feed for new version notifications: https://github.com ## Installation -### Using npm or yarn - -**We recommend using npm or yarn to install**, it not only makes development easier, but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling. +### Using npm or yarn or pnpm -```bash -$ npm install antd -``` +**We recommend using [npm](https://www.npmjs.com/) or [yarn](https://github.com/yarnpkg/yarn/) or [pnpm](https://pnpm.io/) to install**, it not only makes development easier, but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling. -```bash -$ yarn add antd -``` + If you are in a bad network environment, you can try other registries and tools like [cnpm](https://github.com/cnpm/cnpm). diff --git a/docs/react/introduce.zh-CN.md b/docs/react/introduce.zh-CN.md index 13632da76b..a206276d3a 100644 --- a/docs/react/introduce.zh-CN.md +++ b/docs/react/introduce.zh-CN.md @@ -11,18 +11,6 @@ title: Ant Design of React
- - --- ## ✨ 特性 @@ -56,17 +44,11 @@ title: Ant Design of React ## 安装 -### 使用 npm 或 yarn 安装 - -**我们推荐使用 npm 或 yarn 的方式进行开发**，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。 +### 使用 npm 或 yarn 或 pnpm 安装 -```bash -$ npm install antd --save -``` +**我们推荐使用 [npm](https://www.npmjs.com/) 或 [yarn](https://github.com/yarnpkg/yarn/) 或 [pnpm](https://pnpm.io/zh/) 的方式进行开发**，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。 -```bash -$ yarn add antd -``` + 如果你的网络环境不佳，推荐使用 [cnpm](https://github.com/cnpm/cnpm)。 diff --git a/docs/react/practical-projects.zh-CN.md b/docs/react/practical-projects.zh-CN.md index 3b2914be43..df02ae4b7d 100644 --- a/docs/react/practical-projects.zh-CN.md +++ b/docs/react/practical-projects.zh-CN.md @@ -11,7 +11,7 @@ Umi，中文发音为「乌米」，是可扩展的企业级前端应用框架 ## 初始化项目 -推荐使用 [pnpm](https://pnpm.io/) 创建 Umi 脚手架，执行以下命令。 +推荐使用 [pnpm](https://pnpm.io/zh/) 创建 Umi 脚手架，执行以下命令。 ```bash $ mkdir myapp && cd myapp @@ -298,7 +298,7 @@ export default function Layout() { { if (menuItemProps.isUrl || menuItemProps.children) { return defaultDom; From f2344a269bc791dba20a82c5021d21bdd7b73228 Mon Sep 17 00:00:00 2001 From: erhu <57227420+erhulee@users.noreply.github.com> Date: Wed, 14 Jun 2023 17:54:11 +0800 Subject: [PATCH 14/51] site: site style optimization (#43010) --- .dumi/theme/common/PrevAndNext.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/.dumi/theme/common/PrevAndNext.tsx b/.dumi/theme/common/PrevAndNext.tsx index 484e756b36..6ead4ea315 100644 --- a/.dumi/theme/common/PrevAndNext.tsx +++ b/.dumi/theme/common/PrevAndNext.tsx @@ -37,7 +37,10 @@ const useStyle = createStyles(({ token }) => { `, prevNav: css` text-align: start; - + display: flex; + justify-content: flex-start; + align-items: center; + .footer-nav-icon-after { display: none; } @@ -57,7 +60,10 @@ const useStyle = createStyles(({ token }) => { `, nextNav: css` text-align: end; - + display: flex; + justify-content: flex-end; + align-items: center; + .footer-nav-icon-before { display: none; } From b72d313448d4d471a750a1fdfc74b4fa2e32f274 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 14 Jun 2023 20:17:52 +0800 Subject: [PATCH 15/51] docs: update getting-started documentation (#43015) --- docs/react/getting-started.en-US.md | 31 ++++++++++++++--------------- docs/react/getting-started.zh-CN.md | 25 +++++++++++------------ 2 files changed, 27 insertions(+), 29 deletions(-) diff --git a/docs/react/getting-started.en-US.md b/docs/react/getting-started.en-US.md index 721a9c391e..72f227d32d 100755 --- a/docs/react/getting-started.en-US.md +++ b/docs/react/getting-started.en-US.md @@ -3,11 +3,11 @@ order: 2 title: Getting Started --- -Ant Design React is dedicated to providing a **good development experience** for programmers. Before starting, it is recommended to learn [React](https://reactjs.org) and [ES2015](http://babeljs.io/docs/learn-es2015/) first, and correctly install and configure [Node.js](https://nodejs.org/) v8 or above. +Ant Design React is dedicated to providing a **good development experience** for programmers. Before starting, it is recommended to learn [React](https://react.dev) first, and correctly install and configure [Node.js](https://nodejs.org/) v16 or above. The official guide also assumes that you have intermediate knowledge about HTML, CSS, and JavaScript, and React. If you are just starting to learn front-end or React, it may not be the best idea to use the UI framework as your first step. -Finally, if you are working in a local development environment, please refer to [Install and Initialization](/docs/react/use-with-create-react-app#install-and-initialization) section of "Use in create-react-app". +Finally, if you are working in a local development environment, please refer to [Use with create-react-app](/docs/react/use-with-create-react-app). --- @@ -27,25 +27,25 @@ Follow the steps below to play around with Ant Design yourself: ### 1. Create a codesandbox -Visit http://u.ant.design/codesandbox-repro to create a codesandbox -- don't forget to press the save button as well to create a new instance. +Visit https://u.ant.design/codesandbox-repro to create a codesandbox -- don't forget to press the save button as well to create a new instance. ### 2. Use and modify an antd component Replace the contents of `index.js` with the following code. As you can see, there is no difference between antd's components and typical React components. -If you have already set things up by following the [Install and Initialization](/docs/react/use-with-create-react-app#install-and-initialization) section of "Use in create-react-app", replace the content of `/src/index.js` as follows: +If you have already set things up by following the [Use with create-react-app](/docs/react/use-with-create-react-app), replace the content of `/src/index.js` as follows: ```jsx import React, { useState } from 'react'; -import { render } from 'react-dom'; +import { createRoot } from 'react-dom/client'; import { DatePicker, message } from 'antd'; -import 'antd/dist/reset.css'; import './index.css'; const App = () => { const [date, setDate] = useState(null); + const [messageApi, contextHolder] = message.useMessage(); const handleChange = (value) => { - message.info(`Selected Date: ${value ? value.format('YYYY-MM-DD') : 'None'}`); + messageApi.info(`Selected Date: ${value ? value.format('YYYY-MM-DD') : 'None'}`); setDate(value); }; return ( @@ -54,11 +54,12 @@ const App = () => {
Selected Date: {date ? date.format('YYYY-MM-DD') : 'None'}
+ {contextHolder}
); }; -render(, document.getElementById('root')); +createRoot(document.getElementById('root')).render(); ``` ### 3. Explore more components @@ -92,15 +93,13 @@ OK! Now that you know the basics of using antd components, you are welcome to ex During actual real-world project development, you will most likely need a development workflow consisting of `compile/build/deploy/lint/debug/` deployment. You can read the following documents on the subject or use the following scaffolds and examples provided below: -- [Ant Design Pro](http://pro.ant.design/) -- [antd-admin](https://github.com/zuiidea/antd-admin) -- [d2-admin](https://github.com/d2-projects/d2-admin) -- [Use in Next](https://github.com/ant-design/create-next-app-antd) -- More scaffolds at [Scaffold Market](http://scaffold.ant.design/) +- [Ant Design Pro](https://pro.ant.design/) +- [create-next-app](https://github.com/ant-design/create-next-app-antd) +- More scaffolds at [Scaffold Market](https://scaffold.ant.design/) ## Test with Jest -If you use `create-react-app` follow the instructions [here](/docs/react/use-with-create-react-app#test-with-jest) instead. +If you use `create-react-app` follow the instructions [here](/docs/react/use-with-create-react-app) instead. Jest does not support `esm` modules, and Ant Design uses them. In order to test your Ant Design application with Jest you have to add the following to your Jest config : @@ -114,6 +113,6 @@ Jest does not support `esm` modules, and Ant Design uses them. In order to test ## Customize your Workflow -If you want to customize your workflow, we recommend using [webpack](http://webpack.github.io/) to build and debug code. You can try out plenty of [boilerplates](https://github.com/enaqx/awesome-react#react-tools) available in the React ecosystem. +If you want to customize your workflow, we recommend using [webpack](https://webpack.js.org) to build and debug code. You can try out plenty of [boilerplates](https://github.com/enaqx/awesome-react#react-tools) available in the React ecosystem. -There are also some [scaffolds](http://scaffold.ant.design/) which have already been integrated into antd, so you can try and start with one of these and even contribute. +There are also some [scaffolds](https://scaffold.ant.design/) which have already been integrated into antd, so you can try and start with one of these and even contribute. diff --git a/docs/react/getting-started.zh-CN.md b/docs/react/getting-started.zh-CN.md index 1db90cba6c..95c736db2c 100755 --- a/docs/react/getting-started.zh-CN.md +++ b/docs/react/getting-started.zh-CN.md @@ -5,7 +5,7 @@ title: 快速上手 Ant Design React 致力于提供给程序员**愉悦**的开发体验。 -> 在开始之前，推荐先学习 [React](http://reactjs.org) 和 [ES2015](http://babeljs.io/docs/learn-es2015/)，并正确安装和配置了 [Node.js](https://nodejs.org/) v8 或以上。官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识，并且已经完全掌握了 React 全家桶的正确开发方式。如果你刚开始学习前端或者 React，将 UI 框架作为你的第一步可能不是最好的主意。 +> 在开始之前，推荐先学习 [React](https://react.dev)，并正确安装和配置了 [Node.js](https://nodejs.org/) v16 或以上。官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识，并且已经完全掌握了 React 全家桶的正确开发方式。如果你刚开始学习前端或者 React，将 UI 框架作为你的第一步可能不是最好的主意。 --- @@ -23,7 +23,7 @@ Ant Design React 致力于提供给程序员**愉悦**的开发体验。 ### 1. 创建一个 codesandbox -访问 http://u.ant.design/codesandbox-repro 创建一个 codesandbox 的在线示例，别忘了保存以创建一个新的实例。 +访问 https://u.ant.design/codesandbox-repro 创建一个 codesandbox 的在线示例，别忘了保存以创建一个新的实例。 ### 2. 使用组件 @@ -31,21 +31,21 @@ Ant Design React 致力于提供给程序员**愉悦**的开发体验。 ```jsx import React, { useState } from 'react'; -import { render } from 'react-dom'; +import { createRoot } from 'react-dom/client'; import { ConfigProvider, DatePicker, message } from 'antd'; // 由于 antd 组件的默认文案是英文，所以需要修改为中文 import dayjs from 'dayjs'; import 'dayjs/locale/zh-cn'; import zhCN from 'antd/locale/zh_CN'; -import 'antd/dist/reset.css'; import './index.css'; dayjs.locale('zh-cn'); const App = () => { const [date, setDate] = useState(null); + const [messageApi, contextHolder] = message.useMessage(); const handleChange = (value) => { - message.info(`您选择的日期是: ${value ? value.format('YYYY年MM月DD日') : '未选择'}`); + messageApi.info(`您选择的日期是: ${value ? value.format('YYYY年MM月DD日') : '未选择'}`); setDate(value); }; return ( @@ -56,11 +56,12 @@ const App = () => { 当前日期：{date ? date.format('YYYY年MM月DD日') : '未选择'} + {contextHolder} ); }; -render(, document.getElementById('root')); +createRoot(document.getElementById('root')).render(); ``` ### 3. 探索更多组件用法 @@ -94,11 +95,9 @@ render(, document.getElementById('root')); 实际项目开发中，你会需要构建、调试、代理、打包部署等一系列工程化的需求。您可以阅读后面的文档或者使用以下脚手架和范例： -- [Ant Design Pro](http://pro.ant.design/) -- [antd-admin](https://github.com/zuiidea/antd-admin) -- [d2-admin](https://github.com/d2-projects/d2-admin) -- [Use in Next](https://github.com/ant-design/create-next-app-antd) -- 更多脚手架可以查看 [脚手架市场](http://scaffold.ant.design/) +- [Ant Design Pro](https://pro.ant.design/) +- [create-next-app](https://github.com/ant-design/create-next-app-antd) +- 更多脚手架可以查看 [脚手架市场](https://scaffold.ant.design/) ## 按需加载 @@ -106,6 +105,6 @@ render(, document.getElementById('root')); ## 自行构建 -如果想自己维护工作流，我们推荐使用 [webpack](https://webpack.github.io/) 进行构建和调试，可以使用 React 生态圈中的 [各种脚手架](https://github.com/enaqx/awesome-react#react-tools) 进行开发。 +如果想自己维护工作流，我们推荐使用 [webpack](https://webpack.js.org) 进行构建和调试，可以使用 React 生态圈中的 [各种脚手架](https://github.com/enaqx/awesome-react#react-tools) 进行开发。 -目前社区也有很多基于 antd 定制的 [React 脚手架](http://scaffold.ant.design/)，欢迎进行试用和贡献。 +目前社区也有很多基于 antd 定制的 [React 脚手架](https://scaffold.ant.design/)，欢迎进行试用和贡献。 From e9bbc588cda2c2e358901647b0f853075c67a082 Mon Sep 17 00:00:00 2001 From: daisy <47104575+linxianxi@users.noreply.github.com> Date: Thu, 15 Jun 2023 09:46:05 +0800 Subject: [PATCH 16/51] fix: Radio.Button title loss (#43012) --- components/checkbox/Checkbox.tsx | 5 +++-- components/checkbox/Group.tsx | 2 ++ components/radio/group.tsx | 1 + package.json | 2 +- 4 files changed, 7 insertions(+), 3 deletions(-) diff --git a/components/checkbox/Checkbox.tsx b/components/checkbox/Checkbox.tsx index 459f38b75d..f35c41b25a 100644 --- a/components/checkbox/Checkbox.tsx +++ b/components/checkbox/Checkbox.tsx @@ -2,11 +2,11 @@ import classNames from 'classnames'; import type { CheckboxRef } from 'rc-checkbox'; import RcCheckbox from 'rc-checkbox'; import * as React from 'react'; +import warning from '../_util/warning'; import { ConfigContext } from '../config-provider'; +import DisabledContext from '../config-provider/DisabledContext'; import { FormItemInputContext } from '../form/context'; -import warning from '../_util/warning'; import { GroupContext } from './Group'; -import DisabledContext from '../config-provider/DisabledContext'; import useStyle from './style'; @@ -18,6 +18,7 @@ export interface AbstractCheckboxProps { checked?: boolean; style?: React.CSSProperties; disabled?: boolean; + title?: string; onChange?: (e: T) => void; onClick?: React.MouseEventHandler; onMouseEnter?: React.MouseEventHandler; diff --git a/components/checkbox/Group.tsx b/components/checkbox/Group.tsx index ce583f6bd3..ac05a83867 100644 --- a/components/checkbox/Group.tsx +++ b/components/checkbox/Group.tsx @@ -14,6 +14,7 @@ export interface CheckboxOptionType { value: CheckboxValueType; style?: React.CSSProperties; disabled?: boolean; + title?: string; onChange?: (e: CheckboxChangeEvent) => void; } @@ -132,6 +133,7 @@ const InternalCheckboxGroup: React.ForwardRefRenderFunction {option.label} diff --git a/components/radio/group.tsx b/components/radio/group.tsx index 8d0053d2ec..92c1e3a97f 100644 --- a/components/radio/group.tsx +++ b/components/radio/group.tsx @@ -76,6 +76,7 @@ const RadioGroup = React.forwardRef((props, ref disabled={option.disabled || disabled} value={option.value} checked={value === option.value} + title={option.title} style={option.style} > {option.label} diff --git a/package.json b/package.json index 4b65da9ccd..544f36c3db 100644 --- a/package.json +++ b/package.json @@ -123,7 +123,7 @@ "dayjs": "^1.11.1", "qrcode.react": "^3.1.0", "rc-cascader": "~3.12.0", - "rc-checkbox": "~3.0.0", + "rc-checkbox": "~3.1.0", "rc-collapse": "~3.7.0", "rc-dialog": "~9.1.0", "rc-drawer": "~6.2.0", From 96a93260d32e30fb5391a030eae8ffe4e630854e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Thu, 15 Jun 2023 10:26:56 +0800 Subject: [PATCH 17/51] refactor: split form context (#43023) --- components/config-provider/index.tsx | 2 +- components/form/Form.tsx | 5 +++-- components/form/context.tsx | 4 +--- components/form/validateMessagesContext.tsx | 7 +++++++ 4 files changed, 12 insertions(+), 6 deletions(-) create mode 100644 components/form/validateMessagesContext.tsx diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index 57f710c392..d609ff9e51 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -7,8 +7,8 @@ import type { ReactElement } from 'react'; import * as React from 'react'; import type { Options } from 'scroll-into-view-if-needed'; import warning from '../_util/warning'; -import { ValidateMessagesContext } from '../form/context'; import type { RequiredMark } from '../form/Form'; +import ValidateMessagesContext from '../form/validateMessagesContext'; import type { Locale } from '../locale'; import LocaleProvider, { ANT_MARK } from '../locale'; import type { LocaleContextProps } from '../locale/context'; diff --git a/components/form/Form.tsx b/components/form/Form.tsx index f52410f5a1..addd149817 100644 --- a/components/form/Form.tsx +++ b/components/form/Form.tsx @@ -12,11 +12,12 @@ import { SizeContextProvider } from '../config-provider/SizeContext'; import useSize from '../config-provider/hooks/useSize'; import type { ColProps } from '../grid/col'; import type { FormContextProps } from './context'; -import { FormContext, FormProvider, ValidateMessagesContext } from './context'; +import { FormContext, FormProvider } from './context'; import useForm, { type FormInstance } from './hooks/useForm'; import useFormWarning from './hooks/useFormWarning'; import type { FormLabelAlign } from './interface'; import useStyle from './style'; +import ValidateMessagesContext from './validateMessagesContext'; export type RequiredMark = boolean | 'optional'; export type FormLayout = 'horizontal' | 'inline' | 'vertical'; @@ -186,6 +187,6 @@ const Form = React.forwardRef(InternalForm) as > & { ref?: React.Ref> }, ) => React.ReactElement; -export { useForm, List, type FormInstance, useWatch }; +export { List, useForm, useWatch, type FormInstance }; export default Form; diff --git a/components/form/context.tsx b/components/form/context.tsx index 07b117874f..ed6bb91f66 100644 --- a/components/form/context.tsx +++ b/components/form/context.tsx @@ -1,6 +1,6 @@ import { FormProvider as RcFormProvider } from 'rc-field-form'; import type { FormProviderProps as RcFormProviderProps } from 'rc-field-form/lib/FormContext'; -import type { Meta, ValidateMessages } from 'rc-field-form/lib/interface'; +import type { Meta } from 'rc-field-form/lib/interface'; import omit from 'rc-util/lib/omit'; import type { FC, PropsWithChildren, ReactNode } from 'react'; import * as React from 'react'; @@ -92,5 +92,3 @@ export const NoFormStyle: FC = ({ children, status, override } ); }; - -export const ValidateMessagesContext = React.createContext(undefined); diff --git a/components/form/validateMessagesContext.tsx b/components/form/validateMessagesContext.tsx new file mode 100644 index 0000000000..c95aba3326 --- /dev/null +++ b/components/form/validateMessagesContext.tsx @@ -0,0 +1,7 @@ +import type { ValidateMessages } from 'rc-field-form/lib/interface'; +import { createContext } from 'react'; + +// ZombieJ: We export single file here since +// ConfigProvider use this which will make loop deps +// to import whole `rc-field-form` +export default createContext(undefined); From 828ff5efb33686515423126af7b34a4f2f8e4646 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Thu, 15 Jun 2023 13:39:47 +0800 Subject: [PATCH 18/51] docs: update docs use-with-create-react-app (#43018) * docs: update docs * Update use-with-umi.en-US.md * Update use-with-umi.zh-CN.md --- docs/react/use-with-create-react-app.en-US.md | 41 +++++++--- docs/react/use-with-create-react-app.zh-CN.md | 41 +++++++--- docs/react/use-with-typescript.en-US.md | 75 ------------------- docs/react/use-with-typescript.zh-CN.md | 75 ------------------- ...rojects.en-US.md => use-with-umi.en-US.md} | 4 +- ...rojects.zh-CN.md => use-with-umi.zh-CN.md} | 2 +- 6 files changed, 67 insertions(+), 171 deletions(-) delete mode 100644 docs/react/use-with-typescript.en-US.md delete mode 100644 docs/react/use-with-typescript.zh-CN.md rename docs/react/{practical-projects.en-US.md => use-with-umi.en-US.md} (99%) rename docs/react/{practical-projects.zh-CN.md => use-with-umi.zh-CN.md} (99%) diff --git a/docs/react/use-with-create-react-app.en-US.md b/docs/react/use-with-create-react-app.en-US.md index a40655dce0..b898d1e030 100644 --- a/docs/react/use-with-create-react-app.en-US.md +++ b/docs/react/use-with-create-react-app.en-US.md @@ -3,13 +3,15 @@ order: 4 title: Usage with create-react-app --- -[create-react-app](https://create-react-app.dev/) is one of the best React application development tools, This article will try to use `create-react-app` to create a project, and introduce antd. +[create-react-app](https://create-react-app.dev/) is one of the best React application development tools, This article will try to use `create-react-app` to create a `TypeScript` project, and introduce antd. + +> We build `antd` based on latest stable version of TypeScript (`>=5.0.0`), please make sure your project dependency matches it. ## Install and Initialization Before all start, you may need install [yarn](https://github.com/yarnpkg/yarn/) or [pnpm](https://pnpm.io/). - + The tool will create and initialize environment and dependencies automatically, please try config your proxy setting or use another npm registry if any network errors happen during it. @@ -17,7 +19,7 @@ Then we go inside project and start it. ```bash $ cd antd-demo -$ yarn start +$ npm run start ``` Open the browser at http://localhost:3000/. It renders a header saying `Welcome to React` on the page. @@ -42,19 +44,17 @@ Below is the default directory structure. └── yarn.lock ``` -Now we install `antd` from yarn or npm. +Now we install `antd` from yarn or npm or pnpm. -```bash -$ yarn add antd -``` + Modify `src/App.js`, import Button component from `antd`. -```jsx +```tsx import { Button } from 'antd'; import React from 'react'; -const App = () => ( +const App: React.FC = () => (
@@ -65,4 +65,27 @@ export default App; OK, you should now see a blue primary button displayed on the page. Next you can choose any components of `antd` to develop your application. Visit other workflows of `create-react-app` at its [User Guide](https://create-react-app.dev/docs/getting-started). +### Customize Theme + +Ref to the [Customize Theme documentation](/docs/react/customize-theme). Modify theme with ConfigProvider: + +```tsx +import { ConfigProvider } from 'antd'; +import React from 'react'; + +const App: React.FC = () => ( + + + +); + +export default App; +``` + +`antd` is written in TypeScript with complete definitions, try out and enjoy the property suggestion and typing check. + +![](https://gw.alipayobjects.com/zos/antfincdn/26L5vPoLug/8d7da796-175e-40af-8eea-e7031ba09f9f.png) + +> Don't install `@types/antd`. + We are successfully running antd components now, go build your own application! diff --git a/docs/react/use-with-create-react-app.zh-CN.md b/docs/react/use-with-create-react-app.zh-CN.md index 8bb2c4534f..58175000ce 100644 --- a/docs/react/use-with-create-react-app.zh-CN.md +++ b/docs/react/use-with-create-react-app.zh-CN.md @@ -3,13 +3,15 @@ order: 4 title: 在 create-react-app 中使用 --- -[create-react-app](https://create-react-app.dev/) 是业界最优秀的 React 应用开发工具之一，本文会尝试使用 `create-react-app` 创建一个项目，并引入 antd。 +[create-react-app](https://create-react-app.dev/) 是业界最优秀的 React 应用开发工具之一，本文会尝试使用 `create-react-app` 创建一个 `TypeScript` 项目，并引入 antd。 + +> `antd` 基于最新稳定版本的 TypeScript（`>=5.0.0`），请确保项目中使用匹配的版本。 ## 安装和初始化 在开始之前，你可能需要安装 [yarn](https://github.com/yarnpkg/yarn/) 或者 [pnpm](https://pnpm.io/zh/)。 - + 工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。 @@ -17,7 +19,7 @@ title: 在 create-react-app 中使用 ```bash $ cd antd-demo -$ yarn start +$ npm run start ``` 此时浏览器会访问 http://localhost:3000/ ，看到 `Welcome to React` 的界面就算成功了。 @@ -42,19 +44,17 @@ $ yarn start └── yarn.lock ``` -现在从 yarn 或 npm 安装并引入 antd。 +现在从 yarn 或 npm 或 pnpm 安装并引入 antd。 -```bash -$ yarn add antd -``` + 修改 `src/App.js`，引入 antd 的按钮组件。 -```jsx +```tsx import { Button } from 'antd'; import React from 'react'; -const App = () => ( +const App: React.FC = () => (
@@ -65,4 +65,27 @@ export default App; 好了，现在你应该能看到页面上已经有了 antd 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 create-react-app 的[官方文档](https://create-react-app.dev/docs/getting-started)。 +### 自定义主题 + +参考 [配置主题](/docs/react/customize-theme)，通过 ConfigProvider 进行主题配置： + +```tsx +import { ConfigProvider } from 'antd'; +import React from 'react'; + +const App: React.FC = () => ( + + + +); + +export default App; +``` + +`antd` 使用 TypeScript 书写并提供了完整的定义，你可以享受组件属性输入建议和定义检查的功能。 + +![](https://gw.alipayobjects.com/zos/antfincdn/26L5vPoLug/8d7da796-175e-40af-8eea-e7031ba09f9f.png) + +> 注意不要安装 `@types/antd`。 + 我们现在已经把 antd 组件成功运行起来了，开始开发你的应用吧！ diff --git a/docs/react/use-with-typescript.en-US.md b/docs/react/use-with-typescript.en-US.md deleted file mode 100644 index 9b841be57d..0000000000 --- a/docs/react/use-with-typescript.en-US.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -order: 5 -title: Usage with TypeScript ---- - -Let's create a `TypeScript` project by using `create-react-app`, then import `antd` step by step. - -> We build `antd` based on latest stable version of TypeScript (`>=5.0.0`), please make sure your project dependency matches it. - -## Install and Initialization - -Ensure your system has installed latest version of [yarn](https://yarnpkg.com) or [npm](https://www.npmjs.com/). - -Create a new [cra-template-typescript](https://github.com/facebook/create-react-app/tree/main/packages/cra-template-typescript) project named `antd-demo-ts`. - - - -If you are using `vite`, there will be an option during build where you can choose the `typescript` template. - -![](https://github-production-user-asset-6210df.s3.amazonaws.com/49217418/245092600-9af66ed4-f44d-4793-9d7a-179ff39fc284.png) - -Then we go inside `antd-demo-ts` and start it. - -```bash -$ cd antd-demo-ts -$ yarn start -``` - -Open browser at http://localhost:3000/, it renders a header saying "Welcome to React" on the page. - -## Import antd - -```bash -$ yarn add antd -``` - -Modify `src/App.tsx`, import Button component from `antd`. - -```tsx -import { Button } from 'antd'; -import React from 'react'; - -const App: React.FC = () => ( -
- -
-); - -export default App; -``` - -OK, reboot with `yarn start`, you should now see a blue primary button displayed on the page. Next you can choose any components of `antd` to develop your application. Visit other workflows of `create-react-app` at it's [User Guide](https://create-react-app.dev/docs/getting-started#creating-a-typescript-app). - -`antd` is written in TypeScript with complete definitions, try out and enjoy the property suggestion and typing check. - -![](https://gw.alipayobjects.com/zos/antfincdn/26L5vPoLug/8d7da796-175e-40af-8eea-e7031ba09f9f.png) - -> Don't install `@types/antd`. - -### Customize Theme - -Ref to the [Customize Theme documentation](/docs/react/customize-theme). Modify theme with ConfigProvider: - -```tsx -import { ConfigProvider } from 'antd'; -import React from 'react'; - -const App: React.FC = () => ( - - - -); - -export default App; -``` diff --git a/docs/react/use-with-typescript.zh-CN.md b/docs/react/use-with-typescript.zh-CN.md deleted file mode 100644 index d5693b9aab..0000000000 --- a/docs/react/use-with-typescript.zh-CN.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -order: 5 -title: 在 TypeScript 中使用 ---- - -使用 `create-react-app` 一步步地创建一个 `TypeScript` 项目，并引入 antd。 - -> `antd` 基于最新稳定版本的 TypeScript（`>=5.0.0`），请确保项目中使用匹配的版本。 - -## 安装和初始化 - -请确保电脑上已经安装了最新版的 [yarn](https://yarnpkg.com) 或者 [npm](https://www.npmjs.com/)。 - -创建 [cra-template-typescript](https://github.com/facebook/create-react-app/tree/main/packages/cra-template-typescript) 项目。 - - - -如果你使用的是 `vite` 作为脚手架，那么在创建过程中会有一个选项，你可以选择 `typescript` 模板。 - -![](https://github-production-user-asset-6210df.s3.amazonaws.com/49217418/245092600-9af66ed4-f44d-4793-9d7a-179ff39fc284.png) - -然后我们进入项目并启动。 - -```bash -$ cd antd-demo-ts -$ yarn start -``` - -此时浏览器会访问 http://localhost:3000/ ，看到 `Welcome to React` 的界面就算成功了。 - -## 引入 antd - -```bash -$ yarn add antd -``` - -修改 `src/App.tsx`，引入 antd 的按钮组件。 - -```tsx -import { Button } from 'antd'; -import React from 'react'; - -const App: React.FC = () => ( -
- -
-); - -export default App; -``` - -重新启动 `yarn start`，现在你应该能看到页面上已经有了 antd 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 create-react-app 的[官方文档](https://create-react-app.dev/docs/getting-started#creating-a-typescript-app)。 - -`antd` 使用 TypeScript 书写并提供了完整的定义，你可以享受组件属性输入建议和定义检查的功能。 - -![](https://gw.alipayobjects.com/zos/antfincdn/26L5vPoLug/8d7da796-175e-40af-8eea-e7031ba09f9f.png) - -> 注意不要安装 `@types/antd`。 - -### 自定义主题 - -参考 [配置主题](/docs/react/customize-theme)，通过 ConfigProvider 进行主题配置： - -```tsx -import { ConfigProvider } from 'antd'; -import React from 'react'; - -const App: React.FC = () => ( - - - -); - -export default App; -``` diff --git a/docs/react/practical-projects.en-US.md b/docs/react/use-with-umi.en-US.md similarity index 99% rename from docs/react/practical-projects.en-US.md rename to docs/react/use-with-umi.en-US.md index c5bc1c0254..891e7abecd 100644 --- a/docs/react/practical-projects.en-US.md +++ b/docs/react/use-with-umi.en-US.md @@ -1,6 +1,6 @@ --- order: 3 -title: Real project with Umi +title: Usage with Umi --- In real project development, besides UI libraries like Ant Design, you may also need build tools, routing solutions, CSS solutions, data flow solutions, request libraries and request solutions, i18n solutions, permission solutions, Icons solutions, etc. We have launched [Umi](https://umijs.org/), an enterprise application framework based on React, based on the scenarios of business scenarios, which we recommend you to use in your projects. @@ -298,7 +298,7 @@ export default function Layout() { { if (menuItemProps.isUrl || menuItemProps.children) { return defaultDom; diff --git a/docs/react/practical-projects.zh-CN.md b/docs/react/use-with-umi.zh-CN.md similarity index 99% rename from docs/react/practical-projects.zh-CN.md rename to docs/react/use-with-umi.zh-CN.md index df02ae4b7d..782f71fa71 100644 --- a/docs/react/practical-projects.zh-CN.md +++ b/docs/react/use-with-umi.zh-CN.md @@ -1,6 +1,6 @@ --- order: 3 -title: 项目实战 +title: 在 Umi 中使用 --- 在真实项目开发中，除了 Ant Design 这样的 UI 库，你可能会还会需要构建工具、路由方案、CSS 方案、数据流方案、请求库和请求方案、国际化方案、权限方案、Icons 方案，等等，才能完成一个完整的项目。我们基于业务场景的场景，推出了基于 React 的企业级应用框架 [Umi](https://umijs.org/)，推荐你在项目中使用。 From 0bfecb16b5f7a2df2494eab1a42761371a0bf613 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Thu, 15 Jun 2023 18:08:14 +0800 Subject: [PATCH 19/51] chore: update script (#43027) --- scripts/test-all.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/test-all.sh b/scripts/test-all.sh index d0bf67832d..d7349a3616 100755 --- a/scripts/test-all.sh +++ b/scripts/test-all.sh @@ -2,7 +2,7 @@ echo "[TEST ALL] test changelog" echo "[TEST ALL] test changelog" > ~test-all.txt -# node ./scripts/check-version-md.ts +ts-node --esm --project tsconfig.node.json ./scripts/check-version-md.ts echo "[TEST ALL] check-commit" echo "[TEST ALL] check-commit" > ~test-all.txt From 37b85e06f2e7bb6fb14da4218e4a8b08cfcca32b Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 15 Jun 2023 18:09:42 +0800 Subject: [PATCH 20/51] docs: fix comma usage (#43029) --- components/app/demo/basic.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/app/demo/basic.md b/components/app/demo/basic.md index 46d15fed4b..f8f1d48607 100644 --- a/components/app/demo/basic.md +++ b/components/app/demo/basic.md @@ -1,6 +1,6 @@ ## zh-CN -获取 `message`, `notification`, `modal` 静态方法。 +获取 `message`、`notification`、`modal` 静态方法。 ## en-US From d16f97fc70171f74015e6a0980fd0d8e8b2eb04f Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 15 Jun 2023 18:17:36 +0800 Subject: [PATCH 21/51] docs: update App component usage (#43030) --- components/app/index.en-US.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/components/app/index.en-US.md b/components/app/index.en-US.md index d6804f75e8..e7cd528e8f 100644 --- a/components/app/index.en-US.md +++ b/components/app/index.en-US.md @@ -8,11 +8,12 @@ demo: cols: 2 --- -New App Component which provide global style & static function replacement. +Application wrapper for some global usages. ## When To Use -Static function in React 18 concurrent mode will not well support. In v5, we recommend to use hooks for the static replacement. But it will make user manual work on define this. +- Provide reset styles based on `.ant-app` element. +- You could use static methods of `message/notification/Modal` form `useApp` without put `contextHolder` mannully. ## Examples From 3c979eb84bebde5ca5305000c92ad7ef2dd3552d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Thu, 15 Jun 2023 23:17:38 +0800 Subject: [PATCH 22/51] site: hide package manager tab which command is empty (#43032) * site: hide pkgManager tab when the command is empty * feat: optimize code * feat: optimize code --- .../builtins/InstallDependencies/index.tsx | 62 ++++++++++--------- 1 file changed, 34 insertions(+), 28 deletions(-) diff --git a/.dumi/theme/builtins/InstallDependencies/index.tsx b/.dumi/theme/builtins/InstallDependencies/index.tsx index 5cfa9d42fb..68cc0f90f4 100644 --- a/.dumi/theme/builtins/InstallDependencies/index.tsx +++ b/.dumi/theme/builtins/InstallDependencies/index.tsx @@ -1,3 +1,4 @@ +import type { TabsProps } from 'antd'; import { Tabs } from 'antd'; import SourceCode from 'dumi/theme-default/builtins/SourceCode'; import React from 'react'; @@ -11,46 +12,51 @@ interface InstallProps { pnpm?: string; } +const npmLabel = ( + + + npm + +); + +const pnpmLabel = ( + + + pnpm + +); + +const yarnLabel = ( + + + yarn + +); + const InstallDependencies: React.FC = (props) => { const { npm, yarn, pnpm } = props; - return ( - ( + () => + [ { key: 'npm', - children: {npm}, - label: ( - - - npm - - ), + children: npm ? {npm} : null, + label: npmLabel, }, { key: 'yarn', - children: {yarn}, - label: ( - - - yarn - - ), + children: yarn ? {yarn} : null, + label: yarnLabel, }, { key: 'pnpm', - children: {pnpm}, - label: ( - - - pnpm - - ), + children: pnpm ? {pnpm} : null, + label: pnpmLabel, }, - ]} - /> + ].filter((item) => item.children), + [npm, yarn, pnpm], ); + return ; }; export default InstallDependencies; From b037433d2bc6fb9826b8c7286db614e19eb5fdb2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Fri, 16 Jun 2023 00:47:55 +0800 Subject: [PATCH 23/51] fix: upload event should not trigger the file out of maxCount (#43034) * fix: upload event should not trigger the file out of maxCount * chore: opt match logic * chore: refactor use some --- components/upload/Upload.tsx | 15 ++++++++++++--- components/upload/__tests__/upload.test.tsx | 7 ++++++- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx index 5bb802a004..1424c3f5ac 100644 --- a/components/upload/Upload.tsx +++ b/components/upload/Upload.tsx @@ -107,10 +107,13 @@ const InternalUpload: React.ForwardRefRenderFunction = ( ) => { let cloneList = [...changedFileList]; + let exceedMaxCount = false; + // Cut to match count if (maxCount === 1) { cloneList = cloneList.slice(-1); } else if (maxCount) { + exceedMaxCount = true; cloneList = cloneList.slice(0, maxCount); } @@ -129,9 +132,15 @@ const InternalUpload: React.ForwardRefRenderFunction = ( changeInfo.event = event; } - flushSync(() => { - onChange?.(changeInfo); - }); + if ( + !exceedMaxCount || + // We should ignore event if current file is exceed `maxCount` + cloneList.some((f) => f.uid === file.uid) + ) { + flushSync(() => { + onChange?.(changeInfo); + }); + } }; const mergedBeforeUpload = async (file: RcFile, fileListArgs: RcFile[]) => { diff --git a/components/upload/__tests__/upload.test.tsx b/components/upload/__tests__/upload.test.tsx index 94dcdfa8b7..a733c80971 100644 --- a/components/upload/__tests__/upload.test.tsx +++ b/components/upload/__tests__/upload.test.tsx @@ -480,7 +480,7 @@ describe('Upload', () => { // Delay return true for remove await waitFakeTimer(); await act(async () => { - await removePromise(true); + removePromise(true); }); expect(onChange).toHaveBeenCalled(); @@ -771,6 +771,11 @@ describe('Upload', () => { name: 'foo.png', }), ]); + + // Only trigger for file in `maxCount` + onChange.mock.calls.forEach((args) => { + expect(args[0].file.name).toBe('foo.png'); + }); }); }); From 96ff8b946e72bcccd6c49af3250f7cda2ea4d269 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Fri, 16 Jun 2023 01:07:51 +0800 Subject: [PATCH 24/51] docs: update development workflow in the document about contributing (#43037) * docs: update development workflow in the document about contributing * docs: update docs * docs: update docs --------- Co-authored-by: lijianan <574980606@qq.com> --- docs/react/contributing.en-US.md | 54 ++++++++++++++++++++++---------- docs/react/contributing.zh-CN.md | 54 ++++++++++++++++++++++---------- 2 files changed, 76 insertions(+), 32 deletions(-) diff --git a/docs/react/contributing.en-US.md b/docs/react/contributing.en-US.md index 69c07dc68c..7d121fd205 100644 --- a/docs/react/contributing.en-US.md +++ b/docs/react/contributing.en-US.md @@ -49,12 +49,12 @@ The core team is monitoring for pull requests. We will review your pull request **Before submitting a pull request**, please make sure the following is done: 1. Fork the repository and create your branch from the [correct branch](#branch-organization). -1. Run `npm install` in the repository root. -1. If you've fixed a bug or added code that should be tested, add tests! -1. Ensure the test suite passes (npm run test). Tip: `npm test -- --watch TestName` is helpful in development. -1. Run `npm test -- -u` to update the [jest snapshots](https://jestjs.io/docs/snapshot-testing) and commit these changes as well (if there are any updates). -1. Ensure the UI change passes `npm run test-image`，Run `npm run test-image -- -u` to update UI snapshots and commit these changes as well (if there are any updates), **UI test base on [Docker](https://docs.docker.com/get-docker/), need download the corresponding installation according to the platform** -1. Make sure your code lints (npm run lint). Tip: Lint runs automatically when you `git commit` (Use [Git Hooks](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks)). +2. Run `npm install` in the repository root. +3. If you've fixed a bug or added code that should be tested, add tests! +4. Ensure the test suite passes (npm run test). Tip: `npm test -- --watch TestName` is helpful in development. +5. Run `npm test -- -u` to update the [jest snapshots](https://jestjs.io/docs/snapshot-testing) and commit these changes as well (if there are any updates). +6. Ensure the UI change passes `npm run test-image`，Run `npm run test-image -- -u` to update UI snapshots and commit these changes as well (if there are any updates), **UI test base on [Docker](https://docs.docker.com/get-docker/), need download the corresponding installation according to the platform** +7. Make sure your code lints (npm run lint). Tip: Lint runs automatically when you `git commit` (Use [Git Hooks](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks)). Sending a Pull Request to [react-component](https://github.com/react-component/): @@ -62,19 +62,41 @@ Since antd's components are based on react-component, sometimes you may need to ## Development Workflow -Before you can start you must run the following command to enable [corepack](https://nodejs.org/api/corepack.html)。 +`npm` or `yarn` are recommended as package management tools. -```bash -corepack enable -``` +After you clone the antd code and use following commands to install dependencies: -After cloning antd, run `npm install` to fetch its dependencies. Then, you can run several commands: + -1. `npm start` runs Ant Design website locally. -1. `npm run lint` checks the code style. -1. `npm test` runs the complete test suite. (Make sure the `NODE_ENV` environment variable is unset, or it may causing some problems.) -1. `npm run compile` compiles TypeScript code to the `lib` and `es` directory. -1. `npm run dist` creates UMD build of antd. +You can also run the following common commands: + +### Run locally + +Runs Ant Design website locally. + + + +### Checks the code style + + + +### Run test + +runs the complete test suite. (Make sure the `NODE_ENV` environment variable is unset, or it may causing some problems.) + + + +### Compile + +compiles TypeScript code to the `lib` and `es` directory. + + + +### Build + +creates UMD build of antd. + + ## Development Tools diff --git a/docs/react/contributing.zh-CN.md b/docs/react/contributing.zh-CN.md index ebf7e53882..0c6541ae60 100644 --- a/docs/react/contributing.zh-CN.md +++ b/docs/react/contributing.zh-CN.md @@ -49,12 +49,12 @@ Ant Design 团队会关注所有的 pull request，我们会 review 以及合并 **在你发送 Pull Request 之前**，请确认你是按照下面的步骤来做的： 1. 基于 [正确的分支](#分支管理) 做修改。 -1. 在项目根目录下运行了 `npm install`。 -1. 如果你修复了一个 bug 或者新增了一个功能，请确保写了相应的测试，这很重要。 -1. 确认所有的测试都是通过的 `npm run test`。 小贴士：开发过程中可以用 `npm test -- --watch TestName` 来运行指定的测试。 -1. 运行 `npm test -- -u` 来更新 [jest snapshot](https://jestjs.io/zh-Hans/docs/snapshot-testing) 并且把这些更新也提交上来（如果有的话）。 -1. 确认所有的 UI 改动通过 `npm run test-image`，可以运行 `npm run test-image -- -u` 更新 UI 快照并且把这些更新也提交上来（如果有的话），**UI 测试基于 [Docker](https://docs.docker.com/get-docker/)，根据平台下载对应的安装程序。** -1. 确保你的代码通过了 lint 检查 `npm run lint`. 小贴士: Lint 会在你 `git commit` 的时候自动运行（通过[Git Hooks](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks)）。 +2. 在项目根目录下运行了 `npm install`。 +3. 如果你修复了一个 bug 或者新增了一个功能，请确保写了相应的测试，这很重要。 +4. 确认所有的测试都是通过的 `npm run test`。 小贴士：开发过程中可以用 `npm test -- --watch TestName` 来运行指定的测试。 +5. 运行 `npm test -- -u` 来更新 [jest snapshot](https://jestjs.io/zh-Hans/docs/snapshot-testing) 并且把这些更新也提交上来（如果有的话）。 +6. 确认所有的 UI 改动通过 `npm run test-image`，可以运行 `npm run test-image -- -u` 更新 UI 快照并且把这些更新也提交上来（如果有的话），**UI 测试基于 [Docker](https://docs.docker.com/get-docker/)，根据平台下载对应的安装程序。** +7. 确保你的代码通过了 lint 检查 `npm run lint`. 小贴士: Lint 会在你 `git commit` 的时候自动运行（通过[Git Hooks](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks)）。 给 [react-component](https://github.com/react-component/) 发送 pull request： @@ -62,19 +62,41 @@ Ant Design 团队会关注所有的 pull request，我们会 review 以及合并 ## 开发流程 -在开始之前，请先执行下面的命令启用 [corepack](https://nodejs.org/api/corepack.html)。 +推荐使用 `npm` 或 `yarn` 作为包管理工具 -```bash -corepack enable -``` +在你 clone 了 antd 的代码并且使用 -在你 clone 了 antd 的代码并且使用 `npm install` 安装完依赖后，你还可以运行下面几个常用的命令： + -1. `npm start` 在本地运行 Ant Design 的网站。 -2. `npm run lint` 检查代码风格。 -3. `npm test` 运行测试。(在运行测试前请确保 `NODE_ENV` 环境变量没有被设定，否则可能会引发一些问题) -4. `npm run compile` 编译 TypeScript 代码到 lib 和 es 目录。 -5. `npm run dist` 构建 antd 的 UMD 版本到 dist 目录。 +安装完依赖后，你还可以运行下面几个常用的命令： + +### 本地运行 + +在本地运行 Ant Design 的网站。 + + + +### 代码风格检测 + + + +### 运行测试用例 + +运行测试。(在运行测试前请确保 `NODE_ENV` 环境变量没有被设定，否则可能会引发一些问题) + + + +### 编译 + +编译 TypeScript 代码到 lib 和 es 目录。 + + + +### 构建 + +构建 antd 的 UMD 版本到 dist 目录。 + + ## 配套开发工具 From 3f92966715a216719ade7649d2c71d6d1a716aac Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 16 Jun 2023 10:05:55 +0800 Subject: [PATCH 25/51] docs: Update Progress segment.md description (#43033) --- components/progress/demo/segment.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/progress/demo/segment.md b/components/progress/demo/segment.md index 641d824fd0..65046cc8f1 100644 --- a/components/progress/demo/segment.md +++ b/components/progress/demo/segment.md @@ -1,7 +1,7 @@ ## zh-CN -标准的进度条。`type="circle|dashboard"` 时不支持分段颜色。 +分段展示进度，可以用于细化进度语义。 ## en-US -A standard progress bar. Doesn't support trail color when `type="circle|dashboard"`. +Show several parts of progress with different status. From 167b2bdcf569f4d937c494226fd923ec805450d4 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 16 Jun 2023 11:15:38 +0800 Subject: [PATCH 26/51] docs: remove Option usage from Select documentation (#43045) * Update index.zh-CN.md * Update index.en-US.md --- components/select/index.en-US.md | 6 ------ components/select/index.zh-CN.md | 6 ------ 2 files changed, 12 deletions(-) diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md index e82fea16f1..59aabe7c43 100644 --- a/components/select/index.en-US.md +++ b/components/select/index.en-US.md @@ -47,12 +47,6 @@ Select component to select value from options. ## API -```tsx - -``` - ### Select props | Property | Description | Type | Default | Version | diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md index 67029a9e0e..7354fb4cf3 100644 --- a/components/select/index.zh-CN.md +++ b/components/select/index.zh-CN.md @@ -48,12 +48,6 @@ demo: ## API -```tsx - -``` - ### Select props | 参数 | 说明 | 类型 | 默认值 | 版本 | From 0c76e3f183542aba98576599122f03e5ec8d032e Mon Sep 17 00:00:00 2001 From: stefan-ysh <58702199+stefan-ysh@users.noreply.github.com> Date: Fri, 16 Jun 2023 12:11:37 +0800 Subject: [PATCH 27/51] docs: The description of API superNextIcon and superPrevIcon made the << and >> reversed (#43046) --- components/date-picker/index.zh-CN.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index 3affbb210a..87f6ce0bfe 100644 --- a/components/date-picker/index.zh-CN.md +++ b/components/date-picker/index.zh-CN.md @@ -106,8 +106,8 @@ import locale from 'antd/locale/zh_CN'; | status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 | | style | 自定义输入框样式 | CSSProperties | {} | | | suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | | -| superNextIcon | 自定义 `<<` 切换图标 | ReactNode | - | 4.17.0 | -| superPrevIcon | 自定义 `>>` 切换图标 | ReactNode | - | 4.17.0 | +| superNextIcon | 自定义 `>>` 切换图标 | ReactNode | - | 4.17.0 | +| superPrevIcon | 自定义 `<<` 切换图标 | ReactNode | - | 4.17.0 | | onOpenChange | 弹出日历和关闭日历的回调 | function(open) | - | | | onPanelChange | 日历面板切换的回调 | function(value, mode) | - | | From 0dcd6e8c228db4d080c88c0bc7874d97822dc295 Mon Sep 17 00:00:00 2001 From: KAM <1479376017@qq.com> Date: Fri, 16 Jun 2023 14:04:13 +0800 Subject: [PATCH 28/51] =?UTF-8?q?fix(InputNumber):=20Fix=20incorrect=20dis?= =?UTF-8?q?able=20state=20style=20for=20input=20box=20com=E2=80=A6=20(#429?= =?UTF-8?q?74)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(InputNumber): Fix incorrect disable state style for input box components with front and rear label configuration * fix(InputNumber): Add case previews for pre and post tags and prefix activation in the disabled state in InputNumber, and add corresponding test cases * fix(InputNumber): Fix the issue of incorrect inputNumber background color caused by the original prefix icon being disabled * fix(InputNumber): Remove the toggle disable state interaction in the addon case * fix(InputNumber): Optimize and merge style processing * fix(InputNumber): Adjust the addon case and remove irrelevant cases * fix(InputNumber): Update the snapshot in the InputNumber component unit test * fix(InputNumber): Fix the issue of incorrect test snapshots caused by adjusting the controls in the disabled state display * fix(InputNumber): Fix the issue of incorrect test snapshots caused by adjusting the controls in the disabled state display * fix(InputNumber): Fix the issue of incorrect test snapshots caused by adjusting the controls in the disabled state display * fix(InputNumber): Fix the issue of incorrect test snapshots caused by adjusting the controls in the disabled state display * fix(InputNumber): Fix the issue of incorrect test snapshots caused by adjusting the controls in the disabled state display --- .../__snapshots__/demo-extend.test.ts.snap | 242 ++++++++++++++++++ .../__snapshots__/demo.test.tsx.snap | 242 ++++++++++++++++++ .../input-number/__tests__/addon.test.tsx | 39 +++ components/input-number/demo/addon.tsx | 17 +- components/input-number/index.tsx | 1 + components/input-number/style/index.ts | 21 +- 6 files changed, 550 insertions(+), 12 deletions(-) create mode 100644 components/input-number/__tests__/addon.test.tsx diff --git a/components/input-number/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/input-number/__tests__/__snapshots__/demo-extend.test.ts.snap index d7e839afeb..08e054a61c 100644 --- a/components/input-number/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/input-number/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -626,6 +626,7 @@ exports[`renders components/input-number/demo/addon.tsx extend context correctly
+
+
+
+
+ + +
+
+
+ + + + + + + + + + +
+
+ +
+
+
+ + + +
+
+
+
+
+
+
+
+ + +
+
+ + ¥ + +
+
+ + + + + + + + + + +
+
+ +
+
+
+
+ + + +
+
+
+
`; diff --git a/components/input-number/__tests__/__snapshots__/demo.test.tsx.snap b/components/input-number/__tests__/__snapshots__/demo.test.tsx.snap index e7327bdac9..876fe06308 100644 --- a/components/input-number/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/input-number/__tests__/__snapshots__/demo.test.tsx.snap @@ -430,6 +430,7 @@ exports[`renders components/input-number/demo/addon.tsx correctly 1`] = `
+
+
+
+
+ + +
+
+
+ + + + + + + + + + +
+
+ +
+
+
+ + + +
+
+
+
+
+
+
+
+ + +
+
+ + ¥ + +
+
+ + + + + + + + + + +
+
+ +
+
+
+
+ + + +
+
+
+
`; diff --git a/components/input-number/__tests__/addon.test.tsx b/components/input-number/__tests__/addon.test.tsx new file mode 100644 index 0000000000..e10f6b40c8 --- /dev/null +++ b/components/input-number/__tests__/addon.test.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import InputNumber from '..'; +import { render } from '../../../tests/utils'; + +describe('addon', () => { + it('disabled status when prefix is active', () => { + const { container } = render(); + expect(container.querySelector('.ant-input-number-affix-wrapper-disabled')).toBeInTheDocument(); + }); + + it('disabled status when addon is active', () => { + const { container } = render( + , + ); + expect(container.querySelector('.ant-input-number-wrapper-disabled')).toBeInTheDocument(); + }); + + it('disabled status when prefix and addon is active', () => { + const { container } = render( + , + ); + expect(container.querySelector('.ant-input-number-wrapper-disabled')).toBeInTheDocument(); + expect(container.querySelector('.ant-input-number-affix-wrapper-disabled')).toBeInTheDocument(); + }); +}); diff --git a/components/input-number/demo/addon.tsx b/components/input-number/demo/addon.tsx index 42f49ba2d7..77e9411bce 100644 --- a/components/input-number/demo/addon.tsx +++ b/components/input-number/demo/addon.tsx @@ -1,6 +1,6 @@ -import React from 'react'; import { SettingOutlined } from '@ant-design/icons'; import { Cascader, InputNumber, Select, Space } from 'antd'; +import React from 'react'; const { Option } = Select; @@ -28,6 +28,21 @@ const App: React.FC = () => ( addonBefore={} defaultValue={100} /> + } + defaultValue={100} + disabled + controls + /> + } + defaultValue={100} + disabled + controls + /> ); diff --git a/components/input-number/index.tsx b/components/input-number/index.tsx index b08cbe483b..83733028f4 100644 --- a/components/input-number/index.tsx +++ b/components/input-number/index.tsx @@ -179,6 +179,7 @@ const InputNumber = React.forwardRef((props, const mergedWrapperClassName = classNames(`${prefixCls}-wrapper`, wrapperClassName, hashId, { [`${wrapperClassName}-rtl`]: direction === 'rtl', + [`${prefixCls}-wrapper-disabled`]: mergedDisabled, }); const mergedGroupClassName = classNames( diff --git a/components/input-number/style/index.ts b/components/input-number/style/index.ts index 07c671de92..069418f6a0 100644 --- a/components/input-number/style/index.ts +++ b/components/input-number/style/index.ts @@ -99,13 +99,6 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe ...genActiveStyle(token), }, - '&-disabled': { - ...genDisabledStyle(token), - [`${componentCls}-input`]: { - cursor: 'not-allowed', - }, - }, - // ===================== Out Of Range ===================== '&-out-of-range': { [`${componentCls}-input-wrap`]: { @@ -140,9 +133,17 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe borderRadius: borderRadiusSM, }, }, + + [`${componentCls}-wrapper-disabled > ${componentCls}-group-addon`]: { + ...genDisabledStyle(token), + }, }, }, + [`&-disabled ${componentCls}-input`]: { + cursor: 'not-allowed', + }, + [componentCls]: { '&-input': { ...resetComponent(token), @@ -338,10 +339,8 @@ const genAffixWrapperStyles: GenerateStyle = (token: InputNumb zIndex: 1, }, - '&-disabled': { - [`${componentCls}[disabled]`]: { - background: 'transparent', - }, + [`&-disabled > ${componentCls}-disabled`]: { + background: 'transparent', }, [`> div${componentCls}`]: { From 3b0352178d1e1d9857dae51f1b96bb27bb9a9ed1 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Fri, 16 Jun 2023 18:34:25 +0800 Subject: [PATCH 29/51] type: update unknow with UploadListRef (#43054) --- components/upload/UploadList/index.tsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/components/upload/UploadList/index.tsx b/components/upload/UploadList/index.tsx index 3151f78e61..598024ccb3 100644 --- a/components/upload/UploadList/index.tsx +++ b/components/upload/UploadList/index.tsx @@ -6,17 +6,22 @@ import classNames from 'classnames'; import type { CSSMotionListProps } from 'rc-motion'; import CSSMotion, { CSSMotionList } from 'rc-motion'; import * as React from 'react'; -import type { ButtonProps } from '../../button'; -import Button from '../../button'; -import { ConfigContext } from '../../config-provider'; import useForceUpdate from '../../_util/hooks/useForceUpdate'; import initCollapseMotion from '../../_util/motion'; import { cloneElement, isValidElement } from '../../_util/reactNode'; +import type { ButtonProps } from '../../button'; +import Button from '../../button'; +import { ConfigContext } from '../../config-provider'; import type { InternalUploadFile, UploadFile, UploadListProps } from '../interface'; import { isImageUrl, previewImage } from '../utils'; import ListItem from './ListItem'; -const InternalUploadList: React.ForwardRefRenderFunction = ( +interface UploadListRef { + handlePreview: (file: UploadFile, e?: React.SyntheticEvent) => void; + handleDownload: (file: UploadFile) => void; +} + +const InternalUploadList: React.ForwardRefRenderFunction = ( props, ref, ) => { @@ -254,7 +259,7 @@ const InternalUploadList: React.ForwardRefRenderFunction(InternalUploadList); +const UploadList = React.forwardRef(InternalUploadList); if (process.env.NODE_ENV !== 'production') { UploadList.displayName = 'UploadList'; From 446e8336dc87be89a8625d6e94962726af32c757 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 16 Jun 2023 18:56:14 +0800 Subject: [PATCH 30/51] style: fix InputNumber prefix style in Form.Item (#43049) * style: fix InputNumber prefix style in Form.Item close #32924 * Update components/input/style/index.ts --- components/input-number/style/index.ts | 1 + .../__snapshots__/demo-extend.test.ts.snap | 125 ++++++++++-------- .../__snapshots__/demo.test.tsx.snap | 125 ++++++++++-------- components/input/demo/group.tsx | 4 +- components/input/style/index.ts | 11 +- 5 files changed, 143 insertions(+), 123 deletions(-) diff --git a/components/input-number/style/index.ts b/components/input-number/style/index.ts index 069418f6a0..32b3c884e4 100644 --- a/components/input-number/style/index.ts +++ b/components/input-number/style/index.ts @@ -358,6 +358,7 @@ const genAffixWrapperStyles: GenerateStyle = (token: InputNumb }, '&::before': { + display: 'inline-block', width: 0, visibility: 'hidden', content: '"\\a0"', diff --git a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap index 9ac113d9a2..6e59fb7707 100644 --- a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -6356,76 +6356,85 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] = value="input content" />
+ + @ +
- - + + - - - + + - -
-
- +
+
+ +
diff --git a/components/input/__tests__/__snapshots__/demo.test.tsx.snap b/components/input/__tests__/__snapshots__/demo.test.tsx.snap index c7e57cf589..3c72a8e975 100644 --- a/components/input/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/input/__tests__/__snapshots__/demo.test.tsx.snap @@ -2312,76 +2312,85 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = ` value="input content" />
+ + @ +
- - + + - - - + + - -
-
- +
+
+ +
diff --git a/components/input/demo/group.tsx b/components/input/demo/group.tsx index 16dbaf7049..4252e71d58 100644 --- a/components/input/demo/group.tsx +++ b/components/input/demo/group.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { CopyOutlined } from '@ant-design/icons'; import { AutoComplete, @@ -12,6 +11,7 @@ import { Select, Tooltip, } from 'antd'; +import React from 'react'; const { Option } = Select; @@ -102,7 +102,7 @@ const App: React.FC = () => ( - +
diff --git a/components/input/style/index.ts b/components/input/style/index.ts index 85e4eec5a6..fac6677eb5 100644 --- a/components/input/style/index.ts +++ b/components/input/style/index.ts @@ -412,11 +412,11 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => { borderRadius: 0, }, - [`& > ${componentCls}-affix-wrapper`]: { - display: 'inline-flex', - }, - - [`& > ${antCls}-picker-range`]: { + [` + & > ${componentCls}-affix-wrapper, + & > ${componentCls}-number-affix-wrapper, + & > ${antCls}-picker-range + `]: { display: 'inline-flex', }, @@ -620,6 +620,7 @@ const genAffixStyle: GenerateStyle = (token: InputToken) => { }, '&::before': { + display: 'inline-block', width: 0, visibility: 'hidden', content: '"\\a0"', From 8cdb76bad62fd245d717a6c493f0e21e852648b5 Mon Sep 17 00:00:00 2001 From: JiaQi <112228030+Yuiai01@users.noreply.github.com> Date: Sun, 18 Jun 2023 13:21:39 +0800 Subject: [PATCH 31/51] fix(dropdown): Dropdown menu support transmit ref (#43002) * fix(dropdown): Dropdown menu support transmit ref * chore: add test case --- .../dropdown/__tests__/dropdown-button.test.tsx | 15 ++++++++++++++- components/dropdown/dropdown.tsx | 3 +-- components/menu/OverrideContext.tsx | 16 +++++++++++----- 3 files changed, 26 insertions(+), 8 deletions(-) diff --git a/components/dropdown/__tests__/dropdown-button.test.tsx b/components/dropdown/__tests__/dropdown-button.test.tsx index c4e769ac3d..040d7a4bd5 100644 --- a/components/dropdown/__tests__/dropdown-button.test.tsx +++ b/components/dropdown/__tests__/dropdown-button.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; -import { render } from '../../../tests/utils'; +import { render, waitFakeTimer } from '../../../tests/utils'; import type { DropdownProps } from '../dropdown'; import DropdownButton from '../dropdown-button'; @@ -156,4 +156,17 @@ describe('DropdownButton', () => { render(); expect(dropdownRender).toHaveBeenCalled(); }); + + it('should support focus menu when set autoFocus', async () => { + jest.useFakeTimers(); + const items = [ + { + label: 'foo', + key: '1', + }, + ]; + const { container } = render(); + await waitFakeTimer(); + expect(container.querySelector('.ant-dropdown-menu-item-active')).toBeTruthy(); + }); }); diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx index eecd78ae12..eb3e18e80c 100644 --- a/components/dropdown/dropdown.tsx +++ b/components/dropdown/dropdown.tsx @@ -14,7 +14,6 @@ import { ConfigContext } from '../config-provider'; import type { MenuProps } from '../menu'; import Menu from '../menu'; import { OverrideProvider } from '../menu/OverrideContext'; -import { NoCompactStyle } from '../space/Compact'; import theme from '../theme'; import useStyle from './style'; @@ -274,7 +273,7 @@ const Dropdown: CompoundedComponent = (props) => { ); }} > - {overlayNode} + {overlayNode} ); }; diff --git a/components/menu/OverrideContext.tsx b/components/menu/OverrideContext.tsx index ba663f69f5..bec81a456b 100644 --- a/components/menu/OverrideContext.tsx +++ b/components/menu/OverrideContext.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { NoCompactStyle } from '../space/Compact'; import type { MenuProps } from './menu'; // Used for Dropdown only @@ -14,9 +15,10 @@ export interface OverrideContextProps { const OverrideContext = React.createContext(null); /** @internal Only used for Dropdown component. Do not use this in your production. */ -export const OverrideProvider: React.FC = ( - props, -) => { +export const OverrideProvider = React.forwardRef< + HTMLElement, + OverrideContextProps & { children: React.ReactNode } +>((props, ref) => { const { children, ...restProps } = props; const override = React.useContext(OverrideContext); @@ -32,8 +34,12 @@ export const OverrideProvider: React.FC{children}; -}; + return ( + + {React.cloneElement(children as React.ReactElement, { ref })} + + ); +}); /** @internal Only used for Dropdown component. Do not use this in your production. */ export default OverrideContext; From c3372d64035aace25e21a31cb6ce20045b4c6807 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Mon, 19 Jun 2023 10:53:41 +0800 Subject: [PATCH 32/51] docs: 5.6.2 changelog (#43078) * chore: 5.6.2 changelog * docs: update desc --- CHANGELOG.en-US.md | 17 +++++++++++++++++ CHANGELOG.zh-CN.md | 17 +++++++++++++++++ package.json | 2 +- 3 files changed, 35 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index b6daddd2ff..c0141eb5a8 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -15,6 +15,23 @@ timeline: true --- +## 5.6.2 + +`2023-06-19` + +- 🐞 Fix Dropdown with `autoFocus` not work as expect. [#43002](https://github.com/ant-design/ant-design/pull/43002) [@Yuiai01](https://github.com/Yuiai01) +- 🐞 Fix InputNumber with `prefix` abnormal height under Form.Item of `hasFeedBack`. [#43049](https://github.com/ant-design/ant-design/pull/43049) +- 💄 Fix Input and InputNumber disabled style with addons. [#42974](https://github.com/ant-design/ant-design/pull/42974) [@kampiu](https://github.com/kampiu) +- 🐞 Fix Upload trigger extra `onChange` event when upload the file exceeds `maxCount`. [#43034](https://github.com/ant-design/ant-design/pull/43034) +- 🐞 Fix export bundle size always contain `rc-field-form` even not use it. [#43023](https://github.com/ant-design/ant-design/pull/43023) +- 🐞 Fix DatePicker `disabledTime` sometime can select disabled option. [#42991](https://github.com/ant-design/ant-design/pull/42991) [@linxianxi](https://github.com/linxianxi) +- 📖 Add FloatButton controlled demo and patch related warning info. [#42835](https://github.com/ant-design/ant-design/pull/42835) [@poyiding](https://github.com/poyiding) +- 🐞 Fix Button with `disabled` still can interactive with sub component. [#42949](https://github.com/ant-design/ant-design/pull/42949) [@kiner-tang](https://github.com/kiner-tang) +- 🐞 Drawer add max width to avoid exceed in small screen. [#42914](https://github.com/ant-design/ant-design/pull/42914) [@amir2mi](https://github.com/amir2mi) +- 🐞 Fix Table `preserveSelectedRowKeys` not working when `checkStrictly` configured. [#42784](https://github.com/ant-design/ant-design/pull/42784) [@linxianxi](https://github.com/linxianxi) +- 🐞 Fix Transfer select count not sync when dynamic update data. [#42785](https://github.com/ant-design/ant-design/pull/42785) [@BoyYangzai](https://github.com/BoyYangzai) +- 🐞 Fix Radio.Button `title` not work and update typescript definition. [#43012](https://github.com/ant-design/ant-design/pull/43012) [@linxianxi](https://github.com/linxianxi) + ## 5.6.1 `2023-06-07` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 76ec15b1b2..ec156bf17a 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -15,6 +15,23 @@ timeline: true --- +## 5.6.2 + +`2023-06-19` + +- 🐞 修复 Dropdown 配置 `autoFocus` 无效的问题。[#43002](https://github.com/ant-design/ant-design/pull/43002) [@Yuiai01](https://github.com/Yuiai01) +- 🐞 修复 InputNumber 设置 `prefix` 在 Form.Item `hasFeedBack` 内高度异常的问题。[#43049](https://github.com/ant-design/ant-design/pull/43049) +- 💄 修复 Input 和 InputNumber 禁用状态样式。[#42974](https://github.com/ant-design/ant-design/pull/42974) [@kampiu](https://github.com/kampiu) +- 🐞 修复 Upload 配置 `maxCount` 后，上传超出范围的文件仍然会触发 `onChange` 事件的问题。[#43034](https://github.com/ant-design/ant-design/pull/43034) +- 🐞 修复打包时即便没有使用 `rc-field-form` 包仍然会包含它的问题。[#43023](https://github.com/ant-design/ant-design/pull/43023) +- 🐞 修复 DatePicker 动态设置 `disabledTime` 时值不正确的问题。[#42991](https://github.com/ant-design/ant-design/pull/42991) [@linxianxi](https://github.com/linxianxi) +- 📖 补充 FloatButton 受控实例，并添加对应的 warning 提示。[#42835](https://github.com/ant-design/ant-design/pull/42835) [@poyiding](https://github.com/poyiding) +- 🐞 修复 Button 禁用时子节点仍然可以交互的问题。[#42949](https://github.com/ant-design/ant-design/pull/42949) [@kiner-tang](https://github.com/kiner-tang) +- 🐞 Drawer 添加最大宽度以防止在小屏幕下超出的问题。[#42914](https://github.com/ant-design/ant-design/pull/42914) [@amir2mi](https://github.com/amir2mi) +- 🐞 修复 Table 设置 `checkStrictly` 时，`preserveSelectedRowKeys` 无效的问题。[#42784](https://github.com/ant-design/ant-design/pull/42784) [@linxianxi](https://github.com/linxianxi) +- 🐞 修复 Transfer 在动态变更数据时，展示的选中数不同步的问题。[#42785](https://github.com/ant-design/ant-design/pull/42785) [@BoyYangzai](https://github.com/BoyYangzai) +- 🐞 修复 Radio.Button `title` 属性不生效，并补齐对应定义。[#43012](https://github.com/ant-design/ant-design/pull/43012) [@linxianxi](https://github.com/linxianxi) + ## 5.6.1 `2023-06-07` diff --git a/package.json b/package.json index 544f36c3db..808021ba93 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "5.6.1", + "version": "5.6.2", "packageManager": "^npm@9.0.0", "description": "An enterprise-class UI design language and React components implementation", "title": "Ant Design", From 8a4203bec88f27e4c7232edce94aa5a2c2d3498b Mon Sep 17 00:00:00 2001 From: daisy <47104575+linxianxi@users.noreply.github.com> Date: Mon, 19 Jun 2023 14:26:48 +0800 Subject: [PATCH 33/51] fix(Space): modify the priority of the component's size (#42752) * fix(Space): modify the priority of the component's size * chore: snapshot * chore: snapshot --- components/button/button.tsx | 2 +- components/cascader/index.tsx | 2 +- .../generatePicker/generateRangePicker.tsx | 2 +- .../generatePicker/generateSinglePicker.tsx | 2 +- components/input-number/index.tsx | 2 +- components/input/Input.tsx | 2 +- components/input/Search.tsx | 2 +- .../__snapshots__/demo-extend.test.ts.snap | 2 +- .../__snapshots__/demo.test.tsx.snap | 2 +- components/select/index.tsx | 2 +- components/space/Compact.tsx | 2 +- .../__snapshots__/demo-extend.test.ts.snap | 32 ++++++++-------- .../__snapshots__/demo.test.tsx.snap | 26 ++++++------- .../space/__tests__/space-compact.test.tsx | 37 +++++++++++++++++++ components/tree-select/index.tsx | 2 +- 15 files changed, 78 insertions(+), 41 deletions(-) diff --git a/components/button/button.tsx b/components/button/button.tsx index cdcc240687..0a589cad70 100644 --- a/components/button/button.tsx +++ b/components/button/button.tsx @@ -210,7 +210,7 @@ const InternalButton: React.ForwardRefRenderFunction< const sizeClassNameMap = { large: 'lg', small: 'sm', middle: undefined }; - const sizeFullname = useSize((ctxSize) => compactSize ?? groupSize ?? customizeSize ?? ctxSize); + const sizeFullname = useSize((ctxSize) => customizeSize ?? compactSize ?? groupSize ?? ctxSize); const sizeCls = sizeFullname ? sizeClassNameMap[sizeFullname] || '' : ''; diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx index 662b51bcd4..08ab5a23bf 100644 --- a/components/cascader/index.tsx +++ b/components/cascader/index.tsx @@ -229,7 +229,7 @@ const Cascader = React.forwardRef((props: CascaderProps, ref: React.Ref compactSize ?? customizeSize ?? ctx); + const mergedSize = useSize((ctx) => customizeSize ?? compactSize ?? ctx); // ===================== Disabled ===================== const disabled = React.useContext(DisabledContext); diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx index 7159b8adfd..7304cbb627 100644 --- a/components/date-picker/generatePicker/generateRangePicker.tsx +++ b/components/date-picker/generatePicker/generateRangePicker.tsx @@ -78,7 +78,7 @@ export default function generateRangePicker(generateConfig: GenerateCo } // ===================== Size ===================== - const mergedSize = useSize((ctx) => compactSize ?? customizeSize ?? ctx); + const mergedSize = useSize((ctx) => customizeSize ?? compactSize ?? ctx); // ===================== Disabled ===================== const disabled = React.useContext(DisabledContext); diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx index c6c085394c..6901ca14af 100644 --- a/components/date-picker/generatePicker/generateSinglePicker.tsx +++ b/components/date-picker/generatePicker/generateSinglePicker.tsx @@ -103,7 +103,7 @@ export default function generatePicker(generateConfig: GenerateConfig< } // ===================== Size ===================== - const mergedSize = useSize((ctx) => compactSize ?? customizeSize ?? ctx); + const mergedSize = useSize((ctx) => customizeSize ?? compactSize ?? ctx); // ===================== Disabled ===================== const disabled = React.useContext(DisabledContext); diff --git a/components/input-number/index.tsx b/components/input-number/index.tsx index 83733028f4..ef5f8e784c 100644 --- a/components/input-number/index.tsx +++ b/components/input-number/index.tsx @@ -87,7 +87,7 @@ const InputNumber = React.forwardRef((props, } = React.useContext(FormItemInputContext); const mergedStatus = getMergedStatus(contextStatus, customStatus); - const mergedSize = useSize((ctx) => compactSize ?? customizeSize ?? ctx); + const mergedSize = useSize((ctx) => customizeSize ?? compactSize ?? ctx); const hasPrefix = prefix != null || hasFeedback; const hasAddon = !!(addonBefore || addonAfter); diff --git a/components/input/Input.tsx b/components/input/Input.tsx index 4bbae04774..1517c93ff5 100644 --- a/components/input/Input.tsx +++ b/components/input/Input.tsx @@ -97,7 +97,7 @@ const Input = forwardRef((props, ref) => { const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction); // ===================== Size ===================== - const mergedSize = useSize((ctx) => compactSize ?? customSize ?? ctx); + const mergedSize = useSize((ctx) => customSize ?? compactSize ?? ctx); // ===================== Disabled ===================== const disabled = React.useContext(DisabledContext); diff --git a/components/input/Search.tsx b/components/input/Search.tsx index 61ddd99be6..1708308129 100644 --- a/components/input/Search.tsx +++ b/components/input/Search.tsx @@ -49,7 +49,7 @@ const Search = React.forwardRef((props, ref) => { const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls); const { compactSize } = useCompactItemContext(prefixCls, direction); - const size = useSize((ctx) => compactSize ?? customizeSize ?? ctx); + const size = useSize((ctx) => customizeSize ?? compactSize ?? ctx); const inputRef = React.useRef(null); diff --git a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap index 6e59fb7707..27990aa93a 100644 --- a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -5194,7 +5194,7 @@ exports[`renders components/input/demo/compact-style.tsx extend context correctl class="ant-space-compact" > compactSize ?? customizeSize ?? ctx); + const mergedSize = useSize((ctx) => customizeSize ?? compactSize ?? ctx); // ===================== Disabled ===================== const disabled = React.useContext(DisabledContext); diff --git a/components/space/Compact.tsx b/components/space/Compact.tsx index b1046365a6..c0e7cb2add 100644 --- a/components/space/Compact.tsx +++ b/components/space/Compact.tsx @@ -78,7 +78,7 @@ const Compact: React.FC = (props) => { ...restProps } = props; - const mergedSize = useSize((ctx) => size ?? ctx ?? 'middle'); + const mergedSize = useSize((ctx) => size ?? ctx); const prefixCls = getPrefixCls('space-compact', customizePrefixCls); const [wrapSSR, hashId] = useStyle(prefixCls); diff --git a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap index 0b0ebc1972..5bacb84efe 100644 --- a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -871,7 +871,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`] class="ant-space-compact ant-space-compact-block" >