diff --git a/components/config-provider/__tests__/components.test.js b/components/config-provider/__tests__/components.test.js index ecf2813d3e..8cdd7f270e 100644 --- a/components/config-provider/__tests__/components.test.js +++ b/components/config-provider/__tests__/components.test.js @@ -510,7 +510,7 @@ describe('ConfigProvider', () => { ], }, ], - filterDropdownVisible: true, + filterDropdownOpen: true, onFilter: (value, record) => record.name.indexOf(value) === 0, sorter: (a, b) => a.name.length - b.name.length, }, diff --git a/components/table/Table.tsx b/components/table/Table.tsx index 35244795a5..b501438f19 100644 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -146,6 +146,17 @@ function InternalTable( '`index` parameter of `rowKey` function is deprecated. There is no guarantee that it will work as expected.', ); + [ + ['filterDropdownVisible', 'filterDropdownOpen'], + ['onFilterDropdownVisibleChange', 'onFilterDropdownOpenChange'], + ].forEach(([deprecatedName, newName]) => { + warning( + !(deprecatedName in props), + 'Table', + `\`${deprecatedName}\` is deprecated which will be removed in next major version.Please use \`${newName}\` instead. `, + ); + }); + const baseColumns = React.useMemo( () => columns || (convertChildrenToColumns(children) as ColumnsType), [columns, children], diff --git a/components/table/__tests__/Table.filter.test.js b/components/table/__tests__/Table.filter.test.js index 20d85e6bef..51942a64f4 100644 --- a/components/table/__tests__/Table.filter.test.js +++ b/components/table/__tests__/Table.filter.test.js @@ -242,32 +242,39 @@ describe('Table.filter', () => { expect(renderSelectedKeys).toEqual([43]); }); - it('can be controlled by filterDropdownVisible', () => { - const { container, rerender } = render( - createTable({ - columns: [ - { - ...column, - filterDropdownVisible: true, - }, - ], - }), - ); + describe('filterDropdownOpen & filterDropdownVisible', () => { + function test(propName) { + it(`can be controlled by ${propName}`, () => { + const { container, rerender } = render( + createTable({ + columns: [ + { + ...column, + filterDropdownOpen: true, + }, + ], + }), + ); - expect(container.querySelector('.ant-dropdown-open')).toBeTruthy(); + expect(container.querySelector('.ant-dropdown-open')).toBeTruthy(); - rerender( - createTable({ - columns: [ - { - ...column, - filterDropdownVisible: false, - }, - ], - }), - ); + rerender( + createTable({ + columns: [ + { + ...column, + filterDropdownOpen: false, + }, + ], + }), + ); - expect(container.querySelector('.ant-dropdown-open')).toBeFalsy(); + expect(container.querySelector('.ant-dropdown-open')).toBeFalsy(); + }); + } + + test('filterDropdownOpen'); + test('filterDropdownVisible'); }); it('if the filter is visible it should ignore the selectedKeys changes', () => { @@ -282,7 +289,7 @@ describe('Table.filter', () => { columns: [ { ...myColumn, - filterDropdownVisible: true, + filterDropdownOpen: true, }, ], }; @@ -318,19 +325,22 @@ describe('Table.filter', () => { }); it('fires change event when visible change', () => { - const handleChange = jest.fn(); + const onFilterDropdownOpenChange = jest.fn(); + const onFilterDropdownVisibleChange = jest.fn(); const { container } = render( createTable({ columns: [ { ...column, - onFilterDropdownVisibleChange: handleChange, + onFilterDropdownOpenChange, + onFilterDropdownVisibleChange, }, ], }), ); fireEvent.click(container.querySelector('.ant-dropdown-trigger')); - expect(handleChange).toHaveBeenCalledWith(true); + expect(onFilterDropdownOpenChange).toHaveBeenCalledWith(true); + expect(onFilterDropdownVisibleChange).toHaveBeenCalledWith(true); }); it('can be controlled by filteredValue', () => { @@ -1179,7 +1189,7 @@ describe('Table.filter', () => { columns: [ { ...column, - filterDropdownVisible: true, + filterDropdownOpen: true, }, ], getPopupContainer, @@ -1197,7 +1207,7 @@ describe('Table.filter', () => { columns: [ { ...column, - filterDropdownVisible: true, + filterDropdownOpen: true, }, ], })} @@ -1442,7 +1452,7 @@ describe('Table.filter', () => { columns: [ { ...column, - filterDropdownVisible: true, + filterDropdownOpen: true, filterSearch: true, filterMode: 'tree', }, @@ -1690,8 +1700,8 @@ describe('Table.filter', () => { }); // https://github.com/ant-design/ant-design/issues/30454 - it('should not trigger onFilterDropdownVisibleChange when call confirm({ closeDropdown: false })', () => { - const onFilterDropdownVisibleChange = jest.fn(); + it('should not trigger onFilterDropdownOpenChange when call confirm({ closeDropdown: false })', () => { + const onFilterDropdownOpenChange = jest.fn(); const { container } = render( createTable({ columns: [ @@ -1714,21 +1724,21 @@ describe('Table.filter', () => { ), - onFilterDropdownVisibleChange, + onFilterDropdownOpenChange, }, ], }), ); fireEvent.click(container.querySelector('.ant-dropdown-trigger')); - expect(onFilterDropdownVisibleChange).toHaveBeenCalledTimes(1); + expect(onFilterDropdownOpenChange).toHaveBeenCalledTimes(1); fireEvent.click(container.querySelector('#confirm-only')); - expect(onFilterDropdownVisibleChange).toHaveBeenCalledTimes(1); + expect(onFilterDropdownOpenChange).toHaveBeenCalledTimes(1); fireEvent.click(container.querySelector('#confirm-and-close')); - expect(onFilterDropdownVisibleChange).toHaveBeenCalledTimes(2); - expect(onFilterDropdownVisibleChange).toHaveBeenLastCalledWith(false); + expect(onFilterDropdownOpenChange).toHaveBeenCalledTimes(2); + expect(onFilterDropdownOpenChange).toHaveBeenLastCalledWith(false); }); // Warning: An update to Item ran an effect, but was not wrapped in act(...). diff --git a/components/table/__tests__/Table.rowSelection.test.js b/components/table/__tests__/Table.rowSelection.test.js index a4e5511fce..f1c547257f 100644 --- a/components/table/__tests__/Table.rowSelection.test.js +++ b/components/table/__tests__/Table.rowSelection.test.js @@ -880,7 +880,7 @@ describe('Table.rowSelection', () => { value: 'Lucy', }, ], - filterDropdownVisible: true, + filterDropdownOpen: true, onFilter: (value, record) => record.name.indexOf(value) === 0, }, ]; diff --git a/components/table/demo/custom-filter-panel.md b/components/table/demo/custom-filter-panel.md index a1fb312bf2..1bfea3203b 100644 --- a/components/table/demo/custom-filter-panel.md +++ b/components/table/demo/custom-filter-panel.md @@ -132,7 +132,7 @@ const App: React.FC = () => { .toString() .toLowerCase() .includes((value as string).toLowerCase()), - onFilterDropdownVisibleChange: visible => { + onFilterDropdownOpenChange: visible => { if (visible) { setTimeout(() => searchInput.current?.select(), 100); } diff --git a/components/table/hooks/useFilter/FilterDropdown.tsx b/components/table/hooks/useFilter/FilterDropdown.tsx index e471a7f8f2..f6e7577443 100644 --- a/components/table/hooks/useFilter/FilterDropdown.tsx +++ b/components/table/hooks/useFilter/FilterDropdown.tsx @@ -137,6 +137,8 @@ function FilterDropdown(props: FilterDropdownProps) { } = props; const { + filterDropdownOpen, + onFilterDropdownOpenChange, filterDropdownVisible, onFilterDropdownVisibleChange, filterResetToDefaultFilteredValue, @@ -150,12 +152,16 @@ function FilterDropdown(props: FilterDropdownProps) { ); const triggerVisible = (newVisible: boolean) => { setVisible(newVisible); + onFilterDropdownOpenChange?.(newVisible); onFilterDropdownVisibleChange?.(newVisible); }; - const mergedVisible = - typeof filterDropdownVisible === 'boolean' ? filterDropdownVisible : visible; - + let mergedVisible: boolean; + if (typeof filterDropdownOpen === 'boolean') { + mergedVisible = filterDropdownOpen; + } else { + mergedVisible = typeof filterDropdownVisible === 'boolean' ? filterDropdownVisible : visible; + } // ===================== Select Keys ===================== const propFilteredKeys = filterState?.filteredKeys; const [getFilteredKeysSync, setFilteredKeysSync] = useSyncState(propFilteredKeys || []); diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md index ea78e61c1f..a575feec9b 100644 --- a/components/table/index.en-US.md +++ b/components/table/index.en-US.md @@ -130,7 +130,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t | defaultSortOrder | Default order of sorted values | `ascend` \| `descend` | - | | | ellipsis | The ellipsis cell content, not working with sorter and filters for now.
tableLayout would be `fixed` when `ellipsis` is `true` or `{ showTitle?: boolean }` | boolean \| {showTitle?: boolean } | false | showTitle: 4.3.0 | | filterDropdown | Customized filter overlay | ReactNode \| (props: [FilterDropdownProps](https://github.com/ant-design/ant-design/blob/ecc54dda839619e921c0ace530408871f0281c2a/components/table/interface.tsx#L79)) => ReactNode | - | | -| filterDropdownVisible | Whether `filterDropdown` is visible | boolean | - | | +| filterDropdownOpen | Whether `filterDropdown` is visible | boolean | - | 4.23.0 | | filtered | Whether the `dataSource` is filtered | boolean | false | | | filteredValue | Controlled filtered value, filter icon will highlight | string\[] | - | | | filterIcon | Customized filter icon | ReactNode \| (filtered: boolean) => ReactNode | - | | @@ -151,7 +151,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t | width | Width of this column ([width not working?](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)) | string \| number | - | | | onCell | Set props on per cell | function(record, rowIndex) | - | | | onFilter | Function that determines if the row is displayed when filtered | function(value, record) => boolean | - | | -| onFilterDropdownVisibleChange | Callback executed when `filterDropdownVisible` is changed | function(visible) {} | - | | +| onFilterDropdownOpenChange | Callback executed when `filterDropdownOpen` is changed | function(open) {} | - | 4.23.0 | | onHeaderCell | Set props on per header cell | function(column) | - | | ### ColumnGroup diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md index 40d077c6aa..e9b87ded9d 100644 --- a/components/table/index.zh-CN.md +++ b/components/table/index.zh-CN.md @@ -131,7 +131,7 @@ const columns = [ | defaultSortOrder | 默认排序顺序 | `ascend` \| `descend` | - | | | ellipsis | 超过宽度将自动省略，暂不支持和排序筛选一起使用。
设置为 `true` 或 `{ showTitle?: boolean }` 时，表格布局将变成 `tableLayout="fixed"`。 | boolean \| { showTitle?: boolean } | false | showTitle: 4.3.0 | | filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | ReactNode \| (props: [FilterDropdownProps](https://github.com/ant-design/ant-design/blob/ecc54dda839619e921c0ace530408871f0281c2a/components/table/interface.tsx#L79)) => ReactNode | - | | -| filterDropdownVisible | 用于控制自定义筛选菜单是否可见 | boolean | - | | +| filterDropdownOpen | 用于控制自定义筛选菜单是否可见 | boolean | - | 4.23.0 | | filtered | 标识数据是否经过过滤，筛选图标会高亮 | boolean | false | | | filteredValue | 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 | string\[] | - | | | filterIcon | 自定义 filter 图标。 | ReactNode \| (filtered: boolean) => ReactNode | false | | @@ -152,7 +152,7 @@ const columns = [ | width | 列宽度（[指定了也不生效？](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)） | string \| number | - | | | onCell | 设置单元格属性 | function(record, rowIndex) | - | | | onFilter | 本地模式下，确定筛选的运行函数 | function | - | | -| onFilterDropdownVisibleChange | 自定义筛选菜单可见变化时调用 | function(visible) {} | - | | +| onFilterDropdownOpenChange | 自定义筛选菜单可见变化时调用 | function(open) {} | - | 4.23.0 | | onHeaderCell | 设置头部单元格属性 | function(column) | - | | ### ColumnGroup diff --git a/components/table/interface.tsx b/components/table/interface.tsx index 9cb226d643..cb82f6bc54 100644 --- a/components/table/interface.tsx +++ b/components/table/interface.tsx @@ -114,8 +114,18 @@ export interface ColumnType extends Omit, ' filterMode?: 'menu' | 'tree'; filterSearch?: FilterSearchType; onFilter?: (value: string | number | boolean, record: RecordType) => boolean; + /** + * @deprecated `filterDropdownVisible` is deprecated which will be removed in next major version. + * Please use `filterDropdownOpen` instead. + */ filterDropdownVisible?: boolean; + filterDropdownOpen?: boolean; + /** + * @deprecated `onFilterDropdownVisibleChange` is deprecated which will be removed in next major + * version. Please use `onFilterDropdownOpenChange` instead. + */ onFilterDropdownVisibleChange?: (visible: boolean) => void; + onFilterDropdownOpenChange?: (open: boolean) => void; filterResetToDefaultFilteredValue?: boolean; // Responsive