import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { TransitionMotion, spring } from 'react-motion';
import { Panel, PanelBody, PanelFooter, PanelHeader } from 'components/ui/Panel';
import { Form } from 'components/ui/form';
import MeasureHeight from 'components/MeasureHeight';
import {helpLinks as helpLinksStyles} from 'components/auth/helpLinks.scss';
import panelStyles from 'components/ui/panel.scss';
import icons from 'components/ui/icons.scss';
import authFlow from 'services/authFlow';
import { userShape } from 'components/user/User';
import * as actions from './actions';
const opacitySpringConfig = {stiffness: 300, damping: 20};
const transformSpringConfig = {stiffness: 500, damping: 50, precision: 0.5};
const changeContextSpringConfig = {stiffness: 500, damping: 20, precision: 0.5};
class PanelTransition extends Component {
static displayName = 'PanelTransition';
static propTypes = {
// context props
auth: PropTypes.shape({
error: PropTypes.string,
isLoading: PropTypes.bool,
login: PropTypes.shape({
login: PropTypes.string,
password: PropTypes.string
})
}).isRequired,
user: userShape.isRequired,
setError: PropTypes.func.isRequired,
clearErrors: PropTypes.func.isRequired,
resolve: PropTypes.func.isRequired,
reject: PropTypes.func.isRequired,
// local props
Title: PropTypes.element,
Body: PropTypes.element,
Footer: PropTypes.element,
Links: PropTypes.element,
children: PropTypes.element
};
static childContextTypes = {
auth: PropTypes.shape({
error: PropTypes.string,
login: PropTypes.shape({
login: PropTypes.string,
password: PropTypes.string
})
}),
user: userShape,
clearErrors: PropTypes.func,
resolve: PropTypes.func,
reject: PropTypes.func
};
state = {
contextHeight: 0
};
getChildContext() {
return {
auth: this.props.auth,
user: this.props.user,
clearErrors: this.props.clearErrors,
resolve: this.props.resolve,
reject: this.props.reject
};
}
componentWillReceiveProps(nextProps) {
const nextPanel = nextProps.Body && nextProps.Body.type.panelId;
const previousPanel = this.props.Body && this.props.Body.type.panelId;
if (nextPanel !== previousPanel) {
const direction = this.getDirection(nextPanel, previousPanel);
const forceHeight = direction === 'Y' && nextPanel !== previousPanel ? 1 : 0;
this.props.clearErrors();
this.setState({
direction,
forceHeight
});
if (forceHeight) {
setTimeout(() => {
this.setState({forceHeight: 0});
}, 100);
}
}
}
render() {
const {contextHeight, forceHeight} = this.state;
const {Title, Body, Footer, Links} = this.props;
if (this.props.children) {
return this.props.children;
} else if (!Title || !Body || !Footer || !Links) {
throw new Error('Title, Body, Footer and Links are required');
}
const panelId = Body.type.panelId;
const hasGoBack = Body.type.hasGoBack;
const formHeight = this.state[`formHeight${panelId}`] || 0;
// a hack to disable height animation on first render
const isHeightMeasured = this.isHeightMeasured;
this.isHeightMeasured = isHeightMeasured || formHeight > 0;
return (