Form component example

Checkbox.js

import React from 'react'
import { FormControl, FormControlLabel } from 'material-ui/Form'
import { withStyles } from 'material-ui/styles'
import Checkbox from 'material-ui/Checkbox'

import styles from '../../config/styles'

const SwitchInput = ({
  classes,
  type,
  label,
  value,
  subtextComponent,
  handleChange,
}) => (
  <FormControl className={classes.formControl}>
    <FormControlLabel
      control={
        <Checkbox
          checked={value}
          onChange={(e, checked) => handleChange(checked)}
        />
      }
      label={label}
    />
    {subtextComponent}
  </FormControl>
)

export default withStyles(styles)(SwitchInput)

config.js

export default [
  [
    {
      key: 'title',
      label: 'Title',
      type: 'text',
      required: true,
    },
  ],
  [
    {
      key: 'description',
      label: 'Notes',
      type: 'textarea',
    },
  ],
  [
    {
      key: 'active',
      label: 'Active',
      type: 'checkbox',
    },
  ],
]

form.js

import React, { Component } from 'react'
import { withStyles } from 'material-ui/styles'
import Typography from 'material-ui/Typography'
import Divider from 'material-ui/Divider'
import { FormHelperText } from 'material-ui/Form'
import Grid from 'material-ui/Grid'
import PropTypes from 'prop-types'

import { getInputComponent } from '../components/formHelps'
import AvatarPicker from '../components/AvatarPicker'
import styles from '../config/styles'
import Actions from './../components/Actions'
import { validateUpdateObject } from './formHelps'

class EditForm extends Component {
  constructor(props) {
    super(props)
    this.state = { item: props.item }
  }

  componentDidMount() {
    if (this.props.activateOnLoad) {
      document.getElementsByTagName('input')[0].select()
    }
  }

  handleChange = name => e => {
    const value = e.target ? e.target.value : e

    this.setState({
      item: {
        ...this.state.item,
        ...{ [name]: value },
      },
    })
  }

  render() {
    if (!this.state.item) return null

    const { classes, config, titleKey, profile, noHeader } = this.props
    const { item } = this.state

    const title = item[titleKey || 'title']

    return (
      <form
        onSubmit={e => {
          e.preventDefault()

          const submitItem = this.state.item

          const flatConfig = config
            .reduce((a, b) => a.concat(b), [])
            .reduce((a, b) => a.concat(b), [])

          flatConfig.forEach(item => {
            if (['currency', 'number'].includes(item.type)) {
              if (typeof submitItem[item.key] === 'string') {
                submitItem[item.key] = submitItem[item.key].replace(',', '')
                submitItem[item.key] = parseFloat(submitItem[item.key])
                submitItem[item.key] = isNaN(submitItem[item.key])
                  ? ''
                  : submitItem[item.key]
              }
            }
          })

          const validation = validateUpdateObject(item, flatConfig)

          if (!validation.valid) {
            return this.props.actions.onError(validation.errors)
          }

          this.props.actions.onSubmit(submitItem)
        }}
      >
        <Grid container className={classes.root}>
          <div style={{ textAlign: 'center', width: '100%' }}>
            {noHeader ? null : (
              <Typography type="display1" gutterBottom>
                {title || '\u00a0'}
              </Typography>
            )}

            {profile ? (
              <AvatarPicker
                imageURL={item[profile.key]}
                altText={profile.alt}
                id="account-edit"
                basename={profile.basename}
                handler={(err, { size, imageURL }) => {
                  if (err) {
                    console.warn('Upload error', err)
                    return this.setState({
                      error: err.toString(),
                    })
                  }

                  if (size === 'thumb') {
                    profile.update(imageURL)

                    this.handleChange(profile.key)(imageURL)
                  }
                }}
              />
            ) : null}
          </div>

          {config.map(row =>
            row.map(({ type, key, subtext, ...props }) => {
              let colNum = 12 / row.length

              return (
                <Grid key={key} item xs={colNum}>
                  {getInputComponent(type, {
                    ...props,
                    ...{
                      handleChange: this.handleChange(key),
                      value: this.state.item[key],
                      subtextComponent: subtext ? (
                        <FormHelperText>{subtext}</FormHelperText>
                      ) : null,
                    },
                  })}
                </Grid>
              )
            })
          )}
          <Divider />
          <Actions {...this.props.actions} />
        </Grid>
      </form>
    )
  }
}

EditForm.propTypes = {
  classes: PropTypes.object.isRequired,
  config: PropTypes.arrayOf(PropTypes.array).isRequired,
  titleKey: PropTypes.string,
  profile: PropTypes.object,
  noHeader: PropTypes.bool,
  actions: PropTypes.shape({
    onSubmit: PropTypes.func.isRequired,
    onError: PropTypes.func.isRequired,
    onCancel: PropTypes.func,
    updateText: PropTypes.string,
  }).isRequired,
}

export default withStyles(styles)(EditForm)

Text.js

import React from 'react'
import { FormControl } from 'material-ui/Form'
import TextField from 'material-ui/TextField'
import { withStyles } from 'material-ui/styles'

import styles from '../../config/styles'

const Text = ({
  classes,
  type,
  label,
  value,
  subtextComponent,
  handleChange,
  multiline = false,
}) => (
  <FormControl className={classes.formControl}>
    <TextField
      label={label}
      margin="normal"
      value={value}
      onChange={handleChange}
      multiline={multiline}
    />
    {subtextComponent}
  </FormControl>
)

export default withStyles(styles)(Text)