Completely updated React, fixed #11, (hopefully)

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

@@ -1,109 +1,60 @@
-// @flow
 // @inheritedComponent Transition
 
 import React from 'react';
-import type { Element } from 'react';
+import PropTypes from 'prop-types';
 import Transition from 'react-transition-group/Transition';
 import { duration } from '../styles/transitions';
 import withTheme from '../styles/withTheme';
-import type { TransitionDuration, TransitionCallback } from '../internal/transition';
+import { reflow, getTransitionProps } from './utils';
 
-type ProvidedProps = {
-  appear: boolean,
-  timeout: TransitionDuration,
-  theme: Object,
+const styles = {
+  entering: {
+    opacity: 1,
+  },
+  entered: {
+    opacity: 1,
+  },
 };
 
-export type Props = {
-  /**
-   * @ignore
-   */
-  appear?: boolean,
-  /**
-   * A single child content element.
-   */
-  children: Element<any>,
-  /**
-   * If `true`, the component will transition in.
-   */
-  in: boolean,
-  /**
-   * @ignore
-   */
-  onEnter?: TransitionCallback,
-  /**
-   * @ignore
-   */
-  onEntering?: TransitionCallback,
-  /**
-   * @ignore
-   */
-  onExit?: TransitionCallback,
-  /**
-   * @ignore
-   */
-  theme?: Object,
-  /**
-   * @ignore
-   */
-  style?: Object,
-  /**
-   * The duration for the transition, in milliseconds.
-   * You may specify a single timeout for all transitions, or individually with an object.
-   */
-  timeout?: TransitionDuration,
-};
-
-const reflow = node => node.scrollTop;
-
 /**
- * The Fade transition is used by the Modal component.
- * It's using [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
+ * The Fade transition is used by the [Modal](/demos/modals) component.
+ * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
-class Fade extends React.Component<ProvidedProps & Props> {
-  static defaultProps = {
-    appear: true,
-    timeout: {
-      enter: duration.enteringScreen,
-      exit: duration.leavingScreen,
-    },
-  };
+class Fade extends React.Component {
+  handleEnter = node => {
+    const { theme } = this.props;
+    reflow(node); // So the animation always start from the start.
 
-  handleEnter = (node: HTMLElement) => {
-    node.style.opacity = '0';
-    reflow(node);
+    const { duration: transitionDuration, delay } = getTransitionProps(this.props, {
+      mode: 'enter',
+    });
+    node.style.transition = theme.transitions.create('opacity', {
+      duration: transitionDuration,
+      delay,
+    });
+    node.style.webkitTransition = theme.transitions.create('opacity', {
+      duration: transitionDuration,
+      delay,
+    });
 
     if (this.props.onEnter) {
       this.props.onEnter(node);
     }
   };
 
-  handleEntering = (node: HTMLElement) => {
-    const { theme, timeout } = this.props;
+  handleExit = node => {
+    const { theme } = this.props;
+    const { duration: transitionDuration, delay } = getTransitionProps(this.props, {
+      mode: 'exit',
+    });
     node.style.transition = theme.transitions.create('opacity', {
-      duration: typeof timeout === 'number' ? timeout : timeout.enter,
+      duration: transitionDuration,
+      delay,
     });
-    // $FlowFixMe - https://github.com/facebook/flow/pull/5161
     node.style.webkitTransition = theme.transitions.create('opacity', {
-      duration: typeof timeout === 'number' ? timeout : timeout.enter,
+      duration: transitionDuration,
+      delay,
     });
-    node.style.opacity = '1';
-
-    if (this.props.onEntering) {
-      this.props.onEntering(node);
-    }
-  };
-
-  handleExit = (node: HTMLElement) => {
-    const { theme, timeout } = this.props;
-    node.style.transition = theme.transitions.create('opacity', {
-      duration: typeof timeout === 'number' ? timeout : timeout.exit,
-    });
-    // $FlowFixMe - https://github.com/facebook/flow/pull/5161
-    node.style.webkitTransition = theme.transitions.create('opacity', {
-      duration: typeof timeout === 'number' ? timeout : timeout.exit,
-    });
-    node.style.opacity = '0';
 
     if (this.props.onExit) {
       this.props.onExit(node);
@@ -111,37 +62,74 @@ class Fade extends React.Component<ProvidedProps & Props> {
   };
 
   render() {
-    const {
-      appear,
-      children,
-      onEnter,
-      onEntering,
-      onExit,
-      style: styleProp,
-      theme,
-      ...other
-    } = this.props;
+    const { children, onEnter, onExit, style: styleProp, theme, ...other } = this.props;
 
-    const style = { ...styleProp };
-
-    // For server side rendering.
-    if (!this.props.in || appear) {
-      style.opacity = '0';
-    }
+    const style = {
+      ...styleProp,
+      ...(React.isValidElement(children) ? children.props.style : {}),
+    };
 
     return (
-      <Transition
-        appear={appear}
-        style={style}
-        onEnter={this.handleEnter}
-        onEntering={this.handleEntering}
-        onExit={this.handleExit}
-        {...other}
-      >
-        {children}
+      <Transition appear onEnter={this.handleEnter} onExit={this.handleExit} {...other}>
+        {(state, childProps) => {
+          return React.cloneElement(children, {
+            style: {
+              opacity: 0,
+              ...styles[state],
+              ...style,
+            },
+            ...childProps,
+          });
+        }}
       </Transition>
     );
   }
 }
 
+Fade.propTypes = {
+  /**
+   * A single child content element.
+   */
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  /**
+   * If `true`, the component will transition in.
+   */
+  in: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  onEnter: 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.
+   */
+  timeout: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number }),
+  ]),
+};
+
+Fade.defaultProps = {
+  timeout: {
+    enter: duration.enteringScreen,
+    exit: duration.leavingScreen,
+  },
+};
+
 export default withTheme()(Fade);