Allow children in Checklist options

demo/Demo.react.js

@@ -268,7 +268,6 @@ const ChecklistExample = `
 const properties = {
     id: 'my checklist',
     labelStyle: {'display': 'block'},
-    disabled: false,
     options: [
         {'label': 'Melons', 'value': 'melons', 'disabled': false},
         {'label': 'Apples', 'value': 'apples'},
@@ -299,6 +298,54 @@ class Controller extends Component {
 ReactDOM.render(<Controller/>, mountNode);`
 
 
+const ChecklistContainerExample = `
+const applesDescription = (<div style={{marginLeft: '20px', marginBottom: '20px'}}>
+                                <p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Apples.jpg/97px-Apples.jpg" alt="Apples.jpg" /></p>
+                                <p>This option selects the best and most fancy apples in the world</p>
+                            </div>);
+
+const orangesDescription = (<p style={{marginLeft: '15px'}}>There is no oranges available. Please come back in oranges season.</p>);
+
+const properties = {
+    id: 'my container checklist',
+    labelStyle: {'display': 'block'},
+    options: [
+        {'label': 'Melons', 'value': 'melons', 'disabled': false},
+        {'label': 'Apples', 'value': 'apples',
+            'children': applesDescription,
+            'collapseChildrenButton': true,
+            'initiallyExpanded': false
+            },
+        {'label': 'Oranges', 'value': 'oranges', 'disabled': true,
+        'children': orangesDescription,
+        'collapseChildrenButton': true,
+        'initiallyExpanded': true}
+    ]
+};
+
+class Controller extends Component {
+    constructor() {
+        super();
+        this.state = {
+            values: ['melons', 'apples']
+        };
+    }
+
+    render() {
+        return (<Checklist
+            setProps={(props) => {
+                this.setState(props);
+            }}
+            fireEvent={event => console.warn(event)}
+            values={this.state.values}
+            {...properties}
+        />);
+    }
+}
+
+ReactDOM.render(<Controller/>, mountNode);`
+
+
 
 const examples = [
     {name: 'Upload', code: UploadExample},
@@ -308,6 +355,7 @@ const examples = [
     {name: 'SyntaxHighlighter', code: SyntaxHighlighterExample},
     {name: 'Radio', code: RadioExample},
     {name: 'Checklist', code: ChecklistExample},
+    {name: 'Checklist with containers options', code: ChecklistContainerExample},
     {name: 'Dropdown', code: DropdownExample},
     {name: 'Slider', code: SliderExample},
     {name: 'RangeSlider', code: RangeSliderExample},

src/components/Checklist.react.js

@@ -1,6 +1,135 @@
-import {append, contains, without} from 'ramda';
+import {append, contains,  without} from 'ramda';
 import React, {Component, PropTypes} from 'react';
 
+class Checkbox extends Component {
+
+    constructor(props) {
+        super(props);
+
+        if (props.collapsable) {
+            this.state = {
+                collapsed: props.initiallyExpanded
+            };
+            this.handleCollapseClick = this.handleCollapseClick.bind(this);
+        }
+      }
+
+    handleCollapseClick() {
+        this.setState({ collapsed: !this.state.collapsed });
+    }
+
+    render() {
+
+        const {
+            children,
+            collapsable,
+            disabled,
+            inputClassName,
+            inputStyle,
+            isChecked,
+            label,
+            labelClassName,
+            labelStyle,
+            value
+        } = this.props;
+
+
+        let arrow;
+        let CollapsableChildren;
+
+        if (collapsable) {
+            const collapsed = this.state.collapsed;
+            arrow = (
+                <div
+                    onClick={this.handleCollapseClick}
+                    style={{cursor: 'pointer', marginLeft: '12px'}}
+                    >
+                    {collapsed? '▾' : '▴'}
+                </div>
+            );
+
+            CollapsableChildren = (
+                <div>
+                    {collapsed ? null : children}
+                </div>
+            );
+        }
+
+        return (
+            <div>
+                <div style={{display: 'flex'}}>
+                    <label
+                        style={labelStyle}
+                        className={labelClassName}
+                    >
+                        <input
+                            checked={isChecked}
+                            className={inputClassName}
+                            disabled={Boolean(disabled)}
+                            style={inputStyle}
+                            type="checkbox"
+                            onChange={() => this.props.handleOnChange(value)}
+                        />
+                        {label}
+                    </label>
+                    {collapsable? arrow : null}
+                    </div>
+
+                {collapsable? CollapsableChildren : children}
+            </div>
+        );
+        }
+}
+
+Checkbox.propTypes = {
+    /**
+     * The checkbox's label
+     */
+    label: PropTypes.string,
+
+    /**
+     * The value of the checkbox. This value
+     * corresponds to the items specified in the
+     * `values` property.
+     */
+    value: PropTypes.string,
+
+    /**
+     * If true, this checkbox is disabled and can't be clicked on.
+     */
+    disabled: PropTypes.bool,
+
+
+    /**
+     * Optinal wrapped components within this option
+     */
+    children: PropTypes.node,
+
+    /**
+     * Show a button to show/hide children components of this option
+     */
+     collapsable: PropTypes.bool,
+
+    /**
+     * Change default for the initiallyExpanded to be initially collapsed (hidden)
+     */
+     initiallyExpanded: PropTypes.bool,
+
+     /**
+      * Mark if the input is checked or not
+      */
+     checked: PropTypes.bool,
+
+     /**
+      * Callback to the parent to add or remove this option from the Checklist
+      */
+     handleOnChange: PropTypes.func
+}
+
+Checkbox.defaultProps = {
+    initiallyExpanded: true
+}
+
 /**
  * Checklist is a component that encapsulates several checkboxes.
  * The values and labels of the checklist is specified in the `options`
@@ -11,56 +140,56 @@ export default class Checklist extends Component {
     constructor(props) {
         super(props);
         this.state = {values: props.values};
+
+        this.handleOnChange = this.handleOnChange.bind(this);
     }
 
     componentWillReceiveProps(newProps) {
         this.setState({values: newProps.values});
     }
 
+    handleOnChange(value) {
+        const values = this.state.values;
+        let newValues;
+        if (contains(value, values)) {
+            newValues = without([value], values);
+        } else {
+            newValues = append(value, values);
+        }
+        this.setState({values: newValues});
+
+        const {fireEvent, setProps} = this.props;
+        if (setProps) setProps({values: newValues});
+        if (fireEvent) fireEvent({event: 'change'});
+    }
+
     render() {
         const {
             className,
-            fireEvent,
             id,
-            inputClassName,
-            inputStyle,
-            labelClassName,
-            labelStyle,
             options,
-            setProps,
-            style
+            style,
+            values,
+            ...rest
         } = this.props;
-        const {values} = this.state;
 
         return (
             <div id={id} style={style} className={className}>
                 {options.map(option => (
-                    <label
-                        key={option.value}
-                        style={labelStyle}
-                        className={labelClassName}
-                    >
-                        <input
-                            checked={contains(option.value, values)}
-                            className={inputClassName}
-                            disabled={Boolean(option.disabled)}
-                            style={inputStyle}
-                            type="checkbox"
-                            onChange={() => {
-                                let newValues;
-                                if (contains(option.value, values)) {
-                                    newValues = without([option.value], values);
-                                } else {
-                                    newValues = append(option.value, values);
-                                }
-                                this.setState({values: newValues});
-                                if (setProps) setProps({values: newValues});
-                                if (fireEvent) fireEvent({event: 'change'});
-                            }}
-                        />
-                        {option.label}
-                    </label>
-                ))}
+                    <Checkbox
+                            handleOnChange = {this.handleOnChange}
+                            checked = {contains(option.value, values)}
+                            collapsable = {option.children && option.collapseChildrenButton}
+                            children = {option.children}
+                            label = {option.label}
+                            value = {option.value}
+                            disabled = {option.disabled}
+                            initiallyExpanded = {option.initiallyExpanded}
+                            key = {option.value}
+                            {...rest}
+                            />
+                    )
+                )}
             </div>
         );
     }
@@ -72,24 +201,42 @@ Checklist.propTypes = {
     /**
      * An array of options
      */
-    options: PropTypes.shape({
-        /**
-         * The checkbox's label
-         */
-        label: PropTypes.string,
-
-        /**
-         * The value of the checkbox. This value
-         * corresponds to the items specified in the
-         * `values` property.
-         */
-        value: PropTypes.string,
-
-        /**
-         * If true, this checkbox is disabled and can't be clicked on.
-         */
-        disabled: PropTypes.bool
-    }),
+    options: PropTypes.arrayOf(
+        PropTypes.shape({
+            /**
+             * The checkbox's label
+             */
+            label: PropTypes.string,
+
+            /**
+             * The value of the checkbox. This value
+             * corresponds to the items specified in the
+             * `values` property.
+             */
+            value: PropTypes.string,
+
+            /**
+             * If true, this checkbox is disabled and can't be clicked on.
+             */
+            disabled: PropTypes.bool,
+
+            /**
+             * Optinal wrapped components within this option
+             */
+            children: PropTypes.node,
+
+            /**
+             * Show a button to show/hide children components of this option
+             */
+             collapseChildrenButton: PropTypes.bool,
+
+            /**
+             * Change default for the collapseChildrenButton to be initially hidden
+             */
+             initiallyExpanded: PropTypes.bool
+
+        })
+    ),
 
     /**
      * The currently selected value

src/components/__tests__/Checklist.test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import CheckListComponent from '../Checklist.react';
+
+describe('Checklist component', () => {
+
+    it('renders', () => {
+        const component = shallow(<CheckListComponent id="my-checklist"/>);
+        expect(component).to.be.ok;
+    });
+
+    describe('options', () => {
+        it('renders passed-in options');
+    });
+});