From fe230f70842afe321a8a3739382ec7998c26fbc8 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 15 Jul 2015 12:16:28 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=B8=85=E7=A9=BA=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/table/filterMenu.jsx | 75 +++++++++++++++++++++++++++++++++
 components/table/index.jsx      | 48 +--------------------
 2 files changed, 77 insertions(+), 46 deletions(-)
 create mode 100644 components/table/filterMenu.jsx

diff --git a/components/table/filterMenu.jsx b/components/table/filterMenu.jsx
new file mode 100644
index 0000000000..12dee4916c
--- /dev/null
+++ b/components/table/filterMenu.jsx
@@ -0,0 +1,75 @@
+'use strict';
+
+import React from 'react';
+import Menu from 'rc-menu';
+
+export default React.createClass({
+  getInitialState() {
+    return {
+      selectedFilters: []
+    };
+  },
+  getDefaultProps() {
+    return {
+      handleFilter: function() {},
+      column: null
+    };
+  },
+  handleSelectFilter: function(selected) {
+    this.state.selectedFilters.push(selected);
+    this.setState({
+      selectedFilters: this.state.selectedFilters
+    });
+  },
+  handleDeselectFilter: function(key) {
+    var index = this.state.selectedFilters.indexOf(key);
+    if (index !== -1) {
+      this.state.selectedFilters.splice(index, 1);
+    }
+    this.setState({
+      selectedFilters: this.state.selectedFilters
+    });
+  },
+  handleClearFilters() {
+    this.setState({
+      selectedFilters: []
+    });
+  },
+  renderMenus(items) {
+    let menuItems = items.map((item) => {
+      return <Menu.Item key={item.value}>{item.text}</Menu.Item>;
+    });
+    return menuItems;
+  },
+  render() {
+    let column = this.props.column;
+    column.selectedFilters = this.state.selectedFilters;
+    return <Menu multiple={true}
+      prefixCls="ant-dropdown-menu"
+      className="ant-table-filter-dropdown"
+      onSelect={this.handleSelectFilter}
+      onDeselect={this.handleDeselectFilter}
+      selectedKeys={column.selectedFilters}>
+      {this.renderMenus(column.filters)}
+      <Menu.Divider />
+      <Menu.Item disabled>
+        <a className="ant-table-filter-dropdown-link confirm"
+          style={{
+            cursor: 'pointer',
+            pointerEvents: 'visible'
+          }}
+          onClick={this.props.confirmFilter}>
+          确定
+        </a>
+        <a className="ant-table-filter-dropdown-link clear"
+          style={{
+            cursor: 'pointer',
+            pointerEvents: 'visible'
+          }}
+          onClick={this.handleClearFilters}>
+          清空
+        </a>
+      </Menu.Item>
+    </Menu>;
+  }
+});
diff --git a/components/table/index.jsx b/components/table/index.jsx
index 4923af12da..83b6c85770 100644
--- a/components/table/index.jsx
+++ b/components/table/index.jsx
@@ -3,8 +3,8 @@
 import React from 'react';
 import jQuery from 'jquery';
 import Table from 'rc-table';
-import Menu from 'rc-menu';
 import Dropdown from '../dropdown';
+import FilterMenu from './filterMenu';
 import Pagination from '../pagination';
 import objectAssign from 'object-assign';
 
@@ -51,12 +51,6 @@ let AntTable = React.createClass({
       size: 'normal'
     };
   },
-  renderMenus(items) {
-    let menuItems = items.map((item) => {
-      return <Menu.Item key={item.value}>{item.text}</Menu.Item>;
-    });
-    return menuItems;
-  },
   toggleSortOrder(order, column) {
     let sortColumn = this.state.sortColumn;
     let sortOrder = this.state.sortOrder;
@@ -111,19 +105,6 @@ let AntTable = React.createClass({
     }
     this.fetch();
   },
-  handleSelectFilter(column, selected) {
-    column.selectedFilters.push(selected);
-  },
-  handleDeselectFilter(column, key) {
-    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;
@@ -198,32 +179,7 @@ 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)}
-          selectedKeys={column.selectedFilters}>
-          {this.renderMenus(column.filters)}
-          <Menu.Divider />
-          <Menu.Item disabled>
-            <a className="ant-table-filter-dropdown-link confirm"
-              style={{
-                cursor: 'pointer',
-                pointerEvents: 'visible'
-              }}
-              onClick={this.handleFilter.bind(this, column)}>
-              确定
-            </a>
-            <a className="ant-table-filter-dropdown-link clear"
-              style={{
-                cursor: 'pointer',
-                pointerEvents: 'visible'
-              }}
-              onClick={this.handleClearFilters.bind(this, column)}>
-              清空
-            </a>
-          </Menu.Item>
-        </Menu>;
+        menus = <FilterMenu column={column} confirmFilter={this.handleFilter.bind(this, column)} />;
         let dropdownSelectedClass = '';
         if (column.selectedFilters && column.selectedFilters.length > 0) {
           dropdownSelectedClass = 'ant-table-filter-selected';