v3.0.0 - compat with React 15.2 and Redux-Form 6rc3

erikras · Jul 6, 2016 · 0402232 · 0402232
1 parent a4c5892
commit 0402232
Show file tree

Hide file tree

Showing 15 changed files with 113 additions and 69 deletions.
diff --git a/example/package.json b/example/package.json
@@ -15,12 +15,12 @@
     "markdown-loader": "^0.1.7",
     "material-ui": "^0.15.0",
     "raw-loader": "^0.5.1",
-    "react": "^15.0.0-rc.2",
-    "react-dom": "^15.0.0-rc.2",
+    "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-alpha.15",
+    "redux-form": "6.0.0-rc.3",
     "redux-form-material-ui": "file:../",
     "redux-form-website-template": "0.0.29"
   },

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "redux-form-material-ui",
-  "version": "2.2.0",
+  "version": "3.0.0",
   "description": "An adapter between Redux Form and Material UI components",
   "main": "./lib/index.js",
   "jsnext:main": "./src/index.js",
@@ -59,14 +59,15 @@
     "mocha-lcov-reporter": "^1.1.0",
     "react": "^15.1.0",
     "react-addons-test-utils": "^15.1.0",
-    "react-dom": "^15.1.0",
+    "react-dom": "^15.2.0",
     "react-tap-event-plugin": "^1.0.0",
     "rimraf": "^2.5.2",
     "webpack": "^1.12.13"
   },
   "peerDependencies": {
     "material-ui": "^0.15.0",
-    "react": "^15.0.0"
+    "react": "^15.2.0",
+    "redux-form": "^6.0.0-rc.3"
   },
   "npmName": "redux-form-material-ui",
   "npmFileMap": [

diff --git a/src/Checkbox.js b/src/Checkbox.js
@@ -3,8 +3,8 @@ import createComponent from './createComponent'
 
 export default createComponent(
   Checkbox,
-  ({ onChange, value, ...props }) => ({
-    ...props,
+  ({ input: { onChange, value, ...inputProps } }) => ({
+    ...inputProps,
     checked: value ? true : false,
     onCheck: onChange
   })

diff --git a/src/DatePicker.js b/src/DatePicker.js
@@ -3,8 +3,8 @@ import createComponent from './createComponent'
 
 export default createComponent(
   DatePicker,
-  ({ onChange, ...props }) => ({
-    ...props,
+  ({ input: { onChange, ...inputProps } }) => ({
+    ...inputProps,
     onChange: (event, value) => onChange(value)
   })
 )
diff --git a/src/SelectField.js b/src/SelectField.js
@@ -4,7 +4,8 @@ import mapError from './mapError'
 
 export default createComponent(
   SelectField,
-  ({ onChange, ...props }) => ({
+  ({ input: { onChange, ...inputProps }, ...props }) => ({
     ...mapError(props),
+    ...inputProps,
     onChange: (event, index, value) => onChange(value)
   }))
diff --git a/src/Slider.js b/src/Slider.js
@@ -4,9 +4,9 @@ import mapError from './mapError'
 
 export default createComponent(
   Slider,
-  ({ onDragStart, ...props }) =>  // eslint-disable-line no-unused-vars
+  ({ input: { onDragStart, ...inputProps }, ...props }) =>  // eslint-disable-line no-unused-vars
     ({
-      ...mapError(props, 'error'),
-      onChange: (event, value) => props.onChange(value)
+      ...mapError({ ...props, input: inputProps }, 'error'),
+      onChange: (event, value) => inputProps.onChange(value)
     })
 )
diff --git a/src/Toggle.js b/src/Toggle.js
@@ -3,7 +3,7 @@ import createComponent from './createComponent'
 
 export default createComponent(
   Toggle,
-  ({ onChange, value, ...props }) => ({
+  ({ input: { onChange, value, ...props } }) => ({
     ...props,
     toggled: value ? true : false,
     onToggle: onChange

diff --git a/src/__tests__/Checkbox.spec.js b/src/__tests__/Checkbox.spec.js
@@ -17,25 +17,29 @@ describe('Checkbox', () => {
 
   it('renders an unchecked Checkbox', () => {
     expect(new ReduxFormMaterialUICheckbox({
-      name: 'myCheckbox',
-      onChange: noop
+      input: {
+        name: 'myCheckbox',
+        onChange: noop
+      }
     }).render())
       .toEqualJSX(<Checkbox name="myCheckbox" checked={false} onCheck={noop} ref="component"/>)
   })
 
   it('renders a checked Checkbox', () => {
     expect(new ReduxFormMaterialUICheckbox({
-      name: 'myCheckbox',
-      onChange: noop,
-      value: true
+      input: {
+        name: 'myCheckbox',
+        onChange: noop,
+        value: true
+      }
     }).render())
       .toEqualJSX(<Checkbox name="myCheckbox" checked={true} onCheck={noop} ref="component"/>)
   })
 
   it('provides getRenderedComponent', () => {
     const dom = TestUtils.renderIntoDocument(
       <MuiThemeProvider muiTheme={getMuiTheme()}>
-        <ReduxFormMaterialUICheckbox name="myCheckbox" onChange={noop}/>
+        <ReduxFormMaterialUICheckbox input={{ name: 'myCheckbox', onChange: noop }}/>
       </MuiThemeProvider>
     )
 

diff --git a/src/__tests__/DatePicker.spec.js b/src/__tests__/DatePicker.spec.js
@@ -17,18 +17,22 @@ describe('DatePicker', () => {
 
   it('renders a DatePicker with no value', () => {
     expect(new ReduxFormMaterialUIDatePicker({
-      name: 'myDatePicker',
-      onChange: noop
+      input: {
+        name: 'myDatePicker',
+        onChange: noop
+      }
     }).render())
       .toEqualJSX(<DatePicker name="myDatePicker" onChange={noop} ref="component"/>)
   })
 
   it('renders a DatePicker with a value', () => {
     const value = new Date('2016-01-01')
     expect(new ReduxFormMaterialUIDatePicker({
-      name: 'myDatePicker',
-      onChange: noop,
-      value
+      input: {
+        name: 'myDatePicker',
+        onChange: noop,
+        value
+      }
     }).render())
       .toEqualJSX(<DatePicker name="myDatePicker" onChange={noop} value={value} ref="component"/>)
   })
@@ -40,7 +44,7 @@ describe('DatePicker', () => {
 
     const dom = TestUtils.renderIntoDocument(
         <MuiThemeProvider muiTheme={getMuiTheme()}>
-          <ReduxFormMaterialUIDatePicker name="myDatePicker" onChange={onChange} value={first}/>
+          <ReduxFormMaterialUIDatePicker input={{ name: 'myDatePicker', onChange, value: first }}/>
         </MuiThemeProvider>
       )
 
@@ -55,7 +59,7 @@ describe('DatePicker', () => {
   it('provides getRenderedComponent', () => {
     const dom = TestUtils.renderIntoDocument(
       <MuiThemeProvider muiTheme={getMuiTheme()}>
-        <ReduxFormMaterialUIDatePicker name="myDatePicker" onChange={noop}/>
+        <ReduxFormMaterialUIDatePicker input={{ name: 'myDatePicker', onChange: noop }}/>
       </MuiThemeProvider>
     )
 

diff --git a/src/__tests__/RadioButtonGroup.spec.js b/src/__tests__/RadioButtonGroup.spec.js
@@ -17,29 +17,36 @@ describe('RadioButtonGroup', () => {
 
   it('renders a RadioButtonGroup', () => {
     expect(new ReduxFormMaterialUIRadioButtonGroup({
-      name: 'myRadio',
-      value: 'Foo'
+      input: {
+        name: 'myRadio',
+        value: 'Foo'
+      }
     }).render())
       .toEqualJSX(<RadioButtonGroup name="myRadio" value="Foo" ref="component"/>)
   })
 
   it('renders a RadioButtonGroup with no error when not touched', () => {
     expect(new ReduxFormMaterialUIRadioButtonGroup({
-      name: 'myRadio',
-      value: 'Foo',
+      input: {
+        name: 'myRadio',
+        value: 'Foo'
+      },
       error: 'FooError'
     }).render())
       .toEqualJSX(<RadioButtonGroup name="myRadio" value="Foo" ref="component"/>)
   })
 
   it('renders a RadioButtonGroup with an error', () => {
     expect(new ReduxFormMaterialUIRadioButtonGroup({
-      name: 'myRadio',
-      value: 'Foo',
+      input: {
+        name: 'myRadio',
+        value: 'Foo'
+      },
       error: 'FooError',
       touched: true
     }).render())
-      .toEqualJSX(<RadioButtonGroup name="myRadio" value="Foo" errorText="FooError" ref="component"/>)
+      .toEqualJSX(<RadioButtonGroup name="myRadio" value="Foo" errorText="FooError"
+        ref="component"/>)
   })
 
   it('provides getRenderedComponent', () => {
@@ -49,7 +56,7 @@ describe('RadioButtonGroup', () => {
       </MuiThemeProvider>
     )
 
-    const element = 
+    const element =
       TestUtils.findRenderedComponentWithType(dom, ReduxFormMaterialUIRadioButtonGroup)
     expect(element.getRenderedComponent).toBeA('function')
     expect(element.getRenderedComponent()).toExist()

diff --git a/src/__tests__/SelectField.spec.js b/src/__tests__/SelectField.spec.js
@@ -18,37 +18,44 @@ describe('SelectField', () => {
 
   it('renders a SelectField', () => {
     expect(new ReduxFormMaterialUISelectField({
-      name: 'mySelect',
-      value: 'Foo'
+      input: {
+        name: 'mySelect',
+        value: 'Foo'
+      }
     }).render())
       .toEqualJSX(<SelectField name="mySelect" value="Foo" onChange={noop} ref="component"/>)
   })
 
   it('renders a SelectField with no error when not touched', () => {
     expect(new ReduxFormMaterialUISelectField({
-      name: 'mySelect',
-      value: 'Foo',
+      input: {
+        name: 'mySelect',
+        value: 'Foo'
+      },
       error: 'FooError'
     }).render())
       .toEqualJSX(<SelectField name="mySelect" value="Foo" onChange={noop} ref="component"/>)
   })
 
   it('renders a SelectField with an error', () => {
     expect(new ReduxFormMaterialUISelectField({
-      name: 'mySelect',
-      value: 'Foo',
+      input: {
+        name: 'mySelect',
+        value: 'Foo'
+      },
       error: 'FooError',
       touched: true
     }).render())
-      .toEqualJSX(<SelectField name="mySelect" value="Foo" errorText="FooError" onChange={noop} ref="component"/>)
+      .toEqualJSX(<SelectField name="mySelect" value="Foo" errorText="FooError" onChange={noop}
+        ref="component"/>)
   })
 
   it('maps onChange properly', () => {
     const onChange = createSpy()
 
     const dom = TestUtils.renderIntoDocument(
       <MuiThemeProvider muiTheme={getMuiTheme()}>
-        <ReduxFormMaterialUISelectField name="mySelect" onChange={onChange} value="Foo"/>
+        <ReduxFormMaterialUISelectField name="mySelect" input={{ onChange, value: 'Foo' }}/>
       </MuiThemeProvider>
     )
 
@@ -63,7 +70,7 @@ describe('SelectField', () => {
   it('provides getRenderedComponent', () => {
     const dom = TestUtils.renderIntoDocument(
       <MuiThemeProvider muiTheme={getMuiTheme()}>
-        <ReduxFormMaterialUISelectField name="mySelect"/>
+        <ReduxFormMaterialUISelectField input={{ name: 'mySelect' }}/>
       </MuiThemeProvider>
     )
 

diff --git a/src/__tests__/Slider.spec.js b/src/__tests__/Slider.spec.js
@@ -18,37 +18,47 @@ describe('Slider', () => {
 
   it('renders a Slider', () => {
     expect(new ReduxFormMaterialUISlider({
-      name: 'mySlider',
-      value: 0.5
+      input: {
+        name: 'mySlider',
+        value: 0.5,
+        onDragStart: noop
+      }
     }).render())
       .toEqualJSX(<Slider name="mySlider" value={0.5} onChange={noop} ref="component"/>)
   })
 
   it('renders a Slider with no error when not touched', () => {
     expect(new ReduxFormMaterialUISlider({
-      name: 'mySlider',
-      value: 0.5,
+      input: {
+        name: 'mySlider',
+        value: 0.5,
+        onDragStart: noop
+      },
       error: 'FooError'
     }).render())
       .toEqualJSX(<Slider name="mySlider" value={0.5} onChange={noop} ref="component"/>)
   })
 
   it('renders a Slider with an error', () => {
     expect(new ReduxFormMaterialUISlider({
-      name: 'mySlider',
-      value: 0.5,
+      input: {
+        name: 'mySlider',
+        value: 0.5,
+        onDragStart: noop
+      },
       error: 'FooError',
       touched: true
     }).render())
-      .toEqualJSX(<Slider name="mySlider" value={0.5} error="FooError" onChange={noop} ref="component"/>)
+      .toEqualJSX(<Slider name="mySlider" value={0.5} error="FooError" onChange={noop}
+        ref="component"/>)
   })
 
   it('maps onChange properly', () => {
     const onChange = createSpy()
 
     const dom = TestUtils.renderIntoDocument(
       <MuiThemeProvider muiTheme={getMuiTheme()}>
-        <ReduxFormMaterialUISlider name="mySlider" onChange={onChange} value={0.5}/>
+        <ReduxFormMaterialUISlider name="mySlider" input={{ onChange, value: 0.5 }}/>
       </MuiThemeProvider>
     )
 
@@ -63,7 +73,7 @@ describe('Slider', () => {
   it('provides getRenderedComponent', () => {
     const dom = TestUtils.renderIntoDocument(
       <MuiThemeProvider muiTheme={getMuiTheme()}>
-        <ReduxFormMaterialUISlider name="mySlider"/>
+        <ReduxFormMaterialUISlider input={{ name: 'mySlider' }}/>
       </MuiThemeProvider>
     )
 

diff --git a/src/__tests__/TextField.spec.js b/src/__tests__/TextField.spec.js
@@ -17,25 +17,31 @@ describe('TextField', () => {
 
   it('renders a TextField', () => {
     expect(new ReduxFormMaterialUITextField({
-      name: 'myText',
-      value: 'Foo'
+      input: {
+        name: 'myText',
+        value: 'Foo'
+      }
     }).render())
       .toEqualJSX(<TextField name="myText" value="Foo" ref="component"/>)
   })
 
   it('renders a TextField with no error when not touched', () => {
     expect(new ReduxFormMaterialUITextField({
-      name: 'myText',
-      value: 'Foo',
+      input: {
+        name: 'myText',
+        value: 'Foo'
+      },
       error: 'FooError'
     }).render())
       .toEqualJSX(<TextField name="myText" value="Foo" ref="component"/>)
   })
 
   it('renders a TextField with an error', () => {
     expect(new ReduxFormMaterialUITextField({
-      name: 'myText',
-      value: 'Foo',
+      input: {
+        name: 'myText',
+        value: 'Foo'
+      },
       error: 'FooError',
       touched: true
     }).render())