fix: update FilterSearchType type definition (#37610)

* fix: 更新 FilterSearchType 类型描述

* fix: 更新 FilterSearchType 类型描述

* fix: 更新 FilterSearchType 类型描述

* fix: 更新 FilterSearchType 类型描述

* feat: 优化类型

* feat: update snapshots

* feat: add type test case

* feat: remove unused type declared

* feat: lint

Co-authored-by: tangwenhui <tangwenhui@rd.netease.com>

components/card/__tests__/index.test.tsx

@@ -6,8 +6,6 @@ import Button from '../../button/index';
 import Card from '../index';
 import '@testing-library/jest-dom';
 
-console.log('fireEvent');
-
 describe('Card', () => {
   mountTest(Card);
   rtlTest(Card);

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

@@ -12,6 +12,7 @@ import Tooltip from '../../tooltip';
 import type { SelectProps } from '../../select';
 import type { ColumnGroupType, ColumnType, TableProps } from '..';
 import type { ColumnFilterItem, FilterDropdownProps, FilterValue } from '../interface';
+import type { TreeColumnFilterItem } from '../hooks/useFilter/FilterDropdown';
 
 // https://github.com/Semantic-Org/Semantic-UI-React/blob/72c45080e4f20b531fda2e3e430e384083d6766b/test/specs/modules/Dropdown/Dropdown-test.js#L73
 const nativeEvent = { nativeEvent: { stopImmediatePropagation: () => {} } };
@@ -1953,7 +1954,8 @@ describe('Table.filter', () => {
                 { text: '节点二', value: 'node2' },
                 { text: '节点三', value: 'node3' },
               ],
-              filterSearch: (input: any, record: any) => record.title.includes(input),
+              filterSearch: (input: any, record: TreeColumnFilterItem) =>
+                (record.title as string).includes(input),
             },
           ],
         }),

components/table/__tests__/type.test.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { ColumnProps } from '..';
+import type { TreeColumnFilterItem } from '../hooks/useFilter/FilterDropdown';
 import Table from '../Table';
 
 const { Column, ColumnGroup } = Table;
@@ -48,6 +49,8 @@ describe('Table.typescript types', () => {
       {
         title: 'Name',
         dataIndex: 'name',
+        filterSearch: (input: any, record: TreeColumnFilterItem) =>
+          (record.title as string).includes(input),
       },
     ];
 

components/table/hooks/useFilter/FilterDropdown.tsx

@@ -60,7 +60,7 @@ function renderFilterItems({
   filteredKeys: Key[];
   filterMultiple: boolean;
   searchValue: string;
-  filterSearch: FilterSearchType;
+  filterSearch: FilterSearchType<ColumnFilterItem>;
 }): Required<MenuProps>['items'] {
   return filters.map((filter, index) => {
     const key = String(filter.value);
@@ -102,6 +102,8 @@ function renderFilterItems({
   });
 }
 
+export type TreeColumnFilterItem = ColumnFilterItem & FilterTreeDataNode;
+
 export interface FilterDropdownProps<RecordType> {
   tablePrefixCls: string;
   prefixCls: string;
@@ -110,7 +112,7 @@ export interface FilterDropdownProps<RecordType> {
   filterState?: FilterState<RecordType>;
   filterMultiple: boolean;
   filterMode?: 'menu' | 'tree';
-  filterSearch?: FilterSearchType;
+  filterSearch?: FilterSearchType<ColumnFilterItem | TreeColumnFilterItem>;
   columnKey: Key;
   children: React.ReactNode;
   triggerFilter: (filterState: FilterState<RecordType>) => void;
@@ -296,6 +298,12 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
       }
       return item;
     });
+  const getFilterData = (node: FilterTreeDataNode): TreeColumnFilterItem => ({
+    ...node,
+    text: node.title,
+    value: node.key,
+    children: node.children?.map(item => getFilterData(item)) || [],
+  });
 
   let dropdownContent: React.ReactNode;
 
@@ -332,7 +340,7 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
       if (filterMode === 'tree') {
         return (
           <>
-            <FilterSearch
+            <FilterSearch<TreeColumnFilterItem>
               filterSearch={filterSearch}
               value={searchValue}
               onChange={onSearch}
@@ -371,7 +379,7 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
                   searchValue.trim()
                     ? node => {
                         if (typeof filterSearch === 'function') {
-                          return filterSearch(searchValue, node);
+                          return filterSearch(searchValue, getFilterData(node));
                         }
                         return searchValueMatched(searchValue, node.title);
                       }

components/table/hooks/useFilter/FilterSearch.tsx

@@ -3,21 +3,21 @@ import * as React from 'react';
 import Input from '../../../input';
 import type { FilterSearchType, TableLocale } from '../../interface';
 
-interface FilterSearchProps {
+interface FilterSearchProps<RecordType = any> {
   value: string;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  filterSearch: FilterSearchType;
+  filterSearch: FilterSearchType<RecordType>;
   tablePrefixCls: string;
   locale: TableLocale;
 }
 
-const FilterSearch: React.FC<FilterSearchProps> = ({
+function FilterSearch<RecordType>({
   value,
   onChange,
   filterSearch,
   tablePrefixCls,
   locale,
-}) => {
+}: FilterSearchProps<RecordType>) {
   if (!filterSearch) {
     return null;
   }
@@ -34,6 +34,6 @@ const FilterSearch: React.FC<FilterSearchProps> = ({
       />
     </div>
   );
-};
+}
 
 export default FilterSearch;

components/table/interface.tsx

@@ -72,7 +72,9 @@ export type ColumnTitle<RecordType> =
 
 export type FilterValue = (Key | boolean)[];
 export type FilterKey = Key[] | null;
-export type FilterSearchType = boolean | ((input: string, record: {}) => boolean);
+export type FilterSearchType<RecordType = Record<string, any>> =
+  | boolean
+  | ((input: string, record: RecordType) => boolean);
 export interface FilterConfirmProps {
   closeDropdown: boolean;
 }
@@ -112,7 +114,7 @@ export interface ColumnType<RecordType> extends Omit<RcColumnType<RecordType>, '
   defaultFilteredValue?: FilterValue | null;
   filterIcon?: React.ReactNode | ((filtered: boolean) => React.ReactNode);
   filterMode?: 'menu' | 'tree';
-  filterSearch?: FilterSearchType;
+  filterSearch?: FilterSearchType<ColumnFilterItem>;
   onFilter?: (value: string | number | boolean, record: RecordType) => boolean;
   /**
    * @deprecated `filterDropdownVisible` is deprecated which will be removed in next major version.