feat(Checkbox): Indeterminate state (#1043)

* feat(Checkbox): Indeterminate state

* fix(checkbox): fix lifecycle method signatures

Author: jeffcarbs

docs/app/Examples/modules/Checkbox/States/CheckboxExampleIndeterminate.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Checkbox } from 'semantic-ui-react'
+
+const CheckboxExampleIndeterminate = () => (
+  <Checkbox label='This checkbox is indeterminate' defaultIndeterminate />
+)
+
+export default CheckboxExampleIndeterminate

docs/app/Examples/modules/Checkbox/States/index.js

@@ -5,9 +5,14 @@ import { Message } from 'semantic-ui-react'
 
 const CheckboxStatesExamples = () => (
   <ExampleSection title='States'>
+    <ComponentExample
+      title='Read Only'
+      description='A checkbox can be read-only and unable to change states.'
+      examplePath='modules/Checkbox/States/CheckboxExampleReadOnly'
+    />
     <ComponentExample
       title='Checked'
-      description='A checkbox can come pre-checked.'
+      description='A checkbox can be checked.'
       examplePath='modules/Checkbox/States/CheckboxExampleChecked'
     >
       <Message>
@@ -19,14 +24,14 @@ const CheckboxStatesExamples = () => (
       </Message>
     </ComponentExample>
     <ComponentExample
-      title='Disabled'
-      description='Checkboxes can be disabled.'
-      examplePath='modules/Checkbox/States/CheckboxExampleDisabled'
+      title='Indeterminate'
+      description='A checkbox can be indeterminate.'
+      examplePath='modules/Checkbox/States/CheckboxExampleIndeterminate'
     />
     <ComponentExample
-      title='Read Only'
-      description='Make the checkbox unable to be edited by the user.'
-      examplePath='modules/Checkbox/States/CheckboxExampleReadOnly'
+      title='Disabled'
+      description='A checkbox can be read-only and unable to change states.'
+      examplePath='modules/Checkbox/States/CheckboxExampleDisabled'
     />
     <ComponentExample
       title='Remote Control'

src/modules/Checkbox/Checkbox.js

@@ -44,12 +44,18 @@ export default class Checkbox extends Component {
     /** The initial value of checked. */
     defaultChecked: PropTypes.bool,
 
+    /** Whether or not checkbox is indeterminate. */
+    defaultIndeterminate: PropTypes.bool,
+
     /** A checkbox can appear disabled and be unable to change states */
     disabled: PropTypes.bool,
 
     /** Removes padding for a label. Auto applied when there is no label. */
     fitted: PropTypes.bool,
 
+    /** Whether or not checkbox is indeterminate. */
+    indeterminate: PropTypes.bool,
+
     /** The text of the associated label element. */
     label: customPropTypes.itemShorthand,
 
@@ -60,15 +66,15 @@ export default class Checkbox extends Component {
      * Called when the user attempts to change the checked state.
      *
      * @param {SyntheticEvent} event - React's original SyntheticEvent.
-     * @param {object} data - All props and proposed checked state.
+     * @param {object} data - All props and proposed checked/indeterminate state.
      */
     onChange: PropTypes.func,
 
     /**
      * Called when the checkbox or label is clicked.
      *
      * @param {SyntheticEvent} event - React's original SyntheticEvent.
-     * @param {object} data - All props and current checked state.
+     * @param {object} data - All props and current checked/indeterminate state.
      */
     onClick: PropTypes.func,
 
@@ -106,32 +112,53 @@ export default class Checkbox extends Component {
 
   static autoControlledProps = [
     'checked',
+    'indeterminate',
   ]
 
   static _meta = _meta
 
   state = {}
 
+  componentDidMount() {
+    this.setIndeterminate()
+  }
+
+  componentDidUpdate() {
+    this.setIndeterminate()
+  }
+
   canToggle = () => {
     const { disabled, radio, readOnly } = this.props
     const { checked } = this.state
 
     return !disabled && !readOnly && !(radio && checked)
   }
 
+  handleRef = (c) => {
+    this.checkboxRef = c
+  }
+
   handleClick = (e) => {
     debug('handleClick()')
     const { onChange, onClick } = this.props
-    const { checked } = this.state
+    const { checked, indeterminate } = this.state
 
     if (this.canToggle()) {
-      if (onClick) onClick(e, { ...this.props, checked: !!checked })
-      if (onChange) onChange(e, { ...this.props, checked: !checked })
+      if (onClick) onClick(e, { ...this.props, checked: !!checked, indeterminate: !!indeterminate })
+      if (onChange) onChange(e, { ...this.props, checked: !checked, indeterminate: false })
 
-      this.trySetState({ checked: !checked })
+      this.trySetState({ checked: !checked, indeterminate: false })
     }
   }
 
+  // Note: You can't directly set the indeterminate prop on the input, so we
+  // need to maintain a ref to the input and set it manually whenever the
+  // component updates.
+  setIndeterminate = () => {
+    const { indeterminate } = this.state
+    if (this.checkboxRef) this.checkboxRef.indeterminate = !!indeterminate
+  }
+
   render() {
     const {
       className,
@@ -145,12 +172,13 @@ export default class Checkbox extends Component {
       type,
       value,
     } = this.props
-    const { checked } = this.state
+    const { checked, indeterminate } = this.state
 
     const classes = cx(
       'ui',
       useKeyOnly(checked, 'checked'),
       useKeyOnly(disabled, 'disabled'),
+      useKeyOnly(indeterminate, 'indeterminate'),
       // auto apply fitted class to compact white space when there is no label
       // http://semantic-ui.com/modules/checkbox.html#fitted
       useKeyOnly(!label, 'fitted'),
@@ -171,6 +199,7 @@ export default class Checkbox extends Component {
           className='hidden'
           name={name}
           readOnly
+          ref={this.handleRef}
           tabIndex={0}
           type={type}
           value={value}

test/specs/modules/Checkbox/Checkbox-test.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import { findDOMNode } from 'react-dom'
 
 import Checkbox from 'src/modules/Checkbox/Checkbox'
 import * as common from 'test/specs/commonTests'
@@ -45,6 +46,57 @@ describe('Checkbox', () => {
     })
   })
 
+  describe('indeterminate', () => {
+    it('can be indeterminate', () => {
+      const wrapper = mount(<Checkbox indeterminate />)
+
+      const checkboxNode = findDOMNode(wrapper.instance())
+      const input = checkboxNode.querySelector('input')
+
+      input.indeterminate.should.be.true()
+
+      wrapper.simulate('click').find('input')
+      input.indeterminate.should.be.true()
+    })
+    it('can not be indeterminate', () => {
+      const wrapper = mount(<Checkbox indeterminate={false} />)
+
+      const checkboxNode = findDOMNode(wrapper.instance())
+      const input = checkboxNode.querySelector('input')
+
+      input.indeterminate.should.be.false()
+
+      wrapper.simulate('click').find('input')
+      input.indeterminate.should.be.false()
+    })
+  })
+
+  describe('defaultIndeterminate', () => {
+    it('sets the initial indeterminate state', () => {
+      const wrapper = mount(<Checkbox defaultIndeterminate />)
+
+      const checkboxNode = findDOMNode(wrapper.instance())
+      const input = checkboxNode.querySelector('input')
+
+      input.indeterminate.should.be.true()
+    })
+
+    it('unsets indeterminate state on any click', () => {
+      const wrapper = mount(<Checkbox defaultIndeterminate />)
+
+      const checkboxNode = findDOMNode(wrapper.instance())
+      const input = findDOMNode(checkboxNode.querySelector('input'))
+
+      input.indeterminate.should.be.true()
+
+      wrapper.simulate('click').find('input')
+      input.indeterminate.should.be.false()
+
+      wrapper.simulate('click').find('input')
+      input.indeterminate.should.be.false()
+    })
+  })
+
   describe('disabled', () => {
     it('cannot be checked', () => {
       shallow(<Checkbox disabled />)
@@ -70,14 +122,15 @@ describe('Checkbox', () => {
   describe('onChange', () => {
     it('is called with (event { name, value, !checked }) on click', () => {
       const spy = sandbox.spy()
-      const expectProps = { name: 'foo', value: 'bar', checked: false }
+      const expectProps = { name: 'foo', value: 'bar', checked: false, indeterminate: true }
       mount(<Checkbox onChange={spy} {...expectProps} />)
         .simulate('click')
 
       spy.should.have.been.calledOnce()
       spy.should.have.been.calledWithMatch({}, {
         ...expectProps,
         checked: !expectProps.checked,
+        indeterminate: false,
       })
     })
     it('is not called when the checkbox has the disabled prop set', () => {
@@ -90,14 +143,15 @@ describe('Checkbox', () => {
   describe('onClick', () => {
     it('is called with (event { name, value, checked }) on label click', () => {
       const spy = sandbox.spy()
-      const expectProps = { name: 'foo', value: 'bar', checked: false }
+      const expectProps = { name: 'foo', value: 'bar', checked: false, indeterminate: true }
       mount(<Checkbox onClick={spy} {...expectProps} />)
         .simulate('click')
 
       spy.should.have.been.calledOnce()
       spy.should.have.been.calledWithMatch({}, {
         ...expectProps,
         checked: expectProps.checked,
+        indeterminate: expectProps.indeterminate,
       })
     })
     it('is not called when the checkbox has the disabled prop set', () => {