support submenu in table filter menu, ref #708

components/table/demo/head.md

@@ -16,10 +16,20 @@ const columns = [{
   dataIndex: 'name',
   filters: [{
     text: '姓李的',
-    value: '李'
+    value: '李',
   }, {
     text: '姓胡的',
-    value: '胡'
+    value: '胡',
+  }, {
+    text: '子菜单',
+    value: '子菜单',
+    children: [{
+      text: '姓陈的',
+      value: '陈',
+    }, {
+      text: '姓王的',
+      value: '王',
+    }]
   }],
   // 指定确定筛选的条件函数
   // 这里是名字中第一个字是 value

components/table/filterDropdown.jsx

@@ -3,12 +3,14 @@ import Menu from 'rc-menu';
 import Dropdown from '../dropdown';
 import Icon from '../icon';
 import Checkbox from '../checkbox';
+const { SubMenu } = Menu;
 
 let FilterMenu = React.createClass({
   getInitialState() {
     return {
       selectedKeys: this.props.selectedKeys,
-      visible: false
+      keyPathOfSelectedItem: {},    // 记录所有有选中子菜单的祖先菜单
+      visible: false,
     };
   },
   componentWillReceiveProps(nextProps){
@@ -45,15 +47,47 @@ let FilterMenu = React.createClass({
       this.props.confirmFilter(this.props.column, this.state.selectedKeys);
     }
   },
+  renderMenuItem(item) {
+    return <Menu.Item key={item.value}>
+      <Checkbox checked={this.state.selectedKeys.indexOf(item.value) >= 0} />
+      {item.text}
+    </Menu.Item>;
+  },
   renderMenus(items) {
-    let menuItems = items.map((item) => {
+    let menuItems = items.map(item => {
-      return <Menu.Item key={item.value}>
+      if (item.children && item.children.length > 0) {
-        <Checkbox checked={this.state.selectedKeys.indexOf(item.value) >= 0} />
+        const keyPathOfSelectedItem = this.state.keyPathOfSelectedItem;
-        {item.text}
+        const containSelected = Object.keys(keyPathOfSelectedItem).some(key => {
-      </Menu.Item>;
+          const keyPath = keyPathOfSelectedItem[key];
+          if (keyPath.indexOf(item.value) >= 0) {
+            return true;
+          }
+        });
+        const subMenuCls = containSelected ? 'ant-dropdown-submenu-contain-selected' : '';
+        return (
+          <SubMenu title={item.text} className={subMenuCls} key={item.value}>
+            {item.children.map(child => this.renderMenuItem(child))}
+          </SubMenu>
+        );
+      }
+      return this.renderMenuItem(item);
     });
     return menuItems;
   },
+  handleMenuItemClick(info) {
+    if (info.keyPath.length <= 1) {
+      return;
+    }
+    const keyPathOfSelectedItem = this.state.keyPathOfSelectedItem;
+    if (this.state.selectedKeys.indexOf(info.key) >= 0) {
+      // deselect SubMenu child
+      delete keyPathOfSelectedItem[info.key];
+    } else {
+      // select SubMenu child
+      keyPathOfSelectedItem[info.key] = info.keyPath;
+    }
+    this.setState({ keyPathOfSelectedItem });
+  },
   render() {
     let {column, locale} = this.props;
     // default multiple selection in filter dropdown
@@ -62,7 +96,7 @@ let FilterMenu = React.createClass({
       multiple = column.filterMultiple;
     }
     let menus = <div className="ant-table-filter-dropdown">
-      <Menu multiple={multiple}
+      <Menu multiple={multiple} onClick={this.handleMenuItemClick}
                  prefixCls="ant-dropdown-menu"
                  onSelect={this.setSelectedKeys}
                  onDeselect={this.setSelectedKeys}

style/components/table.less

@@ -227,16 +227,33 @@
 
   .ant-dropdown-menu {
     max-height: 220px;
-    overflow: auto;
     border: 0;
     box-shadow: none;
     border-radius: @border-radius-base @border-radius-base 0 0;
+
+    &-sub {
+      border-radius: @border-radius-base;
+      border: 1px solid @border-color-base;
+      box-shadow: @box-shadow-base;
+    }
+
+    .ant-dropdown-submenu-contain-selected {
+      .ant-dropdown-menu-submenu-title:after {
+        color: @primary-color;
+        font-weight: bold;
+      }
+    }
   }
 
   .ant-dropdown-menu-item {
     overflow: hidden;
   }
 
+  > .ant-dropdown-menu > .ant-dropdown-menu-item:last-child,
+  > .ant-dropdown-menu > .ant-dropdown-menu-submenu:last-child .ant-dropdown-menu-submenu-title {
+    border-radius: 0;
+  }
+
   &-btns {
     overflow: hidden;
     padding: 7px 15px;