Allow later initialization through initialValues prop (#30)

Author: erikras

src/ReactFinalForm.js

@@ -9,6 +9,7 @@ import {
 } from 'final-form'
 import type { Api, Config, FormSubscription, FormState } from 'final-form'
 import type { FormProps as Props, ReactContext } from './types'
+import shallowEqual from './shallowEqual'
 import renderComponent from './renderComponent'
 export const version = '1.0.0'
 
@@ -94,6 +95,12 @@ export default class ReactFinalForm extends React.PureComponent<Props, State> {
     return this.form.submit()
   }
 
+  componentWillReceiveProps(nextProps: Props) {
+    if (!shallowEqual(this.props.initialValues, nextProps.initialValues)) {
+      this.form.initialize(nextProps.initialValues)
+    }
+  }
+
   componentWillUnmount() {
     this.unsubscribe()
   }

src/ReactFinalForm.test.js

@@ -181,6 +181,45 @@ describe('ReactFinalForm', () => {
     expect(onSubmit).toHaveBeenCalledWith({ foo: 'bar' })
   })
 
+  it('should reinitialize when initialValues prop changes', () => {
+    const renderInput = jest.fn(({ input }) => <input {...input} />)
+    class Container extends React.Component {
+      state = { initValues: {} }
+
+      render() {
+        return (
+          <Form
+            onSubmit={onSubmitMock}
+            subscription={{ dirty: true }}
+            initialValues={this.state.initValues}
+          >
+            {() => (
+              <form>
+                <Field name="foo" render={renderInput} />
+                <button
+                  type="button"
+                  onClick={() => this.setState({ initValues: { foo: 'bar' } })}
+                >
+                  Initialize
+                </button>
+              </form>
+            )}
+          </Form>
+        )
+      }
+    }
+
+    const dom = TestUtils.renderIntoDocument(<Container />)
+    expect(renderInput).toHaveBeenCalled()
+    expect(renderInput).toHaveBeenCalledTimes(1)
+
+    const init = TestUtils.findRenderedDOMComponentWithTag(dom, 'button')
+    TestUtils.Simulate.click(init)
+
+    expect(renderInput).toHaveBeenCalledTimes(2)
+    expect(renderInput.mock.calls[1][0].input.value).toBe('bar')
+  })
+  
   it('should return a promise from handleSubmit when submission is async', async () => {
     const onSubmit = jest.fn()
     let promise

src/shallowEqual.js

@@ -0,0 +1,24 @@
+// @flow
+const shallowEqual = (a: any, b: any): boolean => {
+  if (a === b) {
+    return true
+  }
+  if (typeof a !== 'object' || !a || typeof b !== 'object' || !b) {
+    return false
+  }
+  var keysA = Object.keys(a)
+  var keysB = Object.keys(b)
+  if (keysA.length !== keysB.length) {
+    return false
+  }
+  var bHasOwnProperty = Object.prototype.hasOwnProperty.bind(b)
+  for (var idx = 0; idx < keysA.length; idx++) {
+    var key = keysA[idx]
+    if (!bHasOwnProperty(key) || a[key] !== b[key]) {
+      return false
+    }
+  }
+  return true
+}
+
+export default shallowEqual

src/shallowEqual.test.js

@@ -0,0 +1,60 @@
+import shallowEqual from './shallowEqual'
+
+describe('shallowEqual', () => {
+  it('returns false if either argument is null', () => {
+    expect(shallowEqual(null, {})).toBe(false)
+    expect(shallowEqual({}, null)).toBe(false)
+  })
+
+  it('returns true if both arguments are null or undefined', () => {
+    expect(shallowEqual(null, null)).toBe(true)
+    expect(shallowEqual(undefined, undefined)).toBe(true)
+  })
+
+  it('returns true if arguments are shallow equal', () => {
+    expect(shallowEqual({ a: 1, b: 2, c: 3 }, { a: 1, b: 2, c: 3 })).toBe(true)
+  })
+
+  it('returns false if arguments are not objects and not equal', () => {
+    expect(shallowEqual(1, 2)).toBe(false)
+  })
+
+  it('returns false if only one argument is not an object', () => {
+    expect(shallowEqual(1, {})).toBe(false)
+  })
+
+  it('returns false if first argument has too many keys', () => {
+    expect(shallowEqual({ a: 1, b: 2, c: 3 }, { a: 1, b: 2 })).toBe(false)
+  })
+
+  it('returns false if second argument has too many keys', () => {
+    expect(shallowEqual({ a: 1, b: 2 }, { a: 1, b: 2, c: 3 })).toBe(false)
+  })
+
+  it('returns true if values are not primitives but are ===', () => {
+    let obj = {}
+    expect(shallowEqual({ a: 1, b: 2, c: obj }, { a: 1, b: 2, c: obj })).toBe(
+      true
+    )
+  })
+
+  it('returns false if arguments are not shallow equal', () => {
+    expect(shallowEqual({ a: 1, b: 2, c: {} }, { a: 1, b: 2, c: {} })).toBe(
+      false
+    )
+  })
+
+  it('should treat objects created by `Object.create(null)` like any other plain object', () => {
+    function Foo() {
+      this.a = 1
+    }
+    Foo.prototype.constructor = null
+
+    const object2 = { a: 1 }
+    expect(shallowEqual(new Foo(), object2)).toBe(true)
+
+    const object1 = Object.create(null)
+    object1.a = 1
+    expect(shallowEqual(object1, object2)).toBe(true)
+  })
+})