mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 12:09:14 +08:00
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:
parent
b0e4a3ac64
commit
5a9dca2ae7
@ -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(
|
||||
|
@ -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}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user