deighton-ar/website/src/Profile/ProfileForm.js

import React from "react"
import PropTypes from "prop-types"
import { Column, Row, Box, Button, BoundInput, BoundButton } from "ui"
import { sizeInfo, colorInfo } from "ui/style"
import { FormBinder } from "react-form-binder"
import autobind from "autobind-decorator"

export class ProfileForm extends React.Component {
  static propTypes = {
    user: PropTypes.object.isRequired,
    onSaved: PropTypes.func.isRequired,
    onModifiedChanged: PropTypes.func,
    onChangePassword: PropTypes.func,
    onChangeEmail: PropTypes.func,
  }

  static bindings = {
    email: {
      isValid: (r, v) => v !== "",
      isDisabled: (r) => !!r._id,
    },
    firstName: {
      isValid: (r, v) => v !== "",
    },
    lastName: {
      isValid: (r, v) => v !== "",
    },
    save: {
      noValue: true,
      isDisabled: (r) => !r.anyModified || !r.allValid,
    },
  }

  constructor(props) {
    super(props)
    this.state = {
      binder: new FormBinder(
        this.props.user,
        ProfileForm.bindings,
        this.props.onModifiedChanged
      ),
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.user !== this.props.user) {
      this.setState({
        binder: new FormBinder(
          nextProps.user,
          ProfileForm.bindings,
          nextProps.onModifiedChanged
        ),
      })
    }
  }

  @autobind
  handleSubmit(e) {
    e.preventDefault()

    let obj = this.state.binder.getValues()

    if (obj && this.props.onSaved) {
      this.props.onSaved(obj)
    }
  }

  @autobind
  handleChangeEmail() {
    this.props.onChangeEmail(this.state.binder.getBindingValue("email"))
  }

  render() {
    const { binder } = this.state

    return (
      <form onSubmit={this.handleSubmit} id="profileForm">
        <Box
          border={{
            width: sizeInfo.headerBorderWidth,
            color: colorInfo.headerBorder,
          }}
          radius={sizeInfo.formBoxRadius}>
          <Row>
            <Row.Item width={sizeInfo.formRowSpacing} />
            <Row.Item grow>
              <Column>
                <Column.Item height={sizeInfo.formColumnSpacing} />
                <Column.Item>
                  <BoundInput
                    label="First Name"
                    name="firstName"
                    message="First name is required"
                    binder={binder}
                  />
                </Column.Item>
                <Column.Item>
                  <BoundInput
                    label="Last Name"
                    name="lastName"
                    binder={binder}
                  />
                </Column.Item>
                <Column.Item>
                  <BoundInput
                    label="Email"
                    name="email"
                    message="Required. Must be a valid email address."
                    binder={binder}
                  />
                </Column.Item>
                <Column.Item height={sizeInfo.formColumnSpacing} />
                <Column.Item height={sizeInfo.buttonHeight}>
                  <Row>
                    <Row.Item>
                      <Button
                        text={"Change Email"}
                        label="&nbsp;"
                        width={sizeInfo.buttonWideWidth}
                        onClick={this.handleChangeEmail}
                      />
                    </Row.Item>
                    <Row.Item width={sizeInfo.formRowSpacing} />
                    <Row.Item>
                      <Button
                        text={"Change Password"}
                        label="&nbsp;"
                        width={sizeInfo.buttonWideWidth}
                        onClick={this.props.onChangePassword}
                      />
                    </Row.Item>
                    <Row.Item grow />
                    <Row.Item>
                      <BoundButton
                        submit="profileForm"
                        size="medium"
                        text="Save"
                        label="&nbsp;"
                        name="save"
                        binder={binder}
                      />
                    </Row.Item>
                  </Row>
                </Column.Item>
                <Column.Item height={sizeInfo.formColumnSpacing} />
              </Column>
            </Row.Item>
            <Row.Item width={sizeInfo.formRowSpacing} />
          </Row>
        </Box>
      </form>
    )
  }
}