Add customItemsRenderer prop (#152)

* Add customItemsRenderer prop

* del spread props from customItemsRenderer

* add new customItemsRenderer prop to readme.md

* add selectedItem, forwardIconRenderer to props

Author: yegor-babiy

README.md

@@ -48,6 +48,7 @@ Both options support component customization. - [examples](https://github.com/ke
 | `itemsRenderer`        | `Component` | `items.js`             | `Component to replace the default Items component. `            |
 | `forwardIconRenderer`  | `Component` |                        | `Component to replace the default ForwardIcon component. `      |
 | `treeContainerRenderer`| `Component` | `tree_container.js`    | `Component to replace the default TreeContainer component. `    |
+| `customItemsRenderer ` | `Component` |                        | `Component to replace the default Items && inner Item component.`|
 | `markSelectedItem`     | `boolean`   | `false`                | `Toggle to mark selected item. `                                |
 
 <br/>

packages/core/src/tree.js

@@ -39,6 +39,7 @@ const Tree = props => {
     itemsRenderer: Items = ItemsRenderer,
     forwardIconRenderer,
     treeContainerRenderer: TreeContainer = TreeContainerRenderer,
+    customItemsRenderer,
     selectedItem
   } = props;
 
@@ -94,20 +95,30 @@ const Tree = props => {
         inputIconRenderer={inputIconRenderer}
         clearIconRenderer={clearIconRenderer}
       />
-      <Items styles={styles} getStyles={getStyles} height={itemsHeight}>
-        {leaves &&
-          leaves.length > 0 &&
-          leaves.map(item => (
-            <Item
-              getStyles={getStyles}
-              searchTerm={searchTerm}
-              item={item}
-              onClick={onClick}
-              forwardIconRenderer={forwardIconRenderer}
-              selectedItem={selectedItem}
-            />
-          ))}
-      </Items>
+      {customItemsRenderer ? (
+        React.cloneElement(customItemsRenderer, {
+          leaves,
+          searchTerm,
+          onClick,
+          selectedItem,
+          forwardIconRenderer
+        })
+      ) : (
+        <Items styles={styles} getStyles={getStyles} height={itemsHeight}>
+          {leaves &&
+            leaves.length > 0 &&
+            leaves.map(item => (
+              <Item
+                getStyles={getStyles}
+                searchTerm={searchTerm}
+                item={item}
+                onClick={onClick}
+                forwardIconRenderer={forwardIconRenderer}
+                selectedItem={selectedItem}
+              />
+            ))}
+        </Items>
+      )}
       {leaves && leaves.length === 0 && (
         <NoResults
           height={itemsHeight}