Introduced tree.

src/components/node.js

@@ -4,6 +4,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {VelocityTransitionGroup} from 'velocity-react';
 
+import Tree from './tree';
 import NodeHeader from './header';
 
 class TreeNode extends React.Component {
@@ -90,7 +91,7 @@ class TreeNode extends React.Component {
     }
 
     renderChildren(decorators) {
-        const {animations, decorators: propDecorators, node, style} = this.props;
+        const {node, ...props} = this.props;
 
         if (node.loading) {
             return this.renderLoading(decorators);
@@ -102,16 +103,10 @@ class TreeNode extends React.Component {
         }
 
         return (
-            <ul style={style.subtree}
-                ref={ref => this.subtreeRef = ref}>
-                {children.map((child, index) => <TreeNode {...this._eventBubbles()}
-                                                          animations={animations}
-                                                          decorators={propDecorators}
-                                                          key={child.id || index}
-                                                          node={child}
-                                                          style={style}/>
-                )}
-            </ul>
+            <Tree {...props}
+                  event={this._eventBubbles()}
+                  treeRef={ref => this.subtreeRef = ref}
+                  data={children}/>
         );
     }
 

src/components/tree.js

@@ -0,0 +1,46 @@
+'use strict';
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import TreeNode from './node';
+
+class Tree extends React.Component {
+    render() {
+        const {animations, decorators, data, onToggle, style, event, treeRef} = this.props;
+        const {tree} = style;
+
+        return (
+            <ul style={tree ? tree.base : style.subtree}
+                ref={treeRef}>
+                {data.map((node, index) =>
+                    <TreeNode {...event}
+                              animations={animations}
+                              decorators={decorators}
+                              key={node.id || index}
+                              node={node}
+                              onToggle={onToggle}
+                              style={tree ? tree.node : style}/>
+                )}
+            </ul>
+        );
+    }
+}
+
+Tree.propTypes = {
+    style: PropTypes.object.isRequired,
+    data: PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.array
+    ]).isRequired,
+    decorators: PropTypes.object.isRequired,
+    animations: PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.bool
+    ]).isRequired,
+    onToggle: PropTypes.func.isRequired,
+    event: PropTypes.object,
+    treeRef: PropTypes.func.isRequired
+};
+
+export default Tree;

src/components/treebeard.js

@@ -3,32 +3,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import TreeNode from './node';
+import Tree from './tree';
 import defaultDecorators from './decorators';
 import defaultTheme from '../themes/default';
 import defaultAnimations from '../themes/animations';
 
 class TreeBeard extends React.Component {
     render() {
-        const {animations, decorators, data: propsData, onToggle, style} = this.props;
+        const {data: propsData, ...props} = this.props;
         let data = propsData;
 
         // Support Multiple Root Nodes. Its not formally a tree, but its a use-case.
         if (!Array.isArray(data)) {
             data = [data];
         }
         return (
-            <ul style={style.tree.base}
-                ref={ref => this.treeBaseRef = ref}>
-                {data.map((node, index) =>
-                    <TreeNode animations={animations}
-                              decorators={decorators}
-                              key={node.id || index}
-                              node={node}
-                              onToggle={onToggle}
-                              style={style.tree.node}/>
-                )}
-            </ul>
+            <Tree {...props}
+                  treeRef={ref => this.treeBaseRef = ref}
+                  data={data}/>
         );
     }
 }