Add showNodeIcon property

Resolves #30.

Author: jakezatecky

CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## (TBD)
+
+### New Features
+
+* [#30]: Add `showNodeIcon` property to optionally remove node icons
+
 ## [v0.5.2](https://github.com/jakezatecky/react-checkbox-tree/compare/v0.5.1...v0.5.2) (2017-05-03)
 
 ### Bug Fixes

README.md

@@ -93,10 +93,11 @@ class Widget extends React.Component {
 | `checked`          | array    | An array of checked node values.                                                                 | `[]`        |
 | `expanded`         | array    | An array of expanded node values.                                                                | `[]`        |
 | `onCheck`          | function | onCheck handler: `function(checked) {}`                                                          | `() => {}`  |
-| `onExpand`         | function | onExpand handler: `function(expanded) {}`                                                        | `() => {}` |
+| `onExpand`         | function | onExpand handler: `function(expanded) {}`                                                        | `() => {}`  |
 | `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`     |
 | `optimisticToggle` | bool     | If true, toggling a partially-checked node will select all children. If false, it will deselect. | `true`      |
+| `showNodeIcon`     | bool     | If true, each node will show a parent or leaf icon.                                              | `true`      |
 
 #### Node Properties
 

src/js/CheckboxTree.js

@@ -9,11 +9,12 @@ class CheckboxTree extends React.Component {
 	static propTypes = {
 		nodes: PropTypes.arrayOf(nodeShape).isRequired,
 
-		checked: PropTypes.arrayOf(React.PropTypes.string),
-		expanded: PropTypes.arrayOf(React.PropTypes.string),
+		checked: PropTypes.arrayOf(PropTypes.string),
+		expanded: PropTypes.arrayOf(PropTypes.string),
 		name: PropTypes.string,
 		nameAsArray: PropTypes.bool,
 		optimisticToggle: PropTypes.bool,
+		showNodeIcon: PropTypes.bool,
 		onCheck: PropTypes.func,
 		onExpand: PropTypes.func,
 	};
@@ -25,6 +26,7 @@ class CheckboxTree extends React.Component {
 		nameAsArray: false,
 		nodes: [],
 		optimisticToggle: true,
+		showNodeIcon: true,
 		onCheck: () => {},
 		onExpand: () => {},
 	};
@@ -146,6 +148,7 @@ class CheckboxTree extends React.Component {
 					label={node.label}
 					optimisticToggle={this.props.optimisticToggle}
 					rawChildren={node.children}
+					showNodeIcon={this.props.showNodeIcon}
 					treeId={this.id}
 					value={node.value}
 					onCheck={this.onCheck}

src/js/TreeNode.js

@@ -10,6 +10,7 @@ class TreeNode extends React.Component {
 		expanded: PropTypes.bool.isRequired,
 		label: PropTypes.string.isRequired,
 		optimisticToggle: PropTypes.bool.isRequired,
+		showNodeIcon: PropTypes.bool.isRequired,
 		treeId: PropTypes.string.isRequired,
 		value: PropTypes.string.isRequired,
 		onCheck: PropTypes.func.isRequired,
@@ -64,14 +65,6 @@ class TreeNode extends React.Component {
 		return this.props.rawChildren !== null;
 	}
 
-	renderCollapseIcon() {
-		if (!this.props.expanded) {
-			return <span className="rct-icon rct-icon-expand-close" />;
-		}
-
-		return <span className="rct-icon rct-icon-expand-open" />;
-	}
-
 	renderCollapseButton() {
 		if (!this.hasChildren()) {
 			return (
@@ -94,6 +87,14 @@ class TreeNode extends React.Component {
 		);
 	}
 
+	renderCollapseIcon() {
+		if (!this.props.expanded) {
+			return <span className="rct-icon rct-icon-expand-close" />;
+		}
+
+		return <span className="rct-icon rct-icon-expand-open" />;
+	}
+
 	renderCheckboxIcon() {
 		if (this.props.checked === 0) {
 			return <span className="rct-icon rct-icon-uncheck" />;
@@ -131,7 +132,7 @@ class TreeNode extends React.Component {
 	}
 
 	render() {
-		const { checked, treeId, label, value } = this.props;
+		const { checked, treeId, label, showNodeIcon, value } = this.props;
 		const inputId = `${treeId}-${value}`;
 		const nodeClass = classNames({
 			'rct-node': true,
@@ -148,9 +149,11 @@ class TreeNode extends React.Component {
 						<span className="rct-checkbox">
 							{this.renderCheckboxIcon()}
 						</span>
-						<span className="rct-node-icon">
-							{this.renderNodeIcon()}
-						</span>
+						{showNodeIcon ? (
+							<span className="rct-node-icon">
+								{this.renderNodeIcon()}
+							</span>
+						) : null}
 						<span className="rct-title">
 							{label}
 						</span>

test/TreeNode.js

@@ -9,6 +9,7 @@ const baseProps = {
 	expanded: false,
 	label: 'Jupiter',
 	optimisticToggle: true,
+	showNodeIcon: true,
 	treeId: 'id',
 	value: 'jupiter',
 	onCheck: () => {},
@@ -139,6 +140,32 @@ describe('<TreeNode />', () => {
 		});
 	});
 
+	describe('showNodeIcon', () => {
+		it('should render the node icon when true', () => {
+			const wrapper = shallow(
+				<TreeNode {...baseProps} />,
+			);
+
+			assert.isTrue(wrapper.contains(
+				<span className="rct-node-icon">
+					<span className="rct-icon rct-icon-leaf" />
+				</span>,
+			));
+		});
+
+		it('should not render the node icon when false', () => {
+			const wrapper = shallow(
+				<TreeNode {...baseProps} showNodeIcon={false} />,
+			);
+
+			assert.isFalse(wrapper.contains(
+				<span className="rct-node-icon">
+					<span className="rct-icon rct-icon-leaf" />
+				</span>,
+			));
+		});
+	});
+
 	describe('onCheck', () => {
 		it('should pass the current node\'s value', () => {
 			let actual = {};