simple form based react material ui

1import React from 'react'
2import { Field, reduxForm } from 'redux-form'
3import TextField from '@material-ui/core/TextField'
4import Checkbox from '@material-ui/core/Checkbox'
5import FormControlLabel from '@material-ui/core/FormControlLabel'
6import FormControl from '@material-ui/core/FormControl'
7import Select from '@material-ui/core/Select'
8import InputLabel from '@material-ui/core/InputLabel'
9import FormHelperText from '@material-ui/core/FormHelperText'
10import Radio from '@material-ui/core/Radio'
11import RadioGroup from '@material-ui/core/RadioGroup'
12import asyncValidate from './asyncValidate'
13
14const validate = values => {
15  const errors = {}
16  const requiredFields = [
17    'firstName',
18    'lastName',
19    'email',
20    'favoriteColor',
21    'notes'
22  ]
23  requiredFields.forEach(field => {
24    if (!values[field]) {
25      errors[field] = 'Required'
26    }
27  })
28  if (
29    values.email &&
30    !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)
31  ) {
32    errors.email = 'Invalid email address'
33  }
34  return errors
35}
36
37const renderTextField = ({
38  label,
39  input,
40  meta: { touched, invalid, error },
41  ...custom
42}) => (
43  <TextField
44    label={label}
45    placeholder={label}
46    error={touched && invalid}
47    helperText={touched && error}
48    {...input}
49    {...custom}
50  />
51)
52
53const renderCheckbox = ({ input, label }) => (
54  <div>
55    <FormControlLabel
56      control={
57        <Checkbox
58          checked={input.value ? true : false}
59          onChange={input.onChange}
60        />
61      }
62      label={label}
63    />
64  </div>
65)
66
67const radioButton = ({ input, ...rest }) => (
68  <FormControl>
69    <RadioGroup {...input} {...rest}>
70      <FormControlLabel value="female" control={<Radio />} label="Female" />
71      <FormControlLabel value="male" control={<Radio />} label="Male" />
72      <FormControlLabel value="other" control={<Radio />} label="Other" />
73    </RadioGroup>
74  </FormControl>
75)
76
77const renderFromHelper = ({ touched, error }) => {
78  if (!(touched && error)) {
79    return
80  } else {
81    return <FormHelperText>{touched && error}</FormHelperText>
82  }
83}
84
85const renderSelectField = ({
86  input,
87  label,
88  meta: { touched, error },
89  children,
90  ...custom
91}) => (
92  <FormControl error={touched && error}>
93    <InputLabel htmlFor="age-native-simple">Age</InputLabel>
94    <Select
95      native
96      {...input}
97      {...custom}
98      inputProps={{
99        name: 'age',
100        id: 'age-native-simple'
101      }}
102    >
103      {children}
104    </Select>
105    {renderFromHelper({ touched, error })}
106  </FormControl>
107)
108
109const MaterialUiForm = props => {
110  const { handleSubmit, pristine, reset, submitting, classes } = props
111  return (
112    <form onSubmit={handleSubmit}>
113      <div>
114        <Field
115          name="firstName"
116          component={renderTextField}
117          label="First Name"
118        />
119      </div>
120      <div>
121        <Field name="lastName" component={renderTextField} label="Last Name" />
122      </div>
123      <div>
124        <Field name="email" component={renderTextField} label="Email" />
125      </div>
126      <div>
127        <Field name="sex" component={radioButton}>
128          <Radio value="male" label="male" />
129          <Radio value="female" label="female" />
130        </Field>
131      </div>
132      <div>
133        <Field
134          classes={classes}
135          name="favoriteColor"
136          component={renderSelectField}
137          label="Favorite Color"
138        >
139          <option value="" />
140          <option value={'ff0000'}>Red</option>
141          <option value={'00ff00'}>Green</option>
142          <option value={'0000ff'}>Blue</option>
143        </Field>
144      </div>
145      <div>
146        <Field name="employed" component={renderCheckbox} label="Employed" />
147      </div>
148      <div />
149      <div>
150        <Field
151          name="notes"
152          component={renderTextField}
153          label="Notes"
154          multiline
155          rowsMax="4"
156          margin="normal"
157        />
158      </div>
159      <div>
160        <button type="submit" disabled={pristine || submitting}>
161          Submit
162        </button>
163        <button type="button" disabled={pristine || submitting} onClick={reset}>
164          Clear Values
165        </button>
166      </div>
167    </form>
168  )
169}
170
171export default reduxForm({
172  form: 'MaterialUiForm', // a unique identifier for this form
173  validate,
174  asyncValidate
175})(MaterialUiForm)
176

1const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
2
3const asyncValidate = (values /*, dispatch */) => {
4  return sleep(1000).then(() => {
5    // simulate server latency
6    if (['foo@foo.com', 'bar@bar.com'].includes(values.email)) {
7      // eslint-disable-next-line no-throw-literal
8      throw { email: 'Email already Exists' }
9    }
10  })
11}
12
13export default asyncValidate
14