Switch from react-components TimeoutTransitionGroup to official react-addons...

Switch from react-components TimeoutTransitionGroup to official react-addons ReactCSSTransitionGroup

frontend/src/components/Modal.jsx

 import React, { Component, PropTypes } from "react";
 import ReactDOM from "react-dom";
 
-import TimeoutTransitionGroup from "react-components/timeout-transition-group";
+import ReactCSSTransitionGroup from "react-addons-css-transition-group";
 
 import OnClickOutsideWrapper from "./OnClickOutsideWrapper.jsx";
 
 export default class Modal extends Component {
-    constructor(props, context) {
-        super(props, context);
-        this.state = {
-            isOpen: false
-        };
-    }
-
     static propTypes = {
         isOpen: PropTypes.bool
     };
@@ -22,21 +15,11 @@ export default class Modal extends Component {
         isOpen: true
     };
 
-    componentWillReceiveProps(nextProps) {
-        this.setState({
-            isOpen: nextProps.isOpen
-        });
-    }
-
     componentWillMount() {
         this._modalElement = document.createElement('span');
         this._modalElement.className = 'ModalContainer';
         this._modalElement.id = Math.floor((Math.random() * 698754) + 1);
         document.querySelector('body').appendChild(this._modalElement);
-
-        // HACK: TimeoutTransitionGroup doesn't support "appear" transition
-        // NOTE: Use "appear" transition in ReactCSSTransitionGroup once upgraded to React 0.14+
-        setTimeout(() => this.setState({ isOpen: this.props.isOpen }), 1);
     }
 
     componentDidMount() {
@@ -72,13 +55,13 @@ export default class Modal extends Component {
 
     _renderPopover() {
         ReactDOM.render(
-            <TimeoutTransitionGroup transitionName="Modal" enterTimeout={250} leaveTimeout={250}>
-                { this.state.isOpen &&
+            <ReactCSSTransitionGroup transitionName="Modal" transitionAppear={true} transitionAppearTimeout={250} transitionEnterTimeout={250} transitionLeaveTimeout={250}>
+                { this.props.isOpen &&
                     <div key="modal" className="Modal-backdrop" style={this.props.style}>
                         {this._modalComponent()}
                     </div>
                 }
-            </TimeoutTransitionGroup>
+            </ReactCSSTransitionGroup>
         , this._modalElement);
     }
 

frontend/src/components/modal/modal.css

@@ -67,11 +67,13 @@
 
 /* backdrop */
 
+.Modal-backdrop.Modal-appear,
 .Modal-backdrop.Modal-enter {
   transition: background-color 200ms ease-in-out;
   background-color: rgba(255, 255, 255, 0.01);
 }
 
+.Modal-backdrop.Modal-appear-active,
 .Modal-backdrop.Modal-enter-active {
   background-color: rgba(255, 255, 255, 0.6);
 }
@@ -87,12 +89,14 @@
 
 /* modal */
 
+.Modal-backdrop.Modal-appear .Modal,
 .Modal-backdrop.Modal-enter .Modal {
   transition: opacity 200ms linear, transform 200ms ease-in-out;
   opacity: 0.01;
   transform: translate(-50%, -55%);
 }
 
+.Modal-backdrop.Modal-appear-active .Modal,
 .Modal-backdrop.Modal-enter-active .Modal {
   opacity: 1;
   transform: translate(-50%, -50%);

frontend/src/tutorial/PageFlag.jsx

 import React, { Component, PropTypes } from "react";
 
-import TimeoutTransitionGroup from "react-components/timeout-transition-group";
+import ReactCSSTransitionGroup from "react-addons-css-transition-group";
 
 import BodyComponent from "metabase/components/BodyComponent.jsx";
 
@@ -23,9 +23,9 @@ export default class PageFlag extends Component {
 
     render() {
         return (
-            <TimeoutTransitionGroup transitionName="PageFlag" enterTimeout={250} leaveTimeout={250}>
+            <ReactCSSTransitionGroup transitionName="PageFlag" transitionEnterTimeout={250} transitionLeaveTimeout={250}>
                 { this.props.target ? [this.renderPageFlag()] : [] }
-            </TimeoutTransitionGroup>
+            </ReactCSSTransitionGroup>
         );
     }
 }

package.json

@@ -33,7 +33,7 @@
     "normalizr": "^1.4.0",
     "password-generator": "^2.0.1",
     "react": "^0.14.7",
-    "react-components": "^0.4.0",
+    "react-addons-css-transition-group": "^0.14.7",
     "react-dom": "^0.14.7",
     "react-draggable": "^1.1.3",
     "react-onclickout": "^2.0.4",