Allow for custom key, children and toggled fields

src/components/header.js

@@ -10,8 +10,8 @@ class NodeHeader extends React.Component {
         super(props);
     }
     render(){
-        const {style, animations, decorators} = this.props;
-        const terminal = !this.props.node.children;
+        const {style, animations, decorators, childrenGetter} = this.props;
+        const terminal = !childrenGetter(this.props.node);
         const active = this.props.node.active;
         const linkStyle = [style.link, active ? style.activeLink : null];
         return (
@@ -45,7 +45,8 @@ NodeHeader.propTypes = {
     decorators: React.PropTypes.object.isRequired,
     animations: React.PropTypes.object.isRequired,
     node: React.PropTypes.object.isRequired,
-    onClick: React.PropTypes.func
+    onClick: React.PropTypes.func,
+    childrenGetter: React.PropTypes.func.isRequired
 };
 
 export default NodeHeader;

src/components/helpers/getter.js

@@ -0,0 +1,14 @@
+'use strict';
+
+// Helper: Get value by function or property name
+function Getter(node, field, defaultValue){
+    if(!field){
+        return defaultValue;
+    }
+    else if(typeof field === 'function'){
+        return field(node);
+    }
+    return node[field];
+}
+
+export default Getter;

src/components/node.js

@@ -13,7 +13,7 @@ class TreeNode extends React.Component {
         this.onClick = this.onClick.bind(this);
     }
     componentWillReceiveProps(props){
-        let toggled = props.node.toggled;
+        let toggled = props.toggledGetter(props.node);
         if(toggled !== undefined){
             this.setState({ toggled });
         }
@@ -52,8 +52,10 @@ class TreeNode extends React.Component {
         );
     }
     renderHeader(decorators, animations){
+        const {childrenGetter} = this.props;
         return (
             <NodeHeader
+                childrenGetter={childrenGetter}
                 decorators={decorators}
                 animations={animations}
                 style={this.props.style}
@@ -63,13 +65,17 @@ class TreeNode extends React.Component {
         );
     }
     renderChildren(decorators){
+        const {keyGetter, childrenGetter, toggledGetter} = this.props;
         if(this.props.node.loading){ return this.renderLoading(decorators); }
         return (
             <ul style={this.props.style.subtree} ref="subtree">
-                {rutils.children.map(this.props.node.children, (child, index) =>
+                {rutils.children.map(childrenGetter(this.props.node), (child, index) =>
                     <TreeNode
                         {...this._eventBubbles()}
-                        key={index}
+                        key={keyGetter(child, index)}
+                        keyGetter={keyGetter}
+                        childrenGetter={childrenGetter}
+                        toggledGetter={toggledGetter}
                         node={child}
                         decorators={this.props.decorators}
                         animations={this.props.animations}
@@ -98,7 +104,10 @@ TreeNode.propTypes = {
     node: React.PropTypes.object.isRequired,
     decorators: React.PropTypes.object.isRequired,
     animations: React.PropTypes.object.isRequired,
-    onToggle: React.PropTypes.func
+    onToggle: React.PropTypes.func,
+    childrenGetter: React.PropTypes.func.isRequired,
+    keyGetter: React.PropTypes.func.isRequired,
+    toggledGetter: React.PropTypes.func.isRequired
 };
 
 export default TreeNode;

src/components/treebeard.js

@@ -3,6 +3,7 @@
 import React from 'react';
 
 import TreeNode from './node';
+import Getter from './helpers/getter';
 import defaultDecorators from './decorators';
 import defaultTheme from '../themes/default';
 import defaultAnimations from '../themes/animations';
@@ -12,19 +13,28 @@ class TreeBeard extends React.Component {
         super(props);
     }
     render(){
-        let data = this.props.data;
+        let {data} = this.props;
         // Support Multiple Root Nodes. Its not formally a tree, but its a use-case.
         if(!Array.isArray(data)){ data = [data]; }
+
+        // Compose children, key and toggled getters
+        const getters = {
+            childrenGetter: node=>Getter(node, this.props.childrenField),
+            keyGetter: (node, index)=>Getter(node, this.props.keyField, index),
+            toggledGetter: node=>Getter(node, this.props.toggledField)
+        }
+
         return (
             <ul style={this.props.style.tree.base} ref="treeBase">
                 {data.map((node, index) =>
                     <TreeNode
-                        key={index}
+                        key={getters.keyGetter(node, index)}
                         node={node}
                         onToggle={this.props.onToggle}
                         animations={this.props.animations}
                         decorators={this.props.decorators}
                         style={this.props.style.tree.node}
+                        {...getters}
                     />
                 )}
             </ul>
@@ -46,7 +56,9 @@ TreeBeard.propTypes = {
 TreeBeard.defaultProps = {
     style: defaultTheme,
     animations: defaultAnimations,
-    decorators: defaultDecorators
+    decorators: defaultDecorators,
+    childrenField: 'children',
+    toggledField: 'toggled'
 };
 
 export default TreeBeard;

test/src/components/header-tests.js

@@ -11,6 +11,7 @@ const factory = require('../utils/factory');
 const defaults = {
     style: {},
     node: { children: [] },
+    childrenGetter: (node)=>node.children,
     animations: { toggle: {} },
     decorators: factory.createDecorators()
 };

test/src/components/node-tests.js

@@ -11,6 +11,9 @@ const factory = require('../utils/factory');
 const defaults = {
     style: {},
     node: { chilren: [] },
+    keyGetter: (node, index)=>index,
+    childrenGetter: node=>node.children,
+    toggledGetter: node=>node.toggled,
     animations: factory.createAnimations(),
     decorators: factory.createDecorators()
 };
@@ -33,7 +36,7 @@ describe('node component', () => {
                 node={node}
             />
         );
-        const changedProps = { node: { toggled: true } };
+        const changedProps = { ...defaults, node: { toggled: true } };
         treeNode.componentWillReceiveProps(changedProps);
         treeNode.state.toggled.should.equal(changedProps.node.toggled);
     });
@@ -45,7 +48,7 @@ describe('node component', () => {
                 node={original}
             />
         );
-        const changedProps = { node: { toggled: undefined } };
+        const changedProps = { ...defaults, node: { toggled: undefined } };
         treeNode.componentWillReceiveProps(changedProps);
         treeNode.state.toggled.should.equal(original.toggled);
     });