From 040223280d214735af42100d6d833baa8c21107a Mon Sep 17 00:00:00 2001 From: Erik Rasmussen Date: Wed, 6 Jul 2016 22:24:44 +0200 Subject: [PATCH] v3.0.0 - compat with React 15.2 and Redux-Form 6rc3 --- example/package.json | 6 +++--- package.json | 7 ++++--- src/Checkbox.js | 4 ++-- src/DatePicker.js | 4 ++-- src/SelectField.js | 3 ++- src/Slider.js | 6 +++--- src/Toggle.js | 2 +- src/__tests__/Checkbox.spec.js | 16 +++++++++------ src/__tests__/DatePicker.spec.js | 18 ++++++++++------- src/__tests__/RadioButtonGroup.spec.js | 23 +++++++++++++-------- src/__tests__/SelectField.spec.js | 25 ++++++++++++++--------- src/__tests__/Slider.spec.js | 28 +++++++++++++++++--------- src/__tests__/TextField.spec.js | 18 +++++++++++------ src/__tests__/Toggle.spec.js | 18 ++++++++++------- src/mapError.js | 4 ++-- 15 files changed, 113 insertions(+), 69 deletions(-) diff --git a/example/package.json b/example/package.json index 4986bf0..f27ad7a 100644 --- 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 index e49a6d4..e5f7542 100644 --- 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 index 792a0a8..649e9cc 100755 --- 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 index 7c05fa2..bc0a819 100755 --- 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 index 022af37..ea70e49 100755 --- 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 index c7be0d8..46cc8ad 100755 --- 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 index f621dd1..a51bf9a 100755 --- 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 index 47a69e3..3dca41b 100644 --- a/src/__tests__/Checkbox.spec.js +++ b/src/__tests__/Checkbox.spec.js @@ -17,17 +17,21 @@ describe('Checkbox', () => { it('renders an unchecked Checkbox', () => { expect(new ReduxFormMaterialUICheckbox({ - name: 'myCheckbox', - onChange: noop + input: { + name: 'myCheckbox', + onChange: noop + } }).render()) .toEqualJSX() }) it('renders a checked Checkbox', () => { expect(new ReduxFormMaterialUICheckbox({ - name: 'myCheckbox', - onChange: noop, - value: true + input: { + name: 'myCheckbox', + onChange: noop, + value: true + } }).render()) .toEqualJSX() }) @@ -35,7 +39,7 @@ describe('Checkbox', () => { it('provides getRenderedComponent', () => { const dom = TestUtils.renderIntoDocument( - + ) diff --git a/src/__tests__/DatePicker.spec.js b/src/__tests__/DatePicker.spec.js index 8bef5fd..c35aa93 100644 --- a/src/__tests__/DatePicker.spec.js +++ b/src/__tests__/DatePicker.spec.js @@ -17,8 +17,10 @@ describe('DatePicker', () => { it('renders a DatePicker with no value', () => { expect(new ReduxFormMaterialUIDatePicker({ - name: 'myDatePicker', - onChange: noop + input: { + name: 'myDatePicker', + onChange: noop + } }).render()) .toEqualJSX() }) @@ -26,9 +28,11 @@ describe('DatePicker', () => { 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() }) @@ -40,7 +44,7 @@ describe('DatePicker', () => { const dom = TestUtils.renderIntoDocument( - + ) @@ -55,7 +59,7 @@ describe('DatePicker', () => { it('provides getRenderedComponent', () => { const dom = TestUtils.renderIntoDocument( - + ) diff --git a/src/__tests__/RadioButtonGroup.spec.js b/src/__tests__/RadioButtonGroup.spec.js index 1dd1c0d..409c39a 100644 --- a/src/__tests__/RadioButtonGroup.spec.js +++ b/src/__tests__/RadioButtonGroup.spec.js @@ -17,16 +17,20 @@ describe('RadioButtonGroup', () => { it('renders a RadioButtonGroup', () => { expect(new ReduxFormMaterialUIRadioButtonGroup({ - name: 'myRadio', - value: 'Foo' + input: { + name: 'myRadio', + value: 'Foo' + } }).render()) .toEqualJSX() }) 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() @@ -34,12 +38,15 @@ describe('RadioButtonGroup', () => { 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() + .toEqualJSX() }) it('provides getRenderedComponent', () => { @@ -49,7 +56,7 @@ describe('RadioButtonGroup', () => { ) - 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 index 1d025a3..64b80c1 100644 --- a/src/__tests__/SelectField.spec.js +++ b/src/__tests__/SelectField.spec.js @@ -18,16 +18,20 @@ describe('SelectField', () => { it('renders a SelectField', () => { expect(new ReduxFormMaterialUISelectField({ - name: 'mySelect', - value: 'Foo' + input: { + name: 'mySelect', + value: 'Foo' + } }).render()) .toEqualJSX() }) 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() @@ -35,12 +39,15 @@ describe('SelectField', () => { 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() + .toEqualJSX() }) it('maps onChange properly', () => { @@ -48,7 +55,7 @@ describe('SelectField', () => { const dom = TestUtils.renderIntoDocument( - + ) @@ -63,7 +70,7 @@ describe('SelectField', () => { it('provides getRenderedComponent', () => { const dom = TestUtils.renderIntoDocument( - + ) diff --git a/src/__tests__/Slider.spec.js b/src/__tests__/Slider.spec.js index 2de40aa..66c045f 100644 --- a/src/__tests__/Slider.spec.js +++ b/src/__tests__/Slider.spec.js @@ -18,16 +18,22 @@ describe('Slider', () => { it('renders a Slider', () => { expect(new ReduxFormMaterialUISlider({ - name: 'mySlider', - value: 0.5 + input: { + name: 'mySlider', + value: 0.5, + onDragStart: noop + } }).render()) .toEqualJSX() }) 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() @@ -35,12 +41,16 @@ describe('Slider', () => { 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() + .toEqualJSX() }) it('maps onChange properly', () => { @@ -48,7 +58,7 @@ describe('Slider', () => { const dom = TestUtils.renderIntoDocument( - + ) @@ -63,7 +73,7 @@ describe('Slider', () => { it('provides getRenderedComponent', () => { const dom = TestUtils.renderIntoDocument( - + ) diff --git a/src/__tests__/TextField.spec.js b/src/__tests__/TextField.spec.js index 467fd3f..8d925bd 100644 --- a/src/__tests__/TextField.spec.js +++ b/src/__tests__/TextField.spec.js @@ -17,16 +17,20 @@ describe('TextField', () => { it('renders a TextField', () => { expect(new ReduxFormMaterialUITextField({ - name: 'myText', - value: 'Foo' + input: { + name: 'myText', + value: 'Foo' + } }).render()) .toEqualJSX() }) 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() @@ -34,8 +38,10 @@ describe('TextField', () => { it('renders a TextField with an error', () => { expect(new ReduxFormMaterialUITextField({ - name: 'myText', - value: 'Foo', + input: { + name: 'myText', + value: 'Foo' + }, error: 'FooError', touched: true }).render()) diff --git a/src/__tests__/Toggle.spec.js b/src/__tests__/Toggle.spec.js index 9a9a93a..1eeef02 100644 --- a/src/__tests__/Toggle.spec.js +++ b/src/__tests__/Toggle.spec.js @@ -18,18 +18,22 @@ describe('Toggle', () => { it('renders an untoggled Toggle', () => { expect(new ReduxFormMaterialUIToggle({ - name: 'myToggle', - onChange: noop, - value: false + input: { + name: 'myToggle', + onChange: noop, + value: false + } }).render()) .toEqualJSX() }) it('renders a toggled Toggle', () => { expect(new ReduxFormMaterialUIToggle({ - name: 'myToggle', - onChange: noop, - value: true + input: { + name: 'myToggle', + onChange: noop, + value: true + } }).render()) .toEqualJSX() }) @@ -37,7 +41,7 @@ describe('Toggle', () => { it('provides getRenderedComponent', () => { const dom = TestUtils.renderIntoDocument( - + ) diff --git a/src/mapError.js b/src/mapError.js index 0e063e5..a8fbb0c 100755 --- a/src/mapError.js +++ b/src/mapError.js @@ -1,4 +1,4 @@ -const mapError = ({ touched, error, ...props }, errorProp = 'errorText') => - touched && error ? { ...props, [errorProp]: error } : props +const mapError = ({ touched, error, input: { ...inputProps }, ...props }, errorProp = 'errorText') => + touched && error ? { ...props, ...inputProps, [errorProp]: error } : { ...inputProps, ...props } export default mapError