From a68db2da20928f81a53318cbfdbf7aa1616b7b16 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Tue, 10 Mar 2020 18:07:11 +0800
Subject: [PATCH] :lipstick: update Table filter menu UI

---
 .../table/hooks/useFilter/FilterDropdown.tsx       | 14 ++++++++------
 components/table/style/index.less                  |  4 ++--
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/components/table/hooks/useFilter/FilterDropdown.tsx b/components/table/hooks/useFilter/FilterDropdown.tsx
index 999dd54fe6..56e3d7c109 100644
--- a/components/table/hooks/useFilter/FilterDropdown.tsx
+++ b/components/table/hooks/useFilter/FilterDropdown.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import FilterFilled from '@ant-design/icons/FilterFilled';
+import Button from '../../../button';
 import Menu from '../../../menu';
 import Checkbox from '../../../checkbox';
 import Radio from '../../../radio';
@@ -172,6 +173,7 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
   } else if (column.filterDropdown) {
     dropdownContent = column.filterDropdown;
   } else {
+    const selectedKeys = (getFilteredKeysSync() || []) as any;
     dropdownContent = (
       <>
         <Menu
@@ -181,7 +183,7 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
           onClick={onMenuClick}
           onSelect={onSelectKeys}
           onDeselect={onSelectKeys}
-          selectedKeys={(getFilteredKeysSync() || []) as any}
+          selectedKeys={selectedKeys}
           getPopupContainer={getPopupContainer}
           openKeys={openKeys}
           onOpenChange={onOpenChange}
@@ -189,12 +191,12 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
           {renderFilterItems(column.filters!, prefixCls, getFilteredKeysSync(), filterMultiple)}
         </Menu>
         <div className={`${prefixCls}-dropdown-btns`}>
-          <a className={`${prefixCls}-dropdown-link confirm`} onClick={onConfirm}>
-            {locale.filterConfirm}
-          </a>
-          <a className={`${prefixCls}-dropdown-link clear`} onClick={onReset}>
+          <Button type="link" size="small" disabled={selectedKeys.length === 0} onClick={onReset}>
             {locale.filterReset}
-          </a>
+          </Button>
+          <Button type="primary" size="small" onClick={onConfirm}>
+            {locale.filterConfirm}
+          </Button>
         </div>
       </>
     );
diff --git a/components/table/style/index.less b/components/table/style/index.less
index a920524226..71703a09a7 100644
--- a/components/table/style/index.less
+++ b/components/table/style/index.less
@@ -329,7 +329,7 @@
       box-shadow: none;
     }
 
-    min-width: 96px;
+    min-width: 120px;
     background-color: @table-filter-dropdown-bg;
 
     border-radius: @border-radius-base;
@@ -352,7 +352,7 @@
     &-btns {
       display: flex;
       justify-content: space-between;
-      padding: 7px 8px;
+      padding: 7px 8px 7px 3px;
       overflow: hidden;
       background-color: @table-filter-btns-bg;
       border-top: @border-width-base @border-style-base @border-color-split;