Merge pull request #120 from appfolio/boundFormUpdates

Bound form updates
appfolio · Jan 31, 2017 · f00dd7b · f00dd7b
2 parents 616491b + 7c2f28c
commit f00dd7b
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 17 deletions.
diff --git a/src/components/Address.js b/src/components/Address.js
@@ -83,11 +83,11 @@ class Address extends Component {
         <FormGroup>
           <Select
             className="w-100"
-            name="country"
+            name="countryCode"
             options={COUNTRIES}
             placeholder="Country"
-            {...this.propsFor('country')}
-            onChange={selection => this.onChange({ country: selection && selection.value })}
+            {...this.propsFor('countryCode')}
+            onChange={selection => this.onChange({ countryCode: selection && selection.value })}
           />
         </FormGroup>
       </div>
@@ -101,7 +101,7 @@ const fieldTypes = {
   city: React.PropTypes.string,
   state: React.PropTypes.string,
   postal: React.PropTypes.string,
-  country: React.PropTypes.string
+  countryCode: React.PropTypes.string
 };
 
 Address.propTypes = {

diff --git 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/stories/Address.js b/stories/Address.js
@@ -15,7 +15,7 @@ storiesOf('Address', module)
           city: 'Smallsville',
           state: 'AL',
           postal: '12345-1234',
-          country: 'US'
+          countryCode: 'US'
         }}
         onChange={action('address onChange')}
       />
@@ -30,7 +30,7 @@ storiesOf('Address', module)
           city: text('city', 'Smallsville'),
           state: select('state', states.map(s => s.value), 'AL'),
           postal: text('postal', '12345-1234'),
-          country: 'US'
+          countryCode: 'US'
         }}
         onChange={action('address onChange')}
       />

diff --git a/test/components/Address.spec.js b/test/components/Address.spec.js
@@ -20,7 +20,7 @@ describe('<Address />', () => {
           city: 'Gotham',
           state: 'NJ',
           postal: '07001',
-          country: 'US'
+          countryCode: 'US'
         }}
         onChange={callback}
       />
@@ -82,17 +82,17 @@ describe('<Address />', () => {
     });
 
     it('should have country', () => {
-      const input = component.find('[name="country"]');
+      const input = component.find('[name="countryCode"]');
       assert.equal(input.type(), Select);
       assert.equal(input.prop('placeholder'), 'Country');
       assert.equal(input.prop('defaultValue'), 'US');
       assert.equal(input.prop('value'), undefined);
 
       input.simulate('change', { label: 'USA', value: 'US' });
-      assert(callback.calledWith({ country: 'US' }));
+      assert(callback.calledWith({ countryCode: 'US' }));
 
       input.simulate('change', null);
-      assert(callback.calledWith({ country: null }));
+      assert(callback.calledWith({ countryCode: null }));
     });
   });
 
@@ -104,7 +104,7 @@ describe('<Address />', () => {
       city: 'Gotham',
       state: 'NJ',
       postal: '07001',
-      country: 'US'
+      countryCode: 'US'
     }
     const component = shallow(
       <Address
@@ -162,15 +162,15 @@ describe('<Address />', () => {
     });
 
     it('should update country', () => {
-      const input = component.find('[name="country"]');
+      const input = component.find('[name="countryCode"]');
       assert.equal(input.prop('value'), 'US');
       assert.equal(input.prop('defaultValue'), '');
 
       input.simulate('change', { label: 'USA', value: 'US' });
-      assert(callback.calledWith(Object.assign({}, addressData, { country: 'US' })));
+      assert(callback.calledWith(Object.assign({}, addressData, { countryCode: 'US' })));
 
       input.simulate('change', null);
-      assert(callback.calledWith(Object.assign({}, addressData, { country: null })));
+      assert(callback.calledWith(Object.assign({}, addressData, { countryCode: null })));
     });
   });
 });
diff --git 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);