optimize menu group

assets/index.less

@@ -9,6 +9,18 @@
   border: 1px solid rgba(0, 0, 0, .15);
   border-radius: 3px;
 
+  &-item-group-list {
+    margin: 0;
+    padding: 0;
+  }
+
+  &-item-group-title {
+    color: #999;
+    line-height: 1.5;
+    padding: 8px 10px;
+    border-bottom: 1px solid #dedede;
+  }
+
   &-item-active, &-submenu-active {
     background-color: #8EC8F9 !important;
   }
@@ -21,11 +33,12 @@
     padding: 15px 20px;
   }
 
-  &> li&-submenu {
+  & > li&-submenu {
     padding: 0;
   }
 
-   li {
+  &-item {
+    margin: 0;
     position: relative;
     display: block;
     padding: 15px 20px;

examples/menuItemGroup.js

@@ -4,15 +4,14 @@ var React = require('react');
 var Menu = require('rc-menu');
 var SubMenu = Menu.SubMenu;
 var MenuItem = Menu.Item;
-var MenuItemGroup = Menu.MenuItemGroup;
+var MenuItemGroup = Menu.ItemGroup;
 
 require('rc-menu/assets/index.css');
 require('font-awesome/css/font-awesome.css');
 
 React.render(<div>
   <h1>menu item group</h1>
-  <Menu style={{margin:20, width:300}}>
-    <MenuItem key="1">1</MenuItem>
+  <Menu style={{margin: 20, width: 300}}>
     <MenuItemGroup title="group 1" key="2">
       <MenuItem key="21">2</MenuItem>
       <MenuItem key="22">3</MenuItem>

package.json

@@ -52,7 +52,6 @@
   },
   "dependencies": {
     "dom-scroll-into-view": "^1.0.1",
-    "object-assign": "~3.0.0",
     "rc-util": "2.x"
   },
   "precommit": [

src/Divider.jsx

@@ -1,16 +1,14 @@
 'use strict';
 
 var React = require('react');
-var assign = require('object-assign');
 
 class Divider extends React.Component {
   render() {
-    var props = assign({}, this.props);
+    var props = this.props;
     var className = props.className || '';
     var rootPrefixCls = props.rootPrefixCls;
     className += ' ' + `${rootPrefixCls}-item-divider`;
-    props.className = className;
-    return <li {...props} />;
+    return <li {...props} className={className}/>;
   }
 }
 

src/Menu.jsx

@@ -39,8 +39,9 @@ function getActiveKey(props) {
 }
 
 function saveRef(name, c) {
-  this.instances = this.instances || {};
-  this.instances[name] = c;
+  if (c) {
+    this.instanceArray.push(c);
+  }
 }
 
 class Menu extends React.Component {
@@ -51,9 +52,11 @@ class Menu extends React.Component {
       selectedKeys: props.selectedKeys || []
     };
 
-    ['handleItemHover', 'handleDeselect', 'handleSelect', 'handleKeyDown', 'handleDestroy'].forEach((m)=> {
-      this[m] = this[m].bind(this);
-    });
+    ['handleItemHover', 'handleDeselect',
+      'handleSelect', 'handleKeyDown',
+      'handleDestroy', 'renderMenuItem'].forEach((m)=> {
+        this[m] = this[m].bind(this);
+      });
   }
 
   componentWillReceiveProps(nextProps) {
@@ -66,53 +69,43 @@ class Menu extends React.Component {
     this.setState(props);
   }
 
-  getChildrenComponents() {
-    var ret = [];
-    this.newChildren.forEach((c)=> {
-      ret.push(this.instances[c.key]);
-    });
-    return ret;
-  }
-
   // all keyboard events callbacks run from here at first
   handleKeyDown(e) {
     var keyCode = e.keyCode;
     var handled;
-    this.newChildren.forEach((c)=> {
-      var obj = this.instances[c.key];
-      if (c.props.active) {
+    this.instanceArray.forEach((obj)=> {
+      if (obj.props.active) {
         handled = obj.handleKeyDown(e);
       }
     });
     if (handled) {
-      return true;
+      return 1;
     }
-    var activeKey;
+    var activeItem;
     switch (keyCode) {
       case KeyCode.UP: //up
-        activeKey = this.step(-1);
+        activeItem = this.step(-1);
         break;
       case KeyCode.DOWN: //down
-        activeKey = this.step(1);
+        activeItem = this.step(1);
         break;
       default:
     }
-    if (activeKey) {
+    if (activeItem) {
       e.preventDefault();
       this.setState({
-        activeKey: activeKey
+        activeKey: activeItem.props.eventKey
       }, ()=> {
-        scrollIntoView(React.findDOMNode(this.instances[activeKey]), React.findDOMNode(this), {
+        scrollIntoView(React.findDOMNode(activeItem), React.findDOMNode(this), {
           onlyScrollIfNeeded: true
         });
       });
-      return true;
+      return 1;
     }
   }
 
   step(direction) {
-    var children = this.newChildren;
-    //var children = this.instances;
+    var children = this.instanceArray;
     var activeKey = this.state.activeKey;
     var len = children.length;
     if (direction < 0) {
@@ -121,7 +114,7 @@ class Menu extends React.Component {
     // find current activeIndex
     var activeIndex = -1;
     children.every((c, ci)=> {
-      if (c.key === activeKey) {
+      if (c.props.eventKey === activeKey) {
         activeIndex = ci;
         return false;
       }
@@ -131,15 +124,14 @@ class Menu extends React.Component {
     var i = start;
     for (; ;) {
       var child = children[i];
-      var key = child.key;
       if (child.props.disabled) {
         i = (i + 1 + len) % len;
         // complete a loop
         if (i === start) {
           return null;
         }
       } else {
-        return key;
+        return child;
       }
     }
   }
@@ -169,7 +161,7 @@ class Menu extends React.Component {
     }
     var state = this.state;
     // my child
-    if (this.getChildrenComponents().indexOf(child) !== -1) {
+    if (this.instanceArray.indexOf(child) !== -1) {
       var selectedKeys;
       if (props.multiple) {
         selectedKeys = state.selectedKeys.concat([key]);
@@ -188,7 +180,7 @@ class Menu extends React.Component {
 
   handleDeselect(key, child, e, __childToBeSelected/*internal*/) {
     var state = this.state;
-    var children = this.getChildrenComponents();
+    var children = this.instanceArray;
     // my children
     if (children.indexOf(child) !== -1 && children.indexOf(__childToBeSelected) === -1) {
       var selectedKeys = state.selectedKeys;
@@ -223,15 +215,15 @@ class Menu extends React.Component {
     var props = this.props;
     var childProps = child.props;
     return React.cloneElement(child, {
-      parent: this,
+      renderMenuItem: this.renderMenuItem,
       rootPrefixCls: props.prefixCls,
       ref: createChainedFunction(child.ref, saveRef.bind(this, key)),
       eventKey: key,
       onHover: this.handleItemHover,
       active: key === state.activeKey,
       multiple: props.multiple,
       selected: state.selectedKeys.indexOf(key) !== -1,
-      onClick: this.props.onClick,
+      onClick: props.onClick,
       onDeselect: createChainedFunction(childProps.onDeselect, this.handleDeselect),
       onDestroy: this.handleDestroy,
       onSelect: createChainedFunction(childProps.onSelect, this.handleSelect)
@@ -240,6 +232,7 @@ class Menu extends React.Component {
 
   render() {
     var props = this.props;
+    this.instanceArray = [];
     var classes = {};
     classes[props.prefixCls] = true;
     var domProps = {
@@ -254,13 +247,11 @@ class Menu extends React.Component {
       domProps.tabIndex = '0';
       domProps.onKeyDown = this.handleKeyDown;
     }
-
-    this.newChildren = rcUtil.Children.toArray(props.children).map(this.renderMenuItem, this);
     return (
       <ul
         style={this.props.style}
         {...domProps}>
-      {this.newChildren}
+      {React.Children.map(props.children, this.renderMenuItem)}
       </ul>
     );
   }

src/MenuItemGroup.jsx

@@ -1,37 +1,26 @@
 'use strict';
 
 var React = require('react');
-var assign = require('object-assign');
-var rcUtil = require('rc-util');
 
 class MenuItemGroup extends React.Component {
   render() {
-    var props = assign({}, this.props);
+    var props = this.props;
     var className = props.className || '';
     var rootPrefixCls = props.rootPrefixCls;
     className += ` ${rootPrefixCls}-item-group`;
-
-    // menuItem 在 disabled 时，是可以选中的
-    // group title 是不能被选中的，不用menuItem
-    //console.log(props);
-
-    this.newChildren = rcUtil.Children.toArray(props.children).map(this.renderMenuItem, this);
-    this.props.parent.newChildren = this.props.parent.newChildren.concat(this.newChildren);
+    var titleClassName = `${rootPrefixCls}-item-group-title`;
+    var listClassName = `${rootPrefixCls}-item-group-list`;
     return <li className={className}>
-      <span>{props.title}</span>
-      <ul>
-        {this.newChildren}
+      <div className={titleClassName}>{props.title}</div>
+      <ul className={listClassName}>
+        {React.Children.map(props.children, props.renderMenuItem)}
       </ul>
     </li>;
   }
-  renderMenuItem(child) {
-    return this.props.parent.renderMenuItem(child);
-  }
 }
 
 MenuItemGroup.defaultProps = {
-  disabled: true,
-  title: ''
+  // skip key down loop
+  disabled: true
 };
-
 module.exports = MenuItemGroup;

src/index.js

@@ -3,6 +3,6 @@
 var Menu = require('./Menu');
 Menu.SubMenu = require('./SubMenu');
 Menu.Item = require('./MenuItem');
-Menu.MenuItemGroup = require('./MenuItemGroup');
+Menu.ItemGroup = require('./MenuItemGroup');
 Menu.Divider = require('./Divider');
 module.exports = Menu;