From a17c70fcc1a38638db97c26cc59f66dae710c8f2 Mon Sep 17 00:00:00 2001 From: SleepWalker Date: Sun, 27 Mar 2016 10:52:00 +0300 Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=BE=D0=B2=D1=8B=D1=81=D0=B8=D0=BB=20fp?= =?UTF-8?q?s=20=D0=B0=D0=BD=D0=B8=D0=BC=D0=B0=D1=86=D0=B8=D0=B9=20=D0=BF?= =?UTF-8?q?=D0=B5=D1=80=D0=B5=D1=85=D0=BE=D0=B4=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 - src/components/auth/MeasureHeight.js | 34 +++++++++++++++++++++ src/components/auth/PanelTransition.jsx | 40 +++++++++++++++---------- webpack.config.js | 1 - 4 files changed, 59 insertions(+), 17 deletions(-) create mode 100644 src/components/auth/MeasureHeight.js diff --git a/package.json b/package.json index 268b202..dbdd018 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,6 @@ "intl-messageformat": "^1.1.0", "react": "^15.0.0-rc.2", "react-dom": "^15.0.0-rc.2", - "react-height": "^2.0.3", "react-helmet": "^2.3.1", "react-intl": "=v2.0.0-rc-1", "react-motion": "^0.4.0", diff --git a/src/components/auth/MeasureHeight.js b/src/components/auth/MeasureHeight.js new file mode 100644 index 0000000..abc3335 --- /dev/null +++ b/src/components/auth/MeasureHeight.js @@ -0,0 +1,34 @@ +import React, { Component, PropTypes } from 'react'; +import ReactDOM from 'react-dom'; + +export default class MeasureHeight extends Component { + static propTypes = { + shouldMeasure: PropTypes.func, + onMeasure: PropTypes.func + }; + + static defaultProps = { + shouldMeasure: (prevState, newState) => prevState !== newState, + onMeasure: () => null + }; + + componentDidMount() { + this.el = ReactDOM.findDOMNode(this); + + this.measure(); + } + + componentDidUpdate(prevProps) { + if (this.props.shouldMeasure(prevProps.state, this.props.state)) { + this.measure(); + } + } + + render() { + return
; + } + + measure() { + this.props.onMeasure(this.el.offsetHeight); + } +} diff --git a/src/components/auth/PanelTransition.jsx b/src/components/auth/PanelTransition.jsx index ca9eb0a..cd09751 100644 --- a/src/components/auth/PanelTransition.jsx +++ b/src/components/auth/PanelTransition.jsx @@ -2,7 +2,6 @@ import React, { Component, PropTypes } from 'react'; import { connect } from 'react-redux'; import { TransitionMotion, spring } from 'react-motion'; -import ReactHeight from 'react-height'; import { Panel, PanelBody, PanelFooter, PanelHeader } from 'components/ui/Panel'; import { Form } from 'components/ui/Form'; @@ -13,6 +12,7 @@ import authFlow from 'services/authFlow'; import { userShape } from 'components/user/User'; import * as actions from './actions'; +import MeasureHeight from './MeasureHeight'; const opacitySpringConfig = {stiffness: 300, damping: 20}; const transformSpringConfig = {stiffness: 500, damping: 50}; @@ -70,7 +70,6 @@ class PanelTransition extends Component { } state = { - height: {}, contextHeight: 0 }; @@ -98,10 +97,12 @@ class PanelTransition extends Component { } render() { - const {height, canAnimateHeight, contextHeight, forceHeight} = this.state; + const {canAnimateHeight, contextHeight, forceHeight} = this.state; const {path, Title, Body, Footer, Links} = this.props; + const formHeight = this.state[`formHeight${path}`] || 0; + if (this.props.children) { return this.props.children; } else if (!Title || !Body || !Footer || !Links) { @@ -116,7 +117,7 @@ class PanelTransition extends Component { opacitySpring: spring(1, opacitySpringConfig) }}, {key: 'common', style: { - heightSpring: spring(forceHeight || height[path] || 0, transformSpringConfig), + heightSpring: spring(forceHeight || formHeight, transformSpringConfig), switchContextHeightSpring: spring(forceHeight || contextHeight, changeContextSpringConfig) }} ]} @@ -134,7 +135,7 @@ class PanelTransition extends Component { const bodyHeight = { position: 'relative', - height: `${canAnimateHeight ? common.style.heightSpring : height[path]}px` + height: `${canAnimateHeight ? common.style.heightSpring : formHeight}px` }; return ( @@ -144,7 +145,10 @@ class PanelTransition extends Component { {panels.map((config) => this.getHeader(config))}
- +
{panels.map((config) => this.getBody(config))} @@ -153,7 +157,7 @@ class PanelTransition extends Component { {panels.map((config) => this.getFooter(config))} - +
@@ -223,15 +227,16 @@ class PanelTransition extends Component { return map[next]; } - onUpdateHeight = (height) => { - const canAnimateHeight = Object.keys(this.state.height).length > 1 || this.state.height[[this.props.path]]; + onUpdateHeight = (height, key) => { + const heightKey = `formHeight${key}`; + + // we need to skip first render, because there is no panel to make transition from + // const canAnimateHeight = Object.keys(this.state.height).length > 1 || this.state[heightKey]; + const canAnimateHeight = true; this.setState({ canAnimateHeight, - height: { - ...this.state.height, - [this.props.path]: height - } + [heightKey]: height }); }; @@ -300,13 +305,18 @@ class PanelTransition extends Component { }; return ( - + this.onUpdateHeight(height, key)} + > {React.cloneElement(Body, { ref: (body) => { this.body = body; } })} - + ); } diff --git a/webpack.config.js b/webpack.config.js index e096b7a..2cdcd30 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -53,7 +53,6 @@ var webpackConfig = { 'intl-messageformat', 'react', 'react-dom', - 'react-height', 'react-helmet', 'react-intl', 'react-motion',