make checkboxes resettable in forms [#153197924]

Signed-off-by: Jonathan Berney <jberney@pivotal.io>
pivotal-cf · Nov 27, 2017 · 468ad4a · 468ad4a
1 parent 8604e39
commit 468ad4a
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 15 deletions.
diff --git a/spec/pivotal-ui-react/form/form-col_spec.js b/spec/pivotal-ui-react/form/form-col_spec.js
@@ -43,15 +43,15 @@ describe('FormCol', () => {
   });
 
   describe('when the element is a checkbox', () => {
-    let state, onClick, innerOnClick, checkbox;
+    let state, onChangeCheckbox, innerOnChange, checkbox;
 
     beforeEach(() => {
       checkbox = <input type="checkbox"/>;
       state = {current: {checkboxName: true}};
-      innerOnClick = () => 'clicked';
-      onClick = jasmine.createSpy('onClick').and.returnValue(innerOnClick);
+      innerOnChange = () => 'changed';
+      onChangeCheckbox = jasmine.createSpy('onChangeCheckbox').and.returnValue(innerOnChange);
 
-      ReactDOM.render(<FormCol name="checkboxName" state={state} onClick={onClick}>
+      ReactDOM.render(<FormCol name="checkboxName" state={state} onChangeCheckbox={onChangeCheckbox}>
         {checkbox}
       </FormCol>, root);
     });
@@ -60,8 +60,8 @@ describe('FormCol', () => {
       expect(React.cloneElement).toHaveBeenCalledWith(checkbox, {
         name: 'checkboxName',
         id: 'some-unique-string',
-        defaultChecked: true,
-        onClick: innerOnClick
+        checked: true,
+        onChange: innerOnChange
       });
     });
   });

diff --git a/src/react/forms/form-col.js b/src/react/forms/form-col.js
@@ -17,7 +17,7 @@ export class FormCol extends React.Component {
     reset: PropTypes.func,
     onChange: PropTypes.func,
     onBlur: PropTypes.func,
-    onClick: PropTypes.func,
+    onChangeCheckbox: PropTypes.func,
     name: PropTypes.string,
     help: PropTypes.node,
     validator: PropTypes.func,
@@ -37,7 +37,7 @@ export class FormCol extends React.Component {
 
   render() {
     const {
-      state, setState, canSubmit, onSubmit, canReset, reset, onChange, onBlur, onClick, fixed,
+      state, setState, canSubmit, onSubmit, canReset, reset, onChange, onBlur, onChangeCheckbox, fixed,
       children, name, help, validator, retainLabelHeight, hidden, labelFor, className, ...rest
     } = this.props;
 
@@ -63,8 +63,8 @@ export class FormCol extends React.Component {
       if (name) {
         const isCheckbox = element.props.type === 'checkbox';
         if (isCheckbox) {
-          props.defaultChecked = state.current[name];
-          props.onClick = element.props.onClick || onClick(name);
+          props.checked = state.current[name];
+          props.onChange = element.props.onChange || onChangeCheckbox(name);
         } else {
           props.value = element.props.value || (state.current && state.current[name]);
           props.onChange = element.props.onChange || (onChange ? onChange(name, validator) : () => {

diff --git a/src/react/forms/form-row.js b/src/react/forms/form-row.js
@@ -13,7 +13,7 @@ export class FormRow extends React.Component {
     reset: PropTypes.func,
     onChange: PropTypes.func,
     onBlur: PropTypes.func,
-    onClick: PropTypes.func,
+    onChangeCheckbox: PropTypes.func,
     wrapper: PropTypes.func
   };
 
@@ -27,7 +27,7 @@ export class FormRow extends React.Component {
     const filteredChildren = React.Children.toArray(children).filter(child => {
       const childIsFormRow = child.type === FormCol || child.type.prototype instanceof FormCol;
       if (!childIsFormRow) {
-        console.warn(`Child of type "${child.type}" will not be rendered. A FormRow\'s children should be of type FormCol.`);
+        console.warn(`Child of type "${child.type}" will not be rendered. A FormRow's children should be of type FormCol.`);
       }
       return childIsFormRow;
     });

diff --git a/src/react/forms/form.js b/src/react/forms/form.js
@@ -54,7 +54,7 @@ export class Form extends React.Component {
       requiredFields
     };
 
-    this.onClick = this.onClick.bind(this);
+    this.onChangeCheckbox = this.onChangeCheckbox.bind(this);
     this.onChange = this.onChange.bind(this);
     this.onBlur = this.onBlur.bind(this);
     this.reset = this.reset.bind(this);
@@ -72,7 +72,7 @@ export class Form extends React.Component {
     this.props.onModified(false);
   }
 
-  onClick(name) {
+  onChangeCheckbox(name) {
     return () => {
       this.setState({
         current: {
@@ -187,7 +187,7 @@ export class Form extends React.Component {
               reset: this.reset,
               onChange: this.onChange,
               onBlur: this.onBlur,
-              onClick: this.onClick
+              onChangeCheckbox: this.onChangeCheckbox
             })
           ))}
         </fieldset>