Migrate to new React Context API (#313)

* Migrate to new React Context API

* Fix: Include missing context file

* Add reactFinalForm prop

* Avoid re-rendering Consumer

* Tests for finalFormContext

* Export hoc and its type definition

Author: doniyor2109

src/Field.js

@@ -1,17 +1,13 @@
 // @flow
 import * as React from 'react'
-import PropTypes from 'prop-types'
 import { fieldSubscriptionItems } from 'final-form'
 import diffSubscription from './diffSubscription'
 import type { FieldSubscription, FieldState } from 'final-form'
-import type {
-  FieldProps as Props,
-  FieldRenderProps,
-  ReactContext
-} from './types'
+import type { FieldProps as Props, FieldRenderProps } from './types'
 import renderComponent from './renderComponent'
 import isReactNative from './isReactNative'
 import getValue from './getValue'
+import { withReactFinalForm } from './reactFinalFormContext'
 
 const all: FieldSubscription = fieldSubscriptionItems.reduce((result, key) => {
   result[key] = true
@@ -23,32 +19,27 @@ type State = {
 }
 
 class Field extends React.Component<Props, State> {
-  context: ReactContext
   props: Props
   state: State
   unsubscribe: () => void
 
-  static contextTypes = {
-    reactFinalForm: PropTypes.object
-  }
-
   static defaultProps = {
     format: (value: ?any, name: string) => (value === undefined ? '' : value),
     parse: (value: ?any, name: string) => (value === '' ? undefined : value)
   }
 
-  constructor(props: Props, context: ReactContext) {
-    super(props, context)
+  constructor(props: Props) {
+    super(props)
     let initialState
 
     // istanbul ignore next
-    if (process.env.NODE_ENV !== 'production' && !context.reactFinalForm) {
+    if (process.env.NODE_ENV !== 'production' && !this.props.reactFinalForm) {
       console.error(
         'Warning: Field must be used inside of a ReactFinalForm component'
       )
     }
 
-    if (this.context.reactFinalForm) {
+    if (this.props.reactFinalForm) {
       // avoid error, warning will alert developer to their mistake
       this.subscribe(props, (state: FieldState) => {
         if (initialState) {
@@ -65,7 +56,7 @@ class Field extends React.Component<Props, State> {
     { isEqual, name, subscription, validateFields }: Props,
     listener: (state: FieldState) => void
   ) => {
-    this.unsubscribe = this.context.reactFinalForm.registerField(
+    this.unsubscribe = this.props.reactFinalForm.registerField(
       name,
       listener,
       subscription || all,
@@ -89,7 +80,7 @@ class Field extends React.Component<Props, State> {
         fieldSubscriptionItems
       )
     ) {
-      if (this.context.reactFinalForm) {
+      if (this.props.reactFinalForm) {
         // avoid error, warning will alert developer to their mistake
         this.unsubscribe()
         this.subscribe(this.props, this.notify)
@@ -171,6 +162,7 @@ class Field extends React.Component<Props, State> {
       subscription,
       validate,
       validateFields,
+      reactFinalForm,
       value: _value,
       ...rest
     } = this.props
@@ -235,4 +227,4 @@ class Field extends React.Component<Props, State> {
   }
 }
 
-export default Field
+export default withReactFinalForm(Field)

src/FormSpy.js

@@ -1,38 +1,33 @@
 // @flow
 import * as React from 'react'
-import PropTypes from 'prop-types'
 import { formSubscriptionItems } from 'final-form'
 import diffSubscription from './diffSubscription'
 import renderComponent from './renderComponent'
-import type {
-  FormSpyProps as Props,
-  FormSpyRenderProps,
-  ReactContext
-} from './types'
+import type { FormSpyProps as Props, FormSpyRenderProps } from './types'
 import type { FormState } from 'final-form'
 import isSyntheticEvent from './isSyntheticEvent'
 import { all } from './ReactFinalForm'
+import { withReactFinalForm } from './reactFinalFormContext'
 
 type State = { state: FormState }
 
 class FormSpy extends React.Component<Props, State> {
-  context: ReactContext
   props: Props
   state: State
   unsubscribe: () => void
 
-  constructor(props: Props, context: ReactContext) {
-    super(props, context)
+  constructor(props: Props) {
+    super(props)
     let initialState
 
     // istanbul ignore next
-    if (process.env.NODE_ENV !== 'production' && !context.reactFinalForm) {
+    if (process.env.NODE_ENV !== 'production' && !this.props.reactFinalForm) {
       console.error(
         'Warning: FormSpy must be used inside of a ReactFinalForm component'
       )
     }
 
-    if (this.context.reactFinalForm) {
+    if (this.props.reactFinalForm) {
       // avoid error, warning will alert developer to their mistake
       this.subscribe(props, (state: FormState) => {
         if (initialState) {
@@ -54,7 +49,7 @@ class FormSpy extends React.Component<Props, State> {
     { subscription }: Props,
     listener: (state: FormState) => void
   ) => {
-    this.unsubscribe = this.context.reactFinalForm.subscribe(
+    this.unsubscribe = this.props.reactFinalForm.subscribe(
       listener,
       subscription || all
     )
@@ -76,7 +71,7 @@ class FormSpy extends React.Component<Props, State> {
         formSubscriptionItems
       )
     ) {
-      if (this.context.reactFinalForm) {
+      if (this.props.reactFinalForm) {
         // avoid error, warning will alert developer to their mistake
         this.unsubscribe()
         this.subscribe(this.props, this.notify)
@@ -89,8 +84,7 @@ class FormSpy extends React.Component<Props, State> {
   }
 
   render() {
-    const { onChange, subscription, ...rest } = this.props
-    const { reactFinalForm } = this.context
+    const { onChange, reactFinalForm, ...rest } = this.props
     const renderProps: FormSpyRenderProps = {
       batch:
         reactFinalForm &&
@@ -197,8 +191,4 @@ class FormSpy extends React.Component<Props, State> {
   }
 }
 
-FormSpy.contextTypes = {
-  reactFinalForm: PropTypes.object
-}
-
-export default FormSpy
+export default withReactFinalForm(FormSpy)

src/ReactFinalForm.js

@@ -1,6 +1,5 @@
 // @flow
 import * as React from 'react'
-import PropTypes from 'prop-types'
 import {
   configOptions,
   createForm,
@@ -14,11 +13,13 @@ import type {
   FormState,
   Unsubscribe
 } from 'final-form'
-import type { FormProps as Props, ReactContext } from './types'
+import type { FormProps as Props } from './types'
 import shallowEqual from './shallowEqual'
 import renderComponent from './renderComponent'
 import isSyntheticEvent from './isSyntheticEvent'
 import type { FormRenderProps } from './types.js.flow'
+import { ReactFinalFormContext } from './reactFinalFormContext'
+
 export const version = '3.6.0'
 
 const versions = {
@@ -39,18 +40,13 @@ type State = {
 }
 
 class ReactFinalForm extends React.Component<Props, State> {
-  context: ReactContext
   props: Props
   state: State
   form: FormApi
   mounted: boolean
   resumeValidation: ?boolean
   unsubscriptions: Unsubscribe[]
 
-  static childContextTypes = {
-    reactFinalForm: PropTypes.object
-  }
-
   constructor(props: Props) {
     super(props)
     const {
@@ -87,12 +83,6 @@ class ReactFinalForm extends React.Component<Props, State> {
     }
   }
 
-  getChildContext() {
-    return {
-      reactFinalForm: this.form
-    }
-  }
-
   notify = (state: FormState) => {
     if (this.mounted) {
       this.setState({ state })
@@ -285,13 +275,17 @@ class ReactFinalForm extends React.Component<Props, State> {
           return this.form.reset(values)
         })
     }
-    return renderComponent(
-      {
-        ...props,
-        ...renderProps,
-        __versions: versions
-      },
-      'ReactFinalForm'
+    return React.createElement(
+      ReactFinalFormContext.Provider,
+      { value: this.form },
+      renderComponent(
+        {
+          ...props,
+          ...renderProps,
+          __versions: versions
+        },
+        'ReactFinalForm'
+      )
     )
   }
 }

src/index.d.ts

@@ -97,3 +97,7 @@ export var Field: React.ComponentType<FieldProps>
 export var Form: React.ComponentType<FormProps>
 export var FormSpy: React.ComponentType<FormSpyProps>
 export var version: string
+
+export function withReactFinalForm<T>(
+  component: React.ComponentType<T>
+): React.ComponentType<T & ReactContext>

src/index.js

@@ -2,3 +2,4 @@
 export { default as Field } from './Field'
 export { default as Form, version } from './ReactFinalForm'
 export { default as FormSpy } from './FormSpy'
+export { withReactFinalForm } from './reactFinalFormContext'

src/index.js.flow

@@ -1,6 +1,6 @@
 // @flow
 import * as React from 'react'
-import type { FieldProps, FormProps, FormSpyProps } from './types'
+import type { FieldProps, FormProps, FormSpyProps, ReactContext } from './types';
 
 export type {
   FieldProps,
@@ -16,3 +16,5 @@ declare export var Field: React.ComponentType<FieldProps>
 declare export var Form: React.ComponentType<FormProps>
 declare export var FormSpy: React.ComponentType<FormSpyProps>
 declare export var version: string
+
+declare export function withReactFinalForm<T>(component: React.ComponentType<T>): React.ComponentType<T & ReactContext>

src/reactFinalFormContext.js

@@ -0,0 +1,17 @@
+import * as React from 'react'
+
+export const ReactFinalFormContext = React.createContext(null)
+
+export const withReactFinalForm = Component => {
+  return class extends React.Component {
+    render() {
+      return React.createElement(ReactFinalFormContext.Consumer, {
+        children: reactFinalForm =>
+          React.createElement(Component, {
+            reactFinalForm,
+            ...this.props
+          })
+      })
+    }
+  }
+}

src/reactFinalFormContext.test.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import TestUtils from 'react-dom/test-utils'
+
+import Form from './ReactFinalForm'
+import { withReactFinalForm } from './reactFinalFormContext'
+
+describe('reactFinalFormContext', () => {
+  it('should pass formApi using HOC', () => {
+    const mockComponent = jest.fn(() => <div />)
+    const render = () => {
+      const BoundComponent = withReactFinalForm(mockComponent)
+      return <BoundComponent />
+    }
+    const formComponent = TestUtils.renderIntoDocument(
+      <Form onSubmit={() => {}} render={render} />
+    )
+    expect(mockComponent).toHaveBeenCalled()
+    expect(mockComponent.mock.calls[0][0].reactFinalForm).toBe(
+      formComponent.form
+    )
+  })
+})

src/types.js.flow

@@ -79,6 +79,7 @@ export type FormProps = {
   RenderableProps<FormRenderProps>
 
 export type FieldProps = {
+  reactFinalForm: FormApi,
   allowNull?: boolean,
   format?: (value: any, name: string) => any,
   formatOnBlur?: boolean,
@@ -94,6 +95,7 @@ export type FieldProps = {
   }
 
 export type FormSpyProps = {
+  reactFinalForm: FormApi,
   onChange?: (formState: FormState) => void,
   subscription?: FormSubscription
 } & RenderableProps<FormSpyRenderProps>