Added types and docs for new multi-update api (#9)

* Added types and docs for new multi-update api

* Switched API back to the way it was originally written

Author: erikras

.flowconfig

@@ -7,4 +7,3 @@ dist/.*
 
 [options]
 esproposal.decorators=ignore
-unsafe.enable_getters_and_setters=true

README.md

@@ -119,6 +119,14 @@ A calculation to perform
 
 A pattern to match a field with.
 
-### `Updates: { [FieldName]: (value: any, allValues: Object) => any }`
+### `Updates: UpdatesByName | UpdatesForAll`
 
-Updates to make on other fields.
+Either an object of updater functions or a function that generates updates for multiple fields.
+
+### `UpdatesByName: { [FieldName]: (value: any, allValues: Object) => any }`
+
+Updater functions for each calculated field.
+
+### `UpdatesForAll: (value: any, field: string, allValues: Object) => { [FieldName]: any }`
+
+Takes the value and name of the field that just changed, as well as all the values, and returns an object of fields and new values.

package-lock.json

@@ -55,7 +55,15 @@ module.exports = {
       description: 'Generates table of contents in README',
       script: 'doctoc README.md'
     },
-    copyTypes: npsUtils.copy('src/*.js.flow dist'),
+    copyTypes: series(
+      npsUtils.copy('src/*.js.flow dist'),
+      npsUtils.copy(
+        'dist/index.js.flow dist --rename="final-form-calculate.cjs.js.flow"'
+      ),
+      npsUtils.copy(
+        'dist/index.js.flow dist --rename="final-form-calculate.es.js.flow"'
+      )
+    ),
     lint: {
       description: 'lint the entire project',
       script: 'eslint .'

package-scripts.js

@@ -24,38 +24,39 @@
   },
   "homepage": "https://github.com/final-form/final-form-calculate#readme",
   "devDependencies": {
-    "babel-eslint": "^8.0.3",
-    "babel-jest": "^22.0.4",
+    "babel-eslint": "^8.2.2",
+    "babel-jest": "^22.4.1",
     "babel-plugin-external-helpers": "^6.22.0",
     "babel-plugin-transform-flow-strip-types": "^6.22.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-stage-2": "^6.24.1",
-    "bundlesize": "^0.15.3",
-    "doctoc": "^1.3.0",
-    "eslint": "^4.11.0",
-    "eslint-config-react-app": "^2.0.1",
+    "bundlesize": "^0.16.0",
+    "doctoc": "^1.3.1",
+    "eslint": "^4.19.0",
+    "eslint-config-react-app": "^2.1.0",
     "eslint-plugin-babel": "^4.1.2",
-    "eslint-plugin-flowtype": "^2.37.0",
-    "eslint-plugin-import": "^2.8.0",
-    "eslint-plugin-jsx-a11y": "^6.0.2",
-    "eslint-plugin-react": "^7.5.1",
-    "final-form": "^1.3.0",
+    "eslint-plugin-flowtype": "^2.46.1",
+    "eslint-plugin-import": "^2.9.0",
+    "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-react": "^7.7.0",
+    "final-form": "^4.3.1",
     "flow": "^0.2.3",
-    "flow-bin": "^0.60.1",
+    "flow-bin": "^0.68.0",
+    "glow": "^1.2.2",
     "husky": "^0.14.3",
-    "jest": "^22.0.5",
-    "lint-staged": "^6.0.0",
-    "nps": "^5.7.1",
+    "jest": "^22.4.2",
+    "lint-staged": "^7.0.0",
+    "nps": "^5.8.2",
     "nps-utils": "^1.5.0",
-    "prettier": "^1.8.2",
-    "prettier-eslint-cli": "^4.4.2",
-    "rollup": "^0.53.4",
-    "rollup-plugin-babel": "^3.0.2",
-    "rollup-plugin-commonjs": "^8.2.6",
+    "prettier": "^1.11.1",
+    "prettier-eslint-cli": "^4.7.1",
+    "rollup": "^0.57.1",
+    "rollup-plugin-babel": "^3.0.3",
+    "rollup-plugin-commonjs": "^9.1.0",
     "rollup-plugin-flow": "^1.1.1",
-    "rollup-plugin-node-resolve": "^3.0.0",
+    "rollup-plugin-node-resolve": "^3.3.0",
     "rollup-plugin-replace": "^2.0.0",
-    "rollup-plugin-uglify": "^2.0.1"
+    "rollup-plugin-uglify": "^3.0.0"
   },
   "peerDependencies": {
     "final-form": ">=1.3.0"

package.json

@@ -32,14 +32,15 @@ if (es) {
   throw new Error('no format specified. --environment FORMAT:xxx')
 }
 
-// eslint-disable-next-line no-nested-ternary
-const exports = !es ? 'default' : 'named'
-
 export default {
-  name: 'final-form-calculate',
   input: 'src/index.js',
-  output,
-  exports,
+  output: Object.assign(
+    {
+      name: 'final-form-calculate',
+      exports: 'named'
+    },
+    output
+  ),
   external: [],
   plugins: [
     resolve({ jsnext: true, main: true }),

rollup.config.js

@@ -11,8 +11,8 @@ const createDecorator = (...calculations: Calculation[]): Decorator => (
     ({ values }) => {
       form.batch(() => {
         const runUpdates = (field: string, updates: Updates) => {
-          const next = getIn(values, field)
-          const previous = getIn(previousValues, field)
+          const next = values && getIn(values, field)
+          const previous = previousValues && getIn(previousValues, field)
           if (next !== previous) {
             if (typeof updates === 'function') {
               const results = updates(next, field, values)

src/decorator.js

@@ -205,7 +205,7 @@ describe('decorator', () => {
     expect(spy.mock.calls[6][0].values).toEqual({ items: [3, 4, 5], total: 12 })
   })
 
-  it('should allow seperate array summing', () => {
+  it('should allow separate array summing', () => {
     const form = createForm({ onSubmit: onSubmitMock })
     const spy = jest.fn()
     const total = jest.fn()
@@ -278,4 +278,81 @@ describe('decorator', () => {
       list: [{ items: [3, 4, 5], total: 12 }]
     })
   })
+
+  it('should notify form subscribers of updated values', () => {
+    const form = createForm({ onSubmit: onSubmitMock })
+    const spy = jest.fn()
+    const minimum = jest.fn()
+    const maximum = jest.fn()
+    const calcMax = jest.fn((minimumValue, allValues) =>
+      Math.max(minimumValue || 0, allValues.maximum || 0)
+    )
+    const calcMin = jest.fn((maximumValue, allValues) =>
+      Math.min(maximumValue || 0, allValues.minimum || 0)
+    )
+    form.subscribe(spy, { values: true })
+    form.registerField('minimum', minimum, { value: true })
+    form.registerField('maximum', maximum, { value: true })
+    const decorator = createDecorator(
+      {
+        field: 'minimum', // when minimum changes...
+        updates: {
+          // ...update maximum to the result of this function
+          maximum: calcMax
+        }
+      },
+      {
+        field: 'maximum', // when maximum changes...
+        updates: {
+          // update minimum to the result of this function
+          minimum: calcMin
+        }
+      }
+    )
+    decorator(form)
+
+    expect(spy).toHaveBeenCalled()
+    expect(spy).toHaveBeenCalledTimes(1)
+    expect(spy.mock.calls[0][0].values).toEqual({})
+
+    expect(minimum).toHaveBeenCalled()
+    expect(minimum).toHaveBeenCalledTimes(1)
+    expect(minimum.mock.calls[0][0].value).toBeUndefined()
+
+    expect(maximum).toHaveBeenCalled()
+    expect(maximum).toHaveBeenCalledTimes(1)
+    expect(maximum.mock.calls[0][0].value).toBeUndefined()
+
+    expect(calcMax).not.toHaveBeenCalled()
+    expect(calcMin).not.toHaveBeenCalled()
+
+    // change minimum
+    form.change('minimum', 3)
+
+    expect(calcMax).toHaveBeenCalled()
+    expect(calcMax).toHaveBeenCalledTimes(1)
+    expect(calcMin).toHaveBeenCalled()
+    expect(calcMin).toHaveBeenCalledTimes(1)
+
+    expect(spy).toHaveBeenCalledTimes(3)
+    expect(spy.mock.calls[1][0].values).toEqual({ minimum: 3 })
+    expect(spy.mock.calls[2][0].values).toEqual({ minimum: 3, maximum: 3 })
+
+    // raise maximum higher
+    form.change('maximum', 5)
+
+    expect(calcMin).toHaveBeenCalledTimes(2)
+
+    expect(spy).toHaveBeenCalledTimes(4)
+    expect(spy.mock.calls[3][0].values).toEqual({ minimum: 3, maximum: 5 })
+
+    form.change('maximum', 2)
+
+    expect(calcMin).toHaveBeenCalledTimes(3)
+    expect(calcMax).toHaveBeenCalledTimes(2)
+
+    expect(spy).toHaveBeenCalledTimes(6)
+    expect(spy.mock.calls[4][0].values).toEqual({ minimum: 3, maximum: 2 })
+    expect(spy.mock.calls[5][0].values).toEqual({ minimum: 2, maximum: 2 })
+  })
 })

src/decorator.test.js

@@ -1,9 +1,15 @@
 // @flow
 type FieldName = string
 export type FieldPattern = FieldName | RegExp
-export type Updates = {
-  [FieldName]: (value: any, allValues: Object) => any
+export type UpdatesByName = {
+  [FieldName]: (value: any, allValues: ?Object) => any
 }
+export type UpdatesForAll = (
+  value: any,
+  field: string,
+  allValues: ?Object
+) => { [FieldName]: any }
+export type Updates = UpdatesByName | UpdatesForAll
 
 export type Calculation = {
   field: FieldPattern,