Completely updated React, fixed #11, (hopefully)

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

@@ -1,30 +1,33 @@
-// @flow weak
-
 import React from 'react';
-import type { ElementType, Node } from 'react';
+import PropTypes from 'prop-types';
 import { findDOMNode } from 'react-dom';
 import classNames from 'classnames';
 import keycode from 'keycode';
+import ownerWindow from 'dom-helpers/ownerWindow';
 import withStyles from '../styles/withStyles';
 import { listenForFocusKeys, detectKeyboardFocus, focusKeyPressed } from '../utils/keyboardFocus';
 import TouchRipple from './TouchRipple';
 import createRippleHandler from './createRippleHandler';
 
-export const styles = (theme: Object) => ({
+export const styles = {
   root: {
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
     position: 'relative',
     // Remove grey highlight
-    WebkitTapHighlightColor: theme.palette.common.transparent,
+    WebkitTapHighlightColor: 'transparent',
     backgroundColor: 'transparent', // Reset default value
     outline: 'none',
     border: 0,
+    margin: 0, // Remove the margin in Safari
     borderRadius: 0,
+    padding: 0, // Remove the padding in Firefox
     cursor: 'pointer',
     userSelect: 'none',
-    appearance: 'none',
+    verticalAlign: 'middle',
+    '-moz-appearance': 'none', // Reset
+    '-webkit-appearance': 'none', // Reset
     textDecoration: 'none',
     // So we take precedent over the style of a native <a /> element.
     color: 'inherit',
@@ -36,140 +39,31 @@ export const styles = (theme: Object) => ({
     pointerEvents: 'none', // Disable link interactions
     cursor: 'default',
   },
-});
-
-type ProvidedProps = {
-  classes: Object,
 };
 
-export type Props = {
-  /**
-   * If `true`, the ripples will be centered.
-   * They won't start at the cursor interaction position.
-   */
-  centerRipple?: boolean,
-  /**
-   * The content of the component.
-   */
-  children?: Node,
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes?: Object,
-  /**
-   * @ignore
-   */
-  className?: string,
-  /**
-   * The component used for the root node.
-   * Either a string to use a DOM element or a component.
-   * The default value is a `button`.
-   */
-  component?: ElementType,
-  /**
-   * If `true`, the base button will be disabled.
-   */
-  disabled?: boolean,
-  /**
-   * If `true`, the ripple effect will be disabled.
-   */
-  disableRipple?: boolean,
-  /**
-   * If `true`, the base button will have a keyboard focus ripple.
-   * `disableRipple` must also be `false`.
-   */
-  focusRipple?: boolean,
-  /**
-   * The CSS class applied while the component is keyboard focused.
-   */
-  keyboardFocusedClassName?: string,
-  /**
-   * @ignore
-   */
-  onBlur?: Function,
-  /**
-   * @ignore
-   */
-  onClick?: Function,
-  /**
-   * @ignore
-   */
-  onFocus?: Function,
-  /**
-   * Callback fired when the component is focused with a keyboard.
-   * We trigger a `onFocus` callback too.
-   */
-  onKeyboardFocus?: (event: SyntheticEvent<>) => void,
-  /**
-   * @ignore
-   */
-  onKeyDown?: Function,
-  /**
-   * @ignore
-   */
-  onKeyUp?: Function,
-  /**
-   * @ignore
-   */
-  onMouseDown?: Function,
-  /**
-   * @ignore
-   */
-  onMouseLeave?: Function,
-  /**
-   * @ignore
-   */
-  onMouseUp?: Function,
-  /**
-   * @ignore
-   */
-  onTouchEnd?: Function,
-  /**
-   * @ignore
-   */
-  onTouchMove?: Function,
-  /**
-   * @ignore
-   */
-  onTouchStart?: Function,
-  /**
-   * @ignore
-   */
-  role?: string,
-  /**
-   * Use that property to pass a ref callback to the root component.
-   */
-  rootRef?: Function,
-  /**
-   * @ignore
-   */
-  tabIndex?: number | string,
-  /**
-   * @ignore
-   */
-  type: string,
-};
-
-type State = {
-  keyboardFocused: boolean,
-};
-
-class ButtonBase extends React.Component<ProvidedProps & Props, State> {
-  static defaultProps = {
-    centerRipple: false,
-    focusRipple: false,
-    disableRipple: false,
-    tabIndex: 0,
-    type: 'button',
-  };
-
+/**
+ * `ButtonBase` contains as few styles as possible.
+ * It aims to be a simple building block for creating a button.
+ * It contains a load of style reset and some focus/ripple logic.
+ */
+class ButtonBase extends React.Component {
   state = {
     keyboardFocused: false,
   };
 
   componentDidMount() {
     this.button = findDOMNode(this);
-    listenForFocusKeys();
+    listenForFocusKeys(ownerWindow(this.button));
+  }
+
+  componentWillReceiveProps(nextProps) {
+    // The blur won't fire when the disabled state is set on a focused input.
+    // We need to book keep the focused state manually.
+    if (!this.props.disabled && nextProps.disabled && this.state.keyboardFocused) {
+      this.setState({
+        keyboardFocused: false,
+      });
+    }
   }
 
   componentWillUpdate(nextProps, nextState) {
@@ -197,11 +91,15 @@ class ButtonBase extends React.Component<ProvidedProps & Props, State> {
     }
   };
 
+  onRippleRef = node => {
+    this.ripple = node;
+  };
+
   ripple = null;
   keyDown = false; // Used to help track keyboard activation keyDown
   button = null;
   keyboardFocusTimeout = null;
-  keyboardFocusCheckTime = 30;
+  keyboardFocusCheckTime = 50;
   keyboardFocusMaxCheckTimes = 5;
 
   handleKeyDown = event => {
@@ -209,7 +107,13 @@ class ButtonBase extends React.Component<ProvidedProps & Props, State> {
     const key = keycode(event);
 
     // Check if key is already down to avoid repeats being counted as multiple activations
-    if (focusRipple && !this.keyDown && this.state.keyboardFocused && key === 'space') {
+    if (
+      focusRipple &&
+      !this.keyDown &&
+      this.state.keyboardFocused &&
+      this.ripple &&
+      key === 'space'
+    ) {
       this.keyDown = true;
       event.persist();
       this.ripple.stop(event, () => {
@@ -223,20 +127,25 @@ class ButtonBase extends React.Component<ProvidedProps & Props, State> {
 
     // Keyboard accessibility for non interactive elements
     if (
-      event.target === this.button &&
-      onClick &&
+      event.target === event.currentTarget &&
       component &&
-      component !== 'a' &&
       component !== 'button' &&
       (key === 'space' || key === 'enter')
     ) {
       event.preventDefault();
-      onClick(event);
+      if (onClick) {
+        onClick(event);
+      }
     }
   };
 
   handleKeyUp = event => {
-    if (this.props.focusRipple && keycode(event) === 'space' && this.state.keyboardFocused) {
+    if (
+      this.props.focusRipple &&
+      keycode(event) === 'space' &&
+      this.ripple &&
+      this.state.keyboardFocused
+    ) {
       this.keyDown = false;
       event.persist();
       this.ripple.stop(event, () => this.ripple.pulsate(event));
@@ -285,31 +194,18 @@ class ButtonBase extends React.Component<ProvidedProps & Props, State> {
     }
 
     event.persist();
-    const keyboardFocusCallback = this.onKeyboardFocusHandler.bind(this, event);
-    detectKeyboardFocus(this, this.button, keyboardFocusCallback);
+    detectKeyboardFocus(this, this.button, () => {
+      this.onKeyboardFocusHandler(event);
+    });
 
     if (this.props.onFocus) {
       this.props.onFocus(event);
     }
   };
 
-  renderRipple() {
-    if (!this.props.disableRipple && !this.props.disabled) {
-      return (
-        <TouchRipple
-          innerRef={node => {
-            this.ripple = node;
-          }}
-          center={this.props.centerRipple}
-        />
-      );
-    }
-
-    return null;
-  }
-
   render() {
     const {
+      buttonRef,
       centerRipple,
       children,
       classes,
@@ -330,7 +226,6 @@ class ButtonBase extends React.Component<ProvidedProps & Props, State> {
       onTouchEnd,
       onTouchMove,
       onTouchStart,
-      rootRef,
       tabIndex,
       type,
       ...other
@@ -359,11 +254,9 @@ class ButtonBase extends React.Component<ProvidedProps & Props, State> {
 
     if (ComponentProp === 'button') {
       buttonProps.type = type || 'button';
-    }
-
-    if (ComponentProp !== 'a') {
-      buttonProps.role = buttonProps.role || 'button';
       buttonProps.disabled = disabled;
+    } else {
+      buttonProps.role = 'button';
     }
 
     return (
@@ -378,17 +271,135 @@ class ButtonBase extends React.Component<ProvidedProps & Props, State> {
         onTouchEnd={this.handleTouchEnd}
         onTouchMove={this.handleTouchMove}
         onTouchStart={this.handleTouchStart}
-        tabIndex={disabled ? -1 : tabIndex}
+        tabIndex={disabled ? '-1' : tabIndex}
         className={className}
+        ref={buttonRef}
         {...buttonProps}
         {...other}
-        ref={rootRef}
       >
         {children}
-        {this.renderRipple()}
+        {!disableRipple && !disabled ? (
+          <TouchRipple innerRef={this.onRippleRef} center={centerRipple} />
+        ) : null}
       </ComponentProp>
     );
   }
 }
 
+ButtonBase.propTypes = {
+  /**
+   * Use that property to pass a ref callback to the native button component.
+   */
+  buttonRef: PropTypes.func,
+  /**
+   * If `true`, the ripples will be centered.
+   * They won't start at the cursor interaction position.
+   */
+  centerRipple: PropTypes.bool,
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a DOM element or a component.
+   * The default value is a `button`.
+   */
+  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  /**
+   * If `true`, the base button will be disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the ripple effect will be disabled.
+   */
+  disableRipple: PropTypes.bool,
+  /**
+   * If `true`, the base button will have a keyboard focus ripple.
+   * `disableRipple` must also be `false`.
+   */
+  focusRipple: PropTypes.bool,
+  /**
+   * The CSS class applied while the component is keyboard focused.
+   */
+  keyboardFocusedClassName: PropTypes.string,
+  /**
+   * @ignore
+   */
+  onBlur: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onClick: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onFocus: PropTypes.func,
+  /**
+   * Callback fired when the component is focused with a keyboard.
+   * We trigger a `onFocus` callback too.
+   */
+  onKeyboardFocus: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onKeyDown: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onKeyUp: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onMouseDown: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onMouseLeave: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onMouseUp: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onTouchEnd: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onTouchMove: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onTouchStart: PropTypes.func,
+  /**
+   * @ignore
+   */
+  role: PropTypes.string,
+  /**
+   * @ignore
+   */
+  tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * @ignore
+   */
+  type: PropTypes.string,
+};
+
+ButtonBase.defaultProps = {
+  centerRipple: false,
+  disableRipple: false,
+  focusRipple: false,
+  tabIndex: '0',
+  type: 'button',
+};
+
 export default withStyles(styles, { name: 'MuiButtonBase' })(ButtonBase);