update filter dropdown function and style

components/table/index.jsx

@@ -92,16 +92,18 @@ let AntTable = React.createClass({
     this.fetch();
   },
   handleSelectFilter(column, selected) {
-    column.selectedFilters = column.selectedFilters || [];
     column.selectedFilters.push(selected);
   },
   handleDeselectFilter(column, key) {
-    column.selectedFilters = column.selectedFilters || [];
     var index = column.selectedFilters.indexOf(key);
     if (index !== -1) {
       column.selectedFilters.splice(index, 1);
     }
   },
+  handleClearFilters(column) {
+    column.selectedFilters = [];
+    this.fetch();
+  },
   handleSelect(e) {
     let checked = e.currentTarget.checked;
     let currentRowIndex = e.currentTarget.parentElement.parentElement.rowIndex;
@@ -169,20 +171,31 @@ let AntTable = React.createClass({
       }
       let filterDropdown, menus, sortButton;
       if (column.filters && column.filters.length > 0) {
+        column.selectedFilters = column.selectedFilters || [];
         menus = <Menu multiple={true}
           className="ant-table-filter-dropdown"
           onSelect={this.handleSelectFilter.bind(this, column)}
-          onDeselect={this.handleDeselectFilter.bind(this, column)}>
+          onDeselect={this.handleDeselectFilter.bind(this, column)}
+          selectedKeys={column.selectedFilters}>
           {this.renderMenus(column.filters)}
+          <Menu.Divider />
           <Menu.Item disabled>
-            <button style={{
+            <a className="ant-table-filter-dropdown-link confirm"
+              style={{
                 cursor: 'pointer',
                 pointerEvents: 'visible'
               }}
-              className="ant-btn ant-btn-primary ant-btn-sm"
               onClick={this.handleFilter.bind(this, column)}>
-              确 定
+              确定
-            </button>
+            </a>
+            <a className="ant-table-filter-dropdown-link clear"
+              style={{
+                cursor: 'pointer',
+                pointerEvents: 'visible'
+              }}
+              onClick={this.handleClearFilters.bind(this, column)}>
+              清空
+            </a>
           </Menu.Item>
         </Menu>;
         let dropdownSelectedClass = '';

style/components/dropdown.less

@@ -99,7 +99,6 @@
 
       &-divider {
         height: 1px;
-        margin: 1px 0;
         overflow: hidden;
         background-color: #e5e5e5;
         line-height: 0;

style/components/table.less

@@ -32,7 +32,30 @@
     }
 
     .@{tablePrefixClass}-filter-dropdown {
-      min-width: 100px;
+      min-width: 88px;
+      .ant-dropdown-menu-item {
+        overflow: hidden;
+        padding: 7px 8px;
+        &.ant-dropdown-menu-item-selected:after {
+          right: 8px;
+        }
+      }
+    }
+
+    a.@{tablePrefixClass}-filter-dropdown-link {
+      color: @link-color;
+      &:hover {
+        color: @link-hover-color;
+      }
+      &:active {
+        color: @link-active-color;
+      }
+      &.confirm {
+        float: left;
+      }
+      &.clear {
+        float: right;
+      }
     }
 
     .@{tablePrefixClass}-filter-selected.anticon-bars {

style/core/base.less

@@ -54,6 +54,10 @@ a {
     color: @link-hover-color;
   }
 
+  &:active {
+    color: @link-active-color;
+  }
+
   &:active,
   &:hover {
     outline: 0;

style/themes/default/custom.less

@@ -25,6 +25,7 @@
 // LINK
 @link-color             : @primary-color;
 @link-hover-color       : tint(@link-color, 20%);
+@link-active-color      : shade(@link-color, 5%);
 @link-hover-decoration  : none;
 
 // Disabled cursor for form controls and buttons.