From 5df309742ed3bcd7aa94af85cb3db7b54769eea4 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Tue, 27 Jun 2023 20:03:43 +0800 Subject: [PATCH 01/27] fix: Popcomfirm should support and (#43212) --- components/popconfirm/style/index.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/components/popconfirm/style/index.tsx b/components/popconfirm/style/index.tsx index 0f77bd6fee..11a5c3ae5a 100644 --- a/components/popconfirm/style/index.tsx +++ b/components/popconfirm/style/index.tsx @@ -12,6 +12,7 @@ const genBaseStyle: GenerateStyle = (token) => { const { componentCls, iconCls, + antCls, zIndexPopup, colorText, colorWarning, @@ -25,7 +26,10 @@ const genBaseStyle: GenerateStyle = (token) => { return { [componentCls]: { zIndex: zIndexPopup, - color: colorText, + + [`&${antCls}-popover`]: { + fontSize, + }, [`${componentCls}-message`]: { marginBottom: marginXS, @@ -51,6 +55,7 @@ const genBaseStyle: GenerateStyle = (token) => { [`${componentCls}-description`]: { marginTop: marginXXS, + color: colorText, }, }, From f0059cebc24bd113ac135b188872a972031c8bdc Mon Sep 17 00:00:00 2001 From: kang Date: Tue, 27 Jun 2023 23:37:24 +0800 Subject: [PATCH 02/27] type: pass-through cascader option generic type (#43231) --- components/cascader/index.tsx | 43 +++++++++++++++++++++-------------- 1 file changed, 26 insertions(+), 17 deletions(-) diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx index 08ab5a23bf..a6a35bcaaf 100644 --- a/components/cascader/index.tsx +++ b/components/cascader/index.tsx @@ -96,30 +96,39 @@ const defaultSearchRender: ShowSearchType['render'] = (inputValue, path, prefixC return optionList; }; -type SingleCascaderProps = Omit & { +type SingleCascaderProps = Omit< + RcSingleCascaderProps, + 'checkable' | 'options' +> & { multiple?: false; }; -type MultipleCascaderProps = Omit & { +type MultipleCascaderProps = Omit< + RcMultipleCascaderProps, + 'checkable' | 'options' +> & { multiple: true; }; -type UnionCascaderProps = SingleCascaderProps | MultipleCascaderProps; +type UnionCascaderProps = + | SingleCascaderProps + | MultipleCascaderProps; -export type CascaderProps = UnionCascaderProps & { - multiple?: boolean; - size?: SizeType; - disabled?: boolean; - bordered?: boolean; - placement?: SelectCommonPlacement; - suffixIcon?: React.ReactNode; - options?: DataNodeType[]; - status?: InputStatus; +export type CascaderProps = + UnionCascaderProps & { + multiple?: boolean; + size?: SizeType; + disabled?: boolean; + bordered?: boolean; + placement?: SelectCommonPlacement; + suffixIcon?: React.ReactNode; + options?: DataNodeType[]; + status?: InputStatus; - rootClassName?: string; - popupClassName?: string; - /** @deprecated Please use `popupClassName` instead */ - dropdownClassName?: string; -}; + rootClassName?: string; + popupClassName?: string; + /** @deprecated Please use `popupClassName` instead */ + dropdownClassName?: string; + }; export interface CascaderRef { focus: () => void; From c3225c072024a4cca519dd87efce6336f9c140fa Mon Sep 17 00:00:00 2001 From: JiaQi <112228030+Yuiai01@users.noreply.github.com> Date: Wed, 28 Jun 2023 09:46:20 +0800 Subject: [PATCH 03/27] fix: error reported when the name of Form.List is 0 (#43199) * fix: error reported when the name of Form.List is 0 * chore: add test case --- components/form/FormList.tsx | 9 +++- components/form/__tests__/list.test.tsx | 66 +++++++++++++++++++++++++ 2 files changed, 73 insertions(+), 2 deletions(-) diff --git a/components/form/FormList.tsx b/components/form/FormList.tsx index eaff6f5520..55160ca9ea 100644 --- a/components/form/FormList.tsx +++ b/components/form/FormList.tsx @@ -1,8 +1,8 @@ import { List } from 'rc-field-form'; import type { StoreValue, ValidatorRule } from 'rc-field-form/lib/interface'; import * as React from 'react'; -import { ConfigContext } from '../config-provider'; import warning from '../_util/warning'; +import { ConfigContext } from '../config-provider'; import { FormItemPrefixContext } from './context'; export interface FormListFieldData { @@ -35,7 +35,12 @@ const FormList: React.FC = ({ children, ...props }) => { - warning(!!props.name, 'Form.List', 'Miss `name` prop.'); + warning( + typeof props.name === 'number' || + (Array.isArray(props.name) ? !!props.name.length : !!props.name), + 'Form.List', + 'Miss `name` prop.', + ); const { getPrefixCls } = React.useContext(ConfigContext); const prefixCls = getPrefixCls('form', customizePrefixCls); diff --git a/components/form/__tests__/list.test.tsx b/components/form/__tests__/list.test.tsx index 84ad7b5d67..1a2ca95660 100644 --- a/components/form/__tests__/list.test.tsx +++ b/components/form/__tests__/list.test.tsx @@ -262,4 +262,70 @@ describe('Form.List', () => { errorSpy.mockRestore(); }); + + it('no warning when name is 0', () => { + const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + + render( +
+ + {(fields) => + fields.map((field) => ( + + + + )) + } + +
, + ); + + expect(errorSpy).not.toHaveBeenCalled(); + + errorSpy.mockRestore(); + }); + + it('warning when name is empty array', () => { + const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + + render( +
+ + {(fields) => + fields.map((field) => ( + + + + )) + } + +
, + ); + + expect(errorSpy).toHaveBeenCalled(); + + errorSpy.mockRestore(); + }); + + it('warning when name is null', () => { + const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + + render( +
+ + {(fields) => + fields.map((field) => ( + + + + )) + } + +
, + ); + + expect(errorSpy).toHaveBeenCalled(); + + errorSpy.mockRestore(); + }); }); From 1df65eeef3910605e6e0376648ee2d6c391b43cf Mon Sep 17 00:00:00 2001 From: daisy <47104575+linxianxi@users.noreply.github.com> Date: Wed, 28 Jun 2023 10:34:25 +0800 Subject: [PATCH 04/27] =?UTF-8?q?docs:=20update=20DatePicker=E3=80=81TimeP?= =?UTF-8?q?icker=20cellRender=20(#43226)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/date-picker/index.en-US.md | 4 ++-- components/date-picker/index.zh-CN.md | 4 ++-- components/time-picker/index.en-US.md | 1 + components/time-picker/index.zh-CN.md | 1 + 4 files changed, 6 insertions(+), 4 deletions(-) diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md index 4b71f5eb4a..7a83397476 100644 --- a/components/date-picker/index.en-US.md +++ b/components/date-picker/index.en-US.md @@ -83,7 +83,7 @@ The following APIs are shared by DatePicker, RangePicker. | className | The picker className | string | - | | | dateRender | Custom rendering function for date cells, >= 5.4.0 use `cellRender` instead. | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | < 5.4.0 | | changeOnBlur | Trigger `change` when blur. e.g. datetime picker no need click confirm button | boolean | false | 5.5.0 | -| cellRender | Custom rendering function for picker cells | function(current: dayjs, today: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 | +| cellRender | Custom rendering function for picker cells | (current: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 | | disabled | Determine whether the DatePicker is disabled | boolean | false | | | disabledDate | Specify the date that cannot be selected | (currentDate: dayjs) => boolean | - | | | format | To set the date format, support multi-format matching when it is an array, display the first one shall prevail. refer to [dayjs#format](https://day.js.org/docs/en/display/format). for example: [Custom Format](#components-date-picker-demo-format) | [formatType](#formattype) | [rc-picker](https://github.com/react-component/picker/blob/f512f18ed59d6791280d1c3d7d37abbb9867eb0b/src/utils/uiUtil.ts#L155-L177) | | @@ -187,7 +187,7 @@ Added in `4.1.0`. | --- | --- | --- | --- | --- | | allowEmpty | Allow start or end input leave empty | \[boolean, boolean] | \[false, false] | | | dateRender | Custom rendering function for date cells, >= 5.4.0 use `cellRender` instead. | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | < 5.4.0 | -| cellRender | Custom rendering function for picker cells | function(current: dayjs, today: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 | +| cellRender | Custom rendering function for picker cells | (current: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 | | defaultPickerValue | To set default picker date | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - | | | defaultValue | To set default date | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - | | | disabled | If disable start or end | \[boolean, boolean] | - | | diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index 7977e5c2b1..ebd1c63fdd 100644 --- a/components/date-picker/index.zh-CN.md +++ b/components/date-picker/index.zh-CN.md @@ -84,7 +84,7 @@ import locale from 'antd/locale/zh_CN'; | className | 选择器 className | string | - | | | dateRender | 自定义日期单元格的内容，5.4.0 起用 `cellRender` 代替 | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | < 5.4.0 | | changeOnBlur | 失去焦点时触发 `change` 事件，例如 datetime 下不再需要点击确认按钮 | boolean | false | 5.5.0 | -| cellRender | 自定义单元格的内容 | function(current: dayjs, today: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 | +| cellRender | 自定义单元格的内容 | (current: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 | | disabled | 禁用 | boolean | false | | | disabledDate | 不可选择的日期 | (currentDate: dayjs) => boolean | - | | | format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [dayjs#format](https://day.js.org/docs/zh-CN/display/format#%E6%94%AF%E6%8C%81%E7%9A%84%E6%A0%BC%E5%BC%8F%E5%8C%96%E5%8D%A0%E4%BD%8D%E7%AC%A6%E5%88%97%E8%A1%A8)。示例：[自定义格式](#components-date-picker-demo-format) | [formatType](#formattype) | [rc-picker](https://github.com/react-component/picker/blob/f512f18ed59d6791280d1c3d7d37abbb9867eb0b/src/utils/uiUtil.ts#L155-L177) | | @@ -188,7 +188,7 @@ import locale from 'antd/locale/zh_CN'; | --- | --- | --- | --- | --- | | allowEmpty | 允许起始项部分为空 | \[boolean, boolean] | \[false, false] | | | dateRender | 自定义日期单元格的内容，5.4.0 起用 `cellRender` 代替 | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | < 5.4.0 | -| cellRender | 自定义单元格的内容。 | function(current: dayjs, today: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 | +| cellRender | 自定义单元格的内容。 | (current: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 | | defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/)\[] | - | | | defaultValue | 默认日期 | [dayjs](https://day.js.org/)\[] | - | | | disabled | 禁用起始项 | \[boolean, boolean] | - | | diff --git a/components/time-picker/index.en-US.md b/components/time-picker/index.en-US.md index 80fa4cd1e1..8e12f977f1 100644 --- a/components/time-picker/index.en-US.md +++ b/components/time-picker/index.en-US.md @@ -50,6 +50,7 @@ dayjs.extend(customParseFormat) | allowClear | Whether allow clearing text | boolean | true | | | autoFocus | If get focus when component mounted | boolean | false | | | bordered | Whether has border style | boolean | true | | +| cellRender | Custom rendering function for picker cells | (current: number, info: { originNode: React.ReactElement, today: dayjs, range?: 'start' \| 'end', subType: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 | | changeOnBlur | Trigger `change` when blur. e.g. datetime picker no need click confirm button | boolean | false | 5.5.0 | | className | The className of picker | string | - | | | clearIcon | The custom clear icon | ReactNode | - | | diff --git a/components/time-picker/index.zh-CN.md b/components/time-picker/index.zh-CN.md index e0d01aca9b..eba10140d6 100644 --- a/components/time-picker/index.zh-CN.md +++ b/components/time-picker/index.zh-CN.md @@ -50,6 +50,7 @@ dayjs.extend(customParseFormat) | allowClear | 是否展示清除按钮 | boolean | true | | | autoFocus | 自动获取焦点 | boolean | false | | | bordered | 是否有边框 | boolean | true | | +| cellRender | 自定义单元格的内容 | (current: number, info: { originNode: React.ReactNode, today: dayjs, range?: 'start' \| 'end', subType: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 | | changeOnBlur | 失去焦点时触发 `change` 事件，例如 datetime 下不再需要点击确认按钮 | boolean | false | 5.5.0 | | className | 选择器类名 | string | - | | | clearIcon | 自定义的清除图标 | ReactNode | - | | From 435fc6dcfedb30663ef393a9ce7e4f35c986e416 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 28 Jun 2023 11:34:57 +0800 Subject: [PATCH 05/27] chore(deps): update dependency file-system-cache to v2.4.1 (#43238) * chore(deps): update dependency file-system-cache to v2.4.1 * Apply suggestions from code review --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: afc163 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c1569bd9a3..b0a0009562 100644 --- a/package.json +++ b/package.json @@ -299,7 +299,7 @@ "vanilla-jsoneditor": "^0.17.1", "webpack-bundle-analyzer": "^4.1.0", "xhr-mock": "^2.4.1", - "file-system-cache": "2.3.0" + "file-system-cache": "^2.4.1" }, "peerDependencies": { "react": ">=16.9.0", From 41fe4ced89d65de09ae9d33126a496119ba80766 Mon Sep 17 00:00:00 2001 From: Lennox Omondi Date: Wed, 28 Jun 2023 06:37:14 +0300 Subject: [PATCH 06/27] docs: Fix typo in App Component english version (#43235) Typo fix for App documentation --- components/app/index.en-US.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/app/index.en-US.md b/components/app/index.en-US.md index e7cd528e8f..bf245c6237 100644 --- a/components/app/index.en-US.md +++ b/components/app/index.en-US.md @@ -13,7 +13,7 @@ Application wrapper for some global usages. ## When To Use - Provide reset styles based on `.ant-app` element. -- You could use static methods of `message/notification/Modal` form `useApp` without put `contextHolder` mannully. +- You could use static methods of `message/notification/Modal` form `useApp` without writing `contextHolder` manually. ## Examples From 6cbf3e102be3138391ac4b79d4b11786620dc935 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Wed, 28 Jun 2023 13:54:49 +0800 Subject: [PATCH 07/27] chore(dep): remove file-system-cache (#43242) --- package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/package.json b/package.json index b0a0009562..143ced3f66 100644 --- a/package.json +++ b/package.json @@ -298,8 +298,7 @@ "typescript": "~5.1.3", "vanilla-jsoneditor": "^0.17.1", "webpack-bundle-analyzer": "^4.1.0", - "xhr-mock": "^2.4.1", - "file-system-cache": "^2.4.1" + "xhr-mock": "^2.4.1" }, "peerDependencies": { "react": ">=16.9.0", From 91be823272207ca8e7708fb37361919637ea4422 Mon Sep 17 00:00:00 2001 From: JiaQi <112228030+Yuiai01@users.noreply.github.com> Date: Wed, 28 Jun 2023 19:23:00 +0800 Subject: [PATCH 08/27] fix(Transfer): Dropdown is hidden & `showSizeChanger` not work (#41906) * fix: Page size dropdown is hidden * fix: SizeChange not work * chore: add test case --------- Co-authored-by: MadCcc <1075746765@qq.com> --- components/transfer/ListBody.tsx | 61 +++++++++++--------- components/transfer/__tests__/index.test.tsx | 39 +++++++++++++ components/transfer/list.tsx | 1 - components/transfer/style/index.ts | 8 ++- 4 files changed, 79 insertions(+), 30 deletions(-) diff --git a/components/transfer/ListBody.tsx b/components/transfer/ListBody.tsx index e57c60c075..5708422f12 100644 --- a/components/transfer/ListBody.tsx +++ b/components/transfer/ListBody.tsx @@ -1,14 +1,17 @@ import classNames from 'classnames'; import * as React from 'react'; + +import useMergedState from 'rc-util/lib/hooks/useMergedState'; import type { KeyWiseTransferItem } from '.'; -import type { PaginationType } from './interface'; -import type { RenderedItem, TransferListProps } from './list'; import Pagination from '../pagination'; import ListItem from './ListItem'; +import type { PaginationType } from './interface'; +import type { RenderedItem, TransferListProps } from './list'; export const OmitProps = ['handleFilter', 'handleClear', 'checkedKeys'] as const; -export type OmitProp = typeof OmitProps[number]; +export type OmitProp = (typeof OmitProps)[number]; type PartialTransferListProps = Omit, OmitProp>; +type ExistPagination = Exclude; export interface TransferListBodyProps extends PartialTransferListProps { filteredItems: RecordType[]; @@ -16,25 +19,15 @@ export interface TransferListBodyProps extends PartialTransferListPr selectedKeys: string[]; } -const parsePagination = (pagination?: PaginationType) => { - if (!pagination) { - return null; - } - +const parsePagination = (pagination?: ExistPagination) => { const defaultPagination: PaginationType = { - pageSize: 10, simple: true, showSizeChanger: false, showLessItems: false, }; - if (typeof pagination === 'object') { - return { ...defaultPagination, ...pagination }; - } - - return defaultPagination; + return { ...defaultPagination, ...pagination }; }; - export interface ListBodyRef { items?: RenderedItem[]; } @@ -57,16 +50,28 @@ const TransferListBody: React.ForwardRefRenderFunction< onItemSelect, onItemRemove, } = props; - const [current, setCurrent] = React.useState(1); + const mergedPagination = React.useMemo(() => { + if (!pagination) { + return null; + } + + const convertPagination = typeof pagination === 'object' ? pagination : {}; + + return parsePagination(convertPagination); + }, [pagination]); + + const [pageSize, setPageSize] = useMergedState(10, { + value: mergedPagination?.pageSize, + }); + React.useEffect(() => { - const mergedPagination = parsePagination(pagination); if (mergedPagination) { - const maxPageCount = Math.ceil(filteredRenderItems.length / mergedPagination.pageSize!); + const maxPageCount = Math.ceil(filteredRenderItems.length / pageSize!); setCurrent(Math.min(current, maxPageCount)); } - }, [filteredRenderItems, pagination]); + }, [filteredRenderItems, mergedPagination, pageSize]); const onClick = (item: RecordType) => { onItemSelect?.(item.key, !selectedKeys.includes(item.key)); @@ -80,33 +85,33 @@ const TransferListBody: React.ForwardRefRenderFunction< setCurrent(cur); }; + const onSizeChange = (cur: number, size: number) => { + setCurrent(cur); + setPageSize(size); + }; + const memoizedItems = React.useMemo[]>(() => { - const mergedPagination = parsePagination(pagination); const displayItems = mergedPagination - ? filteredRenderItems.slice( - (current - 1) * mergedPagination.pageSize!, - current * mergedPagination.pageSize!, - ) + ? filteredRenderItems.slice((current - 1) * pageSize!, current * pageSize!) : filteredRenderItems; return displayItems; - }, [current, filteredRenderItems, pagination]); + }, [current, filteredRenderItems, mergedPagination, pageSize]); React.useImperativeHandle(ref, () => ({ items: memoizedItems })); - const mergedPagination = parsePagination(pagination); - const paginationNode: React.ReactNode = mergedPagination ? ( ) : null; diff --git a/components/transfer/__tests__/index.test.tsx b/components/transfer/__tests__/index.test.tsx index 6920c8bb83..764df524d2 100644 --- a/components/transfer/__tests__/index.test.tsx +++ b/components/transfer/__tests__/index.test.tsx @@ -73,6 +73,19 @@ const searchTransferProps = { targetKeys: ['3', '4'], }; +const generateData = (n = 20) => { + const data = []; + for (let i = 0; i < n; i++) { + data.push({ + key: `${i}`, + title: `content${i}`, + description: `description of content${i}`, + chosen: false, + }); + } + return data; +}; + describe('Transfer', () => { mountTest(Transfer); rtlTest(Transfer); @@ -595,6 +608,32 @@ describe('Transfer', () => { ); await waitFor(() => expect(getAllByTitle('1/1')).toHaveLength(2)); }); + + it('should support change pageSize', () => { + const dataSource = generateData(); + const { container } = render( + , + ); + + fireEvent.mouseDown(container.querySelector('.ant-select-selector')!); + fireEvent.click(container.querySelectorAll('.ant-select-item-option')[1]); + expect(container.querySelectorAll('.ant-transfer-list-content-item').length).toBe(20); + }); + + it('should be used first when pagination has pagesize', () => { + const dataSource = generateData(30); + + const { container } = render( + , + ); + + fireEvent.mouseDown(container.querySelector('.ant-select-selector')!); + fireEvent.click(container.querySelectorAll('.ant-select-item-option')[2]); + expect(container.querySelectorAll('.ant-transfer-list-content-item').length).toBe(20); + }); }); it('remove by click icon', () => { diff --git a/components/transfer/list.tsx b/components/transfer/list.tsx index e10facd00b..7661e5b808 100644 --- a/components/transfer/list.tsx +++ b/components/transfer/list.tsx @@ -110,7 +110,6 @@ const TransferList = ( } = props; const [filterValue, setFilterValue] = useState(''); - const listBodyRef = useRef>({}); const internalHandleFilter = (e: React.ChangeEvent) => { diff --git a/components/transfer/style/index.ts b/components/transfer/style/index.ts index 5e050aed1e..96f18573ad 100644 --- a/components/transfer/style/index.ts +++ b/components/transfer/style/index.ts @@ -101,6 +101,7 @@ const genTransferListStyle: GenerateStyle = (token: TransferToken marginXS, paddingSM, lineType, + antCls, iconCls, motionDurationSlow, controlItemBgHover, @@ -174,8 +175,9 @@ const genTransferListStyle: GenerateStyle = (token: TransferToken display: 'flex', flex: 'auto', flexDirection: 'column', - overflow: 'hidden', fontSize: token.fontSize, + // https://blog.csdn.net/qq449245884/article/details/107373672/ + minHeight: 0, '&-search-wrapper': { position: 'relative', @@ -262,6 +264,10 @@ const genTransferListStyle: GenerateStyle = (token: TransferToken padding: `${token.paddingXS}px 0`, textAlign: 'end', borderTop: `${lineWidth}px ${lineType} ${colorSplit}`, + + [`${antCls}-pagination-options`]: { + paddingInlineEnd: token.paddingXS, + }, }, '&-body-not-found': { From 4a4d276d25c8f83938aed4b5d22917187c782c17 Mon Sep 17 00:00:00 2001 From: thinkasany <117748716+thinkasany@users.noreply.github.com> Date: Thu, 29 Jun 2023 01:16:11 +0800 Subject: [PATCH 09/27] type: correct type & remove useless type (#43256) --- components/button/button.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/components/button/button.tsx b/components/button/button.tsx index 90b0f990f6..c3072af7e4 100644 --- a/components/button/button.tsx +++ b/components/button/button.tsx @@ -76,8 +76,6 @@ type CompoundedComponent = React.ForwardRefExoticComponent< __ANT_BUTTON: boolean; }; -type Loading = number | boolean; - type LoadingConfigType = { loading: boolean; delay: number; @@ -137,7 +135,7 @@ const InternalButton: React.ForwardRefRenderFunction< const loadingOrDelay = useMemo(() => getLoadingConfig(loading), [loading]); - const [innerLoading, setLoading] = useState(loadingOrDelay.loading); + const [innerLoading, setLoading] = useState(loadingOrDelay.loading); const [hasTwoCNChar, setHasTwoCNChar] = useState(false); From 90a381df2aa8fa0b20b071b9a7c79378ee9dbb6b Mon Sep 17 00:00:00 2001 From: thinkasany <117748716+thinkasany@users.noreply.github.com> Date: Thu, 29 Jun 2023 10:47:38 +0800 Subject: [PATCH 10/27] type: optimization copyIdRef type (#43257) --- components/typography/Base/index.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/components/typography/Base/index.tsx b/components/typography/Base/index.tsx index 9c712fc529..56cef15b47 100644 --- a/components/typography/Base/index.tsx +++ b/components/typography/Base/index.tsx @@ -11,17 +11,17 @@ import useMergedState from 'rc-util/lib/hooks/useMergedState'; import omit from 'rc-util/lib/omit'; import { composeRef } from 'rc-util/lib/ref'; import * as React from 'react'; +import { isStyleSupport } from '../../_util/styleChecker'; +import TransButton from '../../_util/transButton'; import { ConfigContext } from '../../config-provider'; import useLocale from '../../locale/useLocale'; import type { TooltipProps } from '../../tooltip'; import Tooltip from '../../tooltip'; -import { isStyleSupport } from '../../_util/styleChecker'; -import TransButton from '../../_util/transButton'; import Editable from '../Editable'; -import useMergedConfig from '../hooks/useMergedConfig'; -import useUpdatedEffect from '../hooks/useUpdatedEffect'; import type { TypographyProps } from '../Typography'; import Typography from '../Typography'; +import useMergedConfig from '../hooks/useMergedConfig'; +import useUpdatedEffect from '../hooks/useUpdatedEffect'; import Ellipsis from './Ellipsis'; import EllipsisTooltip from './EllipsisTooltip'; @@ -193,7 +193,7 @@ const Base = React.forwardRef((props, ref) => { // ========================== Copyable ========================== const [enableCopy, copyConfig] = useMergedConfig(copyable); const [copied, setCopied] = React.useState(false); - const copyIdRef = React.useRef(); + const copyIdRef = React.useRef(null); const copyOptions: Pick = {}; if (copyConfig.format) { @@ -201,7 +201,9 @@ const Base = React.forwardRef((props, ref) => { } const cleanCopyId = () => { - window.clearTimeout(copyIdRef.current!); + if (copyIdRef.current) { + clearTimeout(copyIdRef.current); + } }; const onCopyClick = (e?: React.MouseEvent) => { @@ -214,7 +216,7 @@ const Base = React.forwardRef((props, ref) => { // Trigger tips update cleanCopyId(); - copyIdRef.current = window.setTimeout(() => { + copyIdRef.current = setTimeout(() => { setCopied(false); }, 3000); From 00f4ed3dc91c1ee4c89b4a011cb66c9d45075175 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Thu, 29 Jun 2023 13:03:52 +0800 Subject: [PATCH 11/27] type: params type support generic (#43211) * type: type optimization * test: add test case --- components/breadcrumb/Breadcrumb.tsx | 20 +++++++------------ components/breadcrumb/BreadcrumbItem.tsx | 10 +++++++--- .../breadcrumb/__tests__/Breadcrumb.test.tsx | 15 ++++++++++++++ 3 files changed, 29 insertions(+), 16 deletions(-) diff --git a/components/breadcrumb/Breadcrumb.tsx b/components/breadcrumb/Breadcrumb.tsx index b291aca37f..1f3689b6a4 100755 --- a/components/breadcrumb/Breadcrumb.tsx +++ b/components/breadcrumb/Breadcrumb.tsx @@ -46,9 +46,9 @@ export type ItemType = Partial; export type InternalRouteType = Partial; -export interface BreadcrumbProps { +export interface BreadcrumbProps = any> { prefixCls?: string; - params?: any; + params?: T; separator?: React.ReactNode; style?: React.CSSProperties; className?: string; @@ -60,19 +60,13 @@ export interface BreadcrumbProps { items?: ItemType[]; - itemRender?: ( - route: ItemType, - params: any, - routes: ItemType[], - paths: string[], - ) => React.ReactNode; + itemRender?: (route: ItemType, params: T, routes: ItemType[], paths: string[]) => React.ReactNode; } -const getPath = (params: any, path?: string) => { +const getPath = = any>(params: T, path?: string) => { if (path === undefined) { return path; } - let mergedPath = (path || '').replace(/^\//, ''); Object.keys(params).forEach((key) => { mergedPath = mergedPath.replace(`:${key}`, params[key]!); @@ -80,7 +74,7 @@ const getPath = (params: any, path?: string) => { return mergedPath; }; -const Breadcrumb = (props: BreadcrumbProps) => { +const Breadcrumb = = any>(props: BreadcrumbProps) => { const { prefixCls: customizePrefixCls, separator = '/', @@ -113,7 +107,7 @@ const Breadcrumb = (props: BreadcrumbProps) => { // generated by route const paths: string[] = []; - const itemRenderRoutes: any = items || legacyRoutes; + const itemRenderRoutes = items || legacyRoutes; crumbs = mergedItems.map((item, index) => { const { @@ -168,7 +162,7 @@ const Breadcrumb = (props: BreadcrumbProps) => { onClick={onClick} prefixCls={prefixCls} > - {mergedItemRender(item as BreadcrumbItemType, params, itemRenderRoutes, paths, href)} + {mergedItemRender(item, params, itemRenderRoutes!, paths, href)} ); }); diff --git a/components/breadcrumb/BreadcrumbItem.tsx b/components/breadcrumb/BreadcrumbItem.tsx index 0cb432e1b8..820d409ba0 100644 --- a/components/breadcrumb/BreadcrumbItem.tsx +++ b/components/breadcrumb/BreadcrumbItem.tsx @@ -37,7 +37,7 @@ export interface BreadcrumbItemProps extends SeparatorType { overlay?: DropdownProps['overlay']; } -export const InternalBreadcrumbItem = (props: BreadcrumbItemProps) => { +export const InternalBreadcrumbItem: React.FC = (props) => { const { prefixCls, separator = '/', children, menu, overlay, dropdownProps, href } = props; // Warning for deprecated usage @@ -103,11 +103,15 @@ export const InternalBreadcrumbItem = (props: BreadcrumbItemProps) => { return null; }; -const BreadcrumbItem = (props: BreadcrumbItemProps) => { +type CompoundedComponent = React.FC & { + /** @internal */ + __ANT_BREADCRUMB_ITEM: boolean; +}; + +const BreadcrumbItem: CompoundedComponent = (props) => { const { prefixCls: customizePrefixCls, children, href, ...restProps } = props; const { getPrefixCls } = React.useContext(ConfigContext); const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls); - return ( {renderItem(prefixCls, restProps as ItemType, children, href)} diff --git a/components/breadcrumb/__tests__/Breadcrumb.test.tsx b/components/breadcrumb/__tests__/Breadcrumb.test.tsx index eb00b0f6ed..ccebb91521 100644 --- a/components/breadcrumb/__tests__/Breadcrumb.test.tsx +++ b/components/breadcrumb/__tests__/Breadcrumb.test.tsx @@ -384,4 +384,19 @@ describe('Breadcrumb', () => { ); expect(document.querySelector('.ant-dropdown')).toBeTruthy(); }); + + it('Breadcrumb params type test', () => { + interface Params { + key1?: number; + key2?: string; + } + expect( + + params={{ + key1: 1, + key2: 'test', + }} + />, + ).toBeTruthy(); + }); }); From 24e0347a550149a3172e564e51c5491e606b2729 Mon Sep 17 00:00:00 2001 From: kang Date: Thu, 29 Jun 2023 18:52:00 +0800 Subject: [PATCH 12/27] docs: transition docs lose content (#43273) --- docs/spec/transition.en-US.md | 14 +++++++------- docs/spec/transition.zh-CN.md | 14 +++++++------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/docs/spec/transition.en-US.md b/docs/spec/transition.en-US.md index 00847dfa8c..d3ad0d31ac 100644 --- a/docs/spec/transition.en-US.md +++ b/docs/spec/transition.en-US.md @@ -16,19 +16,19 @@ Our Gray Matter are wired to react to dynamic things like movement,shape change ## Maintain Context While Changing Views Slide In and Slide Out: Create an illusion of virtual space.
-