do not hide submenu onClick. Fixes #14

react-component · Sep 14, 2015 · 9de816e · 9de816e
1 parent a74eb59
commit 9de816e
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 26 deletions.
diff --git a/HISTORY.md b/HISTORY.md
@@ -1,6 +1,9 @@
 # History
 ----
 
+## 4.5.0 / 2015-09-14
+- does not hide submenu when click(use onClick to set openKeys to [] if you want)
+
 ## 4.4.0 / 2015-08-13
 - add openAnimation/openTransitionName prop
 

diff --git a/README.md b/README.md
@@ -125,6 +125,12 @@ React.render(<Menu>
             <th></th>
             <td>called when select a menu item</td>
         </tr>
+        <tr>
+            <td>onClick</td>
+            <td>function({key:String, item:ReactComponent, domEvent:Event})</td>
+            <th></th>
+            <td>called when click a menu item</td>
+        </tr>
         <tr>
             <td>onOpen</td>
             <td>function({openKeys:String[]})</td>

diff --git a/examples/antd.js b/examples/antd.js
@@ -49,6 +49,7 @@ const animation = {
         done();
       }
     }
+
     node.style.display = 'block';
     velocity(node, 'slideUp', {
       duration: 300,
@@ -127,24 +128,47 @@ function render(container) {
     closeSubMenuOnMouseLeave: false
   });
 
-  var horizontalClickMenu = React.cloneElement(subMenus, {
-    mode: 'horizontal',
-    openAnimation: 'slide-up',
-    openSubMenuOnMouseEnter: false,
-    closeSubMenuOnMouseLeave: false
-  });
-
   var verticalMenu = React.cloneElement(commonMenu, {
     mode: 'vertical',
     openAnimation: 'zoom',
   });
 
   var inlineMenu = React.cloneElement(commonMenu, {
     mode: 'inline',
-    defaultOpenKeys:['1'],
+    defaultOpenKeys: ['1'],
     openAnimation: animation
   });
 
+  const ClickToHideMenu = React.createClass({
+    getInitialState(){
+      return {
+        openKeys: []
+      };
+    },
+    render(){
+      return React.cloneElement(subMenus, {
+        onOpen: this.syncOpenKeys,
+        onClose: this.syncOpenKeys,
+        openKeys: this.state.openKeys,
+        onClick: this.emptyOpenKeys,
+        mode: 'horizontal',
+        openAnimation: 'slide-up',
+        openSubMenuOnMouseEnter: false,
+        closeSubMenuOnMouseLeave: false
+      });
+    },
+    emptyOpenKeys(){
+      this.setState({
+        openKeys: []
+      });
+    },
+    syncOpenKeys(e){
+      this.setState({
+        openKeys: e.openKeys
+      });
+    }
+  });
+
   React.render(<div style={{margin:20}}>
     <h2>antd menu</h2>
 
@@ -157,7 +181,7 @@ function render(container) {
       <div style={{margin:20,width: 800,}}>{horizontalMenu2}</div>
       <h3>horizontal and click</h3>
 
-      <div style={{margin:20,width: 800,}}>{horizontalClickMenu}</div>
+      <div style={{margin:20,width: 800,}}><ClickToHideMenu /></div>
       <h3>vertical</h3>
 
       <div style={{margin:20,width: 200,}}>{verticalMenu}</div>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-menu",
-  "version": "4.4.5",
+  "version": "4.5.0",
   "description": "menu ui component for react",
   "keywords": [
     "react",

diff --git a/src/Menu.jsx b/src/Menu.jsx
@@ -13,7 +13,6 @@ const Menu = React.createClass({
     openKeys: React.PropTypes.arrayOf(React.PropTypes.string),
     mode: React.PropTypes.string,
     onClick: React.PropTypes.func,
-    onOpenChange: React.PropTypes.func,
     onSelect: React.PropTypes.func,
     onDeselect: React.PropTypes.func,
     onDestroy: React.PropTypes.func,
@@ -29,7 +28,6 @@ const Menu = React.createClass({
       openSubMenuOnMouseEnter: true,
       closeSubMenuOnMouseLeave: true,
       selectable: true,
-      onOpenChange: noop,
       onClick: noop,
       onSelect: noop,
       onOpen: noop,
@@ -127,20 +125,6 @@ const Menu = React.createClass({
 
   onClick(e) {
     const props = this.props;
-    if (!props.multiple && !this.isInlineMode()) {
-      const tmp = this.instanceArray.filter((c)=> {
-        return c.props.eventKey === e.key;
-      });
-      if (!tmp.length) {
-        this.setState({
-          activeKey: null,
-        });
-        if (!('openKeys' in this.props)) {
-          this.setState({openKeys: []});
-        }
-        this.props.onOpenChange({openKeys: []});
-      }
-    }
     props.onClick(e);
   },