Completely updated React, fixed #11, (hopefully)

goTorrentWebUI/node_modules/material-ui/Menu/Menu.js.flow

@@ -1,95 +1,19 @@
-// @flow
 // @inheritedComponent Popover
 
 import React from 'react';
-import type { Node } from 'react';
+import PropTypes from 'prop-types';
 import { findDOMNode } from 'react-dom';
 import getScrollbarSize from 'dom-helpers/util/scrollbarSize';
 import withStyles from '../styles/withStyles';
 import Popover from '../Popover';
 import MenuList from './MenuList';
-import type { TransitionCallback } from '../internal/transition';
 
-type ProvidedProps = {
-  classes: Object,
-  theme: Object,
-};
-
-export type Props = {
-  /**
-   * The DOM element used to set the position of the menu.
-   */
-  anchorEl?: ?HTMLElement, // match Popover
-  /**
-   * Menu contents, normally `MenuItem`s.
-   */
-  children?: Node,
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes?: Object,
-  /**
-   * Properties applied to the `MenuList` element.
-   */
-  MenuListProps?: Object,
-  /**
-   * Callback fired before the Menu enters.
-   */
-  onEnter?: TransitionCallback,
-  /**
-   * Callback fired when the Menu is entering.
-   */
-  onEntering?: TransitionCallback,
-  /**
-   * Callback fired when the Menu has entered.
-   */
-  onEntered?: TransitionCallback,
-  /**
-   * Callback fired before the Menu exits.
-   */
-  onExit?: TransitionCallback,
-  /**
-   * Callback fired when the Menu is exiting.
-   */
-  onExiting?: TransitionCallback,
-  /**
-   * Callback fired when the Menu has exited.
-   */
-  onExited?: TransitionCallback,
-  /**
-   * Callback fired when the component requests to be closed.
-   *
-   * @param {object} event The event source of the callback
-   */
-  onRequestClose?: Function,
-  /**
-   * If `true`, the menu is visible.
-   */
-  open?: boolean,
-  /**
-   * @ignore
-   */
-  PaperProps?: Object,
-  /**
-   * `classes` property applied to the `Popover` element.
-   */
-  PopoverClasses?: Object,
-  /**
-   * @ignore
-   */
-  theme?: Object,
-  /**
-   * The length of the transition in `ms`, or 'auto'
-   */
-  transitionDuration?: number | { enter?: number, exit?: number } | 'auto',
-};
-
-const rtlOrigin = {
+const RTL_ORIGIN = {
   vertical: 'top',
   horizontal: 'right',
 };
 
-const ltrOrigin = {
+const LTR_ORIGIN = {
   vertical: 'top',
   horizontal: 'left',
 };
@@ -105,29 +29,15 @@ export const styles = {
   },
 };
 
-class Menu extends React.Component<ProvidedProps & Props> {
-  static defaultProps = {
-    open: false,
-    transitionDuration: 'auto',
-  };
-
+class Menu extends React.Component {
   componentDidMount() {
     if (this.props.open) {
       this.focus();
     }
   }
 
-  componentDidUpdate(prevProps) {
-    if (!prevProps.open && this.props.open) {
-      // Needs to refocus as when a menu is rendered into another Modal,
-      // the first modal might change the focus to prevent any leak.
-      this.focus();
-    }
-  }
-
   getContentAnchorEl = () => {
     if (!this.menuList || !this.menuList.selectedItem) {
-      // $FlowFixMe
       return findDOMNode(this.menuList).firstChild;
     }
 
@@ -138,21 +48,18 @@ class Menu extends React.Component<ProvidedProps & Props> {
 
   focus = () => {
     if (this.menuList && this.menuList.selectedItem) {
-      // $FlowFixMe
       findDOMNode(this.menuList.selectedItem).focus();
       return;
     }
 
     const menuList = findDOMNode(this.menuList);
     if (menuList && menuList.firstChild) {
-      // $FlowFixMe
       menuList.firstChild.focus();
     }
   };
 
-  handleEnter = (element: HTMLElement) => {
+  handleEnter = element => {
     const { theme } = this.props;
-
     const menuList = findDOMNode(this.menuList);
 
     // Focus so the scroll computation of the Popover works as expected.
@@ -160,12 +67,9 @@ class Menu extends React.Component<ProvidedProps & Props> {
 
     // Let's ignore that piece of logic if users are already overriding the width
     // of the menu.
-    // $FlowFixMe
     if (menuList && element.clientHeight < menuList.clientHeight && !menuList.style.width) {
       const size = `${getScrollbarSize()}px`;
-      // $FlowFixMe
       menuList.style[theme.direction === 'rtl' ? 'paddingLeft' : 'paddingRight'] = size;
-      // $FlowFixMe
       menuList.style.width = `calc(100% + ${size})`;
     }
 
@@ -174,12 +78,12 @@ class Menu extends React.Component<ProvidedProps & Props> {
     }
   };
 
-  handleListKeyDown = (event: SyntheticUIEvent<>, key: string) => {
+  handleListKeyDown = (event, key) => {
     if (key === 'tab') {
       event.preventDefault();
 
-      if (this.props.onRequestClose) {
-        this.props.onRequestClose(event);
+      if (this.props.onClose) {
+        this.props.onClose(event);
       }
     }
   };
@@ -201,8 +105,8 @@ class Menu extends React.Component<ProvidedProps & Props> {
         getContentAnchorEl={this.getContentAnchorEl}
         classes={PopoverClasses}
         onEnter={this.handleEnter}
-        anchorOrigin={theme.direction === 'rtl' ? rtlOrigin : ltrOrigin}
-        transformOrigin={theme.direction === 'rtl' ? rtlOrigin : ltrOrigin}
+        anchorOrigin={theme.direction === 'rtl' ? RTL_ORIGIN : LTR_ORIGIN}
+        transformOrigin={theme.direction === 'rtl' ? RTL_ORIGIN : LTR_ORIGIN}
         PaperProps={{
           ...PaperProps,
           classes: {
@@ -228,4 +132,81 @@ class Menu extends React.Component<ProvidedProps & Props> {
   }
 }
 
-export default withStyles(styles, { withTheme: true, name: 'MuiMenu' })(Menu);
+Menu.propTypes = {
+  /**
+   * The DOM element used to set the position of the menu.
+   */
+  anchorEl: PropTypes.object,
+  /**
+   * Menu contents, normally `MenuItem`s.
+   */
+  children: PropTypes.node,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * Properties applied to the `MenuList` element.
+   */
+  MenuListProps: PropTypes.object,
+  /**
+   * Callback fired when the component requests to be closed.
+   *
+   * @param {object} event The event source of the callback
+   */
+  onClose: PropTypes.func,
+  /**
+   * Callback fired before the Menu enters.
+   */
+  onEnter: PropTypes.func,
+  /**
+   * Callback fired when the Menu has entered.
+   */
+  onEntered: PropTypes.func,
+  /**
+   * Callback fired when the Menu is entering.
+   */
+  onEntering: PropTypes.func,
+  /**
+   * Callback fired before the Menu exits.
+   */
+  onExit: PropTypes.func,
+  /**
+   * Callback fired when the Menu has exited.
+   */
+  onExited: PropTypes.func,
+  /**
+   * Callback fired when the Menu is exiting.
+   */
+  onExiting: PropTypes.func,
+  /**
+   * If `true`, the menu is visible.
+   */
+  open: PropTypes.bool.isRequired,
+  /**
+   * @ignore
+   */
+  PaperProps: PropTypes.object,
+  /**
+   * `classes` property applied to the `Popover` element.
+   */
+  PopoverClasses: PropTypes.object,
+  /**
+   * @ignore
+   */
+  theme: PropTypes.object.isRequired,
+  /**
+   * The length of the transition in `ms`, or 'auto'
+   */
+  transitionDuration: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number }),
+    PropTypes.oneOf(['auto']),
+  ]),
+};
+
+Menu.defaultProps = {
+  transitionDuration: 'auto',
+};
+
+export default withStyles(styles, { name: 'MuiMenu', withTheme: true })(Menu);