Move MeasureHeight to the top level

src/components/MeasureHeight.jsx

@@ -0,0 +1,56 @@
+import React, { Component, PropTypes } from 'react';
+import ReactDOM from 'react-dom';
+
+/**
+ * MeasureHeight is a component that allows you to measure the height of elements wrapped.
+ *
+ * Each time the height changed, the `onMeasure` prop will be called.
+ * On each component update the `shouldMeasure` prop is being called and depending of
+ * the value returned will be decided whether to call `onMeasure`.
+ * By default `shouldMeasure` will compare the old and new values of the `state` prop.
+ * Both `shouldMeasure` and `state` can be used to reduce the amount of meausres, which
+ * will recude the count of forced reflows in browser.
+ *
+ * Usage:
+ * <MeasureHeight
+ *     state={theValueToInvalidateCurrentMeasure}
+ *     onMeasure={this.onUpdateContextHeight}
+ * >
+ *     <div>some content here</div>
+ *     <div>which may be multiple children</div>
+ * </MeasureHeight>
+ */
+
+export default class MeasureHeight extends Component {
+    static displayName = 'MeasureHeight';
+    static propTypes = {
+        shouldMeasure: PropTypes.func,
+        onMeasure: PropTypes.func,
+        state: PropTypes.any
+    };
+
+    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 <div {...this.props} />;
+    }
+
+    measure() {
+        this.props.onMeasure(this.el.offsetHeight);
+    }
+}

src/components/auth/MeasureHeight.js

@@ -1,35 +0,0 @@
-import React, { Component, PropTypes } from 'react';
-import ReactDOM from 'react-dom';
-
-export default class MeasureHeight extends Component {
-    static displayName = 'MeasureHeight';
-    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 <div {...this.props} />;
-    }
-
-    measure() {
-        this.props.onMeasure(this.el.offsetHeight);
-    }
-}

src/components/auth/PanelTransition.jsx

@@ -5,6 +5,7 @@ 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';
@@ -12,7 +13,6 @@ 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, precision: 0.5};