mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-06 16:06:28 +08:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

feat(table): support close fn to close filter dropdown only (#37745)

Browse Source 
* feat: support close fn to close filter dropdown only

* feat: update demo

* feat: reset change

Co-authored-by: tangwenhui <tangwenhui@rd.netease.com>
This commit is contained in:
kiner-tang(文辉) 2022-09-29 14:15:11 +08:00 committed by GitHub
parent f4859202f5
commit f6a3f40308
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 88 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
components/table/__tests__/Table.filter.test.tsx
View File

@ -2499,4 +2499,34 @@ describe('Table.filter', () => {
}),
);
});
it('should be hidden and not commit when call close()', () => {
const onFilterDropdownOpenChange = jest.fn();
const onFilter = jest.fn();
const { container } = render(
createTable({
columns: [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
filteredValue: name as unknown as FilterValue,
filterDropdown: ({ close }) => (
<button id="close-only" type="button" onClick={() => close()}>
close
</button>
),
onFilterDropdownOpenChange,
onFilter,
},
],
}),
);
fireEvent.click(container.querySelector('.ant-dropdown-trigger')!);
expect(onFilterDropdownOpenChange).toHaveBeenCalledTimes(1);
fireEvent.click(container.querySelector('#close-only')!);
expect(onFilterDropdownOpenChange).toHaveBeenCalledTimes(2);
expect(onFilter).toHaveBeenCalledTimes(0);
});
});

39
components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -1407,6 +1407,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md extend context c
</div>
<div
class="ant-space-item"
style="margin-right: 8px;"
>
<button
class="ant-btn ant-btn-link ant-btn-sm"
@ -1417,6 +1418,18 @@ exports[`renders ./components/table/demo/custom-filter-panel.md extend context c
</span>
</button>
</div>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-link ant-btn-sm"
type="button"
>
<span>
close
</span>
</button>
</div>
</div>
</div>
</div>
@ -1530,6 +1543,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md extend context c
</div>
<div
class="ant-space-item"
style="margin-right: 8px;"
>
<button
class="ant-btn ant-btn-link ant-btn-sm"
@ -1540,6 +1554,18 @@ exports[`renders ./components/table/demo/custom-filter-panel.md extend context c
</span>
</button>
</div>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-link ant-btn-sm"
type="button"
>
<span>
close
</span>
</button>
</div>
</div>
</div>
</div>
@ -1733,6 +1759,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md extend context c
</div>
<div
class="ant-space-item"
style="margin-right: 8px;"
>
<button
class="ant-btn ant-btn-link ant-btn-sm"
@ -1743,6 +1770,18 @@ exports[`renders ./components/table/demo/custom-filter-panel.md extend context c
</span>
</button>
</div>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-link ant-btn-sm"
type="button"
>
<span>
close
</span>
</button>
</div>
</div>
</div>
</div>

11
components/table/demo/custom-filter-panel.md
View File

@ -83,7 +83,7 @@ const App: React.FC = () => {
};
const getColumnSearchProps = (dataIndex: DataIndex): ColumnType<DataType> => ({
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }) => (
<div style={{ padding: 8 }}>
<Input
ref={searchInput}
@ -121,6 +121,15 @@ const App: React.FC = () => {
>
Filter
</Button>
<Button
type="link"
size="small"
onClick={() => {
close();
}}
>
close
</Button>
</Space>
</div>
),

3
components/table/hooks/useFilter/FilterDropdown.tsx
View File

@ -316,6 +316,9 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
clearFilters: onReset,
filters: column.filters,
visible: mergedVisible,
close: () => {
triggerVisible(false);
},
});
} else if (column.filterDropdown) {
dropdownContent = column.filterDropdown;

6
components/table/interface.tsx
View File

@ -83,9 +83,15 @@ export interface FilterDropdownProps {
prefixCls: string;
setSelectedKeys: (selectedKeys: React.Key[]) => void;
selectedKeys: React.Key[];
/**
* Confirm filter value, if you want to close dropdown before commit, you can call with
* {closeDropdown: true}
*/
confirm: (param?: FilterConfirmProps) => void;
clearFilters?: () => void;
filters?: ColumnFilterItem[];
/** Only close filterDropdown */
close: () => void;
visible: boolean;
}