Provided Form API to FormSpy (#105)

* Provided form api to FormSpy

* Formatted readme

Author: erikras

README.md

@@ -15,7 +15,7 @@
 
 ✅ Opt-in subscriptions - only update on the state you need!
 
-✅ 💥 **2.7k gzipped** 💥
+✅ 💥 **2.8k gzipped** 💥
 
 ---
 
@@ -194,6 +194,13 @@ const MyForm = () => (
     * [`render?: (props: FormSpyRenderProps) => React.Node`](#render-props-formspyrenderprops--reactnode)
     * [`subscription?: FormSubscription`](#subscription-formsubscription-1)
   * [`FormSpyRenderProps`](#formspyrenderprops)
+    * [`batch: (fn: () => void) => void)`](#batch-fn---void--void-1)
+    * [`blur: (name: string) => void`](#blur-name-string--void-1)
+    * [`change: (name: string, value: any) => void`](#change-name-string-value-any--void-1)
+    * [`focus: (name: string) => void`](#focus-name-string--void-1)
+    * [`initialize: (values: Object) => void`](#initialize-values-object--void-1)
+    * [`mutators?: { [string]: Function }`](#mutators--string-function--1)
+    * [`reset: () => void`](#reset---void-1)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
@@ -657,4 +664,35 @@ function or component. These props are of type
 that the values you receive here are dependent upon which values of
 [`FormState`](https://github.com/final-form/final-form#formstate) you have
 subscribed to with the
-[`subscription` prop](https://github.com/final-form/react-final-form#subscription-formsubscription).
+[`subscription` prop](https://github.com/final-form/react-final-form#subscription-formsubscription). Also included will be many of the same props provided to [`FormRenderProps`](#formrenderprops):
+
+#### `batch: (fn: () => void) => void)`
+
+A function that allows batch updates to be done to the form state.
+[See the 🏁 Final Form docs on `batch`](https://github.com/final-form/final-form#batch-fn---void--void).
+
+#### `blur: (name: string) => void`
+
+A function to blur (mark inactive) any field.
+
+#### `change: (name: string, value: any) => void`
+
+A function to change the value of any field.
+
+#### `focus: (name: string) => void`
+
+A function to focus (mark active) any field.
+
+#### `initialize: (values: Object) => void`
+
+A function that initializes the form values.
+[See the 🏁 Final Form docs on `initialize`](https://github.com/final-form/final-form#initialize-values-object--void).
+
+#### `mutators?: { [string]: Function }`
+
+[See the 🏁 Final Form docs on `mutators`](https://github.com/final-form/final-form#mutators--string-function-).
+
+#### `reset: () => void`
+
+A function that resets the form values to their last initialized values.
+[See the 🏁 Final Form docs on `reset`](https://github.com/final-form/final-form#reset---void).

src/FormSpy.js

@@ -80,9 +80,23 @@ export default class FormSpy extends React.PureComponent<Props, State> {
 
   render() {
     const { onChange, subscription, ...rest } = this.props
+    const { reactFinalForm } = this.context
     return onChange
       ? null
-      : renderComponent({ ...rest, ...this.state.state }, 'FormSpy')
+      : renderComponent(
+          {
+            ...rest,
+            ...this.state.state,
+            mutators: reactFinalForm && reactFinalForm.mutators,
+            batch: reactFinalForm && reactFinalForm.batch,
+            blur: reactFinalForm && reactFinalForm.blur,
+            change: reactFinalForm && reactFinalForm.change,
+            focus: reactFinalForm && reactFinalForm.focus,
+            initialize: reactFinalForm && reactFinalForm.initialize,
+            reset: reactFinalForm && reactFinalForm.reset
+          },
+          'FormSpy'
+        )
   }
 }
 

src/FormSpy.test.js

@@ -5,6 +5,14 @@ import Field from './Field'
 import FormSpy from './FormSpy'
 
 const onSubmitMock = values => {}
+const hasFormApi = props => {
+  expect(typeof props.batch).toBe('function')
+  expect(typeof props.blur).toBe('function')
+  expect(typeof props.change).toBe('function')
+  expect(typeof props.focus).toBe('function')
+  expect(typeof props.initialize).toBe('function')
+  expect(typeof props.reset).toBe('function')
+}
 
 describe('FormSpy', () => {
   it('should warn error if not used inside a form', () => {
@@ -26,37 +34,35 @@ describe('FormSpy', () => {
     )
     expect(render).toHaveBeenCalled()
     expect(render).toHaveBeenCalledTimes(1)
-    expect(render).toHaveBeenCalledWith({
-      dirty: false,
-      errors: {},
-      invalid: false,
-      pristine: true,
-      submitFailed: false,
-      submitSucceeded: false,
-      submitting: false,
-      valid: true,
-      validating: false,
-      values: {}
-    })
+    hasFormApi(render.mock.calls[0][0])
+    expect(render.mock.calls[0][0].dirty).toBe(false)
+    expect(render.mock.calls[0][0].errors).toEqual({})
+    expect(render.mock.calls[0][0].invalid).toBe(false)
+    expect(render.mock.calls[0][0].pristine).toBe(true)
+    expect(render.mock.calls[0][0].submitFailed).toBe(false)
+    expect(render.mock.calls[0][0].submitSucceeded).toBe(false)
+    expect(render.mock.calls[0][0].submitting).toBe(false)
+    expect(render.mock.calls[0][0].valid).toBe(true)
+    expect(render.mock.calls[0][0].validating).toBe(false)
+    expect(render.mock.calls[0][0].values).toEqual({})
     expect(renderInput).toHaveBeenCalled()
     expect(renderInput).toHaveBeenCalledTimes(1)
 
     // change value
     renderInput.mock.calls[0][0].input.onChange('bar')
 
     expect(render).toHaveBeenCalledTimes(2)
-    expect(render).toHaveBeenCalledWith({
-      dirty: true,
-      errors: {},
-      invalid: false,
-      pristine: false,
-      submitFailed: false,
-      submitSucceeded: false,
-      submitting: false,
-      valid: true,
-      validating: false,
-      values: { foo: 'bar' }
-    })
+    hasFormApi(render.mock.calls[1][0])
+    expect(render.mock.calls[1][0].dirty).toBe(true)
+    expect(render.mock.calls[1][0].errors).toEqual({})
+    expect(render.mock.calls[1][0].invalid).toBe(false)
+    expect(render.mock.calls[1][0].pristine).toBe(false)
+    expect(render.mock.calls[1][0].submitFailed).toBe(false)
+    expect(render.mock.calls[1][0].submitSucceeded).toBe(false)
+    expect(render.mock.calls[1][0].submitting).toBe(false)
+    expect(render.mock.calls[1][0].valid).toBe(true)
+    expect(render.mock.calls[1][0].validating).toBe(false)
+    expect(render.mock.calls[1][0].values).toEqual({ foo: 'bar' })
     expect(renderInput).toHaveBeenCalledTimes(2)
   })
 
@@ -94,16 +100,36 @@ describe('FormSpy', () => {
     const dom = TestUtils.renderIntoDocument(<Container />)
     expect(render).toHaveBeenCalled()
     expect(render).toHaveBeenCalledTimes(1)
-    expect(render).toHaveBeenCalledWith({
-      values: { dog: 'Odie', cat: 'Garfield' },
-      pristine: true
+    hasFormApi(render.mock.calls[0][0])
+    expect(render.mock.calls[0][0].dirty).toBeUndefined()
+    expect(render.mock.calls[0][0].errors).toBeUndefined()
+    expect(render.mock.calls[0][0].invalid).toBeUndefined()
+    expect(render.mock.calls[0][0].pristine).toBe(true)
+    expect(render.mock.calls[0][0].submitFailed).toBeUndefined()
+    expect(render.mock.calls[0][0].submitSucceeded).toBeUndefined()
+    expect(render.mock.calls[0][0].submitting).toBeUndefined()
+    expect(render.mock.calls[0][0].valid).toBeUndefined()
+    expect(render.mock.calls[0][0].validating).toBeUndefined()
+    expect(render.mock.calls[0][0].values).toEqual({
+      dog: 'Odie',
+      cat: 'Garfield'
     })
 
     const button = TestUtils.findRenderedDOMComponentWithTag(dom, 'button')
     TestUtils.Simulate.click(button)
 
     expect(render).toHaveBeenCalledTimes(2)
-    expect(render).toHaveBeenCalledWith({ dirty: false, submitting: false })
+    hasFormApi(render.mock.calls[1][0])
+    expect(render.mock.calls[1][0].dirty).toBe(false)
+    expect(render.mock.calls[1][0].errors).toBeUndefined()
+    expect(render.mock.calls[1][0].invalid).toBeUndefined()
+    expect(render.mock.calls[1][0].pristine).toBeUndefined()
+    expect(render.mock.calls[1][0].submitFailed).toBeUndefined()
+    expect(render.mock.calls[1][0].submitSucceeded).toBeUndefined()
+    expect(render.mock.calls[1][0].submitting).toBe(false)
+    expect(render.mock.calls[1][0].valid).toBeUndefined()
+    expect(render.mock.calls[1][0].validating).toBeUndefined()
+    expect(render.mock.calls[1][0].values).toBeUndefined()
   })
 
   it('should hear changes', () => {
@@ -124,10 +150,17 @@ describe('FormSpy', () => {
     )
     expect(render).toHaveBeenCalled()
     expect(render).toHaveBeenCalledTimes(1)
-    expect(render).toHaveBeenCalledWith({
-      values: {},
-      dirty: false
-    })
+    hasFormApi(render.mock.calls[0][0])
+    expect(render.mock.calls[0][0].dirty).toBe(false)
+    expect(render.mock.calls[0][0].errors).toBeUndefined()
+    expect(render.mock.calls[0][0].invalid).toBeUndefined()
+    expect(render.mock.calls[0][0].pristine).toBeUndefined()
+    expect(render.mock.calls[0][0].submitFailed).toBeUndefined()
+    expect(render.mock.calls[0][0].submitSucceeded).toBeUndefined()
+    expect(render.mock.calls[0][0].submitting).toBeUndefined()
+    expect(render.mock.calls[0][0].valid).toBeUndefined()
+    expect(render.mock.calls[0][0].validating).toBeUndefined()
+    expect(render.mock.calls[0][0].values).toEqual({})
     expect(renderInput).toHaveBeenCalled()
     expect(renderInput).toHaveBeenCalledTimes(1)
 
@@ -136,10 +169,17 @@ describe('FormSpy', () => {
 
     // once because whole form rerendered, and again because state changed
     expect(render).toHaveBeenCalledTimes(3)
-    expect(render).toHaveBeenCalledWith({
-      values: { foo: 'bar' },
-      dirty: true
-    })
+    hasFormApi(render.mock.calls[2][0])
+    expect(render.mock.calls[2][0].dirty).toBe(true)
+    expect(render.mock.calls[2][0].errors).toBeUndefined()
+    expect(render.mock.calls[2][0].invalid).toBeUndefined()
+    expect(render.mock.calls[2][0].pristine).toBeUndefined()
+    expect(render.mock.calls[2][0].submitFailed).toBeUndefined()
+    expect(render.mock.calls[2][0].submitSucceeded).toBeUndefined()
+    expect(render.mock.calls[2][0].submitting).toBeUndefined()
+    expect(render.mock.calls[2][0].valid).toBeUndefined()
+    expect(render.mock.calls[2][0].validating).toBeUndefined()
+    expect(render.mock.calls[2][0].values).toEqual({ foo: 'bar' })
     expect(renderInput).toHaveBeenCalledTimes(2)
   })
 

src/index.d.ts

@@ -37,7 +37,17 @@ export interface FieldRenderProps {
   }>
 }
 
-export interface FormRenderProps extends FormState {
+export interface SubsetFormApi {
+  batch: (fn: () => void) => void
+  blur: (name: string) => void
+  change: (name: string, value: any) => void
+  focus: (name: string) => void
+  initialize: (values: object) => void
+  mutators?: { [key: string]: Function }
+  reset: () => void
+}
+
+export interface FormRenderProps extends FormState, SubsetFormApi {
   batch: (fn: () => void) => void
   blur: (name: string) => void
   change: (name: string, value: any) => void
@@ -48,7 +58,7 @@ export interface FormRenderProps extends FormState {
   reset: () => void
 }
 
-export type FormSpyRenderProps = FormState
+export interface FormSpyRenderProps extends FormState, SubsetFormApi {}
 
 export interface RenderableProps<T> {
   children?: ((props: T) => React.ReactNode) | React.ReactNode
@@ -61,7 +71,6 @@ export interface FormProps extends Config, RenderableProps<FormRenderProps> {
   decorators?: Decorator[]
 }
 
-
 export interface FieldProps extends RenderableProps<FieldRenderProps> {
   allowNull?: boolean
   format?: ((value: any, name: string) => any) | null

src/types.js.flow

@@ -38,16 +38,21 @@ export type FieldRenderProps = {
   }>
 }
 
-export type FormRenderProps = {
+export type SubsetFormApi = {
   blur: (name: string) => void,
   change: (name: string, value: any) => void,
   focus: (name: string) => void,
-  handleSubmit: (SyntheticEvent<HTMLFormElement>) => void,
   initialize: (values: Object) => void,
+  mutators: { [string]: Function },
   reset: () => void
 } & FormState
 
-export type FormSpyRenderProps = FormState
+export type FormRenderProps = {
+  handleSubmit: (SyntheticEvent<HTMLFormElement>) => void
+} & FormState &
+  SubsetFormApi
+
+export type FormSpyRenderProps = SubsetFormApi & FormState
 
 export type RenderableProps<T> = $Shape<{
   children: ((props: T) => React.Node) | React.Node,