Completely updated React, fixed #11, (hopefully)

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

@@ -1,22 +1,22 @@
-// @flow
 // @inheritedComponent Transition
 
 import React from 'react';
-import type { Element } from 'react';
+import PropTypes from 'prop-types';
 import { findDOMNode } from 'react-dom';
 import EventListener from 'react-event-listener';
 import debounce from 'lodash/debounce';
 import Transition from 'react-transition-group/Transition';
+import ownerWindow from 'dom-helpers/ownerWindow';
 import withTheme from '../styles/withTheme';
 import { duration } from '../styles/transitions';
-import type { TransitionDuration, TransitionCallback } from '../internal/transition';
+import { reflow, getTransitionProps } from './utils';
 
 const GUTTER = 24;
 
 // Translate the node so he can't be seen on the screen.
 // Later, we gonna translate back the node to his original location
 // with `translate3d(0, 0, 0)`.`
-function getTranslateValue(props, node: HTMLElement) {
+function getTranslateValue(props, node) {
   const { direction } = props;
   const rect = node.getBoundingClientRect();
 
@@ -25,7 +25,7 @@ function getTranslateValue(props, node: HTMLElement) {
   if (node.fakeTransform) {
     transform = node.fakeTransform;
   } else {
-    const computedStyle = window.getComputedStyle(node);
+    const computedStyle = ownerWindow(node).getComputedStyle(node);
     transform =
       computedStyle.getPropertyValue('-webkit-transform') ||
       computedStyle.getPropertyValue('transform');
@@ -51,11 +51,11 @@ function getTranslateValue(props, node: HTMLElement) {
     return `translateY(100vh) translateY(-${rect.top - offsetY}px)`;
   }
 
-  // direction === 'down
+  // direction === 'down'
   return `translate3d(0, ${0 - (rect.top + rect.height)}px, 0)`;
 }
 
-export function setTranslateValue(props: Object, node: HTMLElement | Object) {
+export function setTranslateValue(props, node) {
   const transform = getTranslateValue(props, node);
 
   if (transform) {
@@ -64,111 +64,53 @@ export function setTranslateValue(props: Object, node: HTMLElement | Object) {
   }
 }
 
-export type Direction = 'left' | 'right' | 'up' | 'down';
-
-type ProvidedProps = {
-  timeout: TransitionDuration,
-  theme: Object,
-};
-
-export type Props = {
-  /**
-   * A single child content element.
-   */
-  children: Element<any>,
-  /**
-   * Direction the child node will enter from.
-   */
-  direction?: Direction,
-  /**
-   * 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,
-  /**
-   * @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,
-  /**
-   * @ignore
-   */
-  theme?: Object,
-};
-
-type State = {
-  firstMount: boolean,
-};
-
-const reflow = node => node.scrollTop;
-
-class Slide extends React.Component<ProvidedProps & Props, State> {
-  static defaultProps = {
-    direction: 'down',
-    timeout: {
-      enter: duration.enteringScreen,
-      exit: duration.leavingScreen,
-    },
-  };
-
+/**
+ * The Slide transition is used by the [Snackbar](/demos/snackbars) component.
+ * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
+ */
+class Slide extends React.Component {
   state = {
-    // We use this state to handle the server-side rendering.
-    firstMount: true,
+    mounted: false,
   };
 
   componentDidMount() {
-    // state.firstMount handle SSR, once the component is mounted, we need
-    // to propery hide it.
+    // state.mounted handle SSR, once the component is mounted, we need
+    // to properly hide it.
     if (!this.props.in) {
       // We need to set initial translate values of transition element
       // otherwise component will be shown when in=false.
-      const element = findDOMNode(this.transition);
-      if (element instanceof HTMLElement) {
-        element.style.visibility = 'inherit';
-        setTranslateValue(this.props, element);
-      }
+      this.updatePosition();
     }
   }
 
   componentWillReceiveProps() {
     this.setState({
-      firstMount: false,
+      mounted: true,
     });
   }
 
+  componentDidUpdate(prevProps) {
+    if (prevProps.direction !== this.props.direction && !this.props.in) {
+      // We need to update the position of the drawer when the direction change and
+      // when it's hidden.
+      this.updatePosition();
+    }
+  }
+
   componentWillUnmount() {
     this.handleResize.cancel();
   }
 
   transition = null;
 
+  updatePosition() {
+    const node = findDOMNode(this.transition);
+    if (node) {
+      node.style.visibility = 'inherit';
+      setTranslateValue(this.props, node);
+    }
+  }
+
   handleResize = debounce(() => {
     // Skip configuration where the position is screen size invariant.
     if (this.props.in || this.props.direction === 'down' || this.props.direction === 'right') {
@@ -176,12 +118,12 @@ class Slide extends React.Component<ProvidedProps & Props, State> {
     }
 
     const node = findDOMNode(this.transition);
-    if (node instanceof HTMLElement) {
+    if (node) {
       setTranslateValue(this.props, node);
     }
   }, 166);
 
-  handleEnter = (node: HTMLElement) => {
+  handleEnter = node => {
     setTranslateValue(this.props, node);
     reflow(node);
 
@@ -190,16 +132,21 @@ class Slide extends React.Component<ProvidedProps & Props, State> {
     }
   };
 
-  handleEntering = (node: HTMLElement) => {
-    const { theme, timeout } = this.props;
-    node.style.transition = theme.transitions.create('transform', {
-      duration: typeof timeout === 'number' ? timeout : timeout.enter,
-      easing: theme.transitions.easing.easeOut,
+  handleEntering = node => {
+    const { theme } = this.props;
+
+    const { duration: transitionDuration, delay } = getTransitionProps(this.props, {
+      mode: 'enter',
     });
-    // $FlowFixMe - https://github.com/facebook/flow/pull/5161
-    node.style.webkitTransition = theme.transitions.create('-webkit-transform', {
-      duration: typeof timeout === 'number' ? timeout : timeout.enter,
+    node.style.transition = theme.transitions.create('transform', {
+      duration: transitionDuration,
       easing: theme.transitions.easing.easeOut,
+      delay,
+    });
+    node.style.webkitTransition = theme.transitions.create('-webkit-transform', {
+      duration: transitionDuration,
+      easing: theme.transitions.easing.easeOut,
+      delay,
     });
     node.style.transform = 'translate3d(0, 0, 0)';
     node.style.webkitTransform = 'translate3d(0, 0, 0)';
@@ -208,16 +155,21 @@ class Slide extends React.Component<ProvidedProps & Props, State> {
     }
   };
 
-  handleExit = (node: HTMLElement) => {
-    const { theme, timeout } = this.props;
-    node.style.transition = theme.transitions.create('transform', {
-      duration: typeof timeout === 'number' ? timeout : timeout.exit,
-      easing: theme.transitions.easing.sharp,
+  handleExit = node => {
+    const { theme } = this.props;
+
+    const { duration: transitionDuration, delay } = getTransitionProps(this.props, {
+      mode: 'exit',
     });
-    // $FlowFixMe - https://github.com/facebook/flow/pull/5161
-    node.style.webkitTransition = theme.transitions.create('-webkit-transform', {
-      duration: typeof timeout === 'number' ? timeout : timeout.exit,
+    node.style.transition = theme.transitions.create('transform', {
+      duration: transitionDuration,
       easing: theme.transitions.easing.sharp,
+      delay,
+    });
+    node.style.webkitTransition = theme.transitions.create('-webkit-transform', {
+      duration: transitionDuration,
+      easing: theme.transitions.easing.sharp,
+      delay,
     });
     setTranslateValue(this.props, node);
 
@@ -226,27 +178,56 @@ class Slide extends React.Component<ProvidedProps & Props, State> {
     }
   };
 
+  handleExited = node => {
+    // No need for transitions when the component is hidden
+    node.style.transition = '';
+    node.style.webkitTransition = '';
+
+    if (this.props.onExited) {
+      this.props.onExited(node);
+    }
+  };
+
   render() {
-    const { children, onEnter, onEntering, onExit, style: styleProp, theme, ...other } = this.props;
+    const {
+      children,
+      onEnter,
+      onEntering,
+      onExit,
+      onExited,
+      style: styleProp,
+      theme,
+      ...other
+    } = this.props;
 
-    const style = { ...styleProp };
+    let style = {};
 
-    if (!this.props.in && this.state.firstMount) {
+    // We use this state to handle the server-side rendering.
+    // We don't know the width of the children ahead of time.
+    // We need to render it.
+    if (!this.props.in && !this.state.mounted) {
       style.visibility = 'hidden';
     }
 
+    style = {
+      ...style,
+      ...styleProp,
+      ...(React.isValidElement(children) ? children.props.style : {}),
+    };
+
     return (
       <EventListener target="window" onResize={this.handleResize}>
         <Transition
           onEnter={this.handleEnter}
           onEntering={this.handleEntering}
           onExit={this.handleExit}
+          onExited={this.handleExited}
           appear
           style={style}
-          {...other}
           ref={node => {
             this.transition = node;
           }}
+          {...other}
         >
           {children}
         </Transition>
@@ -255,4 +236,67 @@ class Slide extends React.Component<ProvidedProps & Props, State> {
   }
 }
 
+Slide.propTypes = {
+  /**
+   * A single child content element.
+   */
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  /**
+   * Direction the child node will enter from.
+   */
+  direction: PropTypes.oneOf(['left', 'right', 'up', 'down']),
+  /**
+   * 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
+   */
+  onExited: 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.
+   */
+  timeout: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number }),
+  ]),
+};
+
+Slide.defaultProps = {
+  direction: 'down',
+  timeout: {
+    enter: duration.enteringScreen,
+    exit: duration.leavingScreen,
+  },
+};
+
 export default withTheme()(Slide);