fix: Fixed the problem that internationalization of table columns fails when searching (#48126)

* fix: 表格列在搜索情况下,国际化失效 #48110

* Update components/table/hooks/useFilter/FilterDropdown.tsx

Co-authored-by: afc163 <afc163@gmail.com>
Signed-off-by: LingJinT <63446949+LingJinT@users.noreply.github.com>

* fix: 补充测试用例

---------

Signed-off-by: LingJinT <63446949+LingJinT@users.noreply.github.com>
Co-authored-by: l2015 <lingjt@dtdream.com>
Co-authored-by: afc163 <afc163@gmail.com>
This commit is contained in:
LingJinT 2024-03-29 13:19:52 +08:00 committed by GitHub
parent b0e4a3ac64
commit 5a9dca2ae7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 77 additions and 33 deletions

View File

@ -2079,6 +2079,44 @@ describe('Table.filter', () => {
fireEvent.change(container.querySelector('.ant-input')!, { target: { value: '111' } });
});
it('renders empty element when search not found', () => {
jest.spyOn(console, 'error').mockImplementation(() => undefined);
const { container, unmount } = render(
createTable({
columns: [
{
...column,
filters: [
{
text: '123',
value: '456',
},
{
text: 123456,
value: '456',
},
{
text: '456',
value: '456',
},
],
filterSearch: true,
},
],
}),
);
fireEvent.click(container.querySelector('span.ant-dropdown-trigger')!, nativeEvent);
act(() => {
jest.runAllTimers();
});
expect(container.querySelectorAll('.ant-table-filter-dropdown-search').length).toBe(1);
expect(container.querySelectorAll('.ant-input').length).toBe(1);
fireEvent.change(container.querySelector('.ant-input')!, { target: { value: '111' } });
expect(container.querySelector('.ant-empty')).toBeTruthy();
unmount();
});
it('supports search input in filter menu', () => {
jest.spyOn(console, 'error').mockImplementation(() => undefined);
const { container } = render(

View File

@ -367,20 +367,21 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
} else {
const selectedKeys = getFilteredKeysSync() || [];
const getFilterComponent = () => {
const empty = (
<Empty
image={Empty.PRESENTED_IMAGE_SIMPLE}
description={locale.filterEmptyText}
imageStyle={{
height: 24,
}}
style={{
margin: 0,
padding: '16px 0',
}}
/>
);
if ((column.filters || []).length === 0) {
return (
<Empty
image={Empty.PRESENTED_IMAGE_SIMPLE}
description={locale.filterEmptyText}
imageStyle={{
height: 24,
}}
style={{
margin: 0,
padding: '16px 0',
}}
/>
);
return empty;
}
if (filterMode === 'tree') {
return (
@ -435,6 +436,16 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
</>
);
}
const items = renderFilterItems({
filters: column.filters || [],
filterSearch,
prefixCls,
filteredKeys: getFilteredKeysSync(),
filterMultiple,
searchValue,
});
const isEmpty = items.every((item) => item === null);
return (
<>
<FilterSearch
@ -444,26 +455,21 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
tablePrefixCls={tablePrefixCls}
locale={locale}
/>
<Menu
selectable
multiple={filterMultiple}
prefixCls={`${dropdownPrefixCls}-menu`}
className={dropdownMenuClass}
onSelect={onSelectKeys}
onDeselect={onSelectKeys}
selectedKeys={selectedKeys}
getPopupContainer={getPopupContainer}
openKeys={openKeys}
onOpenChange={onOpenChange}
items={renderFilterItems({
filters: column.filters || [],
filterSearch,
prefixCls,
filteredKeys: getFilteredKeysSync(),
filterMultiple,
searchValue,
})}
/>
{isEmpty ? empty : (
<Menu
selectable
multiple={filterMultiple}
prefixCls={`${dropdownPrefixCls}-menu`}
className={dropdownMenuClass}
onSelect={onSelectKeys}
onDeselect={onSelectKeys}
selectedKeys={selectedKeys}
getPopupContainer={getPopupContainer}
openKeys={openKeys}
onOpenChange={onOpenChange}
items={items}
/>
)}
</>
);
};