Add boolean inputs

src/components/CheckboxBooleanInput.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { FormGroup, Input, Label } from 'reactstrap';
+
+const CheckboxBooleanInput = props => (
+  <FormGroup check>
+    <Label check>
+      <Input
+        type="checkbox"
+        checked={props.value}
+        onChange={e => props.onChange && props.onChange(e.target.checked)}
+        />
+    </Label>
+  </FormGroup>
+);
+
+CheckboxBooleanInput.propTypes = {
+  value: React.PropTypes.bool
+}
+
+export default CheckboxBooleanInput;

src/components/CheckboxInput.js

@@ -1,42 +1,11 @@
 import React from 'react';
 
-class CheckboxInput extends React.Component {
-  onChange = e => {
-    if (this.props.onChange) {
-      const { checked, value } = e.target;
-      const currentSelection = (this.props.value || []).slice(0);
+import CheckboxBooleanInput from './CheckboxBooleanInput';
+import CheckboxListInput from './CheckboxListInput';
 
-      if (checked) {
-        currentSelection.push(value);
-      } else {
-        const i = currentSelection.indexOf(value);
-        i > -1 && currentSelection.splice(i, 1);
-      }
-
-      this.props.onChange(currentSelection);
-    }
-  }
-
-  render() {
-    const {
-      type,
-      value,
-      children,
-      onChange,
-      ...props
-    } = this.props;
-
-    return (
-      <div>
-        {React.Children.map(children, choice => React.cloneElement(choice, {
-          type: 'checkbox',
-          selected: value,
-          onChange: this.onChange,
-          ...props
-        }))}
-      </div>
-    );
-  }
-}
+const CheckboxInput = props =>
+  props.children ?
+    <CheckboxListInput {...props} /> :
+    <CheckboxBooleanInput {...props} />
 
 export default CheckboxInput;

src/components/CheckboxListInput.js

@@ -0,0 +1,42 @@
+import React from 'react';
+
+class CheckboxListInput extends React.Component {
+  onChange = e => {
+    if (this.props.onChange) {
+      const { checked, value } = e.target;
+      const currentSelection = (this.props.value || []).slice(0);
+
+      if (checked) {
+        currentSelection.push(value);
+      } else {
+        const i = currentSelection.indexOf(value);
+        i > -1 && currentSelection.splice(i, 1);
+      }
+
+      this.props.onChange(currentSelection);
+    }
+  }
+
+  render() {
+    const {
+      type,
+      value,
+      children,
+      onChange,
+      ...props
+    } = this.props;
+
+    return (
+      <div>
+        {React.Children.map(children, choice => React.cloneElement(choice, {
+          type: 'checkbox',
+          selected: value,
+          onChange: this.onChange,
+          ...props
+        }))}
+      </div>
+    );
+  }
+}
+
+export default CheckboxListInput;

stories/Forms.js

@@ -12,7 +12,8 @@ const formData = {
   characters: ['Luke Skywalker', 'awesome'],
   address: {
     address1: '123 Best Avenue'
-  }
+  },
+  mindTricks: true
 };
 
 const colKnobOptions = {
@@ -85,6 +86,7 @@ storiesOf('Forms', module)
         <FormChoice>Rey</FormChoice>
         <FormChoice>TK-421</FormChoice>
       </FormRow>
+      <FormRow type="checkbox" label="Use Jedi mind tricks?" />
       <FormRow type="radio" label="Do you like Star Wars?" inline name="movie">
         <FormChoice>Yes</FormChoice>
         <FormChoice disabled>No</FormChoice>
@@ -113,6 +115,7 @@ storiesOf('Forms', module)
         <FormChoice value="awesome">Rey</FormChoice>
         <FormChoice>TK-421</FormChoice>
       </BoundFormRow>
+      <BoundFormRow type="checkbox" label="Use Jedi mind tricks?" name="mindTricks" />
       <BoundFormRow type="radio" label="Select Ship" name="ship">
         <FormChoice>Death Star</FormChoice>
         <FormChoice>Millennium Falcon</FormChoice>

test/components/CheckboxBooleanInput.spec.js

@@ -0,0 +1,36 @@
+/* eslint-env mocha */
+import React from 'react';
+import sinon from 'sinon';
+import assert from 'assert';
+import { shallow } from 'enzyme';
+
+import { Input } from 'reactstrap';
+
+import CheckboxBooleanInput from '../../src/components/CheckboxBooleanInput';
+
+describe('<CheckboxBooleanInput />', () => {
+  let onChange = sinon.stub();
+
+  const wrapper = shallow(
+    <CheckboxBooleanInput value={true} onChange={onChange} />
+  );
+
+  const component = wrapper.find(Input);
+
+  it('should be an Input', () => {
+    assert.equal(component.type(), Input);
+  });
+
+  it('should not have any children', () => {
+    assert.equal(component.children().length, 0);
+  });
+
+  it('should use value for checked state', () => {
+    assert.strictEqual(component.prop('checked'), true);
+  });
+
+  it('should call onChange with checked state', () => {
+    component.simulate('change', { target: { checked: false }});
+    assert(onChange.calledWith(false));
+  });
+});

test/components/CheckboxInput.spec.js

@@ -1,43 +1,27 @@
 /* eslint-env mocha */
 import React from 'react';
-import sinon from 'sinon';
 import assert from 'assert';
 import { shallow } from 'enzyme';
 
 import CheckboxInput from '../../src/components/CheckboxInput';
+import CheckboxBooleanInput from '../../src/components/CheckboxBooleanInput';
+import CheckboxListInput from '../../src/components/CheckboxListInput';
 import FormChoice from '../../src/components/FormChoice';
 
 describe('<CheckboxInput />', () => {
-  let onChange = sinon.stub();
+  it('should be a CheckboxListInput when there are children (choices)', () => {
+    const component = shallow(
+      <CheckboxInput>
+        <FormChoice>A</FormChoice>
+      </CheckboxInput>
+    );
 
-  const value = [ 'A', 'stuff', 'C' ];
-  const component = shallow(
-    <CheckboxInput value={value} onChange={onChange}>
-      <FormChoice>A</FormChoice>
-      <FormChoice value="stuff">B</FormChoice>
-      <FormChoice>Other</FormChoice>
-    </CheckboxInput>
-  );
-
-  it('should render with correct type', () => {
-    assert.equal(component.type(), 'div');
-  });
-
-  it('should set up children', () => {
-    component.find(FormChoice).forEach(choice => {
-      assert.equal(choice.prop('type'), 'checkbox');
-      assert.equal(choice.prop('selected'), value);
-      assert.equal(choice.prop('onChange'), component.instance().onChange);
-    });
+    assert.equal(component.type(), CheckboxListInput);
   });
 
-  it('should deselect unchecked choice', () => {
-    component.childAt(0).simulate('change', { target: { checked: false, value: 'A' }});
-    assert(onChange.calledWith([ 'stuff', 'C' ]));
-  });
+  it('should be a CheckboxBooleanInput when there are no children', () => {
+    const component = shallow(<CheckboxInput />);
 
-  it('should select checked choice', () => {
-    component.childAt(2).simulate('change', { target: { checked: true, value: 'Other' }});
-    assert(onChange.calledWith([ 'A', 'stuff', 'C', 'Other' ]));
+    assert.equal(component.type(), CheckboxBooleanInput);
   });
 });

test/components/CheckboxListInput.spec.js

@@ -0,0 +1,43 @@
+/* eslint-env mocha */
+import React from 'react';
+import sinon from 'sinon';
+import assert from 'assert';
+import { shallow } from 'enzyme';
+
+import CheckboxListInput from '../../src/components/CheckboxListInput';
+import FormChoice from '../../src/components/FormChoice';
+
+describe('<CheckboxListInput />', () => {
+  let onChange = sinon.stub();
+
+  const value = [ 'A', 'stuff', 'C' ];
+  const component = shallow(
+    <CheckboxListInput value={value} onChange={onChange}>
+      <FormChoice>A</FormChoice>
+      <FormChoice value="stuff">B</FormChoice>
+      <FormChoice>Other</FormChoice>
+    </CheckboxListInput>
+  );
+
+  it('should render with correct type', () => {
+    assert.equal(component.type(), 'div');
+  });
+
+  it('should set up children', () => {
+    component.find(FormChoice).forEach(choice => {
+      assert.equal(choice.prop('type'), 'checkbox');
+      assert.equal(choice.prop('selected'), value);
+      assert.equal(choice.prop('onChange'), component.instance().onChange);
+    });
+  });
+
+  it('should deselect unchecked choice', () => {
+    component.childAt(0).simulate('change', { target: { checked: false, value: 'A' }});
+    assert(onChange.calledWith([ 'stuff', 'C' ]));
+  });
+
+  it('should select checked choice', () => {
+    component.childAt(2).simulate('change', { target: { checked: true, value: 'Other' }});
+    assert(onChange.calledWith([ 'A', 'stuff', 'C', 'Other' ]));
+  });
+});