mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
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:
parent
b09913db06
commit
7790934b0b
@ -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');
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user