Custom Timeout for Submenus added via leaveTimeout prop on SubMenu

.gitignore

@@ -23,6 +23,5 @@ node_modules
 dist
 assets/**/*.css
 build
-lib
 coverage
 yarn.lock

README.md

@@ -252,6 +252,12 @@ ReactDOM.render(<Menu>
             <td>Boolean</td>
             <th>false</th>
             <td>no effect for click or keydown for this item</td>
+        </tr>
+         <tr>
+            <td>leaveTimeout</td>
+            <td>Number</td>
+            <th>100</th>
+            <td>Timeout before hiding the SubMenu</td>
         </tr>
         <tr>
             <td>onMouseEnter</td>

lib/DOMWrap.js

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _createReactClass = require('create-react-class');
+
+var _createReactClass2 = _interopRequireDefault(_createReactClass);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var DOMWrap = (0, _createReactClass2["default"])({
+  displayName: 'DOMWrap',
+
+  propTypes: {
+    tag: _propTypes2["default"].string,
+    hiddenClassName: _propTypes2["default"].string,
+    visible: _propTypes2["default"].bool
+  },
+
+  getDefaultProps: function getDefaultProps() {
+    return {
+      tag: 'div'
+    };
+  },
+  render: function render() {
+    var props = (0, _extends3["default"])({}, this.props);
+    if (!props.visible) {
+      props.className = props.className || '';
+      props.className += ' ' + props.hiddenClassName;
+    }
+    var Tag = props.tag;
+    delete props.tag;
+    delete props.hiddenClassName;
+    delete props.visible;
+    return _react2["default"].createElement(Tag, props);
+  }
+});
+
+exports["default"] = DOMWrap;
+module.exports = exports['default'];

lib/Divider.js

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _createReactClass = require('create-react-class');
+
+var _createReactClass2 = _interopRequireDefault(_createReactClass);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var Divider = (0, _createReactClass2["default"])({
+  displayName: 'Divider',
+
+  propTypes: {
+    disabled: _propTypes2["default"].bool,
+    className: _propTypes2["default"].string,
+    rootPrefixCls: _propTypes2["default"].string
+  },
+
+  getDefaultProps: function getDefaultProps() {
+    return {
+      disabled: true
+    };
+  },
+  render: function render() {
+    var _props = this.props,
+        _props$className = _props.className,
+        className = _props$className === undefined ? '' : _props$className,
+        rootPrefixCls = _props.rootPrefixCls;
+
+    return _react2["default"].createElement('li', { className: className + ' ' + rootPrefixCls + '-item-divider' });
+  }
+});
+
+exports["default"] = Divider;
+module.exports = exports['default'];

lib/Menu.js

@@ -0,0 +1,252 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _createReactClass = require('create-react-class');
+
+var _createReactClass2 = _interopRequireDefault(_createReactClass);
+
+var _MenuMixin = require('./MenuMixin');
+
+var _MenuMixin2 = _interopRequireDefault(_MenuMixin);
+
+var _util = require('./util');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+// import React from 'react';
+var Menu = (0, _createReactClass2["default"])({
+  displayName: 'Menu',
+
+  propTypes: {
+    openSubMenuOnMouseEnter: _propTypes2["default"].bool,
+    closeSubMenuOnMouseLeave: _propTypes2["default"].bool,
+    selectedKeys: _propTypes2["default"].arrayOf(_propTypes2["default"].string),
+    defaultSelectedKeys: _propTypes2["default"].arrayOf(_propTypes2["default"].string),
+    defaultOpenKeys: _propTypes2["default"].arrayOf(_propTypes2["default"].string),
+    openKeys: _propTypes2["default"].arrayOf(_propTypes2["default"].string),
+    mode: _propTypes2["default"].string,
+    onClick: _propTypes2["default"].func,
+    onSelect: _propTypes2["default"].func,
+    onDeselect: _propTypes2["default"].func,
+    onDestroy: _propTypes2["default"].func,
+    openTransitionName: _propTypes2["default"].string,
+    openAnimation: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].object]),
+    level: _propTypes2["default"].number,
+    eventKey: _propTypes2["default"].string,
+    selectable: _propTypes2["default"].bool,
+    children: _propTypes2["default"].any
+  },
+
+  mixins: [_MenuMixin2["default"]],
+
+  getDefaultProps: function getDefaultProps() {
+    return {
+      openSubMenuOnMouseEnter: true,
+      closeSubMenuOnMouseLeave: true,
+      selectable: true,
+      onClick: _util.noop,
+      onSelect: _util.noop,
+      onOpenChange: _util.noop,
+      onDeselect: _util.noop,
+      defaultSelectedKeys: [],
+      defaultOpenKeys: []
+    };
+  },
+  getInitialState: function getInitialState() {
+    var props = this.props;
+    var selectedKeys = props.defaultSelectedKeys;
+    var openKeys = props.defaultOpenKeys;
+    if ('selectedKeys' in props) {
+      selectedKeys = props.selectedKeys || [];
+    }
+    if ('openKeys' in props) {
+      openKeys = props.openKeys || [];
+    }
+    return {
+      selectedKeys: selectedKeys,
+      openKeys: openKeys
+    };
+  },
+  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
+    var props = {};
+    if ('selectedKeys' in nextProps) {
+      props.selectedKeys = nextProps.selectedKeys || [];
+    }
+    if ('openKeys' in nextProps) {
+      props.openKeys = nextProps.openKeys || [];
+    }
+    this.setState(props);
+  },
+  onDestroy: function onDestroy(key) {
+    var state = this.state;
+    var props = this.props;
+    var selectedKeys = state.selectedKeys;
+    var openKeys = state.openKeys;
+    var index = selectedKeys.indexOf(key);
+    if (!('selectedKeys' in props) && index !== -1) {
+      selectedKeys.splice(index, 1);
+    }
+    index = openKeys.indexOf(key);
+    if (!('openKeys' in props) && index !== -1) {
+      openKeys.splice(index, 1);
+    }
+  },
+  onItemHover: function onItemHover(e) {
+    var item = e.item;
+    var _props = this.props,
+        mode = _props.mode,
+        closeSubMenuOnMouseLeave = _props.closeSubMenuOnMouseLeave;
+    var _e$openChanges = e.openChanges,
+        openChanges = _e$openChanges === undefined ? [] : _e$openChanges;
+    // special for top sub menu
+
+    if (mode !== 'inline' && !closeSubMenuOnMouseLeave && item.isSubMenu) {
+      var activeKey = this.state.activeKey;
+      var activeItem = this.getFlatInstanceArray().filter(function (c) {
+        return c && c.props.eventKey === activeKey;
+      })[0];
+      if (activeItem && activeItem.props.open) {
+        openChanges = openChanges.concat({
+          key: item.props.eventKey,
+          item: item,
+          originalEvent: e,
+          open: true
+        });
+      }
+    }
+    openChanges = openChanges.concat(this.getOpenChangesOnItemHover(e));
+    if (openChanges.length) {
+      this.onOpenChange(openChanges);
+    }
+  },
+  onSelect: function onSelect(selectInfo) {
+    var props = this.props;
+    if (props.selectable) {
+      // root menu
+      var selectedKeys = this.state.selectedKeys;
+      var selectedKey = selectInfo.key;
+      if (props.multiple) {
+        selectedKeys = selectedKeys.concat([selectedKey]);
+      } else {
+        selectedKeys = [selectedKey];
+      }
+      if (!('selectedKeys' in props)) {
+        this.setState({
+          selectedKeys: selectedKeys
+        });
+      }
+      props.onSelect((0, _extends3["default"])({}, selectInfo, {
+        selectedKeys: selectedKeys
+      }));
+    }
+  },
+  onClick: function onClick(e) {
+    this.props.onClick(e);
+  },
+  onOpenChange: function onOpenChange(e_) {
+    var props = this.props;
+    var openKeys = this.state.openKeys.concat();
+    var changed = false;
+    var processSingle = function processSingle(e) {
+      var oneChanged = false;
+      if (e.open) {
+        oneChanged = openKeys.indexOf(e.key) === -1;
+        if (oneChanged) {
+          openKeys.push(e.key);
+        }
+      } else {
+        var index = openKeys.indexOf(e.key);
+        oneChanged = index !== -1;
+        if (oneChanged) {
+          openKeys.splice(index, 1);
+        }
+      }
+      changed = changed || oneChanged;
+    };
+    if (Array.isArray(e_)) {
+      // batch change call
+      e_.forEach(processSingle);
+    } else {
+      processSingle(e_);
+    }
+    if (changed) {
+      if (!('openKeys' in this.props)) {
+        this.setState({ openKeys: openKeys });
+      }
+      props.onOpenChange(openKeys);
+    }
+  },
+  onDeselect: function onDeselect(selectInfo) {
+    var props = this.props;
+    if (props.selectable) {
+      var selectedKeys = this.state.selectedKeys.concat();
+      var selectedKey = selectInfo.key;
+      var index = selectedKeys.indexOf(selectedKey);
+      if (index !== -1) {
+        selectedKeys.splice(index, 1);
+      }
+      if (!('selectedKeys' in props)) {
+        this.setState({
+          selectedKeys: selectedKeys
+        });
+      }
+      props.onDeselect((0, _extends3["default"])({}, selectInfo, {
+        selectedKeys: selectedKeys
+      }));
+    }
+  },
+  getOpenTransitionName: function getOpenTransitionName() {
+    var props = this.props;
+    var transitionName = props.openTransitionName;
+    var animationName = props.openAnimation;
+    if (!transitionName && typeof animationName === 'string') {
+      transitionName = props.prefixCls + '-open-' + animationName;
+    }
+    return transitionName;
+  },
+  isInlineMode: function isInlineMode() {
+    return this.props.mode === 'inline';
+  },
+  lastOpenSubMenu: function lastOpenSubMenu() {
+    var lastOpen = [];
+    var openKeys = this.state.openKeys;
+
+    if (openKeys.length) {
+      lastOpen = this.getFlatInstanceArray().filter(function (c) {
+        return c && openKeys.indexOf(c.props.eventKey) !== -1;
+      });
+    }
+    return lastOpen[0];
+  },
+  renderMenuItem: function renderMenuItem(c, i, subIndex) {
+    if (!c) {
+      return null;
+    }
+    var state = this.state;
+    var extraProps = {
+      openKeys: state.openKeys,
+      selectedKeys: state.selectedKeys,
+      openSubMenuOnMouseEnter: this.props.openSubMenuOnMouseEnter
+    };
+    return this.renderCommonMenuItem(c, i, subIndex, extraProps);
+  },
+  render: function render() {
+    var props = (0, _extends3["default"])({}, this.props);
+    props.className += ' ' + props.prefixCls + '-root';
+    return this.renderRoot(props);
+  }
+});
+
+exports["default"] = Menu;
+module.exports = exports['default'];