josh/header-changes-redux-a * Animations sorted for FullScreen

blueocean-dashboard/src/main/js/components/FullScreen.jsx

@@ -1,7 +1,12 @@
 import React, {Component, PropTypes} from 'react';
 
-// TODO: Move styles to css
-const fsStyles = {
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+
+const transitionClass = "expand-in";
+const transitionDuration = 150;
+
+// FIXME: Move styles to css once this is bedded down and moved to JDL
+const outerStyles = {
     position: "fixed",
     left: 0,
     top: 0,
@@ -10,41 +15,71 @@ const fsStyles = {
     zIndex: 75
 };
 
+const defaultContainerStyles = {
+    background: "white",
+    width: "100%",
+    height: "100%"
+};
+
 export class FullScreen extends Component {
     constructor(props) {
         super(props);
 
         // If nothing set, default to true
         const isVisible = "isVisible" in props ? props.isVisible : true;
 
-        this.state = {
-            isVisible
-        };
+        this.transitionTimeout = undefined;
     }
 
     componentWillReceiveProps(newProps) {
 
         const {isVisible} = newProps;
 
         if (isVisible != this.props.isVisible) {
-            this.setState({isVisible});
+            clearTimeout(this.transitionTimeout);
+
+            this.transitionTimeout = setTimeout(() => {
+                this.transitionTimeout = undefined;
+                this.forceUpdate();
+            }, transitionDuration);
         }
     }
 
     render() {
 
-        const {isVisible} = this.state;
-        const {children, style} = this.props;
+        /*
+            The top div (FullScreen) escapes the containing document flow, the inner one (FullScreen-contents)
+            wraps props.children in a single node for the sake of the animation, and defaults to width/height: 100%
+            and background: white
+        */
 
-        if (!isVisible) {
+        const {children, style, isVisible} = this.props;
+
+        // If transitionTimeout not null, we're still fading in/out
+        if (!isVisible && !this.transitionTimeout) {
             return null;
         }
 
-        const mergedStyle = {...fsStyles, ...style};
+        // We apply any styles that are passed in to the div that wraps the children.
+        const containerStyles = {...defaultContainerStyles, ...style};
+
+        const wrappedChildren = isVisible && (
+                <div className="FullScreen-contents" style={containerStyles}>
+                    {children}
+                </div>
+            );
 
         return (
-            <div className="FullScreen" style={mergedStyle}>
-                { children }
+            <div className="FullScreen" style={outerStyles}>
+                <ReactCSSTransitionGroup
+                    transitionName={transitionClass}
+                    transitionAppear
+                    transitionAppearTimeout={transitionDuration}
+                    transitionEnterTimeout={transitionDuration}
+                    transitionLeaveTimeout={transitionDuration}
+                >
+                    { wrappedChildren  }
+                </ReactCSSTransitionGroup>
             </div>
         );
     }
@@ -55,3 +90,7 @@ FullScreen.propTypes = {
     children: PropTypes.node,
     style: PropTypes.object,
 };
+
+FullScreen.defaultProps = {
+    isVisible: true
+};