From 1b64eb39bc96a1fc1efc76d836839a2142e8a717 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= <afc163@gmail.com>
Date: Thu, 18 Jun 2020 11:38:43 +0800
Subject: [PATCH] style: Add empty style for Table empty filters menu (#25073)

close #25068
---
 components/locale/default.tsx                 |  1 +
 components/locale/zh_CN.tsx                   |  1 +
 components/locale/zh_TW.tsx                   |  1 +
 .../table/__tests__/Table.filter.test.js      | 13 +++++
 .../table/hooks/useFilter/FilterDropdown.tsx  | 53 ++++++++++++++-----
 components/table/interface.tsx                |  1 +
 6 files changed, 58 insertions(+), 12 deletions(-)

diff --git a/components/locale/default.tsx b/components/locale/default.tsx
index 4acbb6470f69..0a59ec430c3f 100644
--- 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
index 893ed0893820..b5ac34688b30 100644
--- 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
index fd677b69a70d..5139e673d97f 100644
--- 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
index 2fd022b6fda0..527d8d6bc1e6 100644
--- 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
index ea81d6a7fc51..9043cda2b1a3 100644
--- 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
index 5d6e024b8032..3054385aa3ee 100644
--- 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;