fix: Table empty node in filter dropdown not following ConfigProvider renderEmpty (#49548)

* 修复自定义全局组件,过滤里面没有生效

* 新增测试用例

* 重新提交测试用例

* 测试用例添加断言判断

* update Table.filter.test.tsx

* commit snapshot

* update Table.filter.test.tsx

* update Table.filter.test.tsx

* update Table.filter.test.tsx
This commit is contained in:
duqigit 2024-06-25 10:44:43 +08:00 committed by GitHub
parent b09913db06
commit 7790934b0b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 43 additions and 4 deletions

View File

@ -5,7 +5,7 @@ import React, { useEffect, useState } from 'react';
import type { ColumnGroupType, ColumnType, TableProps } from '..'; import type { ColumnGroupType, ColumnType, TableProps } from '..';
import Table from '..'; import Table from '..';
import { resetWarned } from '../../_util/warning'; import { resetWarned } from '../../_util/warning';
import { act, fireEvent, render, waitFor } from '../../../tests/utils'; import { act, fireEvent, render, waitFakeTimer, waitFor } from '../../../tests/utils';
import Button from '../../button'; import Button from '../../button';
import ConfigProvider from '../../config-provider'; import ConfigProvider from '../../config-provider';
import Input from '../../input'; import Input from '../../input';
@ -2947,4 +2947,43 @@ describe('Table.filter', () => {
fireEvent.click(container.querySelector('.ant-dropdown-trigger')!); fireEvent.click(container.querySelector('.ant-dropdown-trigger')!);
expect(handleChange).not.toHaveBeenCalled(); expect(handleChange).not.toHaveBeenCalled();
}); });
it('Fixed the problem that the custom global component did not take effect in the filter', async () => {
const customizeRenderEmpty = jest.fn<string, any, any>(() => 'Data Not Found');
const { container } = render(
<ConfigProvider renderEmpty={customizeRenderEmpty}>
<Table
columns={[
{
title: 'Name',
dataIndex: 'name',
key: 'name',
filters: [], // empty filters
onFilter: filterFn,
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
]}
/>
</ConfigProvider>,
);
// Open Filter
fireEvent.click(container.querySelector('span.ant-dropdown-trigger')!);
act(() => {
jest.runAllTimers();
});
await waitFakeTimer();
expect(container.querySelector('.ant-table-filter-dropdown')).toHaveTextContent(
'Data Not Found',
);
expect(customizeRenderEmpty).toHaveBeenCalled();
expect(customizeRenderEmpty.mock.calls[0][0]).toEqual('Table');
});
}); });

View File

@ -350,6 +350,8 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
let dropdownContent: React.ReactNode; let dropdownContent: React.ReactNode;
const { direction, renderEmpty } = React.useContext(ConfigContext);
if (typeof column.filterDropdown === 'function') { if (typeof column.filterDropdown === 'function') {
dropdownContent = column.filterDropdown({ dropdownContent = column.filterDropdown({
prefixCls: `${dropdownPrefixCls}-custom`, prefixCls: `${dropdownPrefixCls}-custom`,
@ -368,7 +370,7 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
} else { } else {
const selectedKeys = getFilteredKeysSync() || []; const selectedKeys = getFilteredKeysSync() || [];
const getFilterComponent = () => { const getFilterComponent = () => {
const empty = ( const empty = renderEmpty?.('Table') || (
<Empty <Empty
image={Empty.PRESENTED_IMAGE_SIMPLE} image={Empty.PRESENTED_IMAGE_SIMPLE}
description={locale.filterEmptyText} description={locale.filterEmptyText}
@ -524,8 +526,6 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
filterIcon = <FilterFilled />; filterIcon = <FilterFilled />;
} }
const { direction } = React.useContext(ConfigContext);
return ( return (
<div className={`${prefixCls}-column`}> <div className={`${prefixCls}-column`}>
<span className={`${tablePrefixCls}-column-title`}>{children}</span> <span className={`${tablePrefixCls}-column-title`}>{children}</span>