use ReactCSSTransitionGroup for global messages (#595)

* migrate global messages to ReactCSSTransitionGroup

The existing code looked like quite a mess with its .style this and
.style that.  This change lets the CSS do what it's good at and keeps
the JS looking a bit cleaner in that file.

It also cuts down on a dependency.

css/index.styl

@@ -48,6 +48,22 @@ tabsHeight = 40px
     &.auth0-global-message-success
       background #7ED321
 
+    &.global-message-enter
+      height 0
+      paddingTop 0
+      paddingBottom 0
+    &.global-message-enter.global-message-enter-active
+      transition all 0.2s
+      height auto
+      paddingTop 10px
+      paddingBottom 10px
+
+    &.global-message-leave
+      transition all 0.2s
+      height 0
+      paddingTop 0
+      paddingBottom 0
+
     span
       -webkit-animation-delay .2s
       animation-delay .2s

package.json

@@ -71,7 +71,6 @@
     "react": "^15.0.0 || ^16.0.0",
     "react-dom": "^15.0.0 || ^16.0.0",
     "react-addons-css-transition-group": "^15.0.0 || ^16.0.0",
-    "react-addons-transition-group": "^15.0.0 || ^16.0.0",
     "trim": "0.0.1"
   }
 }

src/ui/box/chrome.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import ReactTransitionGroup from 'react-addons-transition-group';
 import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 import MultisizeSlide from './multisize_slide';
 import GlobalMessage from './global_message';
@@ -47,6 +46,7 @@ SubmitButton.propTypes = {
   label: React.PropTypes.string
 };
 
+const MESSAGE_ANIMATION_DURATION = 250;
 const AUXILIARY_ANIMATION_DURATION = 350;
 
 export default class Chrome extends React.Component {
@@ -237,10 +237,14 @@ export default class Chrome extends React.Component {
     return (
       <div className={className}>
         <Header title={title} name={name} backHandler={backHandler && ::this.handleBack} backgroundUrl={backgroundUrl} backgroundColor={primaryColor} logoUrl={logo}/>
-        <ReactTransitionGroup>
+        <ReactCSSTransitionGroup
+          transitionName="global-message"
+          transitionEnterTimeout={MESSAGE_ANIMATION_DURATION}
+          transitionLeaveTimeout={MESSAGE_ANIMATION_DURATION}
+        >
           {globalSuccess}
           {globalError}
-        </ReactTransitionGroup>
+        </ReactCSSTransitionGroup>
         <div style={{position: "relative"}}>
           <MultisizeSlide
             delay={550}

src/ui/box/global_message.jsx

@@ -14,57 +14,6 @@ export default class GlobalMessage extends React.Component {
     );
   }
 
-  // componentWillAppear(callback) {
-  //   console.log("componentWillAppear")
-  //   callback();
-  // }
-  //
-  // componentDidAppear() {
-  //   console.log("componentDidAppear");
-  // }
-
-  componentWillEnter(callback) {
-    // console.log("componentWillEnter");
-    const node = ReactDOM.findDOMNode(this);
-    var computedStyle = window.getComputedStyle(node, null);
-    var height = computedStyle.height;
-    var paddingTop = computedStyle.paddingTop;
-    var paddingBottom = computedStyle.paddingBottom;
-    node.style.height = "0px";
-    node.style.paddingTop = "0px";
-    node.style.paddingBottom = "0px";
-    setTimeout(function() {
-      node.style.transition = "all 0.2s";
-      node.style.height = "";
-      node.style.paddingTop = "";
-      node.style.paddingBottom = "";
-      callback();
-    }, 17);
-  }
-
-  // componentDidEnter() {
-  //   console.log("componentDidEnter");
-  // }
-
-  componentWillLeave(callback) {
-    // console.log("componentWillLeave");
-    const node = ReactDOM.findDOMNode(this);
-    node.style.transition = "all 0.2s";
-    node.style.height = "0px";
-    node.style.paddingTop = "0px";
-    node.style.paddingBottom = "0px";
-    setTimeout(function() {
-      node.style.removeProperty("transition");
-      node.style.removeProperty("height");
-      node.style.removeProperty("padding-top");
-      node.style.removeProperty("padding-bottom");
-      callback();
-    }, 250);
-  }
-
-  // componentDidLeave() {
-  //   console.log("componentDidLeave");
-  // }
 }
 
 GlobalMessage.propTypes = {