Always either one of click / tap handlers in menus

Fixes mui#366.
pomerantsev · Apr 25, 2015 · a06ffd1 · a06ffd1
1 parent 23790d6
commit a06ffd1
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 37 deletions.
diff --git a/docs/src/app/components/pages/components/menus.jsx b/docs/src/app/components/pages/components/menus.jsx
@@ -85,7 +85,7 @@ var MenusPage = React.createClass({
       "   { payload: '2', text: 'Type', data: 'Announcement', icon: 'home' },\n" +
       "   { payload: '3', text: 'Caller ID', data: '(123) 456-7890', icon: 'home' }\n" +
       "];\n\n" +
-      "//You can also pass an onItemTap or onItemClick callback prop.\n"
+      "//You can also pass an onItemClick callback prop.\n"
       "<Menu menuItems={labelMenuItems} />";
 
     return (
@@ -187,7 +187,7 @@ var MenusPage = React.createClass({
     return (
       <CodeExample code={code}>
         <div className="example-menu-nested">
-          <mui.Menu menuItems={nestedMenuItems} onItemClick={this._onItemClick} onItemTap={this._onItemTap} />
+          <mui.Menu menuItems={nestedMenuItems} onItemClick={this._onItemClick} />
         </div>
       </CodeExample>
     );
@@ -199,10 +199,6 @@ var MenusPage = React.createClass({
 
   _onItemClick: function(e, key, menuItem) {
     console.log("Menu Item Click: ", menuItem);
-  },
-
-  _onItemTap: function(e, key, menuItem) {
-    console.log("Menu Item Tap: ", menuItem);
   }
 
 });

diff --git a/src/js/menu/menu-item.jsx b/src/js/menu/menu-item.jsx
@@ -22,7 +22,6 @@ var MenuItem = React.createClass({
     data: React.PropTypes.string,
     toggle: React.PropTypes.bool,
     disabled: React.PropTypes.bool,
-    onTouchTap: React.PropTypes.func,
     onClick: React.PropTypes.func,
     onToggle: React.PropTypes.func,
     selected: React.PropTypes.bool
@@ -73,8 +72,7 @@ var MenuItem = React.createClass({
       <div
         key={this.props.index}
         className={classes}
-        onTouchTap={this._handleTouchTap}
-        onClick={this._handleOnClick}>
+        onTouchTap={this._handleClick}>
 
         {icon}
         {this.props.children}
@@ -88,11 +86,7 @@ var MenuItem = React.createClass({
     );
   },
 
-  _handleTouchTap: function(e) {
-    if (!this.props.disabled && this.props.onTouchTap) this.props.onTouchTap(e, this.props.index);
-  },
-
-  _handleOnClick: function(e) {
+  _handleClick: function(e) {
     if (!this.props.disabled && this.props.onClick) this.props.onClick(e, this.props.index);
   },
 

diff --git a/src/js/menu/menu.jsx b/src/js/menu/menu.jsx
@@ -22,8 +22,7 @@ var NestedMenuItem = React.createClass({
     menuItems: React.PropTypes.array.isRequired,
     zDepth: React.PropTypes.number,
     disabled: React.PropTypes.bool,
-    onItemClick: React.PropTypes.func,
-    onItemTap: React.PropTypes.func
+    onItemClick: React.PropTypes.func
   },
 
   getDefaultProps: function() {
@@ -63,7 +62,6 @@ var NestedMenuItem = React.createClass({
           ref="nestedMenu"
           menuItems={this.props.menuItems}
           onItemClick={this._onMenuItemClick}
-          onItemTap={this._onMenuItemTap}
           hideable={true}
           visible={this.state.open}
           zDepth={this.props.zDepth + 1} />
@@ -97,13 +95,8 @@ var NestedMenuItem = React.createClass({
   _onMenuItemClick: function(e, index, menuItem) {
     if (this.props.onItemClick) this.props.onItemClick(e, index, menuItem);
     this._closeNestedMenu();
-  },
-
-  _onMenuItemTap: function(e, index, menuItem) {
-    if (this.props.onItemTap) this.props.onItemTap(e, index, menuItem);
-    this._closeNestedMenu();
   }
-
+  
 });
 
 
@@ -140,6 +133,12 @@ var Menu = React.createClass({
   },
 
   componentDidMount: function() {
+    if (process.env.NODE_ENV !== 'production' && this.props.onItemTap) {
+      var warning = 'onItemTap is deprecated and will be removed in future versions. ' +
+                    'Please use onItemClick instead.';
+      console.warn(warning);
+    }
+
     var el = React.findDOMNode(this);
 
     //Set the menu width
@@ -227,8 +226,7 @@ var Menu = React.createClass({
               disabled={isDisabled}
               menuItems={menuItem.items}
               zDepth={this.props.zDepth}
-              onItemClick={this._onNestedItemClick}
-              onItemTap={this._onNestedItemClick} />
+              onItemClick={this._onNestedItemClick} />
           );
           this._nestedChildren.push(i);
           break;
@@ -246,8 +244,7 @@ var Menu = React.createClass({
               number={menuItem.number}
               toggle={menuItem.toggle}
               disabled={isDisabled}
-              onClick={this._onItemClick}
-              onTouchTap={this._onItemTap}>
+              onClick={this._onItemClick}>
               {menuItem.text}
             </MenuItem>
           );
@@ -301,19 +298,13 @@ var Menu = React.createClass({
   },
 
   _onNestedItemClick: function(e, index, menuItem) {
-    if (this.props.onItemClick) this.props.onItemClick(e, index, menuItem);
-  },
-
-  _onNestedItemTap: function(e, index, menuItem) {
-    if (this.props.onItemTap) this.props.onItemTap(e, index, menuItem);
+    var action = this.props.onItemClick || this.props.onItemTap;
+    if (action) action.call(this.props, e, index, menuItem);
   },
 
   _onItemClick: function(e, index) {
-    if (this.props.onItemClick) this.props.onItemClick(e, index, this.props.menuItems[index]);
-  },
-
-  _onItemTap: function(e, index) {
-    if (this.props.onItemTap) this.props.onItemTap(e, index, this.props.menuItems[index]);
+    var action = this.props.onItemClick || this.props.onItemTap;
+    if (action) action.call(this.props, e, index, this.props.menuItems[index]);
   },
 
   _onItemToggle: function(e, index, toggled) {