style: Add empty style for Table empty filters menu (#25073)

close #25068
ant-design · Jun 18, 2020 · 1b64eb3 · 1b64eb3
1 parent 7f2d8a4
commit 1b64eb3
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 12 deletions.
diff --git a/components/locale/default.tsx b/components/locale/default.tsx
@@ -20,6 +20,7 @@ const localeValues: Locale = {
     filterTitle: 'Filter menu',
     filterConfirm: 'OK',
     filterReset: 'Reset',
+    filterEmptyText: 'No filters',
     selectAll: 'Select current page',
     selectInvert: 'Invert current page',
     selectionAll: 'Select all data',

diff --git a/components/locale/zh_CN.tsx b/components/locale/zh_CN.tsx
@@ -21,6 +21,7 @@ const localeValues: Locale = {
     filterTitle: '筛选',
     filterConfirm: '确定',
     filterReset: '重置',
+    filterEmptyText: '无筛选项',
     selectAll: '全选当页',
     selectInvert: '反选当页',
     selectionAll: '全选所有',

diff --git a/components/locale/zh_TW.tsx b/components/locale/zh_TW.tsx
@@ -20,6 +20,7 @@ const localeValues: Locale = {
     filterTitle: '篩選器',
     filterConfirm: '確定',
     filterReset: '重置',
+    filterEmptyText: '無篩選項',
     selectAll: '全部選取',
     selectInvert: '反向選取',
     selectionAll: '全選所有',

diff --git a/components/table/__tests__/Table.filter.test.js b/components/table/__tests__/Table.filter.test.js
@@ -81,6 +81,19 @@ describe('Table.filter', () => {
     expect(dropdownWrapper.render()).toMatchSnapshot();
   });
 
+  it('renders empty menu correctly', () => {
+    const wrapper = mount(createTable({
+      columns: [
+        {
+          ...column,
+          filters: [],
+        },
+      ],
+    }));
+    wrapper.find('span.ant-dropdown-trigger').simulate('click', nativeEvent);
+    expect(wrapper.find('Empty').length).toBe(1);
+  });
+
   it('renders radio filter correctly', () => {
     const wrapper = mount(
       createTable({

diff --git a/components/table/hooks/useFilter/FilterDropdown.tsx b/components/table/hooks/useFilter/FilterDropdown.tsx
@@ -7,6 +7,7 @@ import Menu from '../../../menu';
 import Checkbox from '../../../checkbox';
 import Radio from '../../../radio';
 import Dropdown from '../../../dropdown';
+import Empty from '../../../empty';
 import { ColumnType, ColumnFilterItem, Key, TableLocale, GetPopupContainer } from '../../interface';
 import FilterDropdownMenuWrapper from './FilterWrapper';
 import { FilterState } from '.';
@@ -19,12 +20,33 @@ function hasSubMenu(filters: ColumnFilterItem[]) {
   return filters.some(({ children }) => children);
 }
 
-function renderFilterItems(
-  filters: ColumnFilterItem[],
-  prefixCls: string,
-  filteredKeys: Key[],
-  multiple: boolean,
-) {
+function renderFilterItems({
+  filters,
+  prefixCls,
+  filteredKeys,
+  filterMultiple,
+  locale,
+}: {
+  filters: ColumnFilterItem[];
+  prefixCls: string;
+  filteredKeys: Key[];
+  filterMultiple: boolean;
+  locale: TableLocale;
+}) {
+  if (filters.length === 0) {
+    return (
+      <Empty
+        image={Empty.PRESENTED_IMAGE_SIMPLE}
+        description={locale.filterEmptyText}
+        style={{
+          margin: '16px 0',
+        }}
+        imageStyle={{
+          height: 24,
+        }}
+      />
+    );
+  }
   return filters.map((filter, index) => {
     const key = String(filter.value);
 
@@ -35,12 +57,18 @@ function renderFilterItems(
           title={filter.text}
           popupClassName={`${prefixCls}-dropdown-submenu`}
         >
-          {renderFilterItems(filter.children, prefixCls, filteredKeys, multiple)}
+          {renderFilterItems({
+            filters: filter.children,
+            prefixCls,
+            filteredKeys,
+            filterMultiple,
+            locale,
+          })}
         </SubMenu>
       );
     }
 
-    const Component = multiple ? Checkbox : Radio;
+    const Component = filterMultiple ? Checkbox : Radio;
 
     return (
       <MenuItem key={filter.value !== undefined ? key : index}>
@@ -202,12 +230,13 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
           openKeys={openKeys}
           onOpenChange={onOpenChange}
         >
-          {renderFilterItems(
-            column.filters || [],
+          {renderFilterItems({
+            filters: column.filters || [],
             prefixCls,
-            getFilteredKeysSync(),
+            filteredKeys: getFilteredKeysSync(),
             filterMultiple,
-          )}
+            locale,
+          })}
         </Menu>
         <div className={`${prefixCls}-dropdown-btns`}>
           <Button type="link" size="small" disabled={selectedKeys.length === 0} onClick={onReset}>

diff --git a/components/table/interface.tsx b/components/table/interface.tsx
@@ -23,6 +23,7 @@ export interface TableLocale {
   filterTitle?: string;
   filterConfirm?: React.ReactNode;
   filterReset?: React.ReactNode;
+  filterEmptyText?: React.ReactNode;
   emptyText?: React.ReactNode | (() => React.ReactNode);
   selectAll?: React.ReactNode;
   selectInvert?: React.ReactNode;