Added a custom isEqual function (#10)

Author: erikras

README.md

@@ -109,9 +109,9 @@ A function that takes a set of calculations and returns a 🏁 Final Form
 
 ## Types
 
-### `Calculation: { field: FieldPattern, updates: Updates }`
+### `Calculation: { field: FieldPattern, isEqual?: (any, any) => boolean, updates: Updates }`
 
-A calculation to perform
+A calculation to perform, with an optional `isEqual` predicate to determine if a value has really changed (defaults to `===`).
 
 ### `FieldName: string`
 

package-lock.json

@@ -1,19 +1,19 @@
 {
   "name": "final-form-calculate",
   "version": "1.0.2",
-  "description": "Decorator for calculating field values based on other field values in 🏁 Final Form",
+  "description":
+    "Decorator for calculating field values based on other field values in 🏁 Final Form",
   "main": "dist/final-form-calculate.cjs.js",
   "jsnext:main": "dist/final-form-calculate.es.js",
   "module": "dist/final-form-calculate.es.js",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "scripts": {
     "start": "nps",
     "test": "nps test",
     "precommit": "lint-staged && npm start validate"
   },
-  "author": "Erik Rasmussen <[email protected]> (http://github.com/erikras)",
+  "author":
+    "Erik Rasmussen <[email protected]> (http://github.com/erikras)",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -62,10 +62,7 @@
     "final-form": ">=1.3.0"
   },
   "lint-staged": {
-    "*.{js,json,md,css}": [
-      "prettier --write",
-      "git add"
-    ]
+    "*.{js,json,md,css}": ["prettier --write", "git add"]
   },
   "bundlesize": [
     {

package.json

@@ -3,17 +3,22 @@ import type { Decorator, FormApi } from 'final-form'
 import type { Calculation, Updates } from './types'
 import { getIn } from 'final-form'
 
+const tripleEquals = (a: any, b: any) => a === b
 const createDecorator = (...calculations: Calculation[]): Decorator => (
   form: FormApi
 ) => {
   let previousValues = {}
   const unsubscribe = form.subscribe(
     ({ values }) => {
       form.batch(() => {
-        const runUpdates = (field: string, updates: Updates) => {
+        const runUpdates = (
+          field: string,
+          isEqual: (any, any) => boolean,
+          updates: Updates
+        ) => {
           const next = values && getIn(values, field)
           const previous = previousValues && getIn(previousValues, field)
-          if (next !== previous) {
+          if (!isEqual(next, previous)) {
             if (typeof updates === 'function') {
               const results = updates(next, field, values)
               Object.keys(results).forEach(destField => {
@@ -28,15 +33,15 @@ const createDecorator = (...calculations: Calculation[]): Decorator => (
           }
         }
         const fields = form.getRegisteredFields()
-        calculations.forEach(({ field, updates }) => {
+        calculations.forEach(({ field, isEqual, updates }) => {
           if (typeof field === 'string') {
-            runUpdates(field, updates)
+            runUpdates(field, isEqual || tripleEquals, updates)
           } else {
             // field is a regex
             const regex = (field: RegExp)
             fields.forEach(fieldName => {
               if (regex.test(fieldName)) {
-                runUpdates(fieldName, updates)
+                runUpdates(fieldName, isEqual || tripleEquals, updates)
               }
             })
           }

src/decorator.js

@@ -355,4 +355,86 @@ describe('decorator', () => {
     expect(spy.mock.calls[4][0].values).toEqual({ minimum: 3, maximum: 2 })
     expect(spy.mock.calls[5][0].values).toEqual({ minimum: 2, maximum: 2 })
   })
+
+  it('should allow alternate isEqual function', () => {
+    const form = createForm({ onSubmit: onSubmitMock })
+    const spy = jest.fn()
+    const foo = jest.fn()
+    const bar = jest.fn()
+    form.subscribe(spy, { values: true })
+    form.registerField('foo', foo, { value: true })
+    form.registerField('bar', bar, { value: true })
+    const decorator = createDecorator({
+      field: 'foo',
+      isEqual: (a, b) =>
+        (a === undefined ? undefined : a.id) ===
+        (b === undefined ? undefined : b.id),
+      updates: {
+        bar: fooValue => ({ id: fooValue.id + 1, name: `${fooValue.name}bar` })
+      }
+    })
+    const unsubscribe = decorator(form)
+    expect(typeof unsubscribe).toBe('function')
+
+    expect(spy).toHaveBeenCalled()
+    expect(spy).toHaveBeenCalledTimes(1)
+    expect(spy.mock.calls[0][0].values).toEqual({})
+
+    expect(foo).toHaveBeenCalled()
+    expect(foo).toHaveBeenCalledTimes(1)
+    expect(foo.mock.calls[0][0].value).toBeUndefined()
+
+    expect(bar).toHaveBeenCalled()
+    expect(bar).toHaveBeenCalledTimes(1)
+    expect(bar.mock.calls[0][0].value).toBeUndefined()
+
+    // change foo (should trigger calculation on bar)
+    form.change('foo', { id: 1, name: 'baz' })
+
+    expect(spy).toHaveBeenCalledTimes(3)
+    expect(spy.mock.calls[1][0].values).toEqual({ foo: { id: 1, name: 'baz' } })
+    expect(spy.mock.calls[2][0].values).toEqual({
+      foo: { id: 1, name: 'baz' },
+      bar: { id: 2, name: 'bazbar' }
+    })
+
+    expect(foo).toHaveBeenCalledTimes(2)
+    expect(foo.mock.calls[1][0].value).toEqual({ id: 1, name: 'baz' })
+
+    expect(bar).toHaveBeenCalledTimes(2)
+    expect(bar.mock.calls[1][0].value).toEqual({ id: 2, name: 'bazbar' })
+
+    // change foo's name, but not id
+    form.change('foo', { id: 1, name: 'superbaz' })
+
+    expect(spy).toHaveBeenCalledTimes(4)
+    expect(spy.mock.calls[3][0].values).toEqual({
+      foo: { id: 1, name: 'superbaz' },
+      bar: { id: 2, name: 'bazbar' }
+    })
+
+    expect(foo).toHaveBeenCalledTimes(3)
+    expect(foo.mock.calls[2][0].value).toEqual({ id: 1, name: 'superbaz' })
+
+    expect(bar).toHaveBeenCalledTimes(2)
+
+    // change foo's id: should trigger calculation
+    form.change('foo', { id: 3, name: 'superbaz' })
+
+    expect(spy).toHaveBeenCalledTimes(6)
+    expect(spy.mock.calls[4][0].values).toEqual({
+      foo: { id: 3, name: 'superbaz' },
+      bar: { id: 2, name: 'bazbar' }
+    })
+    expect(spy.mock.calls[5][0].values).toEqual({
+      foo: { id: 3, name: 'superbaz' },
+      bar: { id: 4, name: 'superbazbar' }
+    })
+
+    expect(foo).toHaveBeenCalledTimes(4)
+    expect(foo.mock.calls[3][0].value).toEqual({ id: 3, name: 'superbaz' })
+
+    expect(bar).toHaveBeenCalledTimes(3)
+    expect(bar.mock.calls[2][0].value).toEqual({ id: 4, name: 'superbazbar' })
+  })
 })

src/decorator.test.js

@@ -13,5 +13,6 @@ export type Updates = UpdatesByName | UpdatesForAll
 
 export type Calculation = {
   field: FieldPattern,
+  isEqual?: (any, any) => boolean,
   updates: Updates
 }