feat(ZNTA-2216): Complete working tri-checkbox group storybook

server/zanata-frontend/src/frontend/app/components/TriCheckbox/TriCheckbox.story.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import { storiesOf, action } from '@kadira/storybook'
 import RealTriCheckbox from '.'
 import { Table, ListGroup, ListGroupItem } from 'react-bootstrap'
+import { find } from 'lodash'
 
 class TriCheckbox extends Component {
   static propTypes = {
@@ -130,16 +131,25 @@ class TriCheckboxGroup extends Component {
     }
   }
 
-  onClick = (event) => {
+  masterCheckBoxClick = (event) => {
+    event.persist()
     if (event.target.checked) {
       this.setState((prevState, props) => ({
         checked: true,
-        indeterminate: false
+        indeterminate: false,
+        options: props.options.map((value) => {
+          value.checked = true
+          return value
+        })
       }))
     } else {
       this.setState((prevState, props) => ({
         checked: false,
-        indeterminate: false
+        indeterminate: false,
+        options: props.options.map((value) => {
+          value.checked = false
+          return value
+        })
       }))
     }
     this.props.onClick(event)
@@ -148,18 +158,20 @@ class TriCheckboxGroup extends Component {
   subCheckboxClick = (event) => {
     event.persist()
     this.setState((prevState, props) => ({
-      checked: props.options.every((option) => {
-        return option.checked
-      }),
-      indeterminate: props.options.every((option) => {
-        return option.checked
-      }),
       options: props.options.map((value) => {
         if (event.target.name === value.name) {
           value.checked = !value.checked
         }
         return value
-      })
+      }),
+      checked: props.options.every((option) => {
+        return option.checked
+      }),
+      indeterminate: !(props.options.every((option) => {
+        return option.checked
+      })) && (find(props.options, (option) => {
+        return option.checked
+      }) !== undefined)
     }))
     this.props.onClick(event)
   }
@@ -186,7 +198,7 @@ class TriCheckboxGroup extends Component {
             <RealTriCheckbox
               checked={this.state.checked}
               indeterminate={this.state.indeterminate}
-              onChange={this.onClick}
+              onChange={this.masterCheckBoxClick}
             />
             <label>Fruits</label>
           </ListGroupItem>