tyler.durden
/
opensupports
mirror of https://github.com/opensupports/opensupports.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[Ivan Diaz] - Add Widget transition component

This commit is contained in:
Ivan Diaz 2015-10-10 17:36:00 -03:00
parent c0b88072bf
commit 8a05b33190
5 changed files with 110 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/app/main/main-home/main-home-page-login-widget.js
View File

@ -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'
};
},
getDefaultAnimation() {
return {
rotateY: -90
sideToShow: 'front'
};
},
render() {
return (
<Motion defaultStyle={this.getDefaultAnimation()} style={{ rotateY: (this.state.showed == 'login') ? spring(0, [100, 20]) : spring(180, [100, 20])}}>
{(animation) => {
return (
<div className="main-home-page--widget-container">
{this.renderLogin(animation)}
{this.renderPasswordRecovery(animation)}
</div>
)
}}
</Motion>
<WidgetTransition sideToShow={this.state.sideToShow} className="login-widget--container">
{this.renderLogin()}
{this.renderPasswordRecovery()}
</WidgetTransition>
);
},
renderLogin(variants) {
var loginStyle = {
transform: `rotateY(${(variants.rotateY) ? variants.rotateY: 0}deg)`
};
renderLogin() {
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) {
var passwordRecoveryStyle = {
transform: `rotateY(${-180+variants.rotateY}deg)`
};
renderPasswordRecovery() {
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'
});
}
});

7
src/app/main/main-home/main-home-page-login-widget.scss
View File

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

18
src/app/main/main-home/main-home-page.scss
View File

@ -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;
}
}

78
src/core-components/widget-transition.js Normal file
View File

@ -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;

11
src/core-components/widget-transition.scss Normal file
View File

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