[Ivan Diaz] - Add Widget transition component

src/app/main/main-home/main-home-page-login-widget.js

@@ -1,51 +1,35 @@
 import React              from 'react/addons';
 import {ListenerMixin}    from 'reflux';
-import {Motion, spring}   from 'react-motion';
 
 import UserActions        from 'actions/user-actions';
 import UserStore          from 'stores/user-store';
 
-import Form               from 'core-components/form';
-import Widget             from 'core-components/widget';
-import Input              from 'core-components/input';
 import Button             from 'core-components/button';
+import Form               from 'core-components/form';
+import Input              from 'core-components/input';
+import Widget             from 'core-components/widget';
+import WidgetTransition   from 'core-components/widget-transition';
 
 var MainHomePageLoginWidget = React.createClass({
 
     getInitialState() {
         return {
-            showed: 'login'
+            sideToShow: 'front'
-        };
-    },
-
-    getDefaultAnimation() {
-        return {
-            rotateY: -90
         };
     },
 
     render() {
         return (
-            <Motion defaultStyle={this.getDefaultAnimation()} style={{ rotateY: (this.state.showed == 'login') ? spring(0, [100, 20]) : spring(180, [100, 20])}}>
+            <WidgetTransition sideToShow={this.state.sideToShow} className="login-widget--container">
-                {(animation) => {
+                {this.renderLogin()}
-                    return (
+                {this.renderPasswordRecovery()}
-                        <div className="main-home-page--widget-container">
+            </WidgetTransition>
-                            {this.renderLogin(animation)}
-                            {this.renderPasswordRecovery(animation)}
-                        </div>
-                    )
-                }}
-            </Motion>
         );
     },
 
-    renderLogin(variants) {
+    renderLogin() {
-        var loginStyle = {
-            transform: `rotateY(${(variants.rotateY) ? variants.rotateY: 0}deg)`
-        };
-
         return (
-            <Widget className="main-home-page--widget" title="Login" style={loginStyle}>
+            <Widget className="main-home-page--widget" title="Login">
                 <Form className="login-widget--form" onSubmit={this.handleLoginFormSubmit}>
                     <div className="login-widget--inputs">
                         <Input placeholder="email" name="email" className="login-widget--input"/>
@@ -60,13 +44,9 @@ var MainHomePageLoginWidget = React.createClass({
         );
     },
 
-    renderPasswordRecovery(variants) {
+    renderPasswordRecovery() {
-        var passwordRecoveryStyle = {
-            transform: `rotateY(${-180+variants.rotateY}deg)`
-        };
-
         return (
-            <Widget className="main-home-page--widget main-home-page--password-widget" title="Password Recovery" style={passwordRecoveryStyle}>
+            <Widget className="main-home-page--widget main-home-page--password-widget" title="Password Recovery">
                 <Form className="login-widget--form" onSubmit={this.handleSubmit}>
                     <div className="login-widget--inputs">
                         <Input placeholder="email" name="email" className="login-widget--input"/>
@@ -83,7 +63,7 @@ var MainHomePageLoginWidget = React.createClass({
 
     handleForgetPasswordClick() {
         this.setState({
-            showed: 'password'
+            sideToShow: 'back'
         });
     }
 });

src/app/main/main-home/main-home-page-login-widget.scss

@@ -1,4 +1,11 @@
 .login-widget {
+
+  &--container {
+    margin: 35px auto 0;
+    height: 327px;
+    width: 324px;
+  }
+
   &--inputs {
   }
 

src/app/main/main-home/main-home-page.scss

@@ -1,21 +1,3 @@
 .main-home-page {
 
-  &--widget-container {
-    position: relative;
-    display: inline-block;
-    margin: 35px auto 0;
-    height: 327px;
-    width: 324px;
-  }
-
-  &--widget {
-    display: inline-block;
-    backface-visibility: hidden;
-    position: absolute;
-    left: 0;
-  }
-
-  &--password-widget {
-//    backface-visibility: visible;
-  }
 }

src/core-components/widget-transition.js

@@ -0,0 +1,78 @@
+import React              from 'react/addons';
+import classNames         from 'classnames';
+import _                  from 'lodash';
+import {Motion, spring}   from 'react-motion';
+
+import Widget             from 'core-components/widget';
+
+var WidgetTransition = React.createClass({
+
+    propTypes: {
+        sideToShow: React.PropTypes.string
+    },
+
+    getDefaultProps() {
+        return {
+            sideToShow: 'front'
+        };
+    },
+
+    getDefaultAnimation() {
+        return {
+            rotateY: -90
+        };
+    },
+
+    render() {
+        return (
+            <Motion defaultStyle={this.getDefaultAnimation()} style={this.getAnimation()}>
+                {this.renderChildren}
+            </Motion>
+        );
+    },
+
+    renderChildren: function (animation) {
+        return (
+            <div className={this.getClass()}>
+                {React.Children.map(this.props.children, function (child, index) {
+                    var modifiedChild;
+
+                    if (index === 0) {
+                        modifiedChild = React.cloneElement(child, {
+                            className: child.props.className + ' widget-transition--widget',
+                            style: _.extend ({}, child.props.style, {
+                                transform: `rotateY(${(animation.rotateY) ? animation.rotateY: 0}deg)`
+                            })
+                        });
+                    } else {
+                        modifiedChild = React.cloneElement(child, {
+                            className: child.props.className + ' widget-transition--widget',
+                            style: _.extend ({}, child.props.style, {
+                                transform: `rotateY(${-180 + animation.rotateY}deg)`
+                            })
+                        });
+                    }
+
+                    return modifiedChild;
+                })}
+            </div>
+        )
+    },
+
+    getClass() {
+        var classes = {
+            'widget-transition': true,
+            [this.props.className]: (this.props.className)
+        };
+
+        return classNames(classes);
+    },
+
+    getAnimation() {
+        return {
+            rotateY: (this.props.sideToShow === 'front') ? spring(0, [100, 20]) : spring(180, [100, 20])
+        };
+    }
+});
+
+export default WidgetTransition;

src/core-components/widget-transition.scss

@@ -0,0 +1,11 @@
+.widget-transition {
+  position: relative;
+  display: inline-block;
+
+  &--widget {
+    display: inline-block;
+    backface-visibility: hidden;
+    position: absolute;
+    left: 0;
+  }
+}