Custom collapse icon

dist/node.js

@@ -9,16 +9,21 @@ var Node = React.createClass({
 
   renderCollapse: function renderCollapse() {
     var index = this.props.index;
+    var renderCollapse = this.props.renderCollapse;
 
     if (index.children && index.children.length) {
       var collapsed = index.node.collapsed;
 
-      return React.createElement('span', {
-        className: cx('collapse', collapsed ? 'caret-right' : 'caret-down'),
-        onMouseDown: function onMouseDown(e) {
-          e.stopPropagation();
+      return React.createElement(
+        'span',
+        {
+          onMouseDown: function onMouseDown(e) {
+            e.stopPropagation();
+          },
+          onClick: this.handleCollapse
         },
-        onClick: this.handleCollapse });
+        renderCollapse(collapsed)
+      );
     }
 
     return null;
@@ -47,7 +52,8 @@ var Node = React.createClass({
             dragging: dragging,
             paddingLeft: _this.props.paddingLeft,
             onCollapse: _this.props.onCollapse,
-            onDragStart: _this.props.onDragStart
+            onDragStart: _this.props.onDragStart,
+            renderCollapse: _this.props.renderCollapse
           });
         })
       );
@@ -71,7 +77,7 @@ var Node = React.createClass({
         'div',
         { className: 'inner', ref: 'inner', onMouseDown: this.handleMouseDown },
         this.renderCollapse(),
-        tree.renderNode(node)
+        tree.renderNode(node, index.id)
       ),
       this.renderChildren()
     );

dist/react-ui-tree.js

@@ -60,7 +60,8 @@ module.exports = React.createClass({
         React.createElement(Node, {
           tree: tree,
           index: draggingIndex,
-          paddingLeft: this.props.paddingLeft
+          paddingLeft: this.props.paddingLeft,
+          renderCollapse: this.props.renderCollapse
         })
       );
     }
@@ -83,7 +84,8 @@ module.exports = React.createClass({
         paddingLeft: this.props.paddingLeft,
         onDragStart: this.dragStart,
         onCollapse: this.toggleCollapse,
-        dragging: dragging && dragging.id
+        dragging: dragging && dragging.id,
+        renderCollapse: this.props.renderCollapse
       })
     );
   },

example/app.js

@@ -32,6 +32,16 @@ var App = React.createClass({
     });
   },
 
+  renderCollapse(collapsed) {
+    return (
+      <span
+        className={cx('collapse', collapsed ? 'caret-right' : 'caret-down')}
+        onMouseDown={function(e) {e.stopPropagation()}}
+        onClick={this.handleCollapse}>
+      </span>
+    )
+  },
+
   render() {
     return (
       <div className="app">
@@ -42,6 +52,7 @@ var App = React.createClass({
             onChange={this.handleChange}
             isNodeCollapsed={this.isNodeCollapsed}
             renderNode={this.renderNode}
+            renderCollapse={this.renderCollapse}
           />
         </div>
         <div className="inspector">

lib/node.js

@@ -7,15 +7,17 @@ var Node = React.createClass({
 
   renderCollapse() {
     var index = this.props.index;
+    var renderCollapse = this.props.renderCollapse;
 
     if(index.children && index.children.length) {
       var collapsed = index.node.collapsed;
 
       return (
         <span
-          className={cx('collapse', collapsed ? 'caret-right' : 'caret-down')}
           onMouseDown={function(e) {e.stopPropagation()}}
-          onClick={this.handleCollapse}>
+          onClick={this.handleCollapse}
+        >
+          {renderCollapse(collapsed)}
         </span>
       );
     }
@@ -46,6 +48,7 @@ var Node = React.createClass({
                 paddingLeft={this.props.paddingLeft}
                 onCollapse={this.props.onCollapse}
                 onDragStart={this.props.onDragStart}
+                renderCollapse={this.props.renderCollapse}
               />
             );
           })}
@@ -69,7 +72,7 @@ var Node = React.createClass({
       })} style={styles}>
         <div className="inner" ref="inner" onMouseDown={this.handleMouseDown}>
           {this.renderCollapse()}
-          {tree.renderNode(node)}
+          {tree.renderNode(node, index.id)}
         </div>
         {this.renderChildren()}
       </div>

lib/react-ui-tree.js

@@ -63,6 +63,7 @@ module.exports = React.createClass({
             tree={tree}
             index={draggingIndex}
             paddingLeft={this.props.paddingLeft}
+            renderCollapse={this.props.renderCollapse}
           />
         </div>
       );
@@ -87,6 +88,7 @@ module.exports = React.createClass({
           onDragStart={this.dragStart}
           onCollapse={this.toggleCollapse}
           dragging={dragging && dragging.id}
+          renderCollapse={this.props.renderCollapse}
         />
       </div>
     );

package.json

@@ -1,13 +1,14 @@
 {
   "name": "react-ui-tree",
-  "version": "2.6.0",
+  "version": "2.6.2",
   "description": "React tree component",
   "main": "index.js",
   "scripts": {
     "start": "webpack-dev-server -c --port=8888",
     "build": "make",
     "deploy": "npm run build && github-pages-deploy",
-    "test": "mocha"
+    "test": "mocha",
+    "upgrade:version": "npm run build && npm version patch && git push && npm publish"
   },
   "github-pages-deploy": {
     "src": "example"