Add support for custom node icons

Resolves #26.

Author: jakezatecky

CHANGELOG.md

@@ -9,6 +9,7 @@
 ### New Features
 
 * [#2]: Allow customization of icons via CSS
+* [#26]: Allow icon customization at node level
 
 ## [v0.4.2](https://github.com/jakezatecky/react-checkbox-tree/compare/v0.4.1...v0.4.2) (2016-02-27)
 

examples/src/index.html

@@ -25,6 +25,9 @@ <h1>Examples</h1>
       <h2>Basic Example</h2>
       <div id="basic-example"></div>
 
+      <h2>Custom Icons Example</h2>
+      <div id="custom-icons-example"></div>
+
       <h2>Pessimistic Toggle Example</h2>
       <p>Try clicking a partially-checked node. Instead of select all children, the pessimistic model will uncheck them.</p>
       <div id="pessimistic-toggle-example"></div>

examples/src/index.js

@@ -2,7 +2,9 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import BasicExample from './js/BasicExample';
+import CustomIconsExample from './js/CustomIconsExample';
 import PessimisticToggleExample from './js/PessimisticToggleExample';
 
 ReactDOM.render(<BasicExample />, document.getElementById('basic-example'));
+ReactDOM.render(<CustomIconsExample />, document.getElementById('custom-icons-example'));
 ReactDOM.render(<PessimisticToggleExample />, document.getElementById('pessimistic-toggle-example'));

examples/src/js/CustomIconsExample.js

@@ -0,0 +1,83 @@
+import React from 'react';
+
+import CheckboxTree from '../../../src/index';
+
+const nodes = [
+	{
+		value: 'Documents',
+		label: 'Documents',
+		children: [
+			{
+				value: 'Employee Evaluations.zip',
+				label: 'Employee Evaluations.zip',
+				icon: <i className="fa fa-file-archive-o" />,
+			},
+			{
+				value: 'Expense Report.pdf',
+				label: 'Expense Report.pdf',
+				icon: <i className="fa fa-file-pdf-o" />,
+			},
+			{
+				value: 'notes.txt',
+				label: 'notes.txt',
+				icon: <i className="fa fa-file-text-o" />,
+			},
+		],
+	},
+	{
+		value: 'Photos',
+		label: 'Photos',
+		children: [
+			{
+				value: 'nyan-cat.gif',
+				label: 'nyan-cat.gif',
+				icon: <i className="fa fa-file-image-o" />,
+			},
+			{
+				value: 'SpaceX Falcon9 liftoff.jpg',
+				label: 'SpaceX Falcon9 liftoff.jpg',
+				icon: <i className="fa fa-file-image-o" />,
+			},
+		],
+	},
+];
+
+class CustomIconsExamples extends React.Component {
+	constructor() {
+		super();
+
+		this.state = {
+			checked: [],
+			expanded: [
+				'Documents',
+			],
+		};
+
+		this.onCheck = this.onCheck.bind(this);
+		this.onExpand = this.onExpand.bind(this);
+	}
+
+	onCheck(checked) {
+		this.setState({ checked });
+	}
+
+	onExpand(expanded) {
+		this.setState({ expanded });
+	}
+
+	render() {
+		const { checked, expanded } = this.state;
+
+		return (
+			<CheckboxTree
+				checked={checked}
+				expanded={expanded}
+				nodes={nodes}
+				onCheck={this.onCheck}
+				onExpand={this.onExpand}
+			/>
+		);
+	}
+}
+
+export default CustomIconsExamples;

src/js/CheckboxTree.js

@@ -141,6 +141,7 @@ class CheckboxTree extends React.Component {
 					key={key}
 					checked={checked}
 					expanded={node.expanded}
+					icon={node.icon}
 					label={node.label}
 					optimisticToggle={this.props.optimisticToggle}
 					rawChildren={node.children}

src/js/TreeNode.js

@@ -14,11 +14,13 @@ class TreeNode extends React.Component {
 		onExpand: React.PropTypes.func.isRequired,
 
 		children: React.PropTypes.node,
+		icon: React.PropTypes.node,
 		rawChildren: React.PropTypes.arrayOf(nodeShape),
 	};
 
 	static defaultProps = {
 		children: null,
+		icon: null,
 		rawChildren: undefined,
 	};
 
@@ -93,6 +95,10 @@ class TreeNode extends React.Component {
 	}
 
 	renderNodeIcon() {
+		if (this.props.icon !== null) {
+			return this.props.icon;
+		}
+
 		if (this.props.rawChildren === null) {
 			return <i className="rct-icon rct-icon-leaf" />;
 		}

src/js/nodeShape.js

@@ -1,11 +1,13 @@
 import React from 'react';
 
 const nodeShape = {
+	label: React.PropTypes.string.isRequired,
 	value: React.PropTypes.oneOfType([
 		React.PropTypes.string,
 		React.PropTypes.number,
 	]).isRequired,
-	label: React.PropTypes.string.isRequired,
+
+	icon: React.PropTypes.node,
 };
 
 const nodeShapeWithChildren = React.PropTypes.oneOfType([

src/less/react-checkbox-tree.less

@@ -37,14 +37,23 @@
   }
 
   .rct-icon {
-    display: inline-block;
-    margin: 0 5px;
-    width: 14px;
     font-family: "FontAwesome";
     font-style: normal;
   }
 }
 
+.rct-collapse,
+.rct-node-icon,
+.rct-checkbox {
+  padding: 0 5px;
+
+  * {
+    display: inline-block;
+    margin: 0;
+    width: 14px;
+  }
+}
+
 .rct-text {
   display: flex;
   align-items: center;
@@ -53,7 +62,6 @@
 .rct-collapse {
   border: 0;
   background: none;
-  padding: 0;
   line-height: normal;
   color: inherit;
   font-size: 12px;

src/sass/react-checkbox-tree.scss

@@ -37,14 +37,23 @@ $rct-label-hover: rgba($rct-icon-color, .1) !default;
   }
 
   .rct-icon {
-    display: inline-block;
-    margin: 0 5px;
-    width: 14px;
     font-family: "FontAwesome";
     font-style: normal;
   }
 }
 
+.rct-collapse,
+.rct-node-icon,
+.rct-checkbox {
+  padding: 0 5px;
+
+  * {
+    display: inline-block;
+    margin: 0;
+    width: 14px;
+  }
+}
+
 .rct-text {
   display: flex;
   align-items: center;
@@ -53,7 +62,6 @@ $rct-label-hover: rgba($rct-icon-color, .1) !default;
 .rct-collapse {
   border: 0;
   background: none;
-  padding: 0;
   line-height: normal;
   color: inherit;
   font-size: 12px;

test/TreeNode.js

@@ -113,6 +113,20 @@ describe('<TreeNode />', () => {
 		});
 	});
 
+	describe('icon', () => {
+		it('should replace the node\'s icons with the supplied value', () => {
+			const wrapper = shallow(
+				<TreeNode {...baseProps} icon={<i className="fa fa-plus" />} />,
+			);
+
+			assert.isTrue(wrapper.contains(
+				<span className="rct-node-icon">
+					<i className="fa fa-plus" />
+				</span>,
+			));
+		});
+	});
+
 	describe('label', () => {
 		it('should render the node\'s label', () => {
 			const wrapper = shallow(