deighton-ar/website/src/Users/UserForm.js

import React from 'react'
import PropTypes from 'prop-types'
import autobind from 'autobind-decorator'
import { regExpPattern } from 'regexp-pattern'
import { api } from 'src/API'
import { Row, Column, BoundInput, BoundButton, BoundCheckbox, BoundEmailIcon, DropdownList } from 'ui'
import { FormBinder } from 'react-form-binder'
import { sizeInfo } from 'ui/style'

export class UserForm extends React.Component {
  static propTypes = {
    user: PropTypes.object,
    onSave: PropTypes.func,
    onRemove: PropTypes.func,
    onModifiedChanged: PropTypes.func,
    onChangeEmail: PropTypes.func,
    onResendEmail: PropTypes.func
  }

  static bindings = {
    email: {
      isValid: (r, v) => (regExpPattern.email.test(v)),
      isDisabled: (r) => (r._id)
    },
    emailValidated: {
      initValue: false,
      isDisabled: (r) => (!r._id)
    },
    changeEmail: {
      noValue: true,
      isDisabled: (r) => (!r._id)
    },
    resendEmail: {
      noValue: true,
      isDisabled: (r) => (!r._id || !!r.getFieldValue('emailValidated'))
    },
    firstName: {
      isValid: (r, v) => (v !== '')
    },
    lastName: {
      isValid: (r, v) => (v !== '')
    },
    administrator: {
      isValid: (r, v) => true,
      initValue: false,
      isDisabled: (r) => (api.loggedInUser._id === r._id), // Adding a new user
      alwaysGet: true,
    },
    remove: {
      noValue: true,
      isVisible: (r) => (r._id),
      isDisabled: (r) => (api.loggedInUser._id === r._id)
    },
    reset: {
      noValue: true,
      isDisabled: (r) => {
        return !r.anyModified
      }
    },
    submit: {
      noValue: true,
      isDisabled: (r) => (!r.anyModified || !r.allValid),
    },
  }

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

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

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

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

    if (obj) {
      this.props.onSave(obj)
    }
  }

  @autobind
  handleReset() {
    const { user, onModifiedChanged } = this.props

    this.setState({ binder: new FormBinder(user, UserForm.bindings, onModifiedChanged) })

    if (onModifiedChanged) {
      onModifiedChanged(false)
    }
  }

  @autobind
  handleChangeEmail() {
    this.props.onChangeEmail()
  }

  @autobind
  handleResendEmail() {
    this.props.onResendEmail()
  }

  render() {
    const { binder } = this.state
    const teams = [
      { id: 1, name: 'Sign of the Times' },
      { id: 2, name: 'Trash Monsters' },
      { id: 3, name: 'The Bigger Picker Uppers' },
      { id: 4, name: 'Carcass Masters' },
      { id: 5, name: 'Dust Bunnies' },
      { id: 6, name: 'Pavement Busters' },
      { id: 7, name: 'Don\'t Hug That Tree' },
      { id: 8, name: 'Broken Swingers' },
    ]

    return (
      <form style={{ width: '100%', height: '100%', overflow: 'scroll' }} id='userForm' onSubmit={this.handleSubmit}>
        <Column>
          <Column.Item height={sizeInfo.formColumnSpacing} />
          <Row>
            <Row.Item width={sizeInfo.formRowSpacing} />
            <Row.Item grow>
              <Column.Item>
                <Column>
                  <Column.Item>
                    <Row>
                      <Row.Item grow>
                        <BoundInput label='First Name' name='firstName' message='Must not be empty' binder={binder} />
                      </Row.Item>
                      <Row.Item width={sizeInfo.formRowSpacing} />
                      <Row.Item grow>
                        <BoundInput label='Last Name' name='lastName' binder={binder} />
                      </Row.Item>
                    </Row>
                  </Column.Item>
                  <Column.Item>
                    <Row>
                      <Row.Item grow>
                        <BoundInput label='Email' name='email' message='Must be a valid email address. Required.' binder={binder} />
                      </Row.Item>
                      <Row.Item width={sizeInfo.formRowSpacing} />
                      <Row.Item>
                        <BoundEmailIcon name='emailValidated' binder={binder} />
                      </Row.Item>
                    </Row>
                  </Column.Item>
                  <Column.Item>
                    <DropdownList items={teams} render={(item) => (
                      <DropdownList.Item key={item.id} style={{ paddingLeft: 8 }}>
                        <DropdownList.Text>{item.name}</DropdownList.Text>
                      </DropdownList.Item>
                    )} />
                  </Column.Item>
                  <Column.Item height={sizeInfo.formColumnSpacing} />
                  <Column.Item minHeight={sizeInfo.buttonHeight}>
                    <Row>
                      <Row.Item>
                        <BoundButton text='Change Email' name='changeEmail' binder={binder}
                          width={sizeInfo.buttonWideWidth} onClick={this.handleChangeEmail} />
                      </Row.Item>
                      <Row.Item grow />
                      <Row.Item>
                        <BoundButton text='Resend Confirmation Email' name='resendEmail' binder={binder}
                          width={sizeInfo.buttonWideWidth} onClick={this.handleResendEmail} />
                      </Row.Item>
                    </Row>
                  </Column.Item>
                  <Column.Item height={sizeInfo.formColumnSpacing} />
                  <Column.Item>
                    <Row>
                      <Row.Item>
                        <BoundCheckbox label={'Administrator'} name='administrator' binder={this.state.binder} />
                      </Row.Item>
                      <Row.Item grow />
                    </Row>
                  </Column.Item>
                  <Column.Item height={sizeInfo.formColumnSpacing} />
                  <Column.Item minHeight={sizeInfo.buttonHeight}>
                    <Row>
                      <Row.Item>
                        <BoundButton text='Reset' name='reset' binder={binder} onClick={this.handleReset} />
                      </Row.Item>
                      <Row.Item grow />
                      <Row.Item>
                        <BoundButton text='Remove' name='remove' binder={binder} onClick={this.props.onRemove} />
                      </Row.Item>
                      <Row.Item width={sizeInfo.formRowSpacing} />
                      <Row.Item>
                        <BoundButton submit='userForm' text={binder._id ? 'Save' : 'Add'} name='submit' binder={binder} />
                      </Row.Item>
                    </Row>
                  </Column.Item>
                </Column>
              </Column.Item>
            </Row.Item>
            <Row.Item width={sizeInfo.formRowSpacing} />
          </Row>
          <Column.Item height={sizeInfo.formColumnSpacing} />
        </Column>
      </form>
    )
  }
}