Completely updated React, fixed #11, (hopefully)

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

@@ -1,164 +1,91 @@
-// @flow
-// @inheritedComponent CSSTransition
+// @inheritedComponent Transition
 
 import React from 'react';
-import type { Element } from 'react';
-import CSSTransition from 'react-transition-group/CSSTransition';
+import PropTypes from 'prop-types';
+import Transition from 'react-transition-group/Transition';
 import withTheme from '../styles/withTheme';
-import type { TransitionCallback, TransitionClasses } from '../internal/transition';
+import { reflow, getTransitionProps } from './utils';
 
-// Only exported for tests.
-export function getScale(value: number) {
+function getScale(value) {
   return `scale(${value}, ${value ** 2})`;
 }
 
-export type TransitionDuration = number | { enter?: number, exit?: number } | 'auto';
-
-type ProvidedProps = {
-  appear: boolean,
-  timeout: TransitionDuration,
-  theme: Object,
-};
-
-export type Props = {
-  /**
-   * @ignore
-   */
-  appear?: boolean,
-  /**
-   * A single child content element.
-   */
-  children: Element<any>,
-  /**
-   * If `true`, show the component; triggers the enter or exit animation.
-   */
-  in: boolean,
-  /**
-   * @ignore
-   */
-  onEnter?: TransitionCallback,
-  /**
-   * @ignore
-   */
-  onEntering?: TransitionCallback,
-  /**
-   * @ignore
-   */
-  onEntered?: TransitionCallback,
-  /**
-   * @ignore
-   */
-  onExit?: TransitionCallback,
-  /**
-   * @ignore
-   */
-  onExiting?: TransitionCallback,
-  /**
-   * @ignore
-   */
-  onExited?: TransitionCallback,
-  /**
-   * Use that property to pass a ref callback to the root component.
-   */
-  rootRef?: Function,
-  /**
-   * @ignore
-   */
-  style?: Object,
-  /**
-   * The animation classNames applied to the component as it enters or exits.
-   * This property is a direct binding to [`CSSTransition.classNames`](https://reactcommunity.org/react-transition-group/#CSSTransition-prop-classNames).
-   */
-  transitionClasses?: TransitionClasses,
-  /**
-   * @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,
+const styles = {
+  entering: {
+    opacity: 1,
+    transform: getScale(1),
+  },
+  entered: {
+    opacity: 1,
+    transform: getScale(1),
+  },
 };
 
 /**
- * The Grow transition is used by the Popover component.
- * It's using [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
+ * The Grow transition is used by the [Popover](/demos/popovers) component.
+ * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
-class Grow extends React.Component<ProvidedProps & Props> {
-  static defaultProps = {
-    appear: true,
-    timeout: 'auto',
-    transitionClasses: {},
-  };
+class Grow extends React.Component {
+  componentWillUnmount() {
+    clearTimeout(this.timer);
+  }
 
   autoTimeout = undefined;
+  timer = null;
 
-  handleEnter = (node: HTMLElement) => {
-    node.style.opacity = '0';
-    node.style.transform = getScale(0.75);
+  handleEnter = node => {
+    const { theme, timeout } = this.props;
+    reflow(node); // So the animation always start from the start.
+
+    const { duration: transitionDuration, delay } = getTransitionProps(this.props, {
+      mode: 'enter',
+    });
+    let duration = 0;
+    if (timeout === 'auto') {
+      duration = theme.transitions.getAutoHeightDuration(node.clientHeight);
+      this.autoTimeout = duration;
+    } else {
+      duration = transitionDuration;
+    }
+
+    node.style.transition = [
+      theme.transitions.create('opacity', {
+        duration,
+        delay,
+      }),
+      theme.transitions.create('transform', {
+        duration: duration * 0.666,
+        delay,
+      }),
+    ].join(',');
 
     if (this.props.onEnter) {
       this.props.onEnter(node);
     }
   };
 
-  handleEntering = (node: HTMLElement) => {
+  handleExit = node => {
     const { theme, timeout } = this.props;
     let duration = 0;
 
+    const { duration: transitionDuration, delay } = getTransitionProps(this.props, {
+      mode: 'exit',
+    });
     if (timeout === 'auto') {
       duration = theme.transitions.getAutoHeightDuration(node.clientHeight);
       this.autoTimeout = duration;
-    } else if (typeof timeout === 'number') {
-      duration = timeout;
-    } else if (timeout) {
-      duration = timeout.enter;
     } else {
-      // The propType will warn in this case.
+      duration = transitionDuration;
     }
 
     node.style.transition = [
       theme.transitions.create('opacity', {
         duration,
+        delay,
       }),
       theme.transitions.create('transform', {
         duration: duration * 0.666,
-      }),
-    ].join(',');
-
-    node.style.opacity = '1';
-    node.style.transform = getScale(1);
-
-    if (this.props.onEntering) {
-      this.props.onEntering(node);
-    }
-  };
-
-  handleExit = (node: HTMLElement) => {
-    const { theme, timeout } = this.props;
-    let duration = 0;
-
-    if (timeout === 'auto') {
-      duration = theme.transitions.getAutoHeightDuration(node.clientHeight);
-      this.autoTimeout = duration;
-    } else if (typeof timeout === 'number') {
-      duration = timeout;
-    } else if (timeout) {
-      duration = timeout.exit;
-    } else {
-      // The propType will warn in this case.
-    }
-
-    node.style.transition = [
-      theme.transitions.create('opacity', {
-        duration,
-      }),
-      theme.transitions.create('transform', {
-        duration: duration * 0.666,
-        delay: duration * 0.333,
+        delay: delay || duration * 0.333,
       }),
     ].join(',');
 
@@ -170,56 +97,93 @@ class Grow extends React.Component<ProvidedProps & Props> {
     }
   };
 
-  addEndListener = (node, next: Function) => {
-    let timeout;
-
+  addEndListener = (_, next) => {
     if (this.props.timeout === 'auto') {
-      timeout = this.autoTimeout || 0;
-    } else {
-      timeout = this.props.timeout;
+      this.timer = setTimeout(next, this.autoTimeout || 0);
     }
-
-    setTimeout(next, timeout);
   };
 
   render() {
-    const {
-      appear,
-      children,
-      onEnter,
-      onEntering,
-      onExit,
-      rootRef,
-      style: styleProp,
-      transitionClasses,
-      timeout,
-      theme,
-      ...other
-    } = this.props;
+    const { children, onEnter, onExit, style: styleProp, theme, timeout, ...other } = this.props;
 
-    const style = { ...children.props.style, ...styleProp };
-
-    // For server side rendering.
-    if (!this.props.in || appear) {
-      style.opacity = '0';
-    }
+    const style = {
+      ...styleProp,
+      ...(React.isValidElement(children) ? children.props.style : {}),
+    };
 
     return (
-      <CSSTransition
-        classNames={transitionClasses}
+      <Transition
+        appear
         onEnter={this.handleEnter}
-        onEntering={this.handleEntering}
         onExit={this.handleExit}
         addEndListener={this.addEndListener}
-        appear={appear}
-        style={style}
+        timeout={timeout === 'auto' ? null : timeout}
         {...other}
-        ref={rootRef}
       >
-        {children}
-      </CSSTransition>
+        {(state, childProps) => {
+          return React.cloneElement(children, {
+            style: {
+              opacity: 0,
+              transform: getScale(0.75),
+              ...styles[state],
+              ...style,
+            },
+            ...childProps,
+          });
+        }}
+      </Transition>
     );
   }
 }
 
+Grow.propTypes = {
+  /**
+   * A single child content element.
+   */
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  /**
+   * If `true`, show the component; triggers the enter or exit animation.
+   */
+  in: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  onEnter: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onEntered: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onEntering: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onExit: 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']),
+  ]),
+};
+
+Grow.defaultProps = {
+  timeout: 'auto',
+};
+
 export default withTheme()(Grow);