Form transform

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 10.7.0
+
+- Added `prepare` method for processing form parameters after they
+  are serialized.
+
 ## 10.6.1
 
 - Made a few performance tweaks to achieve deeper v8 optimization

docs/api/form.md

@@ -76,12 +76,41 @@ 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.
 
+### 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 (
+      <Form intent={actions.create} prepare={this.prepare}>
+        <input name="name" />
+        <input name="start" type="datetime-local" />
+        <input name="end" type="datetime-local" />
+
+        <input type="submit" />
+      </Form>
+    )
+  }
+}
+```
+
 ### onSubmit(event, action)
 
 An event callback executed immediately after the form submits and the

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",

src/addons/form.js

@@ -12,6 +12,7 @@ const Form = React.createClass({
   propTypes: {
     intent     : PropTypes.oneOfType([ PropTypes.string, PropTypes.func]),
     serializer : PropTypes.func,
+    prepare  : 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 }),
+      prepare  : 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.prepare(this.props.serializer(form))
     const action = this.context.send(this.props.intent, params)
 
     if (action && action instanceof Action) {

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 ('prepare', function() {
+
+  test('can prepare serialized data', function () {
+    const send = jest.fn()
+
+    const prepare = function (params) {
+      params.name = "BILLY"
+
+      return params
+    }
+
+    const form = mount((
+      <Form intent="test" prepare={prepare}>
+        <input name="name" defaultValue="Billy"/>
+      </Form>
+    ), { context: { send } })
+
+    form.instance().submit()
+
+    expect(send).toHaveBeenCalledWith("test", { name: "BILLY" })
+  })
+
+})