feat: Allow passing function to override node render

src/index.js

@@ -34,7 +34,9 @@ class DropdownTreeSelect extends Component {
     onBlur: PropTypes.func,
     simpleSelect: PropTypes.bool,
     noMatchesText: PropTypes.string,
-    showPartiallySelected: PropTypes.bool
+    showPartiallySelected: PropTypes.bool,
+    nodeRenderer: PropTypes.func,
+    iconRenderer: PropTypes.func
   }
 
   static defaultProps = {
@@ -211,6 +213,8 @@ class DropdownTreeSelect extends Component {
                   onNodeToggle={this.onNodeToggle}
                   simpleSelect={this.props.simpleSelect}
                   showPartiallySelected={this.props.showPartiallySelected}
+                  nodeRenderer={this.props.nodeRenderer}
+                  iconRenderer={this.props.iconRenderer}
                 />
               )}
             </div>

src/tree-node/index.js

@@ -51,7 +51,9 @@ class TreeNode extends PureComponent {
     onAction: PropTypes.func,
     onCheckboxChange: PropTypes.func,
     simpleSelect: PropTypes.bool,
-    showPartiallySelected: PropTypes.bool
+    showPartiallySelected: PropTypes.bool,
+    nodeRenderer: PropTypes.func,
+    iconRenderer: PropTypes.func
   }
 
   render() {
@@ -74,14 +76,16 @@ class TreeNode extends PureComponent {
       searchModeOn,
       onNodeToggle,
       onCheckboxChange,
-      showPartiallySelected
+      showPartiallySelected,
+      nodeRenderer,
+      iconRenderer
     } = this.props
     const liCx = getNodeCx(this.props)
     const style = keepTreeOnSearch || !searchModeOn ? { paddingLeft: `${(_depth || 0) * 20}px` } : {}
 
     return (
       <li className={liCx} style={style} {...getDataset(dataset)}>
-        <Toggle isLeaf={isLeaf(_children)} expanded={expanded} id={_id} onNodeToggle={onNodeToggle} />
+        <Toggle isLeaf={isLeaf(_children)} expanded={expanded} id={_id} onNodeToggle={onNodeToggle} iconRenderer={iconRenderer} />
         <NodeLabel
           title={title}
           label={label}
@@ -93,6 +97,7 @@ class TreeNode extends PureComponent {
           simpleSelect={simpleSelect}
           onCheckboxChange={onCheckboxChange}
           showPartiallySelected={showPartiallySelected}
+          nodeRenderer={nodeRenderer}
         />
         <Actions actions={actions} onAction={onAction} id={_id} />
       </li>

src/tree-node/node-label.js

@@ -21,7 +21,8 @@ class NodeLabel extends PureComponent {
     dataset: PropTypes.object,
     simpleSelect: PropTypes.bool,
     showPartiallySelected: PropTypes.bool,
-    onCheckboxChange: PropTypes.func
+    onCheckboxChange: PropTypes.func,
+    nodeRenderer: PropTypes.func
   }
 
   handleCheckboxChange = e => {
@@ -36,15 +37,24 @@ class NodeLabel extends PureComponent {
   }
 
   render() {
-    const { simpleSelect, title, label, id, partial, checked, value, disabled, showPartiallySelected } = this.props
+    const { simpleSelect, title, label, id, partial, checked, value, disabled, showPartiallySelected, nodeRenderer } = this.props
     const nodeLabelProps = { className: 'node-label' }
 
     if (simpleSelect) {
       nodeLabelProps.onClick = this.handleCheckboxChange
     }
 
-    return (
-      <label title={title || label} htmlFor={id}>
+    return nodeRenderer
+      ? nodeRenderer({
+        id,
+        value,
+        disabled,
+        checked,
+        title: title || label,
+        onChange: this.handleCheckboxChange,
+        indeterminate: showPartiallySelected && partial
+      })
+      : <label title={title || label} htmlFor={id}>
         <Checkbox
           name={id}
           id={id}
@@ -57,7 +67,6 @@ class NodeLabel extends PureComponent {
         />
         <span {...nodeLabelProps}>{label}</span>
       </label>
-    )
   }
 }
 

src/tree-node/toggle.js

@@ -10,17 +10,20 @@ class Toggle extends PureComponent {
     expanded: PropTypes.bool,
     isLeaf: PropTypes.bool,
     onNodeToggle: PropTypes.func,
-    id: PropTypes.string
+    id: PropTypes.string,
+    iconRenderer: PropTypes.func
   }
 
   onToggle = () => {
     this.props.onNodeToggle(this.props.id)
   }
 
   render() {
-    const { expanded, isLeaf } = this.props
+    const { expanded, isLeaf, iconRenderer } = this.props
     const toggleCx = cx('toggle', { expanded: !isLeaf && expanded, collapsed: !isLeaf && !expanded })
-    return <i className={toggleCx} onClick={this.onToggle} />
+    return iconRenderer
+      ? iconRenderer(toggleCx, this.onToggle)
+      : <i className={toggleCx} onClick={this.onToggle} />
   }
 }
 

src/tree/index.js

@@ -25,7 +25,9 @@ class Tree extends Component {
     onCheckboxChange: PropTypes.func,
     simpleSelect: PropTypes.bool,
     showPartiallySelected: PropTypes.bool,
-    pageSize: PropTypes.number
+    pageSize: PropTypes.number,
+    nodeRenderer: PropTypes.func,
+    iconRenderer: PropTypes.func
   }
 
   static defaultProps = {
@@ -58,7 +60,7 @@ class Tree extends Component {
   }
 
   getNodes = props => {
-    const { data, keepTreeOnSearch, searchModeOn, simpleSelect, showPartiallySelected } = props
+    const { data, keepTreeOnSearch, searchModeOn, simpleSelect, showPartiallySelected, nodeRenderer, iconRenderer } = props
     const { onAction, onChange, onCheckboxChange, onNodeToggle } = props
     const items = []
     data.forEach(node => {
@@ -74,6 +76,8 @@ class Tree extends Component {
           onAction={onAction}
           simpleSelect={simpleSelect}
           showPartiallySelected={showPartiallySelected}
+          nodeRenderer={nodeRenderer}
+          iconRenderer={iconRenderer}
         />)
       }
     })