support onMouseEnter/onMouseLeave for MenuItem and SubMenu

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,24 +44,32 @@ 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,
           trigger: 'mouseleave',
         });
       }
     }, 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) {

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);