[IconMenu] Change onRequestClose, onRequestOpen props to onRequestChange

mui · Dec 5, 2015 · 41408d6 · 41408d6
1 parent 669de3d
commit 41408d6
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 29 deletions.
diff --git a/docs/src/app/components/pages/components/icon-menus.jsx b/docs/src/app/components/pages/components/icon-menus.jsx
@@ -139,14 +139,14 @@ export default class IconMenus extends React.Component {
         name: 'Events',
         infoArray: [
           {
-            name: 'onRequestOpen',
-            header: 'function(buttonClicked)',
-            desc: 'Fired when the menu is requested to be opened by a click on the icon.',
-          },
-          {
-            name: 'onRequestClose',
-            header: 'function(buttonClicked)',
-            desc: 'Fired when the menu is requested to be closed by a click outside the menu or on the items.',
+            name: 'onRequestChange',
+            header: 'function(open, reason)',
+            desc: 'Callback function that is fired when the open state of the menu is ' +
+              'requested to be changed. The provided open argument determines whether the ' +
+              'menu is requested to be opened or closed. Also, the reason argument states ' +
+              'why the menu got closed or opened. It can be \'keyboard\', \'iconTap\' for ' +
+              'open action and \'enter\', \'esc\', \'itemTap\', \'clickAway\' for close ' +
+              'action.',
           },
           {
             name: 'onItemTouchTap',
@@ -309,8 +309,7 @@ export default class IconMenus extends React.Component {
           <div>
             <IconMenu
               open={this.state.isIconMenuOpened || false}
-              onRequestOpen={() => this.setState({isIconMenuOpened: true})}
-              onRequestClose={() => this.setState({isIconMenuOpened: false})}
+              onRequestChange={(open, reason) => console.log(reason) || this.setState({isIconMenuOpened: open})}
               iconButtonElement={iconButtonElement}>
               <MenuItem primaryText="Preview" leftIcon={<RemoveRedEye />} />
               <MenuItem primaryText="Share" leftIcon={<PersonAdd />} />

diff --git a/src/menus/icon-menu.jsx b/src/menus/icon-menu.jsx
@@ -33,9 +33,8 @@ const IconMenu = React.createClass({
     onMouseEnter: React.PropTypes.func,
     onMouseLeave: React.PropTypes.func,
     onMouseUp: React.PropTypes.func,
+    onRequestChange: React.PropTypes.func,
     onTouchTap: React.PropTypes.func,
-    onRequestOpen: React.PropTypes.func,
-    onRequestClose: React.PropTypes.func,
     open: React.PropTypes.bool,
     style: React.PropTypes.object,
     targetOrigin: PropTypes.origin,
@@ -45,15 +44,15 @@ const IconMenu = React.createClass({
   getDefaultProps() {
     return {
       closeOnItemTouchTap: true,
+      open: null,
       onItemTouchTap: () => {},
       onKeyboardFocus: () => {},
       onMouseDown: () => {},
       onMouseLeave: () => {},
       onMouseEnter: () => {},
       onMouseUp: () => {},
       onTouchTap: () => {},
-      onRequestOpen: () => {},
-      onRequestClose: () => {},
+      onRequestChange: () => {},
       anchorOrigin: {
         vertical:'top',
         horizontal:'left',
@@ -108,7 +107,7 @@ const IconMenu = React.createClass({
   _warningIfNeeded() {
     if (this.props.hasOwnProperty('open')) {
       warning(this.props.hasOwnProperty('closeOnItemTouchTap'),
-        'closeOnItemTouchTap has been deprecated in favor of open, onRequestOpen, onRequestClose');
+        'closeOnItemTouchTap has been deprecated in favor of open, onRequestChange');
     }
   },
 
@@ -156,7 +155,7 @@ const IconMenu = React.createClass({
       onKeyboardFocus: this.props.onKeyboardFocus,
       iconStyle: this.mergeStyles(iconStyle, iconButtonElement.props.iconStyle),
       onTouchTap: (e) => {
-        this.open(Events.isKeyboard(e), e);
+        this.open(Events.isKeyboard(e) ? 'keyboard' : 'iconTap', e);
         if (iconButtonElement.props.onTouchTap) iconButtonElement.props.onTouchTap(e);
       },
       ref: this.state.iconButtonRef,
@@ -203,13 +202,13 @@ const IconMenu = React.createClass({
     return this.state.open;
   },
 
-  close(isKeyboard) {
+  close(reason, isKeyboard) {
     if (!this.state.open) {
       return;
     }
 
-    if (this.props.open !== undefined) {
-      return this.props.onRequestClose(!isKeyboard);
+    if (this.props.open !== null) {
+      this.props.onRequestChange(false, reason);
     }
 
     this.setState({open: false}, () => {
@@ -222,41 +221,42 @@ const IconMenu = React.createClass({
     });
   },
 
-  open(isKeyboard, event) {
-    if (this.props.open !== undefined) {
-      this.props.onRequestOpen(!isKeyboard);
+  open(reason, event) {
+    if (this.props.open !== null) {
+      this.props.onRequestChange(true, reason);
 
       return this.setState({
-        menuInitiallyKeyboardFocused: isKeyboard,
+        menuInitiallyKeyboardFocused: Events.isKeyboard(event),
         anchorEl: event.currentTarget,
       });
     }
 
     this.setState({
       open: true,
-      menuInitiallyKeyboardFocused: isKeyboard,
+      menuInitiallyKeyboardFocused: Events.isKeyboard(event),
       anchorEl: event.currentTarget,
     });
+
     event.preventDefault();
   },
 
   _handleItemTouchTap(event, child) {
     if (this.props.closeOnItemTouchTap) {
-      let isKeyboard = Events.isKeyboard(event);
-
+      const isKeyboard = Events.isKeyboard(event);
       this._timeout = setTimeout(() => {
         if (!this.isMounted()) {
           return;
         }
-        this.close(isKeyboard);
+
+        this.close(isKeyboard ? 'enter' : 'itemTap', isKeyboard);
       }, this.props.touchTapCloseDelay);
     }
 
     this.props.onItemTouchTap(event, child);
   },
 
-  _handleMenuEscKeyDown() {
-    this.close(true);
+  _handleMenuEscKeyDown(event) {
+    this.close('esc', event);
   },
 
 });