diff --git a/assets/index.less b/assets/index.less index 5795657a..a31b8e99 100644 --- a/assets/index.less +++ b/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; diff --git a/examples/index.css b/examples/index.css deleted file mode 100644 index 5ce72a32..00000000 --- a/examples/index.css +++ /dev/null @@ -1 +0,0 @@ -@import "font-awesome/css/font-awesome.css"; \ No newline at end of file diff --git a/examples/menuItemGroup.js b/examples/menuItemGroup.js index 106994f1..af8f3642 100644 --- a/examples/menuItemGroup.js +++ b/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(

menu item group

- - 1 + 2 3 diff --git a/package.json b/package.json index ea96644f..62ab04cc 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,6 @@ }, "dependencies": { "dom-scroll-into-view": "^1.0.1", - "object-assign": "~3.0.0", "rc-util": "2.x" }, "precommit": [ diff --git a/src/Divider.jsx b/src/Divider.jsx index 3b58b323..0814dbee 100644 --- a/src/Divider.jsx +++ b/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
  • ; + return
  • ; } } diff --git a/src/Menu.jsx b/src/Menu.jsx index f3b00e88..2f4ddf2b 100644 --- a/src/Menu.jsx +++ b/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,7 +124,6 @@ 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 @@ -139,7 +131,7 @@ class Menu extends React.Component { 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,7 +215,7 @@ 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, @@ -231,7 +223,7 @@ class Menu extends React.Component { 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 (
      - {this.newChildren} + {React.Children.map(props.children, this.renderMenuItem)}
    ); } diff --git a/src/MenuItemGroup.jsx b/src/MenuItemGroup.jsx index d5f5530f..19143eb9 100644 --- a/src/MenuItemGroup.jsx +++ b/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
  • - {props.title} -
      - {this.newChildren} +
      {props.title}
      +
        + {React.Children.map(props.children, props.renderMenuItem)}
      ; } - renderMenuItem(child) { - return this.props.parent.renderMenuItem(child); - } } MenuItemGroup.defaultProps = { - disabled: true, - title: '' + // skip key down loop + disabled: true }; - module.exports = MenuItemGroup; diff --git a/src/index.js b/src/index.js index ac981026..cc63fac0 100644 --- a/src/index.js +++ b/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;