Add promises support (#17)

* Add support for promises

* Add promises doc

Author: TiuSh

README.md

@@ -51,6 +51,16 @@ const decorator = createDecorator(
         (allValues.items || []).reduce((sum, value) => sum + value, 0)
     }
   },
+  {
+    field: 'foo', // when the value of foo changes...
+    updates: {
+      // ...asynchronously set field "doubleFoo" to twice the value using a promise
+      doubleFoo: (fooValue, allValues) =>
+        new Promise(resolve => {
+          setTimeout(() => resolve(fooValue * 2), 100)
+        })
+    }
+  },
   {
     field: /\.timeFrom/, // when a deeper field matching this pattern changes...
     updates: (value, name, allValues) => {
@@ -123,10 +133,10 @@ A pattern to match a field with.
 
 Either an object of updater functions or a function that generates updates for multiple fields.
 
-### `UpdatesByName: { [FieldName]: (value: any, allValues: Object) => any }`
+### `UpdatesByName: { [FieldName]: (value: any, allValues: Object) => Promise | any }`
 
 Updater functions for each calculated field.
 
-### `UpdatesForAll: (value: any, field: string, allValues: Object) => { [FieldName]: any }`
+### `UpdatesForAll: (value: any, field: string, allValues: Object) => Promise | { [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.

src/decorator.js

@@ -2,6 +2,7 @@
 import type { Decorator, FormApi } from 'final-form'
 import type { Calculation, Updates } from './types'
 import { getIn } from 'final-form'
+import isPromise from './isPromise'
 
 const tripleEquals = (a: any, b: any) => a === b
 const createDecorator = (...calculations: Calculation[]): Decorator => (
@@ -21,13 +22,30 @@ const createDecorator = (...calculations: Calculation[]): Decorator => (
           if (!isEqual(next, previous)) {
             if (typeof updates === 'function') {
               const results = updates(next, field, values)
-              Object.keys(results).forEach(destField => {
-                form.change(destField, results[destField])
-              })
+
+              if (isPromise(results)) {
+                results.then(resolved => {
+                  Object.keys(resolved).forEach(destField => {
+                    form.change(destField, resolved[destField])
+                  })
+                })
+              } else {
+                Object.keys(results).forEach(destField => {
+                  form.change(destField, results[destField])
+                })
+              }
             } else {
               Object.keys(updates).forEach(destField => {
                 const update = updates[destField]
-                form.change(destField, update(next, values))
+                const result = update(next, values)
+
+                if (isPromise(result)) {
+                  result.then(resolved => {
+                    form.change(destField, resolved)
+                  })
+                } else {
+                  form.change(destField, result)
+                }
               })
             }
           }

src/decorator.test.js

@@ -132,6 +132,96 @@ describe('decorator', () => {
     expect(bar.mock.calls[1][0].value).toBe('bazbar')
   })
 
+  it('should update one field when another changes, using promises', () => {
+    const form = createForm({ onSubmit: onSubmitMock })
+    const spy = jest.fn()
+    const foo = jest.fn()
+    const bar = jest.fn()
+    const promise = Promise.resolve('bar')
+    form.subscribe(spy, { values: true })
+    form.registerField('foo', foo, { value: true })
+    form.registerField('bar', bar, { value: true })
+    const decorator = createDecorator({
+      field: 'foo',
+      updates: {
+        bar: fooValue => promise
+      }
+    })
+    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', 'baz')
+
+    return promise.then(() => {
+      expect(spy).toHaveBeenCalledTimes(3)
+      expect(spy.mock.calls[1][0].values).toEqual({ foo: 'baz' })
+      expect(spy.mock.calls[2][0].values).toEqual({ foo: 'baz', bar: 'bar' })
+
+      expect(foo).toHaveBeenCalledTimes(2)
+      expect(foo.mock.calls[1][0].value).toBe('baz')
+
+      expect(bar).toHaveBeenCalledTimes(2)
+      expect(bar.mock.calls[1][0].value).toBe('bar')
+    })
+  })
+
+  it('should update one field when another changes, using a single promise', () => {
+    const form = createForm({ onSubmit: onSubmitMock })
+    const spy = jest.fn()
+    const foo = jest.fn()
+    const bar = jest.fn()
+    const promise = Promise.resolve({ bar: 'bar' })
+    form.subscribe(spy, { values: true })
+    form.registerField('foo', foo, { value: true })
+    form.registerField('bar', bar, { value: true })
+    const decorator = createDecorator({
+      field: 'foo',
+      updates: () => promise
+    })
+    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', 'baz')
+
+    return promise.then(() => {
+      expect(spy).toHaveBeenCalledTimes(3)
+      expect(spy.mock.calls[1][0].values).toEqual({ foo: 'baz' })
+      expect(spy.mock.calls[2][0].values).toEqual({ foo: 'baz', bar: 'bar' })
+
+      expect(foo).toHaveBeenCalledTimes(2)
+      expect(foo.mock.calls[1][0].value).toBe('baz')
+
+      expect(bar).toHaveBeenCalledTimes(2)
+      expect(bar.mock.calls[1][0].value).toBe('bar')
+    })
+  })
+
   it('should cease when unsubscribed', () => {
     const form = createForm({ onSubmit: onSubmitMock })
     const spy = jest.fn()

src/isPromise.js

@@ -0,0 +1,4 @@
+export default obj =>
+  !!obj &&
+  (typeof obj === 'object' || typeof obj === 'function') &&
+  typeof obj.then === 'function'

src/isPromise.test.js

@@ -0,0 +1,36 @@
+import isPromise from './isPromise'
+
+var promise = { then: () => {} }
+
+describe('calling isPromise', () => {
+  it('should return true with a promise', () => {
+    expect(isPromise(promise)).toBe(true)
+  })
+  it('returns false with null', () => {
+    expect(isPromise(null)).toBe(false)
+  })
+  it('returns false with undefined', () => {
+    expect(isPromise(undefined)).toBe(false)
+  })
+  it('returns false with a number', () => {
+    expect(isPromise(0)).toBe(false)
+    expect(isPromise(-42)).toBe(false)
+    expect(isPromise(42)).toBe(false)
+  })
+  it('returns false with a string', () => {
+    expect(isPromise('')).toBe(false)
+    expect(isPromise('then')).toBe(false)
+  })
+  it('returns false with a boolean', () => {
+    expect(isPromise(false)).toBe(false)
+    expect(isPromise(true)).toBe(false)
+  })
+  it('returns false with an object', () => {
+    expect(isPromise({})).toBe(false)
+    expect(isPromise({ then: true })).toBe(false)
+  })
+  it('returns false with an array', () => {
+    expect(isPromise([])).toBe(false)
+    expect(isPromise([true])).toBe(false)
+  })
+})