gistfile1.txt

import React from 'react'
import PropTypes from 'prop-types'
import { Form } from 'react-final-form';

import RegisterLoginForm from '../RegisterLoginForm';
import RegisterPersonalDataForm from '../RegisterPersonalDataForm';
import RegisterAdditionalDataForm from '../RegisterAdditionalDataForm';
import RegisterSuccessForm from '../RegisterSuccessForm';

export default class RegisterForm extends React.Component {
  static propTypes = {
    onSubmit: PropTypes.func.isRequired
  }
  
  constructor(props: any) {
    super(props);
    interface StateProps {
      values: any,
      isAgreed: boolean,
    }

    this.state = {
      values: props.initialValues || {},
      isAgreed: false,
    }
  }
 
  /*
  validate = values => {
    return this.props.children.props.validate ? this.props.children.props.validate(values) : {}
  }*/
/*
  handleSubmit = values => {
    const { children, onSubmit } = this.props
    const { page } = this.state
    const isLastPage = page === React.Children.count(children) - 1
    if (isLastPage) {
      return onSubmit(values)
    } else {
      this.next(values)
    }
  }
*/
  render() {
    interface FormContent {
      [index: string]: React.ReactNode;
    }

    const currentForm = this.props.currentForm;

    const values = this.state.values;

    enum Step {
      LOGIN = 'login',
      PERSONAL = 'personal',
      ADDITIONAL = 'additional',
      SUCCESS = 'success',
    };
  
    const contents: FormContent = {
      [Step.LOGIN]: (
        <RegisterLoginForm isAgreed={this.state.isAgreed} setAgreed={() => {}} />
      ),
      [Step.PERSONAL]: <RegisterPersonalDataForm />,
      [Step.ADDITIONAL]: <RegisterAdditionalDataForm />,
      [Step.SUCCESS]: <RegisterSuccessForm />,
    };

    return (
      <Form
        initialValues={values}
        onSubmit={() => {}}
      >
        {({ handleSubmit, submitting, values }) => (
          <form onSubmit={handleSubmit}>
            {contents[currentForm]}
          </form>
        )}
      </Form>
    )
  }
}