feat: table FilterDropdown support clearFilters({ confirm: false, closeDropdown: false }) (#34120)

* feat: table FilterDropdown support `clearFilters({ confirm: boolean })`

* feat: update `clearFilters` and `confirm`

* feat: add FilterRestProps,update document

* feat: update onReset params order

* feat: add test case

components/table/__tests__/Table.filter.test.js

@@ -2052,4 +2052,71 @@ describe('Table.filter', () => {
     wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
     expect(renderedNames(wrapper)).toEqual(['Jack']);
   });
+
+  it('clearFilters should support params', () => {
+    const filterConfig = [
+      ['Jack', 'NoParams', {}, ['Jack'], true],
+      ['Lucy', 'Confirm', { confirm: true }, ['Jack', 'Lucy', 'Tom', 'Jerry'], true],
+      ['Tom', 'Close', { closeDropdown: true }, ['Tom'], false],
+      [
+        'Jerry',
+        'Params',
+        { closeDropdown: true, confirm: true },
+        ['Jack', 'Lucy', 'Tom', 'Jerry'],
+        false,
+      ],
+    ];
+    const filter = ({ prefixCls, setSelectedKeys, confirm, clearFilters }) => (
+      <div className={`${prefixCls}-view`} id="customFilter">
+        {filterConfig.map(([text, id, param]) => (
+          <>
+            <span
+              onClick={() => {
+                setSelectedKeys([text]);
+                confirm();
+              }}
+              id={`set${id}`}
+            >
+              setSelectedKeys
+            </span>
+            <span onClick={() => clearFilters(param)} id={`reset${id}`}>
+              Reset
+            </span>
+          </>
+        ))}
+      </div>
+    );
+
+    const wrapper = mount(
+      createTable({
+        columns: [
+          {
+            ...column,
+            filterDropdown: filter,
+          },
+        ],
+      }),
+    );
+
+    function getFilterMenu() {
+      return wrapper.find('FilterDropdown');
+    }
+
+    // check if renderer well
+    wrapper.find('span.ant-dropdown-trigger').simulate('click', nativeEvent);
+    expect(wrapper.find('#customFilter')).toMatchSnapshot();
+    expect(getFilterMenu().props().filterState.filteredKeys).toBeFalsy();
+
+    filterConfig.forEach(([text, id, , res1, res2]) => {
+      wrapper.find(`#set${id}`).simulate('click');
+      wrapper.update();
+      expect(renderedNames(wrapper)).toEqual([text]);
+
+      wrapper.find('span.ant-dropdown-trigger').simulate('click', nativeEvent);
+      wrapper.find(`#reset${id}`).simulate('click');
+      wrapper.update();
+      expect(renderedNames(wrapper)).toEqual(res1);
+      expect(wrapper.find('Dropdown').first().props().visible).toBe(res2);
+    });
+  });
 });

components/table/__tests__/__snapshots__/Table.filter.test.js.snap

@@ -1,5 +1,61 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Table.filter clearFilters should support params 1`] = `
+<div
+  className="ant-dropdown-custom-view"
+  id="customFilter"
+>
+  <span
+    id="setNoParams"
+    onClick={[Function]}
+  >
+    setSelectedKeys
+  </span>
+  <span
+    id="resetNoParams"
+    onClick={[Function]}
+  >
+    Reset
+  </span>
+  <span
+    id="setConfirm"
+    onClick={[Function]}
+  >
+    setSelectedKeys
+  </span>
+  <span
+    id="resetConfirm"
+    onClick={[Function]}
+  >
+    Reset
+  </span>
+  <span
+    id="setClose"
+    onClick={[Function]}
+  >
+    setSelectedKeys
+  </span>
+  <span
+    id="resetClose"
+    onClick={[Function]}
+  >
+    Reset
+  </span>
+  <span
+    id="setParams"
+    onClick={[Function]}
+  >
+    setSelectedKeys
+  </span>
+  <span
+    id="resetParams"
+    onClick={[Function]}
+  >
+    Reset
+  </span>
+</div>
+`;
+
 exports[`Table.filter override custom filter correctly 1`] = `
 <div
   className="ant-dropdown-custom-view"

components/table/demo/custom-filter-panel.md

@@ -9,12 +9,18 @@ title:
 
 通过 `filterDropdown` 自定义的列筛选功能，并实现一个搜索列的示例。
 
-给函数 `confirm` 添加 `boolean` 类型参数 `closeDropdown`，是否关闭筛选菜单，默认为 `true`。
+给函数 `clearFilters` 添加 `boolean` 类型参数 `closeDropdown`，是否关闭筛选菜单，默认为 `true`。
+添加 `boolean` 类型参数 `confirm`，清除筛选时是否提交已选项，默认 `true`。
 
 ## en-US
 
 Implement a customized column search example via `filterDropdown`.
 
+Add the `boolean` type parameter `closeDropdown` to the function `clearFilters`. Whether to close the filter menu
+is `true` by default.
+Add the `boolean` type parameter `confirm` to clear whether to submit the option during filtering.
+The default is `true`.
+
 ```jsx
 import { Table, Input, Button, Space } from 'antd';
 import Highlighter from 'react-highlight-words';

components/table/hooks/useFilter/FilterDropdown.tsx

@@ -18,6 +18,11 @@ import { FilterState, flattenKeys } from '.';
 import useSyncState from '../../../_util/hooks/useSyncState';
 import { ConfigContext } from '../../../config-provider/context';
 
+interface FilterRestProps {
+  confirm?: Boolean;
+  closeDropdown?: Boolean;
+}
+
 function hasSubMenu(filters: ColumnFilterItem[]) {
   return filters.some(({ children }) => children);
 }
@@ -203,7 +208,15 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
     internalTriggerFilter(getFilteredKeysSync());
   };
 
-  const onReset = () => {
+  const onReset = (
+    { confirm, closeDropdown }: FilterRestProps = { confirm: false, closeDropdown: false },
+  ) => {
+    if (confirm) {
+      internalTriggerFilter([]);
+    }
+    if (closeDropdown) {
+      triggerVisible(false);
+    }
     setSearchValue('');
     setFilteredKeysSync([]);
   };
@@ -367,7 +380,12 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
       <>
         {getFilterComponent()}
         <div className={`${prefixCls}-dropdown-btns`}>
-          <Button type="link" size="small" disabled={selectedKeys.length === 0} onClick={onReset}>
+          <Button
+            type="link"
+            size="small"
+            disabled={selectedKeys.length === 0}
+            onClick={() => onReset()}
+          >
             {locale.filterReset}
           </Button>
           <Button type="primary" size="small" onClick={onConfirm}>