adding node.collapsed support

Author: wangzuo

example/app.js

@@ -14,6 +14,7 @@ var App = React.createClass({
         module: 'react-ui-tree',
         children: [{
           module: 'dist',
+          collapsed: true,
           children: [{
             module: 'node.js'
           }, {
@@ -63,10 +64,13 @@ var App = React.createClass({
   },
 
   renderNode(node) {
-    return <span className={cx({
-      'node': true,
-      'is-active': node === this.state.active
-    })} onClick={this.onClickNode.bind(null, node)}>{node.module}</span>;
+    return (
+      <span className={cx('node', {
+        'is-active': node === this.state.active
+        })} onClick={this.onClickNode.bind(null, node)}>
+        {node.module}
+      </span>
+    );
   },
 
   onClickNode(node) {
@@ -83,10 +87,12 @@ var App = React.createClass({
             paddingLeft={20}
             tree={this.state.tree}
             onChange={this.handleChange}
+            isNodeCollapsed={this.isNodeCollapsed}
             renderNode={this.renderNode}
           />
         </div>
         <div className="inspector">
+          <button onClick={this.updateTree}>update tree</button>
           <pre>
           {JSON.stringify(this.state.tree, null, '  ')}
           </pre>
@@ -99,6 +105,14 @@ var App = React.createClass({
     this.setState({
       tree: tree
     });
+  },
+
+  updateTree() {
+    var tree = this.state.tree;
+    tree.children.push({module: 'test'});
+    this.setState({
+      tree: tree
+    });
   }
 });
 

lib/node.js

@@ -8,12 +8,11 @@ var Node = React.createClass({
     var index = this.props.index;
 
     if(index.children && index.children.length) {
+      var collapsed = index.node.collapsed;
+
       return (
         <span
-          className={cx('collapse', {
-            'caret-right': index.collapsed,
-            'caret-down': !index.collapsed
-          })}
+          className={cx('collapse', collapsed ? 'caret-right' : 'caret-down')}
           onMouseDown={function(e) {e.stopPropagation()}}
           onClick={this.handleCollapse}>
         </span>
@@ -30,7 +29,7 @@ var Node = React.createClass({
 
     if(index.children && index.children.length) {
       var childrenStyles = {};
-      if(index.collapsed) childrenStyles.display = 'none';
+      if(index.node.collapsed) childrenStyles.display = 'none';
       childrenStyles['paddingLeft'] = this.props.paddingLeft + 'px';
 
       return (

lib/react-ui-tree.js

@@ -6,9 +6,9 @@ module.exports = React.createClass({
   displayName: 'UITree',
 
   propTypes: {
-    tree: React.PropTypes.object,
+    tree: React.PropTypes.object.isRequired,
     paddingLeft: React.PropTypes.number,
-    renderNode: React.PropTypes.func
+    renderNode: React.PropTypes.func.isRequired
   },
 
   getDefaultProps() {
@@ -22,13 +22,15 @@ module.exports = React.createClass({
   },
 
   componentWillReceiveProps(nextProps) {
-    if(!this._update) this.setState(this.init(nextProps));
-    else this._update = false;
+    if(!this._updated) this.setState(this.init(nextProps));
+    else this._updated = false;
   },
 
   init(props) {
     var tree = new Tree(props.tree);
+    tree.isNodeCollapsed = props.isNodeCollapsed;
     tree.renderNode = props.renderNode;
+    tree.changeNodeCollapsed = props.changeNodeCollapsed;
     tree.updateNodesPosition();
 
     return {
@@ -207,18 +209,21 @@ module.exports = React.createClass({
   },
 
   change(tree) {
-    this._update = true;
+    this._updated = true;
     if(this.props.onChange) this.props.onChange(tree.obj);
   },
 
-  toggleCollapse: function(nodeId) {
+  toggleCollapse(nodeId) {
     var tree = this.state.tree;
     var index = tree.getIndex(nodeId);
-    index.collapsed = !index.collapsed;
+    var node = index.node;
+    node.collapsed = !node.collapsed;
     tree.updateNodesPosition();
 
     this.setState({
       tree: tree
     });
+
+    this.change(tree);
   }
 });

lib/tree.js

@@ -9,7 +9,7 @@ proto.updateNodesPosition = function() {
 
   root.top = top++;
   root.left = left++;
-  walk(root.children, root, left, root.collapsed);
+  walk(root.children, root, left, root.node.collapsed);
 
   function walk(children, parent, left, collapsed) {
     var height = 1;
@@ -24,14 +24,14 @@ proto.updateNodesPosition = function() {
       }
 
       if(node.children && node.children.length) {
-        height += walk(node.children, node, left+1, collapsed || node.collapsed);
+        height += walk(node.children, node, left+1, collapsed || node.node.collapsed);
       } else {
         node.height = 1;
         height += 1;
       }
     });
 
-    if(parent.collapsed) parent.height = 1;
+    if(parent.node.collapsed) parent.height = 1;
     else parent.height = height;
     return parent.height;
   }