Added decorator support (#47)

Author: erikras

README.md

@@ -158,6 +158,7 @@ const MyForm = () => (
     * [`children?: ((props: FormRenderProps) => React.Node) | React.Node`](#children-props-formrenderprops--reactnode--reactnode)
     * [`component?: React.ComponentType<FormRenderProps>`](#component-reactcomponenttypeformrenderprops)
     * [`debug?: DebugFunction`](#debug-debugfunction)
+    * [`decorators?: Decorator[]`](#decorators-decorator)
     * [`initialValues?: Object`](#initialvalues-object)
     * [`mutators?: { [string]: Mutator }`](#mutators--string-mutator-)
     * [`onSubmit: (values: Object, callback: ?(errors: ?Object) => void) => ?Object | Promise<?Object> | void`](#onsubmit-values-object-callback-errors-object--void--object--promiseobject--void)
@@ -448,6 +449,11 @@ well as any non-API props passed into the `<Form/>` component.
 
 [See the 🏁 Final Form docs on `debug`](https://github.com/final-form/final-form#debug-debugfunction).
 
+#### `decorators?: Decorator[]`
+
+[`Decorator`](https://github.com/final-form/final-form#decorator-form-formapi--unsubscribe)s
+to apply to the form.
+
 #### `initialValues?: Object`
 
 [See the 🏁 Final Form docs on `initialValues`](https://github.com/final-form/final-form#initialvalues-object).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-final-form",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description":
     "🏁 High performance subscription-based form state management for React",
   "main": "dist/react-final-form.cjs.js",
@@ -40,7 +40,7 @@
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-react": "^7.4.0",
-    "final-form": "^1.2.0",
+    "final-form": "^1.3.0",
     "flow": "^0.2.3",
     "flow-bin": "^0.60.1",
     "husky": "^0.14.3",
@@ -63,7 +63,7 @@
     "rollup-plugin-uglify": "^2.0.1"
   },
   "peerDependencies": {
-    "final-form": "^1.2.0",
+    "final-form": "^1.3.0",
     "prop-types": "^15.6.0",
     "react": "^15.0.0-0 || ^16.0.0-0"
   },

src/ReactFinalForm.js

@@ -7,11 +7,17 @@ import {
   formSubscriptionItems,
   version as ffVersion
 } from 'final-form'
-import type { Api, Config, FormSubscription, FormState } from 'final-form'
+import type {
+  Api,
+  Config,
+  FormSubscription,
+  FormState,
+  Unsubscribe
+} from 'final-form'
 import type { FormProps as Props, ReactContext } from './types'
 import shallowEqual from './shallowEqual'
 import renderComponent from './renderComponent'
-export const version = '1.0.0'
+export const version = '1.2.0'
 
 export const all: FormSubscription = formSubscriptionItems.reduce(
   (result, key) => {
@@ -30,7 +36,7 @@ export default class ReactFinalForm extends React.PureComponent<Props, State> {
   props: Props
   state: State
   form: Api
-  unsubscribe: () => void
+  unsubscriptions: Unsubscribe[]
 
   static childContextTypes = {
     reactFinalForm: PropTypes.object
@@ -44,6 +50,7 @@ export default class ReactFinalForm extends React.PureComponent<Props, State> {
       children,
       component,
       debug,
+      decorators,
       initialValues,
       mutators,
       onSubmit,
@@ -70,16 +77,24 @@ export default class ReactFinalForm extends React.PureComponent<Props, State> {
       warning(false, e.message)
     }
     let initialState
-    this.unsubscribe =
-      this.form &&
-      this.form.subscribe((state: FormState) => {
-        if (initialState) {
-          this.notify(state)
-        } else {
-          initialState = state
-        }
-      }, subscription || all)
+    this.unsubscriptions = []
+    if (this.form) {
+      this.unsubscriptions.push(
+        this.form.subscribe((state: FormState) => {
+          if (initialState) {
+            this.notify(state)
+          } else {
+            initialState = state
+          }
+        }, subscription || all)
+      )
+    }
     this.state = { state: initialState }
+    if (decorators) {
+      decorators.forEach(decorator => {
+        this.unsubscriptions.push(decorator(this.form))
+      })
+    }
   }
 
   getChildContext() {
@@ -102,7 +117,7 @@ export default class ReactFinalForm extends React.PureComponent<Props, State> {
   }
 
   componentWillUnmount() {
-    this.unsubscribe()
+    this.unsubscriptions.forEach(unsubscribe => unsubscribe())
   }
 
   render() {

src/ReactFinalForm.test.js

@@ -317,4 +317,42 @@ describe('ReactFinalForm', () => {
     expect(validate).toHaveBeenCalledTimes(4)
     expect(renderInput).toHaveBeenCalledTimes(2)
   })
+
+  it('should add decorators', () => {
+    const unsubscribe = jest.fn()
+    const decorator = jest.fn(() => unsubscribe)
+    class Container extends React.Component {
+      state = { shown: true }
+
+      render() {
+        return (
+          <div>
+            {this.state.shown && (
+              <Form
+                onSubmit={onSubmitMock}
+                render={() => <form />}
+                decorators={[decorator]}
+              />
+            )}
+            <button
+              type="button"
+              onClick={() => this.setState({ shown: false })}
+            >
+              Unmount
+            </button>
+          </div>
+        )
+      }
+    }
+    const dom = TestUtils.renderIntoDocument(<Container />)
+
+    expect(decorator).toHaveBeenCalled()
+    expect(decorator).toHaveBeenCalledTimes(1)
+    expect(unsubscribe).not.toHaveBeenCalled()
+
+    const button = TestUtils.findRenderedDOMComponentWithTag(dom, 'button')
+    TestUtils.Simulate.click(button)
+
+    expect(unsubscribe).toHaveBeenCalled()
+  })
 })

src/types.js.flow

@@ -3,6 +3,7 @@ import * as React from 'react'
 import type {
   Api,
   Config,
+  Decorator,
   FormState,
   FormSubscription,
   FieldSubscription
@@ -55,7 +56,8 @@ export type RenderableProps<T> = $Shape<{
 }>
 
 export type FormProps = {
-  subscription?: FormSubscription
+  subscription?: FormSubscription,
+  decorators?: Decorator[]
 } & Config &
   RenderableProps<FormRenderProps>