Add onChange prop to KuiCheckboxGroup. (elastic#13510)

cjcenizal · Aug 26, 2017 · 9d913f4 · 9d913f4
1 parent 9ac7927
commit 9d913f4
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 15 deletions.
diff --git a/ui_framework/doc_site/src/views/form/form_controls.js b/ui_framework/doc_site/src/views/form/form_controls.js
@@ -14,12 +14,32 @@ import {
   KuiTextArea,
 } from '../../../../components';
 
+// Don't use this, make proper ids instead. This is just for the example.
+function makeId() {
+  return Math.random().toString(36).substr(2, 5);
+}
+
 export default class extends Component {
   constructor(props) {
     super(props);
 
+    const idPrefix = makeId();
+
     this.state = {
       isSwitchChecked: false,
+      checkboxes: [{
+        id: `${idPrefix}0`,
+        label: 'Option one',
+      }, {
+        id: `${idPrefix}1`,
+        label: 'Option two is checked by default',
+      }, {
+        id: `${idPrefix}2`,
+        label: 'Option three',
+      }],
+      checkboxIdToSelectedMap: {
+        [`${idPrefix}1`]: true,
+      },
     };
   }
 
@@ -29,6 +49,16 @@ export default class extends Component {
     });
   }
 
+  onCheckboxChange = option => {
+    const newCheckboxIdToSelectedMap = Object.assign({}, this.state.checkboxIdToSelectedMap, {
+      [option.id]: !this.state.checkboxIdToSelectedMap[option.id],
+    });
+
+    this.setState({
+      checkboxIdToSelectedMap: newCheckboxIdToSelectedMap,
+    });
+  }
+
   render() {
     return (
       <div>
@@ -99,11 +129,10 @@ export default class extends Component {
         <br />
 
         <KuiCheckboxGroup
-          options={[
-            { id: '0', label: 'Option one', onChange: () => {} },
-            { id: '1', label: 'Option two is checked by default', checked: true, onChange: () => {} },
-            { id: '2', label: 'Option three', onChange: () => {} },
-          ]}
+          options={this.state.checkboxes.map(checkbox => Object.assign({}, checkbox, {
+            checked: this.state.checkboxIdToSelectedMap[checkbox.id],
+          }))}
+          onChange={this.onCheckboxChange}
         />
       </div>
     );

diff --git a/ui_framework/doc_site/src/views/form/form_rows.js b/ui_framework/doc_site/src/views/form/form_rows.js
@@ -20,12 +20,28 @@ import {
 function makeId() {
   return Math.random().toString(36).substr(2, 5);
 }
+
 export default class extends Component {
   constructor(props) {
     super(props);
 
+    const idPrefix = makeId();
+
     this.state = {
       isSwitchChecked: false,
+      checkboxes: [{
+        id: `${idPrefix}0`,
+        label: 'Option one',
+      }, {
+        id: `${idPrefix}1`,
+        label: 'Option two is checked by default',
+      }, {
+        id: `${idPrefix}2`,
+        label: 'Option three',
+      }],
+      checkboxIdToSelectedMap: {
+        [`${idPrefix}1`]: true,
+      },
     };
   }
 
@@ -35,6 +51,16 @@ export default class extends Component {
     });
   }
 
+  onCheckboxChange = option => {
+    const newCheckboxIdToSelectedMap = Object.assign({}, this.state.checkboxIdToSelectedMap, {
+      [option.id]: !this.state.checkboxIdToSelectedMap[option.id],
+    });
+
+    this.setState({
+      checkboxIdToSelectedMap: newCheckboxIdToSelectedMap,
+    });
+  }
+
   render() {
     return (
       <KuiForm>
@@ -131,11 +157,10 @@ export default class extends Component {
           label="Checkboxes"
         >
           <KuiCheckboxGroup
-            options={[
-              { id: makeId(), label: 'Option one', onChange: () => {} },
-              { id: makeId(), label: 'Option two is checked by default', checked: true, onChange: () => {} },
-              { id: makeId(), label: 'Option three', onChange: () => {} },
-            ]}
+            options={this.state.checkboxes.map(checkbox => Object.assign({}, checkbox, {
+              checked: this.state.checkboxIdToSelectedMap[checkbox.id],
+            }))}
+            onChange={this.onCheckboxChange}
           />
         </KuiFormRow>
       </KuiForm>

diff --git a/ui_framework/src/components/form/checkbox/checkbox_group.js b/ui_framework/src/components/form/checkbox/checkbox_group.js
@@ -2,13 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export const KuiCheckboxGroup = ({ options, className, ...rest }) => {
+export const KuiCheckboxGroup = ({ options, onChange, className, ...rest }) => {
   const classes = classNames('kuiCheckbox kuiCheckboxGroup__item', className);
 
   return (
     <div>
       {options.map((option, index) => {
-
         return (
           <div
             className={classes}
@@ -19,8 +18,8 @@ export const KuiCheckboxGroup = ({ options, className, ...rest }) => {
               className="kuiCheckbox__input"
               type="checkbox"
               id={option.id}
-              checked={option.checked}
-              onChange={option.onChange}
+              checked={option.checked || false}
+              onChange={onChange.bind(null, option)}
             />
 
             <div className="kuiCheckbox__square">
@@ -45,10 +44,10 @@ KuiCheckboxGroup.propTypes = {
     PropTypes.shape({
       id: PropTypes.string,
       checked: PropTypes.bool,
-      onChange: PropTypes.func.isRequired,
       label: PropTypes.string,
     }),
   ).isRequired,
+  onChange: PropTypes.func.isRequired,
 };
 
 KuiCheckboxGroup.defaultProps = {