fix: filters in column.children should render (#27435)

* fix: filters in column.children should render 

when a column has filter and it's children also have filters, all these filters in children can not render. this problem can not be found when use sorter.

* test: add test for this fix

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

Co-authored-by: 偏右 <afc163@gmail.com>
This commit is contained in:
Yuan 2020-11-04 15:44:13 +08:00 committed by GitHub
parent cba9634a3d
commit d01aa2539e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 71 additions and 10 deletions

View File

@ -1262,4 +1262,63 @@ describe('Table.filter', () => {
onChange.mockReset();
wrapper.unmount();
});
it('filters in children should render', () => {
const columns = [
{
title: 'English Score',
dataIndex: 'english',
filters: [{ text: '1', value: 1 }],
onFilter: record => String(record.english1).includes(String(1)),
children: [
{
title: 'English Score1',
dataIndex: 'english1',
filters: [{ text: '2', value: 2 }],
onFilter: record => String(record.english2).includes(String(2)),
},
{
title: 'English Score2',
dataIndex: 'english2',
filters: [{ text: '2', value: 3 }],
onFilter: record => String(record.english2).includes(String(3)),
},
],
},
];
const dataSource = [
{
key: '1',
english: 71,
english1: 71,
english2: 72,
},
{
key: '2',
english: 89,
english1: 72,
english2: 72,
},
{
key: '3',
english: 70,
english1: 71,
english2: 73,
},
{
key: '4',
english: 89,
english1: 71,
english2: 72,
},
];
const wrapper = mount(
createTable({
columns,
dataSource,
}),
);
expect(wrapper.find('.ant-table-filter-column')).toHaveLength(3);
});
});

View File

@ -69,18 +69,20 @@ function injectFilter<RecordType>(
return columns.map((column, index) => {
const columnPos = getColumnPos(index, pos);
const { filterMultiple = true } = column as ColumnType<RecordType>;
let newColumn: ColumnsType<RecordType>[number] = column;
if (column.filters || column.filterDropdown) {
const columnKey = getColumnKey(column, columnPos);
if (newColumn.filters || newColumn.filterDropdown) {
const columnKey = getColumnKey(newColumn, columnPos);
const filterState = filterStates.find(({ key }) => columnKey === key);
return {
...column,
newColumn = {
...newColumn,
title: (renderProps: ColumnTitleProps<RecordType>) => (
<FilterDropdown
prefixCls={`${prefixCls}-filter`}
dropdownPrefixCls={dropdownPrefixCls}
column={column}
column={newColumn}
columnKey={columnKey}
filterState={filterState}
filterMultiple={filterMultiple}
@ -94,13 +96,13 @@ function injectFilter<RecordType>(
};
}
if ('children' in column) {
return {
...column,
if ('children' in newColumn) {
newColumn = {
...newColumn,
children: injectFilter(
prefixCls,
dropdownPrefixCls,
column.children,
newColumn.children,
filterStates,
triggerFilter,
getPopupContainer,
@ -110,7 +112,7 @@ function injectFilter<RecordType>(
};
}
return column;
return newColumn;
});
}