Merge pull request #325 from mmrtnz/menu-item-touch-tap

Menus can receive an onItemClick or onItemTap prop.
mui · Feb 11, 2015 · 906605b · 906605b
2 parents 6020d61 + 99ba908
commit 906605b
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 8 deletions.
diff --git a/docs/src/app/components/pages/components/menus.jsx b/docs/src/app/components/pages/components/menus.jsx
@@ -84,7 +84,8 @@ var MenusPage = React.createClass({
       "   { payload: '1', text: 'ID', data: '1234567890', icon: 'home' },\n" +
       "   { payload: '2', text: 'Type', data: 'Announcement', icon: 'home' },\n" +
       "   { payload: '3', text: 'Caller ID', data: '(123) 456-7890', icon: 'home' }\n" +
-      "];\n\n"  +
+      "];\n\n" +
+      "//You can also pass an onItemTap or onItemClick callback prop.\n"
       "<Menu menuItems={labelMenuItems} />";
 
     return (
@@ -186,7 +187,7 @@ var MenusPage = React.createClass({
     return (
       <CodeExample code={code}>
         <div className="example-menu-nested">
-          <mui.Menu menuItems={nestedMenuItems} onItemClick={this._onItemClick} />
+          <mui.Menu menuItems={nestedMenuItems} onItemClick={this._onItemClick} onItemTap={this._onItemTap} />
         </div>
       </CodeExample>
     );
@@ -198,6 +199,10 @@ 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-item.jsx b/src/js/menu-item.jsx
@@ -21,6 +21,7 @@ var MenuItem = React.createClass({
     number: React.PropTypes.string,
     data: React.PropTypes.string,
     toggle: React.PropTypes.bool,
+    onTouchTap: React.PropTypes.func,
     onClick: React.PropTypes.func,
     onToggle: React.PropTypes.func,
     selected: React.PropTypes.bool
@@ -49,8 +50,6 @@ var MenuItem = React.createClass({
 
     if (this.props.iconClassName) icon = <FontIcon className={'mui-menu-item-icon ' + this.props.iconClassName} />;
     if (this.props.iconRightClassName) iconRight = <FontIcon className={'mui-menu-item-icon-right ' + this.props.iconRightClassName} />;
-
-
     if (this.props.data) data = <span className="mui-menu-item-data">{this.props.data}</span>;
     if (this.props.number !== undefined) number = <span className="mui-menu-item-number">{this.props.number}</span>;
     if (this.props.attribute !== undefined) attribute = <span className="mui-menu-item-attribute">{this.props.attribute}</span>;
@@ -72,7 +71,7 @@ var MenuItem = React.createClass({
         key={this.props.index}
         className={classes}
         onTouchTap={this._handleTouchTap}
-        onClick={this._handleTouchTap}>
+        onClick={this._handleOnClick}>
 
         {icon}
         {this.props.children}
@@ -87,6 +86,10 @@ var MenuItem = React.createClass({
   },
 
   _handleTouchTap: function(e) {
+    if (this.props.onTouchTap) this.props.onTouchTap(e, this.props.index);
+  },
+
+  _handleOnClick: function(e) {
     if (this.props.onClick) this.props.onClick(e, this.props.index);
   },
 

diff --git a/src/js/menu.jsx b/src/js/menu.jsx
@@ -19,7 +19,8 @@ var NestedMenuItem = React.createClass({
     text: React.PropTypes.string,
     menuItems: React.PropTypes.array.isRequired,
     zDepth: React.PropTypes.number,
-    onItemClick: React.PropTypes.func
+    onItemClick: React.PropTypes.func,
+    onItemTap: React.PropTypes.func
   },
 
   getInitialState: function() {
@@ -52,6 +53,7 @@ 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} />
@@ -73,6 +75,11 @@ var NestedMenuItem = React.createClass({
   _onMenuItemClick: function(e, index, menuItem) {
     this.setState({ open: false });
     if (this.props.onItemClick) this.props.onItemClick(e, index, menuItem);
+  },
+
+  _onMenuItemTap: function(e, index, menuItem) {
+    this.setState({ open: false });
+    if (this.props.onItemTap) this.props.onItemTap(e, index, menuItem);
   }
 
 });
@@ -86,6 +93,7 @@ var Menu = React.createClass({
 
   propTypes: {
     autoWidth: React.PropTypes.bool,
+    onItemTap: React.PropTypes.func,
     onItemClick: React.PropTypes.func,
     onToggleClick: React.PropTypes.func,
     menuItems: React.PropTypes.array.isRequired,
@@ -184,7 +192,8 @@ var Menu = React.createClass({
               text={menuItem.text}
               menuItems={menuItem.items}
               zDepth={this.props.zDepth}
-              onItemClick={this._onNestedItemClick} />
+              onItemClick={this._onNestedItemClick}
+              onItemTap={this._onNestedItemClick} />
           );
           this._nestedChildren.push(i);
           break;
@@ -201,7 +210,8 @@ var Menu = React.createClass({
               attribute={menuItem.attribute}
               number={menuItem.number}
               toggle={menuItem.toggle}
-              onClick={this._onItemClick}>
+              onClick={this._onItemClick}
+              onTouchTap={this._onItemTap}>
               {menuItem.text}
             </MenuItem>
           );
@@ -258,10 +268,18 @@ var Menu = React.createClass({
     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);
+  },
+
   _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]);
+  },
+
   _onItemToggle: function(e, index, toggled) {
     if (this.props.onItemToggle) this.props.onItemToggle(e, index, this.props.menuItems[index], toggled);
   }