Allowed swappable final-form APIs (#520)

Author: erikras

src/ReactFinalForm.js

@@ -42,6 +42,7 @@ function ReactFinalForm<FormValues: FormValuesShape>({
   debug,
   decorators,
   destroyOnUnregister,
+  form: alternateFormApi,
   initialValues,
   initialValuesEqual,
   keepDirtyOnReinitialize,
@@ -65,7 +66,7 @@ function ReactFinalForm<FormValues: FormValuesShape>({
   }
 
   const form: FormApi<FormValues> = useConstant(() => {
-    const f = createForm<FormValues>(config)
+    const f = alternateFormApi || createForm<FormValues>(config)
     f.pauseValidation()
     return f
   })

src/ReactFinalForm.test.js

@@ -3,6 +3,7 @@ import { render, fireEvent, cleanup } from 'react-testing-library'
 import 'jest-dom/extend-expect'
 import deepEqual from 'fast-deep-equal'
 import { ErrorBoundary, Toggle, wrapWith } from './testUtils'
+import { createForm } from 'final-form'
 import Form from './ReactFinalForm'
 import Field from './Field'
 
@@ -907,4 +908,27 @@ describe('ReactFinalForm', () => {
     expect(recordSubmitting).toHaveBeenCalledTimes(3)
     expect(recordSubmitting.mock.calls[2][0]).toBe(false)
   })
+
+  it('should allow an alternative form api to be passed in', () => {
+    const onSubmit = jest.fn()
+    const form = createForm({ onSubmit: onSubmit })
+    const formMock = jest.spyOn(form, 'registerField')
+    render(
+      <Form form={form}>
+        {({ handleSubmit }) => (
+          <form onSubmit={handleSubmit}>
+            <Field name="name" component="input" />
+          </form>
+        )}
+      </Form>
+    )
+    expect(formMock).toHaveBeenCalled()
+
+    // called once on first render to get initial state, and then again to subscribe
+    expect(formMock).toHaveBeenCalledTimes(2)
+    expect(formMock.mock.calls[0][0]).toBe('name')
+    expect(formMock.mock.calls[0][2].active).toBe(true) // default subscription
+    expect(formMock.mock.calls[1][0]).toBe('name')
+    expect(formMock.mock.calls[1][2].active).toBe(true) // default subscription
+  })
 })

src/types.js.flow

@@ -68,6 +68,7 @@ export type RenderableProps<T> = {
 export type FormProps<FormValues: FormValuesShape> = {
   subscription?: FormSubscription,
   decorators?: Decorator<FormValues>[],
+  form?: FormApi<FormValues>,
   initialValuesEqual?: (?Object, ?Object) => boolean
 } & Config<FormValues> &
   RenderableProps<FormRenderProps<FormValues>>

typescript/index.d.ts

@@ -60,6 +60,7 @@ export interface FormProps<FormValues = object>
     RenderableProps<FormRenderProps<FormValues>> {
   subscription?: FormSubscription;
   decorators?: Decorator[];
+  form?: FormApi<FormValues>;
   initialValuesEqual?: (a?: object, b?: object) => boolean;
 }