Merge 2655797 into 9069701

example/app.js

@@ -4,7 +4,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import {StyleRoot} from 'radium';
-import {Treebeard, decorators} from '../src/index';
+import {Treebeard, decorators, makeNewData} from '../src/index';
 
 import data from './data';
 import styles from './styles';
@@ -22,7 +22,6 @@ decorators.Header = ({style, node}) => {
         <div style={style.base}>
             <div style={style.title}>
                 <i className={iconClass} style={iconStyle}/>
-
                 {node.name}
             </div>
         </div>
@@ -48,32 +47,32 @@ NodeViewer.propTypes = {
 class DemoTree extends React.Component {
     constructor() {
         super();
-
         this.state = {data};
         this.onToggle = this.onToggle.bind(this);
     }
 
-    onToggle(node, toggled) {
-        const {cursor} = this.state;
-
-        if (cursor) {
-            cursor.active = false;
-        }
-
-        node.active = true;
+    onToggle(node, toggled, nodePath) {
+        const {data: oldData, cursor, cursorPath} = this.state;
+        const nodeDiff = {active: true};
         if (node.children) {
-            node.toggled = toggled;
+            nodeDiff.toggled = toggled;
         }
-
-        this.setState({cursor: node});
+        const newNode = Object.assign({}, node, nodeDiff);
+        let newData = oldData;
+        if (cursor && cursorPath) {
+            newData = makeNewData(newData, cursorPath, Object.assign({}, cursor, {active: false}));
+        }
+        newData = makeNewData(newData, nodePath, newNode);
+        this.setState({data: newData, cursor: newNode, cursorPath: nodePath});
     }
 
     onFilterMouseUp(e) {
+        const {data: stateData} = this.state;
         const filter = e.target.value.trim();
         if (!filter) {
-            return this.setState({data});
+            return;
         }
-        var filtered = filters.filterTree(data, filter);
+        let filtered = filters.filterTree(stateData, filter);
         filtered = filters.expandFilteredNodes(filtered, filter);
         this.setState({data: filtered});
     }

package.json

@@ -77,6 +77,7 @@
   "dependencies": {
     "babel-runtime": "^6.23.0",
     "deep-equal": "^1.0.1",
+    "lodash": "^4.17.4",
     "prop-types": "^15.5.8",
     "radium": "^0.19.0",
     "shallowequal": "^0.2.2",

src/components/node.js

@@ -14,11 +14,11 @@ class TreeNode extends React.Component {
     }
 
     onClick() {
-        const {node, onToggle} = this.props;
+        const {node, nodePath, onToggle} = this.props;
         const {toggled} = node;
 
         if (onToggle) {
-            onToggle(node, !toggled);
+            onToggle(node, !toggled, nodePath);
         }
     }
 
@@ -53,7 +53,6 @@ class TreeNode extends React.Component {
             <li ref={ref => this.topLevelRef = ref}
                 style={style.base}>
                 {this.renderHeader(decorators, animations)}
-
                 {this.renderDrawer(decorators, animations)}
             </li>
         );
@@ -90,14 +89,13 @@ class TreeNode extends React.Component {
     }
 
     renderChildren(decorators) {
-        const {animations, decorators: propDecorators, node, style} = this.props;
-
+        const {animations, decorators: propDecorators, node, nodePath, style} = this.props;
         if (node.loading) {
             return this.renderLoading(decorators);
         }
-
         let children = node.children;
-        if (!Array.isArray(children)) {
+        const isChildrenArray = Array.isArray(node.children);
+        if (!isChildrenArray) {
             children = children ? [children] : [];
         }
 
@@ -109,6 +107,7 @@ class TreeNode extends React.Component {
                                                           decorators={propDecorators}
                                                           key={child.id || index}
                                                           node={child}
+                                                          nodePath={isChildrenArray ? nodePath.concat('children', String(index)) : nodePath.concat('children')}
                                                           style={style}/>
                 )}
             </ul>
@@ -139,6 +138,7 @@ class TreeNode extends React.Component {
 TreeNode.propTypes = {
     style: PropTypes.object.isRequired,
     node: PropTypes.object.isRequired,
+    nodePath: PropTypes.arrayOf(PropTypes.string).isRequired,
     decorators: PropTypes.object.isRequired,
     animations: PropTypes.oneOfType([
         PropTypes.object,

src/components/treebeard.js

@@ -2,21 +2,31 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import {cloneDeep, set} from 'lodash';
 
 import TreeNode from './node';
 import defaultDecorators from './decorators';
 import defaultTheme from '../themes/default';
 import defaultAnimations from '../themes/animations';
 
+const makeNewData = (oldData, nodePath, newNode) => {
+    if (!(nodePath && nodePath.length)) {
+        return Object.assign({}, oldData, newNode);
+    }
+    return set(cloneDeep(oldData), nodePath, newNode);
+};
+
 class TreeBeard extends React.Component {
     render() {
         const {animations, decorators, data: propsData, onToggle, style} = this.props;
         let data = propsData;
 
-        // Support Multiple Root Nodes. Its not formally a tree, but its a use-case.
-        if (!Array.isArray(data)) {
+        // Support Multiple Root Nodes. It's not formally a tree, but it's a use-case.
+        const isDataArray = Array.isArray(propsData);
+        if (!isDataArray) {
             data = [data];
         }
+
         return (
             <ul style={style.tree.base}
                 ref={ref => this.treeBaseRef = ref}>
@@ -25,6 +35,7 @@ class TreeBeard extends React.Component {
                               decorators={decorators}
                               key={node.id || index}
                               node={node}
+                              nodePath={isDataArray ? [String(index)] : []}
                               onToggle={onToggle}
                               style={style.tree.node}/>
                 )}
@@ -54,3 +65,4 @@ TreeBeard.defaultProps = {
 };
 
 export default TreeBeard;
+export {makeNewData};

src/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import Treebeard from './components/treebeard';
+import Treebeard, {makeNewData} from './components/treebeard';
 import decorators from './components/decorators';
 import animations from './themes/animations';
 import theme from './themes/default';
@@ -9,5 +9,6 @@ export {
     Treebeard,
     decorators,
     animations,
-    theme
+    theme,
+    makeNewData
 };