diff --git a/src/MenuItem.jsx b/src/MenuItem.jsx index 5dee9f44..0350ab26 100644 --- a/src/MenuItem.jsx +++ b/src/MenuItem.jsx @@ -1,6 +1,7 @@ import React from 'react'; import {KeyCode} from 'rc-util'; import classnames from 'classnames'; +import {noop} from './util'; const MenuItem = React.createClass({ propTypes: { @@ -16,14 +17,15 @@ const MenuItem = React.createClass({ parentMenu: React.PropTypes.object, onItemHover: React.PropTypes.func, onDestroy: React.PropTypes.func, + onMouseEnter: React.PropTypes.func, + onMouseLeave: React.PropTypes.func, }, getDefaultProps() { return { - onSelect() { - }, - onMouseEnter() { - }, + onSelect: noop, + onMouseEnter: noop, + onMouseLeave: noop, }; }, @@ -42,12 +44,13 @@ const MenuItem = React.createClass({ } }, - onMouseLeave() { - const eventKey = this.props.eventKey; - const parentMenu = this.props.parentMenu; + onMouseLeave(e) { + const props = this.props; + const eventKey = props.eventKey; + const parentMenu = props.parentMenu; parentMenu.menuItemMouseLeaveTimer = setTimeout(()=> { - if (this.isMounted() && this.props.active) { - this.props.onItemHover({ + if (this.isMounted() && props.active) { + props.onItemHover({ key: eventKey, item: this, hover: false, @@ -55,11 +58,18 @@ const MenuItem = React.createClass({ }); } }, 30); + // triggered only on `inline` mode + if (props.mode === 'inline') { + props.onMouseLeave({ + key: eventKey, + domEvent: e, + }); + } }, - onMouseEnter() { + onMouseEnter(e) { const props = this.props; - const parentMenu = this.props.parentMenu; + const parentMenu = props.parentMenu; if (parentMenu.menuItemMouseLeaveTimer) { clearTimeout(parentMenu.menuItemMouseLeaveTimer); parentMenu.menuItemMouseLeaveTimer = null; @@ -71,6 +81,13 @@ const MenuItem = React.createClass({ hover: true, trigger: 'mouseenter', }); + // triggered only on `inline` mode + if (props.mode === 'inline') { + props.onMouseEnter({ + key: eventKey, + domEvent: e, + }); + } }, onClick(e) { diff --git a/src/SubMenu.jsx b/src/SubMenu.jsx index de9847f4..c64ded20 100644 --- a/src/SubMenu.jsx +++ b/src/SubMenu.jsx @@ -3,6 +3,7 @@ import React from 'react'; import {KeyCode, guid} from 'rc-util'; import classnames from 'classnames'; import assign from 'object-assign'; +import {noop} from './util'; const SubMenu = React.createClass({ propTypes: { @@ -21,14 +22,16 @@ const SubMenu = React.createClass({ onDeselect: React.PropTypes.func, onDestroy: React.PropTypes.func, onItemHover: React.PropTypes.func, + onMouseEnter: React.PropTypes.func, + onMouseLeave: React.PropTypes.func, }, mixins: [require('./SubMenuStateMixin')], getDefaultProps() { return { - onMouseEnter() { - }, + onMouseEnter: noop, + onMouseLeave: noop, title: '', }; }, @@ -93,11 +96,19 @@ const SubMenu = React.createClass({ } }, - onSubTreeMouseEnter() { + onSubTreeMouseEnter(e) { if (this.leaveTimer) { clearTimeout(this.leaveTimer); this.leaveTimer = null; } + const props = this.props; + const eventKey = props.eventKey; + if (props.mode === 'inline') { + props.onMouseEnter({ + key: eventKey, + domEvent: e, + }); + } }, onOpenChange(e) { @@ -129,22 +140,34 @@ const SubMenu = React.createClass({ }); }, - onMouseLeave() { + onMouseLeave(e) { // prevent popup menu and submenu gap this.leaveTimer = setTimeout(()=> { - // leave whole sub tree - // still active - if (this.isMounted() && this.props.active) { - this.props.onItemHover({ - key: this.props.eventKey, - item: this, - hover: false, - trigger: 'mouseleave', - }); - } - if (this.isMounted() && this.props.open) { - if (this.props.closeSubMenuOnMouseLeave) { - this.triggerOpenChange(false); + const props = this.props; + const eventKey = props.eventKey; + if (this.isMounted()) { + // leave whole sub tree + // still active + if (props.active) { + props.onItemHover({ + key: eventKey, + item: this, + hover: false, + trigger: 'mouseleave', + }); + } + if (props.open) { + if (props.closeSubMenuOnMouseLeave) { + this.triggerOpenChange(false); + } + } + // trigger mouseleave + // when leaving whole sub tree on `inline` mode + if (props.mode === 'inline') { + props.onMouseLeave({ + key: eventKey, + domEvent: e, + }); } } }, 100);