diff --git a/components/table/Table.tsx b/components/table/Table.tsx index b501438f19..be85770e74 100644 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -145,6 +145,12 @@ function InternalTable( 'Table', '`index` parameter of `rowKey` function is deprecated. There is no guarantee that it will work as expected.', ); + warning( + !('filterDropdownVisible' in props || 'onFilterDropdownVisibleChange' in props), + 'Table', + '`filterDropdownVisible` and `onFilterDropdownVisibleChange` is deprecated, ' + + 'please use `filterDropdownOpen` and `onFilterDropdownOpenChange` instead.', + ); [ ['filterDropdownVisible', 'filterDropdownOpen'], diff --git a/components/table/__tests__/Table.filter.test.js b/components/table/__tests__/Table.filter.test.js index 51942a64f4..570748bf32 100644 --- a/components/table/__tests__/Table.filter.test.js +++ b/components/table/__tests__/Table.filter.test.js @@ -274,7 +274,6 @@ describe('Table.filter', () => { } test('filterDropdownOpen'); - test('filterDropdownVisible'); }); it('if the filter is visible it should ignore the selectedKeys changes', () => { @@ -326,21 +325,18 @@ describe('Table.filter', () => { it('fires change event when visible change', () => { const onFilterDropdownOpenChange = jest.fn(); - const onFilterDropdownVisibleChange = jest.fn(); const { container } = render( createTable({ columns: [ { ...column, onFilterDropdownOpenChange, - onFilterDropdownVisibleChange, }, ], }), ); fireEvent.click(container.querySelector('.ant-dropdown-trigger')); expect(onFilterDropdownOpenChange).toHaveBeenCalledWith(true); - expect(onFilterDropdownVisibleChange).toHaveBeenCalledWith(true); }); it('can be controlled by filteredValue', () => { diff --git a/components/table/hooks/useFilter/FilterDropdown.tsx b/components/table/hooks/useFilter/FilterDropdown.tsx index f6e7577443..37a1d4b1ef 100644 --- a/components/table/hooks/useFilter/FilterDropdown.tsx +++ b/components/table/hooks/useFilter/FilterDropdown.tsx @@ -139,8 +139,6 @@ function FilterDropdown(props: FilterDropdownProps) { const { filterDropdownOpen, onFilterDropdownOpenChange, - filterDropdownVisible, - onFilterDropdownVisibleChange, filterResetToDefaultFilteredValue, defaultFilteredValue, } = column; @@ -153,15 +151,10 @@ function FilterDropdown(props: FilterDropdownProps) { const triggerVisible = (newVisible: boolean) => { setVisible(newVisible); onFilterDropdownOpenChange?.(newVisible); - onFilterDropdownVisibleChange?.(newVisible); }; - let mergedVisible: boolean; - if (typeof filterDropdownOpen === 'boolean') { - mergedVisible = filterDropdownOpen; - } else { - mergedVisible = typeof filterDropdownVisible === 'boolean' ? filterDropdownVisible : visible; - } + const mergedVisible = typeof filterDropdownOpen === 'boolean' ? filterDropdownOpen : 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 a575feec9b..4792180085 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 | - | | -| filterDropdownOpen | Whether `filterDropdown` is visible | boolean | - | 4.23.0 | +| filterDropdownOpen | Whether `filterDropdown` is visible | boolean | - | | | 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 | - | | -| onFilterDropdownOpenChange | Callback executed when `filterDropdownOpen` is changed | function(open) {} | - | 4.23.0 | +| onFilterDropdownOpenChange | Callback executed when `filterDropdownOpen` is changed | function(visible) {} | - | | | 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 e9b87ded9d..7ce8194f4a 100644 --- a/components/table/index.zh-CN.md +++ b/components/table/index.zh-CN.md @@ -121,7 +121,7 @@ const columns = [ 列描述数据对象，是 columns 中的一项，Column 使用相同的 API。 | 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | +| --- | --- | --- | --- | --- | --- | | align | 设置列的对齐方式 | `left` \| `right` \| `center` | `left` | | | className | 列样式类名 | string | - | | | colSpan | 表头列合并,设置为 0 时，不渲染 | number | - | | @@ -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 | - | | -| filterDropdownOpen | 用于控制自定义筛选菜单是否可见 | boolean | - | 4.23.0 | +| filterDropdownOpen | 用于控制自定义筛选菜单是否可见 | boolean | - | | | 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 | - | | -| onFilterDropdownOpenChange | 自定义筛选菜单可见变化时调用 | function(open) {} | - | 4.23.0 | +| onFilterDropdownOpenChange | 自定义筛选菜单可见变化时调用 | function(visible) {} | - | | | | onHeaderCell | 设置头部单元格属性 | function(column) | - | | ### ColumnGroup diff --git a/components/table/interface.tsx b/components/table/interface.tsx index cb82f6bc54..b357a35cce 100644 --- a/components/table/interface.tsx +++ b/components/table/interface.tsx @@ -114,18 +114,8 @@ 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; + onFilterDropdownOpenChange?: (visible: boolean) => void; filterResetToDefaultFilteredValue?: boolean; // Responsive