fix jsx filter not work (ant-design#22888)

StephenWakely · Apr 3, 2020 · 75524df · 75524df
1 parent 89abaca
commit 75524df
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 5 deletions.
diff --git a/components/table/Table.tsx b/components/table/Table.tsx
@@ -252,7 +252,8 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
     prefixCls,
     locale: tableLocale,
     dropdownPrefixCls,
-    columns: columns || [],
+    columns,
+    children,
     onFilterChange,
     getPopupContainer,
   });

diff --git a/components/table/__tests__/Table.filter.test.js b/components/table/__tests__/Table.filter.test.js
@@ -1113,4 +1113,25 @@ describe('Table.filter', () => {
     expect(onFilter).toHaveBeenCalled();
     expect(wrapper.find('tbody tr')).toHaveLength(1);
   });
+
+  it('jsx work', () => {
+    const wrapper = mount(
+      <Table dataSource={data}>
+        <Table.Column
+          title="Name"
+          dataIndex="name"
+          filters={[
+            { text: 'Jack', value: 'Jack' },
+            { text: 'Lucy', value: 'Lucy' },
+          ]}
+          onFilter={(value, record) => record.name.includes(value)}
+          defaultFilteredValue={['Jack']}
+        />
+      </Table>,
+    );
+
+    expect(wrapper.find('tbody tr')).toHaveLength(1);
+    expect(wrapper.find('tbody tr td').text()).toEqual('Jack');
+
+  });
 });
diff --git a/components/table/hooks/useFilter/index.tsx b/components/table/hooks/useFilter/index.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { convertChildrenToColumns } from 'rc-table/lib/hooks/useColumns';
 import {
   TransformColumns,
   ColumnsType,
@@ -161,7 +162,8 @@ export function getFilterData<RecordType>(
 interface FilterConfig<RecordType> {
   prefixCls: string;
   dropdownPrefixCls: string;
-  columns: ColumnsType<RecordType>;
+  columns?: ColumnsType<RecordType>;
+  children?: React.ReactNode;
   locale: TableLocale;
   onFilterChange: (
     filters: Record<string, Key[] | null>,
@@ -174,6 +176,7 @@ function useFilter<RecordType>({
   prefixCls,
   dropdownPrefixCls,
   columns,
+  children,
   onFilterChange,
   getPopupContainer,
   locale: tableLocale,
@@ -182,20 +185,24 @@ function useFilter<RecordType>({
   FilterState<RecordType>[],
   () => Record<string, Key[] | null>,
 ] {
+  const mergedColumns = React.useMemo(() => {
+    return columns || convertChildrenToColumns(children);
+  }, [children, columns]);
+
   const [filterStates, setFilterStates] = React.useState<FilterState<RecordType>[]>(
-    collectFilterStates(columns, true),
+    collectFilterStates(mergedColumns, true),
   );
 
   const mergedFilterStates = React.useMemo(() => {
-    const collectedStates = collectFilterStates(columns, false);
+    const collectedStates = collectFilterStates(mergedColumns, false);
 
     // Return if not controlled
     if (collectedStates.every(({ filteredKeys }) => filteredKeys === undefined)) {
       return filterStates;
     }
 
     return collectedStates;
-  }, [columns, filterStates]);
+  }, [mergedColumns, filterStates]);
 
   const getFilters = React.useCallback(() => generateFilterInfo(mergedFilterStates), [
     mergedFilterStates,