#305: use ScrollMotion for ChangeEmail form

src/components/profile/changeEmail/ChangeEmail.js

@@ -3,13 +3,12 @@ import PropTypes from 'prop-types';
 
 import { FormattedMessage as Message } from 'react-intl';
 import Helmet from 'react-helmet';
-import { Motion, spring } from 'react-motion';
 
+import { ScrollMotion } from 'components/ui/motion';
 import { Input, Button, Form, FormModel, FormError } from 'components/ui/form';
 import { BackButton } from 'components/profile/ProfileForm';
 import styles from 'components/profile/profileForm.scss';
 import helpLinks from 'components/auth/helpLinks.scss';
-import MeasureHeight from 'components/MeasureHeight';
 import Stepper from 'components/ui/stepper';
 
 import changeEmail from './changeEmail.scss';
@@ -127,58 +126,26 @@ export default class ChangeEmail extends Component {
         const {activeStep, code} = this.state;
         const isCodeSpecified = !!this.props.code;
 
-        const activeStepHeight = this.state[`step${activeStep}Height`] || 0;
-
-        // a hack to disable height animation on first render
-        const isHeightMeasured = this.isHeightMeasured;
-        this.isHeightMeasured = isHeightMeasured || activeStepHeight > 0;
-
         return (
-            <Motion
+            <ScrollMotion activeStep={activeStep}>
-                style={{
+                {(new Array(STEPS_TOTAL)).fill(0).map((_, step) => {
-                    transform: spring(activeStep * 100, {stiffness: 500, damping: 50, precision: 0.5}),
+                    const form = this.props.stepForms[step];
-                    height: isHeightMeasured ? spring(activeStepHeight, {stiffness: 500, damping: 20, precision: 0.5}) : activeStepHeight
-                }}
-            >
-                {(interpolatingStyle) => (
-                    <div style={{
-                        overflow: 'hidden',
-                        height: `${interpolatingStyle.height}px`
-                    }}>
-                        <div className={changeEmail.stepForms} style={{
-                            WebkitTransform: `translateX(-${interpolatingStyle.transform}%)`,
-                            transform: `translateX(-${interpolatingStyle.transform}%)`
-                        }}>
-                            {(new Array(STEPS_TOTAL)).fill(0).map((_, step) => {
-                                const form = this.props.stepForms[step];
 
-                                return (
+                    return this[`renderStep${step}`]({
-                                    <MeasureHeight
+                        email,
-                                        className={changeEmail.stepForm}
+                        code,
-                                        onMeasure={this.onStepMeasure(step)}
+                        isCodeSpecified,
-                                        state={`${step}.${form.hasErrors()}.${this.props.lang}`}
+                        form,
-                                        key={step}
+                        isActiveStep: step === activeStep
-                                    >
+                    });
-                                        {this[`renderStep${step}`]({
+                })}
-                                            email,
+            </ScrollMotion>
-                                            code,
-                                            isCodeSpecified,
-                                            form,
-                                            isActiveStep: step === activeStep
-                                        })}
-                                    </MeasureHeight>
-                                );
-                            })}
-                        </div>
-                    </div>
-                )}
-            </Motion>
         );
     }
 
     renderStep0({email, form}) {
         return (
-            <div className={styles.formBody}>
+            <div key="step0" className={styles.formBody}>
                 <div className={styles.formRow}>
                     <p className={styles.description}>
                         <Message {...messages.currentAccountEmail} />
@@ -204,7 +171,7 @@ export default class ChangeEmail extends Component {
 
     renderStep1({email, form, code, isCodeSpecified, isActiveStep}) {
         return (
-            <div className={styles.formBody}>
+            <div key="step1" className={styles.formBody}>
                 <div className={styles.formRow}>
                     <p className={styles.description}>
                         <Message {...messages.enterInitializationCode} values={{
@@ -248,7 +215,7 @@ export default class ChangeEmail extends Component {
         const {newEmail} = this.state;
 
         return (
-            <div className={styles.formBody}>
+            <div key="step2" className={styles.formBody}>
                 <div className={styles.formRow}>
                     <p className={styles.description}>
                         {newEmail ? (

src/components/profile/changeEmail/changeEmail.scss

@@ -4,14 +4,3 @@
     overflow: hidden;
     line-height: 1.2;
 }
-
-.stepForms {
-    white-space: nowrap;
-}
-
-.stepForm {
-    display: inline-block;
-    white-space: normal;
-    vertical-align: top;
-    max-width: 100%;
-}