Completely updated React, fixed #11, (hopefully)

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

@@ -1,18 +1,17 @@
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
 // @inheritedComponent Transition
 
 import React 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 { reflow, getTransitionProps } from './utils';
 
 const GUTTER = 24;
 
@@ -28,7 +27,7 @@ function getTranslateValue(props, node) {
   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');
   }
 
@@ -49,7 +48,7 @@ function getTranslateValue(props, node) {
     return `translateY(100vh) translateY(-${rect.top - offsetY}px)`;
   }
 
-  // direction === 'down
+  // direction === 'down'
   return `translate3d(0, ${0 - (rect.top + rect.height)}px, 0)`;
 }
 
@@ -62,15 +61,16 @@ export function setTranslateValue(props, node) {
   }
 }
 
-const reflow = node => node.scrollTop;
-
+/**
+ * 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 {
   constructor(...args) {
     var _temp;
 
     return _temp = super(...args), this.state = {
-      // We use this state to handle the server-side rendering.
-      firstMount: true
+      mounted: false
     }, this.transition = null, this.handleResize = debounce(() => {
       // Skip configuration where the position is screen size invariant.
       if (this.props.in || this.props.direction === 'down' || this.props.direction === 'right') {
@@ -78,7 +78,7 @@ class Slide extends React.Component {
       }
 
       const node = findDOMNode(this.transition);
-      if (node instanceof HTMLElement) {
+      if (node) {
         setTranslateValue(this.props, node);
       }
     }, 166), this.handleEnter = node => {
@@ -89,15 +89,20 @@ class Slide extends React.Component {
         this.props.onEnter(node);
       }
     }, this.handleEntering = node => {
-      const { theme, timeout } = this.props;
-      node.style.transition = theme.transitions.create('transform', {
-        duration: typeof timeout === 'number' ? timeout : timeout.enter,
-        easing: theme.transitions.easing.easeOut
+      const { theme } = this.props;
+
+      const { duration: transitionDuration, delay } = getTransitionProps(this.props, {
+        mode: 'enter'
+      });
+      node.style.transition = theme.transitions.create('transform', {
+        duration: transitionDuration,
+        easing: theme.transitions.easing.easeOut,
+        delay
       });
-      // $FlowFixMe - https://github.com/facebook/flow/pull/5161
       node.style.webkitTransition = theme.transitions.create('-webkit-transform', {
-        duration: typeof timeout === 'number' ? timeout : timeout.enter,
-        easing: theme.transitions.easing.easeOut
+        duration: transitionDuration,
+        easing: theme.transitions.easing.easeOut,
+        delay
       });
       node.style.transform = 'translate3d(0, 0, 0)';
       node.style.webkitTransform = 'translate3d(0, 0, 0)';
@@ -105,59 +110,97 @@ class Slide extends React.Component {
         this.props.onEntering(node);
       }
     }, this.handleExit = node => {
-      const { theme, timeout } = this.props;
-      node.style.transition = theme.transitions.create('transform', {
-        duration: typeof timeout === 'number' ? timeout : timeout.exit,
-        easing: theme.transitions.easing.sharp
+      const { theme } = this.props;
+
+      const { duration: transitionDuration, delay } = getTransitionProps(this.props, {
+        mode: 'exit'
+      });
+      node.style.transition = theme.transitions.create('transform', {
+        duration: transitionDuration,
+        easing: theme.transitions.easing.sharp,
+        delay
       });
-      // $FlowFixMe - https://github.com/facebook/flow/pull/5161
       node.style.webkitTransition = theme.transitions.create('-webkit-transform', {
-        duration: typeof timeout === 'number' ? timeout : timeout.exit,
-        easing: theme.transitions.easing.sharp
+        duration: transitionDuration,
+        easing: theme.transitions.easing.sharp,
+        delay
       });
       setTranslateValue(this.props, node);
 
       if (this.props.onExit) {
         this.props.onExit(node);
       }
+    }, this.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);
+      }
     }, _temp;
   }
 
   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();
   }
 
+  updatePosition() {
+    const node = findDOMNode(this.transition);
+    if (node) {
+      node.style.visibility = 'inherit';
+      setTranslateValue(this.props, node);
+    }
+  }
+
   render() {
     const _props = this.props,
-          { children, onEnter, onEntering, onExit, style: styleProp, theme } = _props,
-          other = _objectWithoutProperties(_props, ['children', 'onEnter', 'onEntering', 'onExit', 'style', 'theme']);
+          {
+      children,
+      onEnter,
+      onEntering,
+      onExit,
+      onExited,
+      style: styleProp,
+      theme
+    } = _props,
+          other = _objectWithoutProperties(_props, ['children', 'onEnter', 'onEntering', 'onExit', 'onExited', 'style', 'theme']);
 
-    const style = _extends({}, 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 = _extends({}, style, styleProp, React.isValidElement(children) ? children.props.style : {});
+
     return React.createElement(
       EventListener,
       { target: 'window', onResize: this.handleResize },
@@ -167,19 +210,71 @@ class Slide extends React.Component {
           onEnter: this.handleEnter,
           onEntering: this.handleEntering,
           onExit: this.handleExit,
+          onExited: this.handleExited,
           appear: true,
-          style: style
-        }, other, {
+          style: style,
           ref: node => {
             this.transition = node;
           }
-        }),
+        }, other),
         children
       )
     );
   }
 }
 
+Slide.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * 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: {
@@ -187,4 +282,5 @@ Slide.defaultProps = {
     exit: duration.leavingScreen
   }
 };
+
 export default withTheme()(Slide);