created adapter config parameter and used redux-form-material-ui lib in Mat UI example

Author: erikras

material-ui/.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["react", "es2015"]
+  "presets": ["react", "es2015", "stage-2"]
 }

material-ui/package.json

@@ -21,6 +21,7 @@
     "react-tap-event-plugin": "^1.0.0",
     "redux": "^3.3.1",
     "redux-form": "file:../../",
+    "redux-form-material-ui": "^1.0.0",
     "redux-form-website-template": "0.0.29"
   },
   "devDependencies": {
@@ -29,6 +30,7 @@
     "babel-loader": "^6.2.0",
     "babel-preset-es2015": "^6.3.13",
     "babel-preset-react": "^6.3.13",
+    "babel-preset-stage-2": "^6.1.18",
     "cross-env": "^1.0.7",
     "eslint": "^1.6.0",
     "eslint-config-rackt": "^1.1.1",

material-ui/src/MaterialUi.md

@@ -13,12 +13,12 @@ Read more [here](../../../docs/api/Field.md#usage).
 The delay between when you click "Submit" and when the alert dialog pops up is intentional,
 to simulate server latency.
 
-### Field Adapters
+### Field Adapter
 
-Notice that we define simple functions, like `renderTextField`, `renderCheckbox`, and 
-`renderSelectField` to act as adapters between `redux-form` and the Material UI input 
-components. You would only need to define these in one place in your application and reuse
-them in each form.
+In this example, we are importing the 
+[`redux-form-material-ui`](https://github.com/erikras/redux-form-material-ui) adapter library, 
+which knows how to map the strings passed to `component` to the input components from the 
+Material UI library.
 
 ### How to use async validation in form:
 

material-ui/src/MaterialUiForm.js

@@ -1,11 +1,9 @@
 import React from 'react'
 import { Field, reduxForm } from 'redux-form'
-import TextField from 'material-ui/TextField'
-import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton'
-import Checkbox from 'material-ui/Checkbox'
-import SelectField from 'material-ui/SelectField'
+import { RadioButton } from 'material-ui/RadioButton'
 import MenuItem from 'material-ui/MenuItem'
 import asyncValidate from './asyncValidate'
+import adapter from 'redux-form-material-ui'
 
 const validate = values => {
   const errors = {}
@@ -21,71 +19,74 @@ const validate = values => {
   return errors
 }
 
-const renderTextField = props => (
-  <TextField hintText={props.label}
-    floatingLabelText={props.label}
-    errorText={props.touched && props.error}
-    {...props}
-  />
-)
-
-const renderCheckbox = props => (
-  <Checkbox label={props.label}
-    checked={props.value ? true : false}
-    onCheck={props.onChange}/>
-)
-
-const renderSelectField = props => (
-  <SelectField
-    floatingLabelText={props.label}
-    errorText={props.touched && props.error}
-    {...props}
-    onChange={(event, index, value) => props.onChange(value)}>
-  </SelectField>
-)
-
 const MaterialUiForm = props => {
   const { handleSubmit, pristine, reset, submitting } = props
   return (
     <form onSubmit={handleSubmit}>
       <div>
-        <Field name="firstName" component={renderTextField} label="First Name"/>
+        <Field name="firstName"
+          component="TextField"
+          hintText="First Name"
+          floatingLabelText="First Name"/>
       </div>
       <div>
-        <Field name="lastName" component={renderTextField} label="Last Name"/>
+        <Field
+          name="lastName"
+          component="TextField"
+          hintText="Last Name"
+          floatingLabelText="Last Name"/>
       </div>
       <div>
-        <Field name="email" component={renderTextField} label="Email"/>
+        <Field
+          name="email"
+          component="TextField"
+          hintText="Email"
+          floatingLabelText="Email"/>
       </div>
       <div>
-        <Field name="sex" component={RadioButtonGroup}>
-          <RadioButton value="male" label="male"/>
-          <RadioButton value="female" label="female"/>
+        <Field name="sex" component="RadioButtonGroup">
+          <RadioButton value="male" label="Male"/>
+          <RadioButton value="female" label="Female"/>
         </Field>
       </div>
       <div>
-        <Field name="favoriteColor" component={renderSelectField} label="Favorite Color">
+        <Field
+          name="favoriteColor"
+          component="SelectField"
+          hintText="Favorite Color"
+          floatingLabelText="Favorite Color">
           <MenuItem value={'ff0000'} primaryText="Red"/>
           <MenuItem value={'00ff00'} primaryText="Green"/>
           <MenuItem value={'0000ff'} primaryText="Blue"/>
         </Field>
       </div>
       <div>
-        <Field name="employed" component={renderCheckbox} label="Employed"/>
+        <Field name="employed" component="Checkbox" label="Employed"/>
+      </div>
+      <div>
+        <Field name="married" component="Toggle" label="Married" labelPosition="right"/>
       </div>
       <div>
-        <Field name="notes" component={renderTextField} label="Notes" multiLine={true} rows={2}/>
+        <Field
+          name="notes"
+          component="TextField"
+          hintText="Notes"
+          floatingLabelText="Notes"
+          multiLine={true}
+          rows={2}/>
       </div>
       <div>
         <button type="submit" disabled={pristine || submitting}>Submit</button>
-        <button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
+        <button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values
+        </button>
       </div>
     </form>
   )
 }
 
 export default reduxForm({
   form: 'MaterialUiForm',  // a unique identifier for this form
+  adapter,
   validate,
   asyncValidate
 })(MaterialUiForm)