Merge pull request #771 from pomerantsev/fix/tap-instead-of-click

Replace Click with TouchTap everywhere in the API and in docs
mui · Jun 7, 2015 · ba84faf · ba84faf
2 parents 8206bae + 89737d4
commit ba84faf
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 55 deletions.
diff --git a/docs/src/app/components/pages/components/menus.jsx b/docs/src/app/components/pages/components/menus.jsx
@@ -155,19 +155,11 @@ var componentInfo = [
   {
     name: 'Events',
     infoArray: [
-      {
-        name: 'onItemClick',
-        type: 'function(e, index, menuItem)',
-        header: 'optional',
-        desc: 'Callback function for when a MenuItem has been selected via a ' +
-              'click event.'
-      },
       {
         name: 'onItemTap',
         type: 'function(e, index, menuItem)',
         header: 'optional',
-        desc: 'Callback function for when a MenuItem has been selected via a ' +
-              'touch event.'
+        desc: 'Callback function for when a MenuItem has been selected.'
       },
       {
         name: 'onToggle',
@@ -264,13 +256,13 @@ class MenusPage extends React.Component {
       "   { 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 onItemTap callback prop.\n"
       "<Menu menuItems={labelMenuItems} autoWidth={false}/>";
 
     return (
       <CodeExample code={code}>
         <div style={this.getStyles().exampleMenu}>
-          <mui.Menu menuItems={labelMenuItems} onItemClick={this._onItemClick} autoWidth={false}/>
+          <mui.Menu menuItems={labelMenuItems} onItemTap={this._onItemTap} autoWidth={false}/>
         </div>
       </CodeExample>
     );
@@ -288,7 +280,7 @@ class MenusPage extends React.Component {
     return (
       <CodeExample code={code}>
         <div style={this.getStyles().exampleMenu}>
-          <mui.Menu menuItems={numberMenuItems} onItemClick={this._onItemClick} autoWidth={false}/>
+          <mui.Menu menuItems={numberMenuItems} onItemTap={this._onItemTap} autoWidth={false}/>
         </div>
       </CodeExample>
     );
@@ -308,7 +300,7 @@ class MenusPage extends React.Component {
     return (
       <CodeExample code={code}>
         <div style={this.getStyles().exampleMenu}>
-          <mui.Menu menuItems={iconMenuItems} onItemClick={this._onItemClick} autoWidth={false}/>
+          <mui.Menu menuItems={iconMenuItems} onItemTap={this._onItemTap} autoWidth={false}/>
         </div>
       </CodeExample>
     );
@@ -327,7 +319,7 @@ class MenusPage extends React.Component {
     return (
       <CodeExample code={code}>
         <div style={this.getStyles().exampleMenu}>
-          <mui.Menu menuItems={filterMenuItems} onItemToggle={this._onFilterMenuToggle}  onItemClick={this._onItemClick}autoWidth={false}/>
+          <mui.Menu menuItems={filterMenuItems} onItemToggle={this._onFilterMenuToggle}  onItemTap={this._onItemTap} autoWidth={false}/>
         </div>
       </CodeExample>
     );
@@ -366,7 +358,7 @@ class MenusPage extends React.Component {
     return (
       <CodeExample code={code}>
         <div style={this.getStyles().exampleMenuNested}>
-          <mui.Menu menuItems={nestedMenuItems} onItemClick={this._onItemClick} onItemTap={this._onItemTap} autoWidth={false}/>
+          <mui.Menu menuItems={nestedMenuItems} onItemTap={this._onItemTap} autoWidth={false}/>
         </div>
       </CodeExample>
     );
@@ -376,10 +368,6 @@ class MenusPage extends React.Component {
     console.log('Filter Menu Toggled: ', key, menuItem, toggled)
   }
 
-  _onItemClick(e, key, menuItem) {
-    console.log("Menu Item Click: ", menuItem);
-  }
-
   _onItemTap(e, key, menuItem) {
     console.log("Menu Item Tap: ", menuItem);
   }

diff --git a/docs/src/app/components/pages/customization/themes.jsx b/docs/src/app/components/pages/customization/themes.jsx
@@ -468,7 +468,7 @@ var ThemesPage = React.createClass({
     //Standard Actions
     var standardActions = [
       { text: 'Cancel' },
-      { text: 'Submit', onClick: this._onDialogSubmit }
+      { text: 'Submit', onTouchTap: this._onDialogSubmit }
     ];
 
     var menuItemsNav = [
@@ -683,7 +683,11 @@ var ThemesPage = React.createClass({
 
   handleTouchTapDialog: function(e) {
     this.refs.dialog.show();
+  },
+
+  _onDialogSubmit: function () {
+    console.log('Submitting');
   }
 });
 
-module.exports = ThemesPage;
+module.exports = ThemesPage;
diff --git a/docs/src/app/components/pages/page-with-nav.jsx b/docs/src/app/components/pages/page-with-nav.jsx
@@ -73,7 +73,7 @@ var PageWithNav = React.createClass({
             zDepth={0} 
             menuItems={this.props.menuItems} 
             selectedIndex={this._getSelectedIndex()} 
-            onItemClick={this._onMenuItemClick} />
+            onItemTap={this._onMenuItemClick} />
         </div>
       </div>
     );

diff --git a/src/drop-down-icon.jsx b/src/drop-down-icon.jsx
@@ -13,7 +13,7 @@ var DropDownIcon = React.createClass({
   propTypes: {
     onChange: React.PropTypes.func,
     menuItems: React.PropTypes.array.isRequired,
-    closeOnMenuItemClick: React.PropTypes.bool,
+    closeOnMenuItemTouchTap: React.PropTypes.bool,
     iconStyle: React.PropTypes.object,
     iconClassName: React.PropTypes.string,
   },
@@ -26,7 +26,7 @@ var DropDownIcon = React.createClass({
 
   getDefaultProps: function() {
     return {
-      closeOnMenuItemClick: true
+      closeOnMenuItemTouchTap: true
     }
   },
 
@@ -65,7 +65,7 @@ var DropDownIcon = React.createClass({
       style,
       children,
       menuItems,
-      closeOnMenuItemClick,
+      closeOnMenuItemTouchTap,
       iconStyle,
       iconClassName,
       ...other
@@ -100,7 +100,7 @@ var DropDownIcon = React.createClass({
   _onMenuItemClick: function(e, key, payload) {
     if (this.props.onChange) this.props.onChange(e, key, payload);
 
-    if (this.props.closeOnMenuItemClick) {
+    if (this.props.closeOnMenuItemTouchTap) {
       this.setState({ open: false });
     }
   }

diff --git a/src/menu/menu-item.jsx b/src/menu/menu-item.jsx
@@ -30,7 +30,6 @@ var MenuItem = React.createClass({
     toggle: React.PropTypes.bool,
     disabled: React.PropTypes.bool,
     onTouchTap: React.PropTypes.func,
-    onClick: React.PropTypes.func,
     onToggle: React.PropTypes.func,
     selected: React.PropTypes.bool
   },
@@ -136,7 +135,7 @@ var MenuItem = React.createClass({
     if (this.props.toggle) {
       var {
         toggle,
-        onClick,
+        onTouchTap,
         onToggle,
         onMouseOver,
         onMouseOut,
@@ -153,7 +152,6 @@ var MenuItem = React.createClass({
         key={this.props.index}
         className={this.props.className}
         onTouchTap={this._handleTouchTap}
-        onClick={this._handleOnClick}
         onMouseOver={this._handleMouseOver}
         onMouseOut={this._handleMouseOut}
         style={this.mergeAndPrefix(
@@ -179,10 +177,6 @@ var MenuItem = React.createClass({
     if (!this.props.disabled && this.props.onTouchTap) this.props.onTouchTap(e, this.props.index);
   },
 
-  _handleOnClick: function(e) {
-    if (!this.props.disabled && this.props.onClick) this.props.onClick(e, this.props.index);
-  },
-
   _handleToggle: function(e, toggled) {
     if (!this.props.disabled && this.props.onToggle) this.props.onToggle(e, this.props.index, toggled);
   },

diff --git a/src/menu/menu.jsx b/src/menu/menu.jsx
@@ -27,7 +27,6 @@ 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,
     menuItemStyle: React.PropTypes.object,
   },
@@ -82,13 +81,12 @@ var NestedMenuItem = React.createClass({
           disabled={this.props.disabled}
           iconRightStyle={iconCustomArrowDropRight}
           iconRightClassName="muidocs-icon-custom-arrow-drop-right"
-          onTouchTap={this._onParentItemClick}>
+          onTouchTap={this._onParentItemTap}>
             {this.props.text}
         </MenuItem>
         <Menu {...other}
           ref="nestedMenu"
           menuItems={this.props.menuItems}
-          onItemClick={this._onMenuItemClick}
           onItemTap={this._onMenuItemTap}
           hideable={true}
           visible={this.state.open}
@@ -116,15 +114,10 @@ var NestedMenuItem = React.createClass({
     if (!this.props.disabled) this.setState({ open: !this.state.open });
   },
 
-  _onParentItemClick: function() {
+  _onParentItemTap: function() {
     this._toggleNestedMenu();
   },
 
-  _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();
@@ -147,7 +140,6 @@ var Menu = React.createClass({
   propTypes: {
     autoWidth: React.PropTypes.bool,
     onItemTap: React.PropTypes.func,
-    onItemClick: React.PropTypes.func,
     onToggle: React.PropTypes.func,
     menuItems: React.PropTypes.array.isRequired,
     selectedIndex: React.PropTypes.number,
@@ -261,7 +253,7 @@ var Menu = React.createClass({
         attribute,
         number,
         toggle,
-        onClick,
+        onTouchTap,
         ...other
       } = menuItem;
 
@@ -313,8 +305,7 @@ var Menu = React.createClass({
               menuItems={menuItem.items}
               menuItemStyle={this.props.menuItemStyle}
               zDepth={this.props.zDepth}
-              onItemClick={this._onNestedItemClick}
-              onItemTap={this._onNestedItemClick} />
+              onItemTap={this._onNestedItemTap} />
           );
           this._nestedChildren.push(i);
           break;
@@ -335,7 +326,6 @@ var Menu = React.createClass({
               toggle={menuItem.toggle}
               onToggle={this.props.onToggle}
               disabled={isDisabled}
-              onClick={this._onItemClick}
               onTouchTap={this._onItemTap}>
               {menuItem.text}
             </MenuItem>
@@ -396,18 +386,10 @@ 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);
   },
 
-  _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]);
   },