Completely updated React, fixed #11, (hopefully)

goTorrentWebUI/node_modules/material-ui/transitions/Collapse.js.flow

@@ -1,15 +1,14 @@
-// @flow
 // @inheritedComponent Transition
 
 import React from 'react';
 import classNames from 'classnames';
-import type { Node } from 'react';
+import PropTypes from 'prop-types';
 import Transition from 'react-transition-group/Transition';
 import withStyles from '../styles/withStyles';
 import { duration } from '../styles/transitions';
-import type { TransitionCallback } from '../internal/transition';
+import { getTransitionProps } from './utils';
 
-export const styles = (theme: Object) => ({
+export const styles = theme => ({
   container: {
     height: 0,
     overflow: 'hidden',
@@ -27,85 +26,21 @@ export const styles = (theme: Object) => ({
   },
 });
 
-export type TransitionDuration = number | { enter?: number, exit?: number } | 'auto';
-
-type ProvidedProps = {
-  appear: boolean,
-  classes: Object,
-  collapsedHeight: string,
-  timeout: TransitionDuration,
-  theme: Object,
-};
-
-export type Props = {
-  /**
-   * @ignore
-   */
-  appear?: boolean,
-  /**
-   * The content node to be collapsed.
-   */
-  children: Node,
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes?: Object,
-  /**
-   * The height of the container when collapsed.
-   */
-  collapsedHeight?: string,
-  /**
-   * If `true`, the component will transition in.
-   */
-  in: boolean,
-  /**
-   * @ignore
-   */
-  onEnter?: TransitionCallback,
-  /**
-   * @ignore
-   */
-  onEntering?: TransitionCallback,
-  /**
-   * @ignore
-   */
-  onEntered?: TransitionCallback,
-  /**
-   * @ignore
-   */
-  onExit?: TransitionCallback,
-  /**
-   * @ignore
-   */
-  onExiting?: TransitionCallback,
-  /**
-   * @ignore
-   */
-  style?: Object,
-  /**
-   * @ignore
-   */
-  theme?: Object,
-  /**
-   * The duration for the transition, in milliseconds.
-   * You may specify a single timeout for all transitions, or individually with an object.
-   *
-   * Set to 'auto' to automatically calculate transition time based on height.
-   */
-  timeout?: TransitionDuration,
-};
-
-class Collapse extends React.Component<ProvidedProps & Props> {
-  static defaultProps = {
-    appear: false,
-    collapsedHeight: '0px',
-    timeout: duration.standard,
-  };
+/**
+ * The Collapes transition is used by the
+ * [Vetical Stepper](/demos/steppers#vertical-stepper) StepContent component.
+ * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
+ */
+class Collapse extends React.Component {
+  componentWillUnmount() {
+    clearTimeout(this.timer);
+  }
 
   wrapper = null;
   autoTransitionDuration = undefined;
+  timer = null;
 
-  handleEnter = (node: HTMLElement) => {
+  handleEnter = node => {
     node.style.height = this.props.collapsedHeight;
 
     if (this.props.onEnter) {
@@ -113,20 +48,21 @@ class Collapse extends React.Component<ProvidedProps & Props> {
     }
   };
 
-  handleEntering = (node: HTMLElement) => {
+  handleEntering = node => {
     const { timeout, theme } = this.props;
     const wrapperHeight = this.wrapper ? this.wrapper.clientHeight : 0;
 
+    const { duration: transitionDuration } = getTransitionProps(this.props, {
+      mode: 'enter',
+    });
+
     if (timeout === 'auto') {
       const duration2 = theme.transitions.getAutoHeightDuration(wrapperHeight);
       node.style.transitionDuration = `${duration2}ms`;
       this.autoTransitionDuration = duration2;
-    } else if (typeof timeout === 'number') {
-      node.style.transitionDuration = `${timeout}ms`;
-    } else if (timeout) {
-      node.style.transitionDuration = `${timeout.enter}ms`;
     } else {
-      // The propType will warn in this case.
+      node.style.transitionDuration =
+        typeof transitionDuration === 'string' ? transitionDuration : `${transitionDuration}ms`;
     }
 
     node.style.height = `${wrapperHeight}px`;
@@ -136,7 +72,7 @@ class Collapse extends React.Component<ProvidedProps & Props> {
     }
   };
 
-  handleEntered = (node: HTMLElement) => {
+  handleEntered = node => {
     node.style.height = 'auto';
 
     if (this.props.onEntered) {
@@ -144,7 +80,7 @@ class Collapse extends React.Component<ProvidedProps & Props> {
     }
   };
 
-  handleExit = (node: HTMLElement) => {
+  handleExit = node => {
     const wrapperHeight = this.wrapper ? this.wrapper.clientHeight : 0;
     node.style.height = `${wrapperHeight}px`;
 
@@ -153,20 +89,21 @@ class Collapse extends React.Component<ProvidedProps & Props> {
     }
   };
 
-  handleExiting = (node: HTMLElement) => {
+  handleExiting = node => {
     const { timeout, theme } = this.props;
     const wrapperHeight = this.wrapper ? this.wrapper.clientHeight : 0;
 
+    const { duration: transitionDuration } = getTransitionProps(this.props, {
+      mode: 'exit',
+    });
+
     if (timeout === 'auto') {
       const duration2 = theme.transitions.getAutoHeightDuration(wrapperHeight);
       node.style.transitionDuration = `${duration2}ms`;
       this.autoTransitionDuration = duration2;
-    } else if (typeof timeout === 'number') {
-      node.style.transitionDuration = `${timeout}ms`;
-    } else if (timeout) {
-      node.style.transitionDuration = `${timeout.exit}ms`;
     } else {
-      // The propType will warn in this case.
+      node.style.transitionDuration =
+        typeof transitionDuration === 'string' ? transitionDuration : `${transitionDuration}ms`;
     }
 
     node.style.height = this.props.collapsedHeight;
@@ -176,53 +113,56 @@ class Collapse extends React.Component<ProvidedProps & Props> {
     }
   };
 
-  addEndListener = (node, next: Function) => {
-    let timeout;
-
+  addEndListener = (_, next) => {
     if (this.props.timeout === 'auto') {
-      timeout = this.autoTransitionDuration || 0;
-    } else {
-      timeout = this.props.timeout;
+      this.timer = setTimeout(next, this.autoTransitionDuration || 0);
     }
-
-    setTimeout(next, timeout);
   };
 
   render() {
     const {
-      appear,
       children,
       classes,
+      className,
       collapsedHeight,
+      component: Component,
       onEnter,
-      onEntering,
       onEntered,
+      onEntering,
       onExit,
       onExiting,
       style,
-      timeout,
       theme,
+      timeout,
       ...other
     } = this.props;
 
     return (
       <Transition
-        appear={appear}
         onEntering={this.handleEntering}
         onEnter={this.handleEnter}
         onEntered={this.handleEntered}
         onExiting={this.handleExiting}
         onExit={this.handleExit}
         addEndListener={this.addEndListener}
-        style={{ minHeight: collapsedHeight, ...style }}
+        timeout={timeout === 'auto' ? null : timeout}
         {...other}
       >
-        {state => {
+        {(state, childProps) => {
           return (
-            <div
-              className={classNames(classes.container, {
-                [classes.entered]: state === 'entered',
-              })}
+            <Component
+              className={classNames(
+                classes.container,
+                {
+                  [classes.entered]: state === 'entered',
+                },
+                className,
+              )}
+              style={{
+                ...style,
+                minHeight: collapsedHeight,
+              }}
+              {...childProps}
             >
               <div
                 className={classes.wrapper}
@@ -232,7 +172,7 @@ class Collapse extends React.Component<ProvidedProps & Props> {
               >
                 <div className={classes.wrapperInner}>{children}</div>
               </div>
-            </div>
+            </Component>
           );
         }}
       </Transition>
@@ -240,6 +180,79 @@ class Collapse extends React.Component<ProvidedProps & Props> {
   }
 }
 
+Collapse.propTypes = {
+  /**
+   * The content node to be collapsed.
+   */
+  children: PropTypes.node,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The height of the container when collapsed.
+   */
+  collapsedHeight: PropTypes.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a DOM element or a component.
+   */
+  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  /**
+   * If `true`, the component will transition in.
+   */
+  in: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  onEnter: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onEntered: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onEntering: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onExit: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onExiting: PropTypes.func,
+  /**
+   * @ignore
+   */
+  style: PropTypes.object,
+  /**
+   * @ignore
+   */
+  theme: PropTypes.object.isRequired,
+  /**
+   * The duration for the transition, in milliseconds.
+   * You may specify a single timeout for all transitions, or individually with an object.
+   *
+   * Set to 'auto' to automatically calculate transition time based on height.
+   */
+  timeout: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number }),
+    PropTypes.oneOf(['auto']),
+  ]),
+};
+
+Collapse.defaultProps = {
+  collapsedHeight: '0px',
+  component: 'div',
+  timeout: duration.standard,
+};
+
 export default withStyles(styles, {
   withTheme: true,
   name: 'MuiCollapse',