Add disabled and expandDisabled properties

References #35.

Author: jakezatecky

README.md

@@ -93,6 +93,8 @@ All node objects **must** have a unique `value`. This value is serialized into t
 | ------------------ | -------- | ------------------------------------------------------------------------------------------------ | ----------- |
 | `nodes`            | array    | **Required**. Specifies the tree nodes and their children.                                       |             |
 | `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`     |
 | `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`     |

src/js/CheckboxTree.js

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import { isEqual } from 'lodash';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -11,6 +12,8 @@ class CheckboxTree extends React.Component {
 		nodes: PropTypes.arrayOf(nodeShape).isRequired,
 
 		checked: PropTypes.arrayOf(PropTypes.string),
+		disabled: PropTypes.bool,
+		expandDisabled: PropTypes.bool,
 		expanded: PropTypes.arrayOf(PropTypes.string),
 		name: PropTypes.string,
 		nameAsArray: PropTypes.bool,
@@ -23,6 +26,8 @@ class CheckboxTree extends React.Component {
 
 	static defaultProps = {
 		checked: [],
+		disabled: false,
+		expandDisabled: false,
 		expanded: [],
 		name: undefined,
 		nameAsArray: false,
@@ -180,7 +185,7 @@ class CheckboxTree extends React.Component {
 	}
 
 	renderTreeNodes(nodes) {
-		const { noCascade, optimisticToggle, showNodeIcon } = this.props;
+		const { disabled, expandDisabled, noCascade, optimisticToggle, showNodeIcon } = this.props;
 		const treeNodes = nodes.map((node) => {
 			const key = `${node.value}`;
 			const checked = this.getCheckState(node, noCascade);
@@ -191,6 +196,8 @@ class CheckboxTree extends React.Component {
 					key={key}
 					checked={checked}
 					className={node.className}
+					disabled={disabled}
+					expandDisabled={expandDisabled}
 					expanded={node.expanded}
 					icon={node.icon}
 					label={node.label}
@@ -251,9 +258,13 @@ class CheckboxTree extends React.Component {
 	render() {
 		const nodes = this.getFormattedNodes(this.props.nodes);
 		const treeNodes = this.renderTreeNodes(nodes);
+		const className = classNames({
+			'react-checkbox-tree': true,
+			'rct-disabled': this.props.disabled,
+		});
 
 		return (
-			<div className="react-checkbox-tree">
+			<div className={className}>
 				{this.renderHiddenInput()}
 				{treeNodes}
 			</div>

src/js/TreeNode.js

@@ -7,6 +7,8 @@ import nodeShape from './nodeShape';
 class TreeNode extends React.Component {
 	static propTypes = {
 		checked: PropTypes.number.isRequired,
+		disabled: PropTypes.bool.isRequired,
+		expandDisabled: PropTypes.bool.isRequired,
 		expanded: PropTypes.bool.isRequired,
 		label: PropTypes.string.isRequired,
 		optimisticToggle: PropTypes.bool.isRequired,
@@ -68,6 +70,8 @@ class TreeNode extends React.Component {
 	}
 
 	renderCollapseButton() {
+		const { expandDisabled } = this.props;
+
 		if (!this.hasChildren()) {
 			return (
 				<span className="rct-collapse">
@@ -80,6 +84,7 @@ class TreeNode extends React.Component {
 			<button
 				aria-label="Toggle"
 				className="rct-collapse rct-collapse-btn"
+				disabled={expandDisabled}
 				title="Toggle"
 				type="button"
 				onClick={this.onExpand}
@@ -134,7 +139,7 @@ class TreeNode extends React.Component {
 	}
 
 	render() {
-		const { checked, className, treeId, label, showNodeIcon, value } = this.props;
+		const { checked, className, disabled, treeId, label, showNodeIcon, value } = this.props;
 		const inputId = `${treeId}-${value}`;
 		const nodeClass = classNames({
 			'rct-node': true,
@@ -147,7 +152,13 @@ class TreeNode extends React.Component {
 				<span className="rct-text">
 					{this.renderCollapseButton()}
 					<label htmlFor={inputId}>
-						<input checked={checked === 1} id={inputId} type="checkbox" onChange={this.onCheck} />
+						<input
+							checked={checked === 1}
+							disabled={disabled}
+							id={inputId}
+							type="checkbox"
+							onChange={this.onCheck}
+						/>
 						<span className="rct-checkbox">
 							{this.renderCheckboxIcon()}
 						</span>

src/less/react-checkbox-tree.less

@@ -21,6 +21,10 @@
     &:focus {
       outline: none;
     }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
   }
 
   label {
@@ -42,6 +46,18 @@
   }
 }
 
+.rct-disabled {
+  opacity: .75;
+
+  label {
+    cursor: not-allowed;
+
+    &:hover {
+      background: transparent;
+    }
+  }
+}
+
 .rct-collapse,
 .rct-node-icon,
 .rct-checkbox {

src/scss/react-checkbox-tree.scss

@@ -21,6 +21,10 @@ $rct-label-hover: rgba($rct-icon-color, .1) !default;
     &:focus {
       outline: none;
     }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
   }
 
   label {
@@ -42,6 +46,18 @@ $rct-label-hover: rgba($rct-icon-color, .1) !default;
   }
 }
 
+.rct-disabled {
+  opacity: .75;
+
+  label {
+    cursor: not-allowed;
+
+    &:hover {
+      background: transparent;
+    }
+  }
+}
+
 .rct-collapse,
 .rct-node-icon,
 .rct-checkbox {