fix(useTree): treeIcon can be configured dynamically with the node too

Author: rwieruch

.storybook/stories/Features/tree.story.js

@@ -7,6 +7,8 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import FolderIcon from '@mui/icons-material/Folder';
 import FolderOpenIcon from '@mui/icons-material/FolderOpen';
 import InsertDriveFileOutlinedIcon from '@mui/icons-material/InsertDriveFileOutlined';
+import CheckIcon from '@mui/icons-material/Check';
+import CloseIcon from '@mui/icons-material/Close';
 
 import {
   Table,
@@ -353,7 +355,8 @@ storiesOf('Features/Tree', module)
       {
         treeIcon: {
           margin: '4px',
-          iconDefault: <InsertDriveFileOutlinedIcon fontSize="small" />,
+          iconDefault: (node) =>
+            node.isComplete ? <CheckIcon fontSize="small" /> : <CloseIcon fontSize="small" />,
           iconRight: <FolderIcon fontSize="small" />,
           iconDown: <FolderOpenIcon fontSize="small" />,
         },

.storybook/stories/Types/tree.story.mdx

@@ -7,10 +7,10 @@ import { Meta } from '@storybook/addon-docs';
 ```javascript
 import * as React from 'react';
 import {
-  Nullish,
   State,
   IdReducerFunctions,
   Modifier,
+  Nullish,
 } from '@table-library/react-table-library/types/common';
 import { TableNode, GetRowProps } from '@table-library/react-table-library/types/table';
 
@@ -19,13 +19,15 @@ export enum TreeExpandClickTypes {
   ButtonClick,
 }
 
+export type CustomIcon = React.ReactElement | ((node: TableNode) => React.ReactElement) | Nullish;
+
 export type TreeOptionsIcon = {
   margin?: string;
   size?: string;
   noIconMargin?: string;
-  iconDefault?: React.ReactElement | Nullish;
-  iconRight?: React.ReactElement | Nullish;
-  iconDown?: React.ReactElement | Nullish;
+  iconDefault?: CustomIcon;
+  iconRight?: CustomIcon;
+  iconDown?: CustomIcon;
 };
 
 export type TreeOptions = {
@@ -41,9 +43,9 @@ export type TreeOptionsIconSound = {
   margin: string;
   size: string;
   noIconMargin: string;
-  iconDefault: React.ReactElement | Nullish;
-  iconRight: React.ReactElement | Nullish;
-  iconDown: React.ReactElement | Nullish;
+  iconDefault: CustomIcon;
+  iconRight: CustomIcon;
+  iconDown: CustomIcon;
 };
 
 export type TreeOptionsSound = {
@@ -64,7 +66,7 @@ export type ColumnTreeProps = ColumnTreePropsObject | boolean;
 export type CellTreeProps = {
   item: TableNode;
   treeIcon?: TreeOptionsIcon;
-  children: React.ReactNode;
+  children?: React.ReactNode;
 };
 
 export type Tree = {

src/tree/CellTree.tsx

@@ -8,9 +8,9 @@ import { Cell } from '@table-library/react-table-library/table/Cell';
 import { TreeContext } from '@table-library/react-table-library/common/context/Tree';
 import { isLeaf } from '@table-library/react-table-library/common/util/tree';
 
-import { Nullish, State } from '@table-library/react-table-library/types/common';
+import { State } from '@table-library/react-table-library/types/common';
 import { TableNode } from '@table-library/react-table-library/types/table';
-import { CellTreeProps } from '@table-library/react-table-library/types/tree';
+import { CellTreeProps, CustomIcon } from '@table-library/react-table-library/types/tree';
 
 const style = css`
   display: flex;
@@ -23,13 +23,28 @@ const style = css`
   }
 `;
 
+export type Size = {
+  height: string;
+  width: string;
+};
+
+const resolveIcon = (customIcon: CustomIcon, node: TableNode, size: Size) => {
+  if (!customIcon) return null;
+
+  if (typeof customIcon === 'function') {
+    return React.cloneElement(customIcon(node), { ...size });
+  }
+
+  return React.cloneElement(customIcon, { ...size });
+};
+
 const getTreeIcon = (
   item: TableNode,
   treeState: State,
   treeIconSize: string,
-  TreeIconDefault: React.ReactElement | Nullish,
-  TreeIconRight: React.ReactElement | Nullish,
-  TreeIconDown: React.ReactElement | Nullish,
+  TreeIconDefault: CustomIcon,
+  TreeIconRight: CustomIcon,
+  TreeIconDown: CustomIcon,
 ) => {
   const size = {
     height: `${treeIconSize}`,
@@ -39,14 +54,14 @@ const getTreeIcon = (
   const isTreeExpanded = treeState.ids.includes(item.id);
 
   if (!isLeaf(item) && isTreeExpanded) {
-    return TreeIconDown ? React.cloneElement(TreeIconDown, { ...size }) : null;
+    return resolveIcon(TreeIconDown, item, size);
   }
 
   if (!isLeaf(item) && !isTreeExpanded) {
-    return TreeIconRight ? React.cloneElement(TreeIconRight, { ...size }) : null;
+    return resolveIcon(TreeIconRight, item, size);
   }
 
-  return TreeIconDefault ? React.cloneElement(TreeIconDefault, { ...size }) : null;
+  return resolveIcon(TreeIconDefault, item, size);
 };
 
 export const CellTree: React.FC<CellTreeProps> = ({

src/types/tree.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import {
-  Nullish,
   State,
   IdReducerFunctions,
   Modifier,
+  Nullish,
 } from '@table-library/react-table-library/types/common';
 import { TableNode, GetRowProps } from '@table-library/react-table-library/types/table';
 
@@ -12,13 +12,15 @@ export enum TreeExpandClickTypes {
   ButtonClick,
 }
 
+export type CustomIcon = React.ReactElement | ((node: TableNode) => React.ReactElement) | Nullish;
+
 export type TreeOptionsIcon = {
   margin?: string;
   size?: string;
   noIconMargin?: string;
-  iconDefault?: React.ReactElement | Nullish;
-  iconRight?: React.ReactElement | Nullish;
-  iconDown?: React.ReactElement | Nullish;
+  iconDefault?: CustomIcon;
+  iconRight?: CustomIcon;
+  iconDown?: CustomIcon;
 };
 
 export type TreeOptions = {
@@ -34,9 +36,9 @@ export type TreeOptionsIconSound = {
   margin: string;
   size: string;
   noIconMargin: string;
-  iconDefault: React.ReactElement | Nullish;
-  iconRight: React.ReactElement | Nullish;
-  iconDown: React.ReactElement | Nullish;
+  iconDefault: CustomIcon;
+  iconRight: CustomIcon;
+  iconDown: CustomIcon;
 };
 
 export type TreeOptionsSound = {