From 7c2f28c9a6d5622409308c318ba16b1edb13e662 Mon Sep 17 00:00:00 2001
From: Aaron Panchal <aaron.panchal@appfolio.com>
Date: Tue, 31 Jan 2017 10:39:29 -0800
Subject: [PATCH] ap - call onChange when bound form data changes

---
 src/components/BoundForm.js       | 7 +++++--
 test/components/BoundForm.spec.js | 9 ++++++++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/BoundForm.js b/src/components/BoundForm.js
index 8bf30e3f6..e03f3bc94 100644
--- a/src/components/BoundForm.js
+++ b/src/components/BoundForm.js
@@ -8,12 +8,14 @@ class BoundForm extends React.Component {
     children: React.PropTypes.node,
     errors: React.PropTypes.object,
     object: React.PropTypes.object.isRequired,
-    onSubmit: React.PropTypes.func
+    onSubmit: React.PropTypes.func,
+    onChange: React.PropTypes.func
   };
 
   static defaultProps = {
     errors: {},
-    onSubmit: noop
+    onSubmit: noop,
+    onChange: noop
   };
 
   constructor(props) {
@@ -32,6 +34,7 @@ class BoundForm extends React.Component {
   handleChange = name => data => {
     const value = data.target instanceof Element ? data.target.value : data;
     this.setState({ formData: set(this.state.formData, name, value) });
+    this.props.onChange(this.state.formData);
   }
 
   render() {
diff --git a/test/components/BoundForm.spec.js b/test/components/BoundForm.spec.js
index 810f11715..f87cd0f4a 100644
--- a/test/components/BoundForm.spec.js
+++ b/test/components/BoundForm.spec.js
@@ -24,6 +24,7 @@ describe('<BoundForm />', () => {
   }
 
   const submitFunc = sinon.stub();
+  const changeFunc = sinon.stub();
 
   const Composite = props => (
     <div>
@@ -33,7 +34,7 @@ describe('<BoundForm />', () => {
   );
 
   const component = shallow(
-    <BoundForm object={data} errors={errors} onSubmit={submitFunc}>
+    <BoundForm object={data} errors={errors} onSubmit={submitFunc} onChange={changeFunc}>
       <FormRow label="First Name" name="firstName" />
       <FormRow label="Last Name" name="lastName" />
       <FormRow type="checkbox" label="Foobar" name="checkboxes">
@@ -61,6 +62,12 @@ describe('<BoundForm />', () => {
     assert.equal(component.state('formData').firstName, 'Desmond');
   });
 
+  it('should emit onChange when changed', () => {
+    const row = component.find('[name="firstName"]');
+    row.simulate('change', 'Desmond');
+    assert(changeFunc.calledWith(Object.assign({}, data, { firstName: 'Desmond' })));
+  });
+
   it('should support nested data', () => {
     const row = component.find('[name="address"]');
     assert.equal(row.prop('value'), component.state('formData').address);