ElyBy-Mirror/accounts-frontend
1
0
Fork 0
mirror of https://github.com/elyby/accounts-frontend.git synced 2024-10-01 15:57:46 +05:30
Code Issues Packages Projects Releases Wiki Activity

update react-motion 0.3.x -> 0.4.x

Browse Source
This commit is contained in:
SleepWalker 2016-03-03 07:23:17 +02:00
parent 5b89184647
commit e66e66b157
2 changed files with 54 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -23,7 +23,7 @@
"react-height": "^2.0.3", "react-height": "^2.0.3",
"react-helmet": "^2.3.1", "react-helmet": "^2.3.1",
"react-intl": "=2.0.0-beta-2", "react-intl": "=2.0.0-beta-2",
"react-motion": "^0.3.1", "react-motion": "^0.4.0",
"react-redux": "^4.0.0", "react-redux": "^4.0.0",
"react-router": "^2.0.0", "react-router": "^2.0.0",
"react-router-redux": "^2.1.0", "react-router-redux": "^2.1.0",

113
src/components/auth/PanelTransition.jsx
View File

@ -13,9 +13,9 @@ import authFlow from 'services/authFlow';
import * as actions from './actions'; import * as actions from './actions';
const opacitySpringConfig = [300, 20]; const opacitySpringConfig = {stiffness: 300, damping: 20};
const transformSpringConfig = [500, 50]; const transformSpringConfig = {stiffness: 500, damping: 50};
const changeContextSpringConfig = [500, 20]; const changeContextSpringConfig = {stiffness: 500, damping: 20};
class PanelTransition extends Component { class PanelTransition extends Component {
static displayName = 'PanelTransition'; static displayName = 'PanelTransition';
@ -72,58 +72,54 @@ class PanelTransition extends Component {
return ( return (
<TransitionMotion <TransitionMotion
styles={{ styles={[
[path]: { {key: path, data: {Title, Body, Footer, Links, hasBackButton: Title.type.goBack}, style: {
Title,
Body,
Footer,
Links,
hasBackButton: Title.type.goBack,
transformSpring: spring(0, transformSpringConfig), transformSpring: spring(0, transformSpringConfig),
opacitySpring: spring(1, opacitySpringConfig) opacitySpring: spring(1, opacitySpringConfig)
}, }},
common: { {key: 'common', style: {
heightSpring: spring(forceHeight || height[path] || 0, transformSpringConfig), heightSpring: spring(forceHeight || height[path] || 0, transformSpringConfig),
switchContextHeightSpring: spring(forceHeight || contextHeight, changeContextSpringConfig) switchContextHeightSpring: spring(forceHeight || contextHeight, changeContextSpringConfig)
} }}
}} ]}
willEnter={this.willEnter} willEnter={this.willEnter}
willLeave={this.willLeave} willLeave={this.willLeave}
> >
{(items) => { {(items) => {
const keys = Object.keys(items).filter((key) => key !== 'common'); const panels = items.filter(({key}) => key !== 'common');
const common = items.filter(({key}) => key === 'common')[0];
const contentHeight = { const contentHeight = {
overflow: 'hidden', overflow: 'hidden',
height: forceHeight ? items.common.switchContextHeightSpring : 'auto' height: forceHeight ? common.switchContextHeightSpring : 'auto'
}; };
const bodyHeight = { const bodyHeight = {
position: 'relative', position: 'relative',
height: `${canAnimateHeight ? items.common.heightSpring : height[path]}px` height: `${canAnimateHeight ? common.style.heightSpring : height[path]}px`
}; };
return ( return (
<Form id={path} onSubmit={this.onFormSubmit} onInvalid={this.onFormInvalid}> <Form id={path} onSubmit={this.onFormSubmit} onInvalid={this.onFormInvalid}>
<Panel> <Panel>
<PanelHeader> <PanelHeader>
{keys.map((key) => this.getHeader(key, items[key]))} {panels.map((config) => this.getHeader(config))}
</PanelHeader> </PanelHeader>
<div style={contentHeight}> <div style={contentHeight}>
<ReactHeight onHeightReady={this.onUpdateContextHeight}> <ReactHeight onHeightReady={this.onUpdateContextHeight}>
<PanelBody> <PanelBody>
<div style={bodyHeight}> <div style={bodyHeight}>
{keys.map((key) => this.getBody(key, items[key]))} {panels.map((config) => this.getBody(config))}
</div> </div>
</PanelBody> </PanelBody>
<PanelFooter> <PanelFooter>
{keys.map((key) => this.getFooter(key, items[key]))} {panels.map((config) => this.getFooter(config))}
</PanelFooter> </PanelFooter>
</ReactHeight> </ReactHeight>
</div> </div>
</Panel> </Panel>
<div className={helpLinksStyles}> <div className={helpLinksStyles}>
{keys.map((key) => this.getLinks(key, items[key]))} {panels.map((config) => this.getLinks(config))}
</div> </div>
</Form> </Form>
); );
@ -140,21 +136,20 @@ class PanelTransition extends Component {
this.props.setError(errorMessage); this.props.setError(errorMessage);
}; };
willEnter = (key, styles) => this.getTransitionStyles(key, styles); willEnter = (config) => this.getTransitionStyles(config);
willLeave = (key, styles) => this.getTransitionStyles(key, styles, {isLeave: true}); willLeave = (config) => this.getTransitionStyles(config, {isLeave: true});
/** /**
* @param {string} key * @param {Object} config
* @param {Object} styles
* @param {Object} [options] * @param {Object} [options]
* @param {Object} [options.isLeave=false] - true, if this is a leave transition * @param {Object} [options.isLeave=false] - true, if this is a leave transition
* *
* @return {Object} * @return {Object}
*/ */
getTransitionStyles(key, styles, options = {}) { getTransitionStyles({key}, options = {}) {
var {isLeave = false} = options; const {isLeave = false} = options;
var map = { const map = {
'/login': -1, '/login': -1,
'/register': -1, '/register': -1,
'/password': 1, '/password': 1,
@ -163,13 +158,13 @@ class PanelTransition extends Component {
'/password-change': 1, '/password-change': 1,
'/forgot-password': 1 '/forgot-password': 1
}; };
var sign = map[key]; const sign = map[key];
const transform = sign * 100;
return { return {
...styles, transformSpring: isLeave ? spring(transform, transformSpringConfig) : transform,
pointerEvents: isLeave ? 'none' : 'auto', opacitySpring: isLeave ? spring(0, opacitySpringConfig) : 1
transformSpring: spring(sign * 100, transformSpringConfig),
opacitySpring: spring(isLeave ? 0 : 1, opacitySpringConfig)
}; };
} }
@ -213,23 +208,24 @@ class PanelTransition extends Component {
authFlow.goBack(); authFlow.goBack();
}; };
getHeader(key, props) { getHeader({key, style, data}) {
var {hasBackButton, transformSpring, Title} = props; const {Title, hasBackButton} = data;
const {transformSpring} = style;
var style = { style = {
...this.getDefaultTransitionStyles(props), ...this.getDefaultTransitionStyles(key, style),
opacity: 1 // reset default opacity: 1 // reset default
}; };
var scrollStyle = this.translate(transformSpring, 'Y'); const scrollStyle = this.translate(transformSpring, 'Y');
var sideScrollStyle = { const sideScrollStyle = {
position: 'relative', position: 'relative',
zIndex: 2, zIndex: 2,
...this.translate(-Math.abs(transformSpring)) ...this.translate(-Math.abs(transformSpring))
}; };
var backButton = ( const backButton = (
<button style={sideScrollStyle} type="button" onClick={this.onGoBack} className={panelStyles.headerControl}> <button style={sideScrollStyle} type="button" onClick={this.onGoBack} className={panelStyles.headerControl}>
<span className={icons.arrowLeft} /> <span className={icons.arrowLeft} />
</button> </button>
@ -245,21 +241,20 @@ class PanelTransition extends Component {
); );
} }
getBody(key, props) { getBody({key, style, data}) {
var {transformSpring, Body} = props; const {Body} = data;
var {direction} = this.state; const {transformSpring} = style;
const {direction} = this.state;
var transform = this.translate(transformSpring, direction); let transform = this.translate(transformSpring, direction);
let verticalOrigin = 'top';
var verticalOrigin = 'top';
if (direction === 'Y') { if (direction === 'Y') {
verticalOrigin = 'bottom'; verticalOrigin = 'bottom';
transform = {}; transform = {};
} }
var style = { style = {
...this.getDefaultTransitionStyles(props), ...this.getDefaultTransitionStyles(key, style),
top: 'auto', // reset default top: 'auto', // reset default
[verticalOrigin]: 0, [verticalOrigin]: 0,
...transform ...transform
@ -277,10 +272,10 @@ class PanelTransition extends Component {
); );
} }
getFooter(key, props) { getFooter({key, style, data}) {
var {Footer} = props; const {Footer} = data;
var style = this.getDefaultTransitionStyles(props); style = this.getDefaultTransitionStyles(key, style);
return ( return (
<div key={`footer${key}`} style={style}> <div key={`footer${key}`} style={style}>
@ -289,10 +284,10 @@ class PanelTransition extends Component {
); );
} }
getLinks(key, props) { getLinks({key, style, data}) {
var {Links} = props; const {Links} = data;
var style = this.getDefaultTransitionStyles(props); style = this.getDefaultTransitionStyles(key, style);
return ( return (
<div key={`links${key}`} style={style}> <div key={`links${key}`} style={style}>
@ -302,22 +297,20 @@ class PanelTransition extends Component {
} }
/** /**
* @param {string} key
* @param {Object} props * @param {Object} props
* @param {string} props.pointerEvents
* @param {number} props.opacitySpring * @param {number} props.opacitySpring
* *
* @return {Object} * @return {Object}
*/ */
getDefaultTransitionStyles(props) { getDefaultTransitionStyles(key, {opacitySpring}) {
var {pointerEvents, opacitySpring} = props;
return { return {
position: 'absolute', position: 'absolute',
top: 0, top: 0,
left: 0, left: 0,
width: '100%', width: '100%',
opacity: opacitySpring, opacity: opacitySpring,
pointerEvents pointerEvents: key === this.props.path ? 'auto' : 'none'
}; };
} }