Added FormApi to Form and FormSpy props. Deprecated old. (#224)

Author: erikras

README.md

@@ -649,38 +649,56 @@ as well as:
 
 #### `batch: (fn: () => void) => void)`
 
+_**[DEPRECATED]** Use `form.batch()` instead_
+
 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`
 
+_**[DEPRECATED]** Use `form.blur()` instead_
+
 A function to blur (mark inactive) any field.
 
 #### `change: (name: string, value: any) => void`
 
+_**[DEPRECATED]** Use `form.change()` instead_
+
 A function to change the value of any field.
 
 #### `focus: (name: string) => void`
 
+_**[DEPRECATED]** Use `form.focus()` instead_
+
 A function to focus (mark active) any field.
 
+#### `form: FormApi`
+
+The 🏁 Final Form [`FormApi`](https://github.com/final-form/final-form#formapi).
+
 #### `handleSubmit: (?SyntheticEvent<HTMLFormElement>) => void`
 
 A function intended for you to give directly to the `<form>` tag: `<form onSubmit={handleSubmit}/>`.
 
 #### `initialize: (values: Object) => void`
 
+_**[DEPRECATED]** Use `form.initialize()` instead_
+
 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 }`
 
+_**[DEPRECATED]** Use `form.mutators` instead_
+
 [See the 🏁 Final Form docs on `mutators`](https://github.com/final-form/final-form#mutators--string-function-).
 
-#### `reset: () => void`
+#### `reset: (newInitialValues?: Object) => void`
+
+_**[DEPRECATED]** Use `form.reset()` instead_
 
 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).
+[See the 🏁 Final Form docs on `reset`](https://github.com/final-form/final-form#reset-initialvalues-object--void).
 
 ### `FormSpyProps`
 
@@ -734,34 +752,52 @@ subscribed to with the
 
 #### `batch: (fn: () => void) => void)`
 
+_**[DEPRECATED]** Use `form.batch()` instead_
+
 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`
 
+_**[DEPRECATED]** Use `form.blur()` instead_
+
 A function to blur (mark inactive) any field.
 
 #### `change: (name: string, value: any) => void`
 
+_**[DEPRECATED]** Use `form.change()` instead_
+
 A function to change the value of any field.
 
 #### `focus: (name: string) => void`
 
+_**[DEPRECATED]** Use `form.focus()` instead_
+
 A function to focus (mark active) any field.
 
+#### `form: FormApi`
+
+The 🏁 Final Form [`FormApi`](https://github.com/final-form/final-form#formapi).
+
 #### `initialize: (values: Object) => void`
 
+_**[DEPRECATED]** Use `form.initialize()` instead_
+
 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 }`
 
+_**[DEPRECATED]** Use `form.mutators` instead_
+
 [See the 🏁 Final Form docs on `mutators`](https://github.com/final-form/final-form#mutators--string-function-).
 
-#### `reset: () => void`
+#### `reset: (newInitialValues?: Object) => void`
+
+_**[DEPRECATED]** Use `form.reset()` instead_
 
 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).
+[See the 🏁 Final Form docs on `reset`](https://github.com/final-form/final-form#reset-initialvalues-object--void).
 
 ## Contributors
 

package-lock.json

@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/final-form/react-final-form#readme",
   "devDependencies": {
-    "@types/react": "^16.3.8",
+    "@types/react": "^16.3.9",
     "babel-eslint": "^8.0.3",
     "babel-jest": "^22.4.3",
     "babel-plugin-external-helpers": "^6.22.0",
@@ -41,10 +41,10 @@
     "eslint-config-react-app": "^2.1.0",
     "eslint-plugin-babel": "^5.0.0",
     "eslint-plugin-flowtype": "^2.46.1",
-    "eslint-plugin-import": "^2.10.0",
+    "eslint-plugin-import": "^2.11.0",
     "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-react": "^7.7.0",
-    "final-form": "^4.5.1",
+    "final-form": "^4.5.2",
     "flow-bin": "^0.69.0",
     "glow": "^1.2.2",
     "husky": "^0.14.3",
@@ -53,7 +53,7 @@
     "nps": "^5.9.0",
     "nps-utils": "^1.5.0",
     "opencollective": "^1.0.3",
-    "prettier": "^1.11.1",
+    "prettier": "^1.12.0",
     "prettier-eslint-cli": "^4.7.1",
     "prop-types": "^15.6.1",
     "react": "^16.3.1",

package.json

@@ -4,7 +4,11 @@ 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, ReactContext } from './types'
+import type {
+  FieldProps as Props,
+  FieldRenderProps,
+  ReactContext
+} from './types'
 import renderComponent from './renderComponent'
 import isReactNative from './isReactNative'
 import getValue from './getValue'
@@ -160,8 +164,24 @@ export default class Field extends React.Component<Props, State> {
       value: _value,
       ...rest
     } = this.props
-    let { blur, change, focus, value, name: ignoreName, ...meta } =
+    let { blur, change, focus, value, name: ignoreName, ...otherState } =
       this.state.state || {}
+    const meta = {
+      // this is to appease the Flow gods
+      active: otherState.active,
+      dirty: otherState.dirty,
+      dirtySinceLastSubmit: otherState.dirtySinceLastSubmit,
+      error: otherState.error,
+      initial: otherState.initial,
+      invalid: otherState.invalid,
+      pristine: otherState.pristine,
+      submitError: otherState.submitError,
+      submitFailed: otherState.submitFailed,
+      submitSucceeded: otherState.submitSucceeded,
+      touched: otherState.touched,
+      valid: otherState.valid,
+      visited: otherState.visited
+    }
     if (format) {
       value = format(value, name)
     }
@@ -191,8 +211,9 @@ export default class Field extends React.Component<Props, State> {
       // ignore meta, combine input with any other props
       return React.createElement(component, { ...input, children, ...rest })
     }
+    const renderProps: FieldRenderProps = { input, meta } // assign to force Flow check
     return renderComponent(
-      { input, meta, children, component, ...rest },
+      { ...renderProps, children, component, ...rest },
       `Field(${name})`
     )
   }

src/Field.js

@@ -422,7 +422,9 @@ describe('Field', () => {
     const requiredUppercase = value =>
       !value
         ? 'Required'
-        : value.toUpperCase() === value ? undefined : 'Must be uppercase'
+        : value.toUpperCase() === value
+          ? undefined
+          : 'Must be uppercase'
     class FieldsContainer extends React.Component {
       state = { uppercase: false }
 
@@ -454,7 +456,9 @@ describe('Field', () => {
     expect(input).toHaveBeenCalledTimes(2)
     expect(input.mock.calls[1][0].meta.error).toBe('Required')
 
-    const { input: { onChange } } = input.mock.calls[1][0]
+    const {
+      input: { onChange }
+    } = input.mock.calls[1][0]
 
     onChange('hi')
 
@@ -584,7 +588,7 @@ describe('Field', () => {
     expect(barInput.checked).toBe(true)
     expect(bazInput.checked).toBe(false)
 
-    render.mock.calls[0][0].change('foo', 'Baz')
+    render.mock.calls[0][0].form.change('foo', 'Baz')
 
     expect(barInput.checked).toBe(false)
     expect(bazInput.checked).toBe(true)