improve table filter dropdown

components/table/filterMenu.jsx → components/table/filterDropdown.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import Menu from 'rc-menu';
+import Dropdown from '../dropdown';
 
 var FilterMenu = React.createClass({
   getInitialState() {
@@ -29,9 +30,17 @@ var FilterMenu = React.createClass({
       selectedKeys: []
     }, this.handleConfirm);
   },
-  handleConfirm(){
+  handleConfirm() {
+    this.setState({
+      visible: false
+    });
     this.props.confirmFilter(this.props.column, this.state.selectedKeys);
   },
+  onVisibleChange(visible) {
+    this.setState({
+      visible: visible
+    });
+  },
   renderMenus(items) {
     let menuItems = items.map((item) => {
       return <Menu.Item key={item.value}>{item.text}</Menu.Item>;
@@ -40,7 +49,7 @@ var FilterMenu = React.createClass({
   },
   render() {
     let column = this.props.column;
-    return <Menu multiple={true}
+    let menus = <Menu multiple={true}
                  prefixCls="ant-dropdown-menu"
                  className="ant-table-filter-dropdown"
                  onSelect={this.setSelectedKeys}
@@ -67,6 +76,15 @@ var FilterMenu = React.createClass({
         </a>
       </Menu.Item>
     </Menu>;
+
+    let dropdownSelectedClass = '';
+    if (this.props.selectedKeys.length > 0) {
+      dropdownSelectedClass = 'ant-table-filter-selected';
+    }
+
+    return <Dropdown trigger="click" overlay={menus} visible={this.state.visible} onVisibleChange={this.onVisibleChange}>
+      <i title="筛选" className={'anticon anticon-bars ' + dropdownSelectedClass}></i>
+    </Dropdown>;
   }
 });
 

components/table/index.jsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import jQuery from 'jquery';
 import Table from 'rc-table';
-import Dropdown from '../dropdown';
 import Checkbox from '../checkbox';
-import FilterMenu from './filterMenu';
+import FilterDropdown from './filterDropdown';
 import Pagination from '../pagination';
 import objectAssign from 'object-assign';
 import equals from 'is-equal-shallow';
@@ -272,17 +271,10 @@ var AntTable = React.createClass({
       let filterDropdown, menus, sortButton;
       if (column.filters && column.filters.length > 0) {
         let colFilters = this.state.filters[key] || [];
-        menus = <FilterMenu column={column}
-                            selectedKeys={colFilters}
-                            confirmFilter={this.handleFilter}/>;
-        let dropdownSelectedClass = '';
-        if (colFilters.length > 0) {
-          dropdownSelectedClass = 'ant-table-filter-selected';
-        }
-        filterDropdown = <Dropdown trigger="click"
-                                   overlay={menus}>
-          <i title="筛选" className={'anticon anticon-bars ' + dropdownSelectedClass}></i>
-        </Dropdown>;
+        filterDropdown =
+          <FilterDropdown column={column}
+                          selectedKeys={colFilters}
+                          confirmFilter={this.handleFilter} />;
       }
       if (column.sorter) {
         let isSortColumn = this.isSortColumn(column);