Merge branch 'feature-stateless' of github.com:jakezatecky/react-checkbox-tree into feature-stateless

# Conflicts:
#	src/js/Tree.js

Author: jakezatecky

README.md

@@ -10,34 +10,79 @@
 ![Demo](demo.gif)
 
 
-# Usage
+## Installation
 
-Install the library:
+The easiest way to use react-checkbox-tree is to install from NPM and include it in your own React build process (e.g. using [Webpack](http://webpack.github.io/docs/what-is-webpack.html)):
 
-``` shell
+```
 npm install react-checkbox-tree --save
 ```
 
-Then render the component:
+## Usage
+
+A quick usage example is included below. Note that the react-checkbox-tree component is [controlled](https://facebook.github.io/react/docs/forms.html#controlled-components). In other words, it is stateless. You must update its `checked` and `expanded` properties whenever a change occurs.
 
 ``` javascript
 import CheckboxTree from 'react-checkbox-tree';
 
-...
-
-render() {
-    const nodes = [{
-        value: 'node-1',
-        title: 'Parent Node 1',
-        children: [{
-            value: 'node-1-1',
-            title: 'Leaf Node 1-1',
-        }, {
-            value: 'node-1-2',
-            title: 'Leaf Node 1-2'
-        }],
-    }];
-
-    return <CheckboxTree nodes={nodes} />;
+const nodes = [{
+    value: 'node-1',
+    title: 'Parent Node 1',
+    children: [{
+        value: 'node-1-1',
+        title: 'Leaf Node 1-1',
+    }, {
+        value: 'node-1-2',
+        title: 'Leaf Node 1-2'
+    }],
+}];
+
+class Widget extends React.Component {
+    constructor() {
+        super();
+
+        this.state = {
+            checked: [],
+            expanded: [],
+        };
+
+        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 (
+            <Tree
+                name="tree_nodes"
+                nodes={nodes}
+                checked={checked}
+                expanded={expanded}
+                onCheck={this.onCheck}
+                onExpand={this.onExpand}
+            />
+        );
+    }
 }
 ```
+
+### Properties
+
+| Property      | Type     | Description                                                                                   |
+| ------------- | -------- | --------------------------------------------------------------------------------------------- |
+| `nodes`       | array    | **Required**. Specifies the tree nodes and their children.                                    |
+| `checked`     | array    | **Required**. An array of checked node values.                                                |
+| `expanded`    | array    | **Required**. An array of expanded node values.                                               |
+| `onCheck`     | function | onCheck handler: `function(checked) {}`                                                       |
+| `onExpand`    | function | onExpand handler: `function(expanded) {}`                                                     |
+| `name`        | string   | Optional name for the hidden `<input>` element.                                               |
+| `nameAsArray` | bool     | If true, the hidden `<input>` will encode its values as an array rather than a joined string. |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-checkbox-tree",
-  "version": "0.2.0",
+  "version": "0.3.0-rc.1",
   "description": "React component for checkbox trees.",
   "author": "Jake Zatecky",
   "license": "MIT",

src/js/Tree.js

@@ -72,16 +72,18 @@ class Tree extends React.Component {
 			formatted.checked = checked.indexOf(node.value) > -1;
 			formatted.expanded = expanded.indexOf(node.value) > -1;
 
-			if (this.hasChildren(node)) {
+			if (Array.isArray(node.children) && node.children.length > 0) {
 				formatted.children = this.getFormattedNodes(formatted.children);
+			} else {
+				formatted.children = null;
 			}
 
 			return formatted;
 		});
 	}
 
 	getCheckState(node) {
-		if (this.hasChildren(node) === false) {
+		if (node.children === null) {
 			return node.checked ? 1 : 0;
 		}
 
@@ -97,7 +99,7 @@ class Tree extends React.Component {
 	}
 
 	setCheckState(checked, node, isChecked) {
-		if (this.hasChildren(node)) {
+		if (node.children !== null) {
 			// Percolate check status down to all children
 			node.children.forEach((child) => {
 				this.setCheckState(checked, child, isChecked);
@@ -118,7 +120,7 @@ class Tree extends React.Component {
 
 	isEveryChildChecked(node) {
 		return node.children.every((child) => {
-			if (this.hasChildren(child)) {
+			if (child.children !== null) {
 				return this.isEveryChildChecked(child);
 			}
 
@@ -128,22 +130,14 @@ class Tree extends React.Component {
 
 	isSomeChildChecked(node) {
 		return node.children.some((child) => {
-			if (this.hasChildren(child)) {
+			if (child.children !== null) {
 				return this.isSomeChildChecked(child);
 			}
 
 			return child.checked;
 		});
 	}
 
-	hasChildren(node) {
-		if (typeof node.children !== 'object') {
-			return false;
-		}
-
-		return node.children.length > 0;
-	}
-
 	renderTreeNodes(nodes) {
 		const treeNodes = nodes.map((node, index) => {
 			const key = `${index}-${node.value}`;
@@ -174,7 +168,7 @@ class Tree extends React.Component {
 	}
 
 	renderChildNodes(node) {
-		if (this.hasChildren(node)) {
+		if (node.children !== null && node.expanded) {
 			return this.renderTreeNodes(node.children);
 		}
 

src/js/TreeNode.js

@@ -50,7 +50,7 @@ class TreeNode extends React.Component {
 	}
 
 	renderCollapseIcon() {
-		if (this.props.children === null) {
+		if (this.props.rawChildren === null) {
 			return <i className="fa" />;
 		}
 
@@ -74,7 +74,7 @@ class TreeNode extends React.Component {
 	}
 
 	renderNodeIcon() {
-		if (this.props.children !== null) {
+		if (this.props.rawChildren !== null) {
 			if (!this.props.expanded) {
 				return <i className="fa fa-folder-o" />;
 			}