Completely updated React, fixed #11, (hopefully)

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

@@ -1,18 +1,15 @@
-// @flow
-
 import React from 'react';
-import type { ComponentType, Element, Node } from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import EventListener from 'react-event-listener';
 import withStyles from '../styles/withStyles';
 import { duration } from '../styles/transitions';
 import ClickAwayListener from '../utils/ClickAwayListener';
-import { capitalizeFirstLetter, createChainedFunction } from '../utils/helpers';
+import { capitalize, createChainedFunction } from '../utils/helpers';
 import Slide from '../transitions/Slide';
 import SnackbarContent from './SnackbarContent';
-import type { TransitionDuration, TransitionCallback } from '../internal/transition';
 
-export const styles = (theme: Object) => {
+export const styles = theme => {
   const gutter = theme.spacing.unit * 3;
   const top = { top: 0 };
   const bottom = { bottom: 0 };
@@ -39,180 +36,57 @@ export const styles = (theme: Object) => {
       alignItems: 'center',
     },
     anchorTopCenter: {
-      extend: [top],
+      ...top,
       [theme.breakpoints.up('md')]: {
-        extend: [center],
+        ...center,
       },
     },
     anchorBottomCenter: {
-      extend: [bottom],
+      ...bottom,
       [theme.breakpoints.up('md')]: {
-        extend: [center],
+        ...center,
       },
     },
     anchorTopRight: {
-      extend: [top, right],
+      ...top,
+      ...right,
       [theme.breakpoints.up('md')]: {
         left: 'auto',
-        extend: [topSpace, rightSpace],
+        ...topSpace,
+        ...rightSpace,
       },
     },
     anchorBottomRight: {
-      extend: [bottom, right],
+      ...bottom,
+      ...right,
       [theme.breakpoints.up('md')]: {
         left: 'auto',
-        extend: [bottomSpace, rightSpace],
+        ...bottomSpace,
+        ...rightSpace,
       },
     },
     anchorTopLeft: {
-      extend: [top, left],
+      ...top,
+      ...left,
       [theme.breakpoints.up('md')]: {
         right: 'auto',
-        extend: [topSpace, leftSpace],
+        ...topSpace,
+        ...leftSpace,
       },
     },
     anchorBottomLeft: {
-      extend: [bottom, left],
+      ...bottom,
+      ...left,
       [theme.breakpoints.up('md')]: {
         right: 'auto',
-        extend: [bottomSpace, leftSpace],
+        ...bottomSpace,
+        ...leftSpace,
       },
     },
   };
 };
 
-export type Origin = {
-  horizontal?: 'left' | 'center' | 'right' | number,
-  vertical?: 'top' | 'center' | 'bottom' | number,
-};
-
-type ProvidedProps = {
-  anchorOrigin: Origin,
-  classes: Object,
-};
-
-export type Props = {
-  /**
-   * The action to display.
-   */
-  action?: Node,
-  /**
-   * The anchor of the `Snackbar`.
-   */
-  anchorOrigin?: Origin,
-  /**
-   * The number of milliseconds to wait before automatically dismissing.
-   * This behavior is disabled by default with the `null` value.
-   */
-  autoHideDuration?: ?number,
-  /**
-   * The number of milliseconds to wait before dismissing after user interaction.
-   * If `autoHideDuration` property isn't specified, it does nothing.
-   * If `autoHideDuration` property is specified but `resumeHideDuration` isn't,
-   * we default to `autoHideDuration / 2` ms.
-   */
-  resumeHideDuration?: number,
-  /**
-   * If you wish the take control over the children of the component you can use that property.
-   * When using it, no `SnackbarContent` component will be rendered.
-   */
-  children?: Element<any>,
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes?: Object,
-  /**
-   * @ignore
-   */
-  className?: string,
-  /**
-   * When displaying multiple consecutive Snackbars from a parent rendering a single
-   * <Snackbar/>, add the key property to ensure independent treatment of each message.
-   * e.g. <Snackbar key={message} />, otherwise, the message may update-in-place and
-   * features such as autoHideDuration may be canceled.
-   */
-  key?: any,
-  /**
-   * The message to display.
-   */
-  message?: Node,
-  /**
-   * Callback fired before the transition is entering.
-   */
-  onEnter?: TransitionCallback,
-  /**
-   * Callback fired when the transition is entering.
-   */
-  onEntering?: TransitionCallback,
-  /**
-   * Callback fired when the transition has entered.
-   */
-  onEntered?: TransitionCallback,
-  /**
-   * Callback fired before the transition is exiting.
-   */
-  onExit?: TransitionCallback,
-  /**
-   * Callback fired when the transition is exiting.
-   */
-  onExiting?: TransitionCallback,
-  /**
-   * Callback fired when the transition has exited.
-   */
-  onExited?: TransitionCallback,
-  /**
-   * @ignore
-   */
-  onMouseEnter?: Function,
-  /**
-   * @ignore
-   */
-  onMouseLeave?: Function,
-  /**
-   * Callback fired when the component requests to be closed.
-   *
-   * Typically `onRequestClose` is used to set state in the parent component,
-   * which is used to control the `Snackbar` `open` prop.
-   *
-   * The `reason` parameter can optionally be used to control the response to `onRequestClose`,
-   * for example ignoring `clickaway`.
-   *
-   * @param {object} event The event source of the callback
-   * @param {string} reason Can be:`"timeout"` (`autoHideDuration` expired) or: `"clickaway"`
-   */
-  onRequestClose?: (event: ?Event, reason: string) => void,
-  /**
-   * If true, `Snackbar` is open.
-   */
-  open: boolean,
-  /**
-   * Properties applied to the `SnackbarContent` element.
-   */
-  SnackbarContentProps?: Object,
-  /**
-   * Transition component.
-   */
-  transition?: ComponentType<*>,
-  /**
-   * The duration for the transition, in milliseconds.
-   * You may specify a single timeout for all transitions, or individually with an object.
-   */
-  transitionDuration?: TransitionDuration,
-};
-
-type State = {
-  exited: boolean,
-};
-
-class Snackbar extends React.Component<ProvidedProps & Props, State> {
-  static defaultProps = {
-    anchorOrigin: { vertical: 'bottom', horizontal: 'center' },
-    transitionDuration: {
-      enter: duration.enteringScreen,
-      exit: duration.leavingScreen,
-    },
-  };
-
+class Snackbar extends React.Component {
   state = {
     // Used to only render active snackbars.
     exited: false,
@@ -231,7 +105,7 @@ class Snackbar extends React.Component<ProvidedProps & Props, State> {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.open && this.state.exited) {
+    if (nextProps.open) {
       this.setState({ exited: false });
     }
   }
@@ -252,17 +126,17 @@ class Snackbar extends React.Component<ProvidedProps & Props, State> {
 
   // Timer that controls delay before snackbar auto hides
   setAutoHideTimer(autoHideDuration = null) {
-    if (!this.props.onRequestClose || this.props.autoHideDuration === undefined) {
+    if (!this.props.onClose || this.props.autoHideDuration == null) {
       return;
     }
 
     clearTimeout(this.timerAutoHide);
     this.timerAutoHide = setTimeout(() => {
-      if (!this.props.onRequestClose || this.props.autoHideDuration === undefined) {
+      if (!this.props.onClose || this.props.autoHideDuration == null) {
         return;
       }
 
-      this.props.onRequestClose(null, 'timeout');
+      this.props.onClose(null, 'timeout');
     }, autoHideDuration || this.props.autoHideDuration || 0);
   }
 
@@ -283,8 +157,8 @@ class Snackbar extends React.Component<ProvidedProps & Props, State> {
   };
 
   handleClickAway = (event: Event) => {
-    if (this.props.onRequestClose) {
-      this.props.onRequestClose(event, 'clickaway');
+    if (this.props.onClose) {
+      this.props.onClose(event, 'clickaway');
     }
   };
 
@@ -297,7 +171,7 @@ class Snackbar extends React.Component<ProvidedProps & Props, State> {
   // Restart the timer when the user is no longer interacting with the Snackbar
   // or when the window is shown back.
   handleResume = () => {
-    if (this.props.autoHideDuration !== undefined) {
+    if (this.props.autoHideDuration != null) {
       if (this.props.resumeHideDuration !== undefined) {
         this.setAutoHideTimer(this.props.resumeHideDuration);
         return;
@@ -306,7 +180,7 @@ class Snackbar extends React.Component<ProvidedProps & Props, State> {
     }
   };
 
-  handleTransitionExited = () => {
+  handleExited = () => {
     this.setState({ exited: true });
   };
 
@@ -315,24 +189,25 @@ class Snackbar extends React.Component<ProvidedProps & Props, State> {
       action,
       anchorOrigin: { vertical, horizontal },
       autoHideDuration,
-      resumeHideDuration,
       children,
       classes,
       className,
-      transitionDuration,
+      disableWindowBlurListener,
       message,
+      onClose,
       onEnter,
-      onEntering,
       onEntered,
+      onEntering,
       onExit,
-      onExiting,
       onExited,
+      onExiting,
       onMouseEnter,
       onMouseLeave,
-      onRequestClose,
       open,
+      resumeHideDuration,
       SnackbarContentProps,
       transition: TransitionProp,
+      transitionDuration,
       ...other
     } = this.props;
 
@@ -340,48 +215,46 @@ class Snackbar extends React.Component<ProvidedProps & Props, State> {
       return null;
     }
 
-    const transitionProps = {
-      in: open,
-      appear: true,
-      timeout: transitionDuration,
-      onEnter,
-      onEntering,
-      onEntered,
-      onExit,
-      onExiting,
-      onExited: createChainedFunction(this.handleTransitionExited, onExited),
-    };
-    const transitionContent = children || (
-      <SnackbarContent message={message} action={action} {...SnackbarContentProps} />
-    );
+    const transitionProps = {};
 
-    let transition;
-    if (TransitionProp) {
-      transition = <TransitionProp {...transitionProps}>{transitionContent}</TransitionProp>;
-    } else {
-      transition = (
-        <Slide direction={vertical === 'top' ? 'down' : 'up'} {...transitionProps}>
-          {transitionContent}
-        </Slide>
-      );
+    // The provided transition might not support the direction property.
+    if (TransitionProp === Slide) {
+      transitionProps.direction = vertical === 'top' ? 'down' : 'up';
     }
 
     return (
-      <EventListener target="window" onFocus={this.handleResume} onBlur={this.handlePause}>
+      <EventListener
+        target="window"
+        onFocus={disableWindowBlurListener ? undefined : this.handleResume}
+        onBlur={disableWindowBlurListener ? undefined : this.handlePause}
+      >
         <ClickAwayListener onClickAway={this.handleClickAway}>
           <div
             className={classNames(
               classes.root,
-              classes[
-                `anchor${capitalizeFirstLetter(vertical)}${capitalizeFirstLetter(horizontal)}`
-              ],
+              classes[`anchor${capitalize(vertical)}${capitalize(horizontal)}`],
               className,
             )}
             onMouseEnter={this.handleMouseEnter}
             onMouseLeave={this.handleMouseLeave}
             {...other}
           >
-            {transition}
+            <TransitionProp
+              appear
+              in={open}
+              onEnter={onEnter}
+              onEntered={onEntered}
+              onEntering={onEntering}
+              onExit={onExit}
+              onExited={createChainedFunction(this.handleExited, onExited)}
+              onExiting={onExiting}
+              timeout={transitionDuration}
+              {...transitionProps}
+            >
+              {children || (
+                <SnackbarContent message={message} action={action} {...SnackbarContentProps} />
+              )}
+            </TransitionProp>
           </div>
         </ClickAwayListener>
       </EventListener>
@@ -389,4 +262,139 @@ class Snackbar extends React.Component<ProvidedProps & Props, State> {
   }
 }
 
+Snackbar.propTypes = {
+  /**
+   * The action to display.
+   */
+  action: PropTypes.node,
+  /**
+   * The anchor of the `Snackbar`.
+   */
+  anchorOrigin: PropTypes.shape({
+    horizontal: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.oneOf(['left', 'center', 'right']),
+    ]),
+    vertical: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['top', 'center', 'bottom'])]),
+  }),
+  /**
+   * The number of milliseconds to wait before automatically calling the
+   * `onClose` function. `onClose` should then set the state of the `open`
+   * prop to hide the Snackbar. This behavior is disabled by default with
+   * the `null` value.
+   */
+  autoHideDuration: PropTypes.number,
+  /**
+   * If you wish the take control over the children of the component you can use this property.
+   * When used, you replace the `SnackbarContent` component with the children.
+   */
+  children: PropTypes.element,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * If `true`, the `autoHideDuration` timer will expire even if the window is not focused.
+   */
+  disableWindowBlurListener: PropTypes.bool,
+  /**
+   * When displaying multiple consecutive Snackbars from a parent rendering a single
+   * <Snackbar/>, add the key property to ensure independent treatment of each message.
+   * e.g. <Snackbar key={message} />, otherwise, the message may update-in-place and
+   * features such as autoHideDuration may be canceled.
+   */
+  key: PropTypes.any,
+  /**
+   * The message to display.
+   */
+  message: PropTypes.node,
+  /**
+   * Callback fired when the component requests to be closed.
+   * Typically `onClose` is used to set state in the parent component,
+   * which is used to control the `Snackbar` `open` prop.
+   * The `reason` parameter can optionally be used to control the response to `onClose`,
+   * for example ignoring `clickaway`.
+   *
+   * @param {object} event The event source of the callback
+   * @param {string} reason Can be:`"timeout"` (`autoHideDuration` expired) or: `"clickaway"`
+   */
+  onClose: PropTypes.func,
+  /**
+   * Callback fired before the transition is entering.
+   */
+  onEnter: PropTypes.func,
+  /**
+   * Callback fired when the transition has entered.
+   */
+  onEntered: PropTypes.func,
+  /**
+   * Callback fired when the transition is entering.
+   */
+  onEntering: PropTypes.func,
+  /**
+   * Callback fired before the transition is exiting.
+   */
+  onExit: PropTypes.func,
+  /**
+   * Callback fired when the transition has exited.
+   */
+  onExited: PropTypes.func,
+  /**
+   * Callback fired when the transition is exiting.
+   */
+  onExiting: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onMouseEnter: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onMouseLeave: PropTypes.func,
+  /**
+   * If true, `Snackbar` is open.
+   */
+  open: PropTypes.bool,
+  /**
+   * The number of milliseconds to wait before dismissing after user interaction.
+   * If `autoHideDuration` property isn't specified, it does nothing.
+   * If `autoHideDuration` property is specified but `resumeHideDuration` isn't,
+   * we default to `autoHideDuration / 2` ms.
+   */
+  resumeHideDuration: PropTypes.number,
+  /**
+   * Properties applied to the `SnackbarContent` element.
+   */
+  SnackbarContentProps: PropTypes.object,
+  /**
+   * Transition component.
+   */
+  transition: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  /**
+   * The duration for the transition, in milliseconds.
+   * You may specify a single timeout for all transitions, or individually with an object.
+   */
+  transitionDuration: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number }),
+  ]),
+};
+
+Snackbar.defaultProps = {
+  anchorOrigin: {
+    vertical: 'bottom',
+    horizontal: 'center',
+  },
+  disableWindowBlurListener: false,
+  transition: Slide,
+  transitionDuration: {
+    enter: duration.enteringScreen,
+    exit: duration.leavingScreen,
+  },
+};
+
 export default withStyles(styles, { flip: false, name: 'MuiSnackbar' })(Snackbar);