From b61809b37d75a440fc0e0d4ae38476875f383e69 Mon Sep 17 00:00:00 2001 From: Nathan Hunzaker Date: Sat, 12 Nov 2016 11:34:29 -0500 Subject: [PATCH 1/4] Add transform method for post processing parameters --- docs/api/form.md | 8 +++++++- src/addons/form.js | 4 +++- test/addons/form.test.js | 25 ++++++++++++++++++++++++- 3 files changed, 34 insertions(+), 3 deletions(-) diff --git a/docs/api/form.md b/docs/api/form.md index 08dbdc44..ec55ed28 100644 --- a/docs/api/form.md +++ b/docs/api/form.md @@ -76,12 +76,18 @@ A string value to send to Presenters. If a Presenter is registered to that string via its `register()` method, it will execute the associated callback. -### serializer +### serializer(form) The serialization function. By default this uses [`form-serialize`](https://github.com/defunctzombie/form-serialize). On submission, this function is given the associated form HTML element. +### transform(params) + +Executed after serialization to allow for extra parameter +manipulation. This is useful for ensuring proper date formats, or +other data formats that may come directly from a form input. + ### onSubmit(event, action) An event callback executed immediately after the form submits and the diff --git a/src/addons/form.js b/src/addons/form.js index c69e4523..0899ab5c 100644 --- a/src/addons/form.js +++ b/src/addons/form.js @@ -12,6 +12,7 @@ const Form = React.createClass({ propTypes: { intent : PropTypes.oneOfType([ PropTypes.string, PropTypes.func]), serializer : PropTypes.func, + transform : PropTypes.func, onSubmit : PropTypes.func, onDone : PropTypes.func, onUpdate : PropTypes.func, @@ -23,6 +24,7 @@ const Form = React.createClass({ return { intent : null, serializer : form => serialize(form, { hash: true, empty: true }), + transform : n => n, onSubmit : () => {} } }, @@ -48,7 +50,7 @@ const Form = React.createClass({ submit(event) { const form = this.refs.form - const params = this.props.serializer(form) + const params = this.props.transform(this.props.serializer(form)) const action = this.context.send(this.props.intent, params) if (action && action instanceof Action) { diff --git a/test/addons/form.test.js b/test/addons/form.test.js index 5066e205..6cb22c22 100644 --- a/test/addons/form.test.js +++ b/test/addons/form.test.js @@ -84,7 +84,6 @@ test('does not execute onUpdate if not given an action', function () { expect(onUpdate).not.toHaveBeenCalled() }) - test('submit can be called directly on the component instance', function () { const onDone = jest.fn() @@ -98,3 +97,27 @@ test('submit can be called directly on the component instance', function () { expect(onDone).toHaveBeenCalledWith(true) }) + +describe ('transform', function() { + + test('can transform serialized data', function () { + const send = jest.fn() + + const transform = function (params) { + params.name = "BILLY" + + return params + } + + const form = mount(( +
+ +
+ ), { context: { send } }) + + form.instance().submit() + + expect(send).toHaveBeenCalledWith("test", { name: "BILLY" }) + }) + +}) From 7c2dea980c9820958b11c5178f3b34c217858343 Mon Sep 17 00:00:00 2001 From: Nathan Hunzaker Date: Sat, 12 Nov 2016 11:34:32 -0500 Subject: [PATCH 2/4] 10.7.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ddbf891f..e41094fb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "microcosm", - "version": "10.6.1", + "version": "10.7.0", "private": true, "description": "Flux with first-class actions and state sandboxing.", "main": "src/microcosm.js", From 942a60561d732ad1f0bd42fdd88a13bb50973716 Mon Sep 17 00:00:00 2001 From: Nathan Hunzaker Date: Sat, 12 Nov 2016 11:34:55 -0500 Subject: [PATCH 3/4] Update changelog --- CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 91fd4d22..22caea7c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,10 @@ # Changelog +## 10.7.0 + +- Added `transform` method for processing form parameters after they + are serialized. + ## 10.6.1 - Made a few performance tweaks to achieve deeper v8 optimization From 69e3eda92db4330723d409ce6932fcac9fdc6e72 Mon Sep 17 00:00:00 2001 From: Nathan Hunzaker Date: Sat, 12 Nov 2016 11:41:32 -0500 Subject: [PATCH 4/4] Rename transform to prepare --- CHANGELOG.md | 2 +- docs/api/form.md | 25 ++++++++++++++++++++++++- src/addons/form.js | 6 +++--- test/addons/form.test.js | 8 ++++---- 4 files changed, 32 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 22caea7c..298370fc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,7 @@ ## 10.7.0 -- Added `transform` method for processing form parameters after they +- Added `prepare` method for processing form parameters after they are serialized. ## 10.6.1 diff --git a/docs/api/form.md b/docs/api/form.md index ec55ed28..3634bd9e 100644 --- a/docs/api/form.md +++ b/docs/api/form.md @@ -82,12 +82,35 @@ The serialization function. By default this uses [`form-serialize`](https://github.com/defunctzombie/form-serialize). On submission, this function is given the associated form HTML element. -### transform(params) +### prepare(params) Executed after serialization to allow for extra parameter manipulation. This is useful for ensuring proper date formats, or other data formats that may come directly from a form input. +```javascript +class MyForm extends React.Component { + prepare (params) { + params.start = new Date(params.start).toISOString() + params.end = new Date(params.start).toISOString() + + return params + } + + render () { + return ( +
+ + + + + +
+ ) + } +} +``` + ### onSubmit(event, action) An event callback executed immediately after the form submits and the diff --git a/src/addons/form.js b/src/addons/form.js index 0899ab5c..a322ffd7 100644 --- a/src/addons/form.js +++ b/src/addons/form.js @@ -12,7 +12,7 @@ const Form = React.createClass({ propTypes: { intent : PropTypes.oneOfType([ PropTypes.string, PropTypes.func]), serializer : PropTypes.func, - transform : PropTypes.func, + prepare : PropTypes.func, onSubmit : PropTypes.func, onDone : PropTypes.func, onUpdate : PropTypes.func, @@ -24,7 +24,7 @@ const Form = React.createClass({ return { intent : null, serializer : form => serialize(form, { hash: true, empty: true }), - transform : n => n, + prepare : n => n, onSubmit : () => {} } }, @@ -50,7 +50,7 @@ const Form = React.createClass({ submit(event) { const form = this.refs.form - const params = this.props.transform(this.props.serializer(form)) + const params = this.props.prepare(this.props.serializer(form)) const action = this.context.send(this.props.intent, params) if (action && action instanceof Action) { diff --git a/test/addons/form.test.js b/test/addons/form.test.js index 6cb22c22..6ffca004 100644 --- a/test/addons/form.test.js +++ b/test/addons/form.test.js @@ -98,19 +98,19 @@ test('submit can be called directly on the component instance', function () { expect(onDone).toHaveBeenCalledWith(true) }) -describe ('transform', function() { +describe ('prepare', function() { - test('can transform serialized data', function () { + test('can prepare serialized data', function () { const send = jest.fn() - const transform = function (params) { + const prepare = function (params) { params.name = "BILLY" return params } const form = mount(( -
+
), { context: { send } })