v4.0.0 - compat with Redux-Form 6rc4

Author: erikras

example/package.json

@@ -13,16 +13,16 @@
     "html-loader": "^0.4.3",
     "json-loader": "^0.5.4",
     "markdown-loader": "^0.1.7",
-    "material-ui": "^0.15.0",
+    "material-ui": "^0.15.2",
     "raw-loader": "^0.5.1",
     "react": "^15.2.0",
     "react-dom": "^15.2.0",
     "react-redux": "^4.4.1",
     "react-tap-event-plugin": "^1.0.0",
     "redux": "^3.3.1",
-    "redux-form": "6.0.0-rc.3",
+    "redux-form": "6.0.0-rc.4",
     "redux-form-material-ui": "file:../",
-    "redux-form-website-template": "0.0.29"
+    "redux-form-website-template": "0.0.34"
   },
   "devDependencies": {
     "babel-core": "^6.3.15",

example/src/Form.js

@@ -14,7 +14,7 @@ import {
 
 const validate = values => {
   const errors = {}
-  const requiredFields = [ 'name', 'email', 'driver' ]
+  const requiredFields = [ 'name', 'email', 'driver', 'when' ]
   requiredFields.forEach(field => {
     if (!values[ field ]) {
       errors[ field ] = 'Required'
@@ -88,7 +88,11 @@ class Form extends Component {
           <Field name="peppers" component={Checkbox} label="Peppers"/>
         </div>
         <div>
-          <Field name="when" component={DatePicker} hintText="Day of delivery?"/>
+          <Field name="when"
+            component={DatePicker}
+            defaultValue={null} // DatePicker requires an object,
+                                // and redux-form defaults to ''
+            hintText="Day of delivery?"/>
         </div>
         <div>
           <Field

package.json

@@ -1,6 +1,6 @@
 {
   "name": "redux-form-material-ui",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "An adapter between Redux Form and Material UI components",
   "main": "./lib/index.js",
   "jsnext:main": "./src/index.js",
@@ -52,22 +52,21 @@
     "expect": "^1.14.0",
     "expect-jsx": "^2.5.1",
     "isparta": "^4.0.0",
-    "jsdom": "^9.3.0",
+    "jsdom": "^9.4.1",
     "lodash.noop": "^3.0.1",
-    "material-ui": "^0.15.0",
+    "material-ui": "^0.15.2",
     "mocha": "^2.4.5",
     "mocha-lcov-reporter": "^1.1.0",
-    "react": "^15.1.0",
-    "react-addons-test-utils": "^15.1.0",
-    "react-dom": "^15.2.0",
+    "react": "^15.3.0",
+    "react-addons-test-utils": "^15.3.0",
+    "react-dom": "^15.3.0",
     "react-tap-event-plugin": "^1.0.0",
     "rimraf": "^2.5.2",
     "webpack": "^1.12.13"
   },
   "peerDependencies": {
-    "material-ui": "^0.15.0",
     "react": "^15.2.0",
-    "redux-form": "^6.0.0-rc.3"
+    "redux-form": "^6.0.0-rc.4"
   },
   "npmName": "redux-form-material-ui",
   "npmFileMap": [

src/Checkbox.js

@@ -3,8 +3,17 @@ import createComponent from './createComponent'
 
 export default createComponent(
   Checkbox,
-  ({ input: { onChange, value, ...inputProps } }) => ({
+  ({
+    input: {
+      onChange,
+      value,
+      ...inputProps
+    },
+    meta, // eslint-disable-line no-unused-vars
+    ...props
+  }) => ({
     ...inputProps,
+    ...props,
     checked: value ? true : false,
     onCheck: onChange
   })

src/DatePicker.js

@@ -1,10 +1,19 @@
 import DatePicker from 'material-ui/DatePicker'
 import createComponent from './createComponent'
+import mapError from './mapError'
 
 export default createComponent(
   DatePicker,
-  ({ input: { onChange, ...inputProps } }) => ({
+  ({
+    input: {
+      onBlur, // eslint-disable-line no-unused-vars
+      onChange,
+      ...inputProps
+    },
+    ...props
+  }) => ({
     ...inputProps,
+    ...mapError(props),
     onChange: (event, value) => onChange(value)
   })
 )

src/Toggle.js

@@ -3,7 +3,16 @@ import createComponent from './createComponent'
 
 export default createComponent(
   Toggle,
-  ({ input: { onChange, value, ...props } }) => ({
+  ({
+    input: {
+      onChange,
+      value,
+      ...inputProps
+    },
+    meta, // eslint-disable-line no-unused-vars
+    ...props
+  }) => ({
+    ...inputProps,
     ...props,
     toggled: value ? true : false,
     onToggle: onChange

src/__tests__/DatePicker.spec.js

@@ -37,16 +37,32 @@ describe('DatePicker', () => {
       .toEqualJSX(<DatePicker name="myDatePicker" onChange={noop} value={value} ref="component"/>)
   })
 
+  it('renders a DatePicker with an error', () => {
+    const value = new Date('2016-01-01')
+    expect(new ReduxFormMaterialUIDatePicker({
+      input: {
+        name: 'myDatePicker',
+        value
+      },
+      meta: {
+        error: 'FooError',
+        touched: true
+      }
+    }).render())
+      .toEqualJSX(<DatePicker name="myDatePicker" value={value} errorText="FooError" onChange={noop}
+        ref="component"/>)
+  })
+
   it('maps onChange properly', () => {
     const onChange = createSpy()
     const first = new Date('2016-01-01')
     const second = new Date('2016-02-29')
 
     const dom = TestUtils.renderIntoDocument(
-        <MuiThemeProvider muiTheme={getMuiTheme()}>
-          <ReduxFormMaterialUIDatePicker input={{ name: 'myDatePicker', onChange, value: first }}/>
-        </MuiThemeProvider>
-      )
+      <MuiThemeProvider muiTheme={getMuiTheme()}>
+        <ReduxFormMaterialUIDatePicker input={{ name: 'myDatePicker', onChange, value: first }}/>
+      </MuiThemeProvider>
+    )
 
     const datePicker = TestUtils.findRenderedComponentWithType(dom, DatePicker)
     expect(onChange).toNotHaveBeenCalled()

src/__tests__/RadioButtonGroup.spec.js

@@ -31,7 +31,9 @@ describe('RadioButtonGroup', () => {
         name: 'myRadio',
         value: 'Foo'
       },
-      error: 'FooError'
+      meta: {
+        error: 'FooError'
+      }
     }).render())
       .toEqualJSX(<RadioButtonGroup name="myRadio" value="Foo" ref="component"/>)
   })
@@ -42,8 +44,10 @@ describe('RadioButtonGroup', () => {
         name: 'myRadio',
         value: 'Foo'
       },
-      error: 'FooError',
-      touched: true
+      meta: {
+        error: 'FooError',
+        touched: true
+      }
     }).render())
       .toEqualJSX(<RadioButtonGroup name="myRadio" value="Foo" errorText="FooError"
         ref="component"/>)

src/__tests__/SelectField.spec.js

@@ -32,7 +32,9 @@ describe('SelectField', () => {
         name: 'mySelect',
         value: 'Foo'
       },
-      error: 'FooError'
+      meta: {
+        error: 'FooError'
+      }
     }).render())
       .toEqualJSX(<SelectField name="mySelect" value="Foo" onChange={noop} ref="component"/>)
   })
@@ -43,8 +45,10 @@ describe('SelectField', () => {
         name: 'mySelect',
         value: 'Foo'
       },
-      error: 'FooError',
-      touched: true
+      meta: {
+        error: 'FooError',
+        touched: true
+      }
     }).render())
       .toEqualJSX(<SelectField name="mySelect" value="Foo" errorText="FooError" onChange={noop}
         ref="component"/>)

src/__tests__/Slider.spec.js

@@ -34,7 +34,9 @@ describe('Slider', () => {
         value: 0.5,
         onDragStart: noop
       },
-      error: 'FooError'
+      meta: {
+        error: 'FooError'
+      }
     }).render())
       .toEqualJSX(<Slider name="mySlider" value={0.5} onChange={noop} ref="component"/>)
   })
@@ -46,8 +48,10 @@ describe('Slider', () => {
         value: 0.5,
         onDragStart: noop
       },
-      error: 'FooError',
-      touched: true
+      meta: {
+        error: 'FooError',
+        touched: true
+      }
     }).render())
       .toEqualJSX(<Slider name="mySlider" value={0.5} error="FooError" onChange={noop}
         ref="component"/>)