Add expandOnClick property

Author: koszti

README.md

@@ -95,6 +95,7 @@ All node objects **must** have a unique `value`. This value is serialized into t
 | `checked`            | array    | An array of checked node values.                                                                 | `[]`        |
 | `disabled`           | bool     | If true, the component will be disabled and nodes cannot be checked.                             | `false`     |
 | `expandDisabled`     | bool     | If true, the ability to expand nodes will be disabled.                                           | `false`     |
+| `expandOnClick`      | bool     | If true, nodes will be expanded by clicking on labels. Requires a non empty `onClick` function.  | `false`     |
 | `expanded`           | array    | An array of expanded node values.                                                                | `[]`        |
 | `name`               | string   | Optional name for the hidden `<input>` element.                                                  | `undefined` |
 | `nameAsArray`        | bool     | If true, the hidden `<input>` will encode its values as an array rather than a joined string.    | `false`     |

examples/dist/index.html

@@ -69,6 +69,9 @@ <h2>Clickable Labels Example</h2>
         By default, clicking on the node label texts toggle the checkbox value. Providing an <code>onClick</code> property the checkbox will toggle
         only when clicking on the checkbox and the provided function will be called when clicking on the node label text.
       </p>
+      <p>
+        When the <code>onClick</code> function is defined passing the <code>expandOnClick</code> property will expand the clicked node automatically.
+      </p>
       <div id="clickable-labels-example"></div>
 
       <footer class="site-footer">

examples/dist/index.js

@@ -96,8 +96,8 @@
 }
 
 .rct-node-clickable:focus {
-  background: rgba(51, 51, 204, 0.5);
   outline: 0;
+  background: rgba(51, 51, 204, 0.5);
 }
 
 .rct-collapse {

examples/dist/style.css

@@ -69,6 +69,9 @@ <h2>Clickable Labels Example</h2>
         By default, clicking on the node label texts toggle the checkbox value. Providing an <code>onClick</code> property the checkbox will toggle
         only when clicking on the checkbox and the provided function will be called when clicking on the node label text.
       </p>
+      <p>
+        When the <code>onClick</code> function is defined passing the <code>expandOnClick</code> property will expand the clicked node automatically.
+      </p>
       <div id="clickable-labels-example"></div>
 
       <footer class="site-footer">

examples/src/index.html

@@ -127,6 +127,7 @@ class ClickExample extends React.Component {
                         checked={checked}
                         expanded={expanded}
                         nodes={nodes}
+                        expandOnClick
                         onCheck={this.onCheck}
                         onClick={this.onClick}
                         onExpand={this.onExpand}

examples/src/js/ClickableLabelsExample.js

@@ -14,6 +14,7 @@ class CheckboxTree extends React.Component {
         checked: PropTypes.arrayOf(PropTypes.string),
         disabled: PropTypes.bool,
         expandDisabled: PropTypes.bool,
+        expandOnClick: PropTypes.bool,
         expanded: PropTypes.arrayOf(PropTypes.string),
         name: PropTypes.string,
         nameAsArray: PropTypes.bool,
@@ -31,6 +32,7 @@ class CheckboxTree extends React.Component {
         checked: [],
         disabled: false,
         expandDisabled: false,
+        expandOnClick: false,
         expanded: [],
         name: undefined,
         nameAsArray: false,
@@ -209,6 +211,7 @@ class CheckboxTree extends React.Component {
         const {
             disabled,
             expandDisabled,
+            expandOnClick,
             noCascade,
             onlyLeafCheckboxes,
             optimisticToggle,
@@ -231,6 +234,7 @@ class CheckboxTree extends React.Component {
                     className={node.className}
                     disabled={nodeDisabled}
                     expandDisabled={expandDisabled}
+                    expandOnClick={expandOnClick}
                     expanded={node.expanded}
                     icon={node.icon}
                     label={node.label}

src/js/CheckboxTree.js

@@ -21,6 +21,7 @@ class TreeNode extends React.Component {
 
         children: PropTypes.node,
         className: PropTypes.string,
+        expandOnClick: PropTypes.bool,
         icon: PropTypes.node,
         rawChildren: PropTypes.arrayOf(nodeShape),
         showCheckbox: PropTypes.bool,
@@ -30,6 +31,7 @@ class TreeNode extends React.Component {
     static defaultProps = {
         children: null,
         className: null,
+        expandOnClick: false,
         icon: null,
         rawChildren: null,
         showCheckbox: true,
@@ -76,6 +78,11 @@ class TreeNode extends React.Component {
             isChecked = this.props.optimisticToggle;
         }
 
+        // Auto expand if enabled
+        if (this.hasChildren() && this.props.expandOnClick) {
+            this.onExpand();
+        }
+
         this.props.onClick({
             value: this.props.value,
             checked: isChecked,