feat(table): table filter support object data type

growingio · May 14, 2021 · 1cdf443 · 1cdf443
1 parent bb9c50c
commit 1cdf443
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 9 deletions.
diff --git a/src/components/table/FilterPopover.tsx b/src/components/table/FilterPopover.tsx
@@ -1,16 +1,18 @@
 /* eslint-disable react/jsx-wrap-multilines */
 import React, { useState, useContext } from 'react';
+import { isObject } from 'lodash';
 import Button from '../button';
 import Popover from '../popover';
 import FilterList from './FilterList';
 import SearchBar from '../search-bar';
 import { TableContext } from './Table';
+import { filterType } from './interface';
 
 interface FilterPopoverProps {
   prefixCls: string;
   children: React.ReactElement;
   onClick: (newFilterState: string[]) => void;
-  filters?: string[];
+  filters?: filterType[];
   values: string[];
 }
 
@@ -38,8 +40,19 @@ const FilterPopover = (props: FilterPopoverProps): React.ReactElement => {
             value={selectFilterKeys}
             onChange={setSelectFilterKeys}
             dataSource={filters
-              .filter((item: string | number) => item.toString().includes(seachValue))
-              .map((item: string | number) => ({ key: item.toString(), value: item.toString() }))}
+              .filter((item) => {
+                if(isObject(item)) {
+                  return item.label.includes(seachValue);
+                }
+                return item.toString().includes(seachValue);
+              })
+              .map((item) => {
+                if(isObject(item)) {
+                  return ({ key: item.value, value: item.label });
+                }
+                return ({ key: item.toString(), value: item.toString() });
+              })
+            }
           />
           <div className={`${prefixCls}-filter-popover-footer`}>
             <Button

diff --git a/src/components/table/__test__/TableFilter.test.js b/src/components/table/__test__/TableFilter.test.js
@@ -84,7 +84,7 @@ describe('Testing Table Filter', () => {
 
   test('useFilter hook', () => {
     // eslint-disable-next-line @typescript-eslint/no-shadow
-    const { result, rerender } = renderHook(({ columns, dataSource }) => useFilter(columns, dataSource), {
+    const { result } = renderHook(({ columns, dataSource }) => useFilter(columns, dataSource), {
       initialProps: { columns, dataSource },
     });
     const [filterStates, updateFilterStates] = result.current;
@@ -109,6 +109,35 @@ describe('Testing Table Filter', () => {
     expect(result.current[2].length).toBe(1);
   });
 
+
+  test('object data type', () => {
+    const updateColumns = cloneDeep(columns);
+    updateColumns[0].filters = [{ label: '名字俩字', value: '2'}, { label: '名字仨字', value: '3' }];
+    updateColumns[0].onFilter = (value, record) => {
+      if (value === '2') {
+        return record.name.length === 2;
+      }
+      if (value === '3') {
+        return record.name.length === 3;
+      }
+      return false;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    const { result } = renderHook(({ columns, dataSource }) => useFilter(columns, dataSource), {
+      initialProps: { columns: updateColumns, dataSource },
+    });
+    const [filterStates, updateFilterStates] = result.current;
+    const filterState0 = filterStates[0];
+    act(() => {
+      updateFilterStates({
+        ...filterState0,
+        filteredKeys: ['2'],
+      });
+    });
+
+    expect(result.current[2].length).toBe(2);
+  });
+
   it('should re-collect states, after columns update', () => {
     // eslint-disable-next-line @typescript-eslint/no-shadow
     const { result, rerender } = renderHook(({ columns, dataSource }) => useFilter(columns, dataSource), {

diff --git a/src/components/table/demo/Base.stories.tsx b/src/components/table/demo/Base.stories.tsx
@@ -44,13 +44,13 @@ const columns = [
     title: '列标题2',
     dataIndex: 'age',
     key: 'age',
-    filters: ['名字四个字', '名字不是四个字'],
+    filters: [{label:'名字四个字', value: '4'}, { label: '名字不是四个字', value: '3'}],
     ellipsis: true,
     onFilter: (value: string, record: ExampleData) => {
-      if (value === '名字四个字') {
+      if (value === '4') {
         return record.name.length === 4;
       }
-      if (value === '名字不是四个字') {
+      if (value === '3') {
         return record.name.length !== 4;
       }
       return false;

diff --git a/src/components/table/interface.ts b/src/components/table/interface.ts
@@ -8,6 +8,8 @@ export type SortOrder = 'descend' | 'ascend' | null;
 
 export type GetComponentProps<DataType> = (data: DataType, index?: number) => React.HTMLAttributes<HTMLElement>;
 
+export type filterType = (string | { label: string; value: string });
+
 export interface ColumnType<RecordType> {
   key?: string;
   title?: React.ReactNode;
@@ -28,7 +30,7 @@ export interface ColumnType<RecordType> {
   defaultSortOrder?: SortOrder;
   // filter
   defaultFilteredValue?: string[];
-  filters?: string[];
+  filters?: filterType[];
   onFilter?: (value: string, record: RecordType) => boolean;
   filterDropdown?: React.ReactNode;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -64,7 +66,7 @@ export interface FilterState<RecordType> {
   key: string;
   filteredKeys: string[];
   onFilter?: (value: string, record: RecordType) => boolean;
-  filters?: string[];
+  filters?: filterType[];
 }
 
 export interface PaginationState {