chore: add render item prop (#12)

Author: gonzalo-novak

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@clevertask/react-sortable-tree",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "type": "module",
   "license": "MIT",
   "author": "CleverTask",

package.json

@@ -84,6 +84,7 @@ function PrivateSortableTree({
   onAddItem,
   onDragEnd,
   onItemClick,
+  renderItem,
 }: SortableTreeProps) {
   const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);
   const [overId, setOverId] = useState<UniqueIdentifier | null>(null);
@@ -339,7 +340,16 @@ function PrivateSortableTree({
     >
       <SortableContext items={sortedIds} strategy={verticalListSortingStrategy}>
         {flattenedItems.map(
-          ({ id, label, children, collapsed, depth, canFetchChildren, disableDragging }) => (
+          ({
+            id,
+            label,
+            children,
+            collapsed,
+            depth,
+            canFetchChildren,
+            disableDragging,
+            ...rest
+          }) => (
             <SortableTreeItem
               key={id}
               id={id}
@@ -359,6 +369,7 @@ function PrivateSortableTree({
               }
               onAdd={allowNestedItemAddition ? () => onAddItem?.(id) : undefined}
               onLabelClick={onItemClick ? () => onItemClick(id) : undefined}
+              renderedItem={renderItem?.({ id, label, children, ...rest })}
             />
           ),
         )}

src/SortableTree/SortableTree.tsx

@@ -24,6 +24,7 @@ export interface Props extends Omit<HTMLAttributes<HTMLLIElement>, 'id'> {
   onAdd?(): void;
   onLabelClick?(): void;
   wrapperRef?(node: HTMLLIElement): void;
+  renderedItem?: React.ReactNode;
 }
 
 export const _TreeItem = forwardRef<HTMLDivElement, Props>(
@@ -47,6 +48,7 @@ export const _TreeItem = forwardRef<HTMLDivElement, Props>(
       style,
       value,
       wrapperRef,
+      renderedItem,
       ...props
     },
     ref,
@@ -82,6 +84,7 @@ export const _TreeItem = forwardRef<HTMLDivElement, Props>(
           <span onClick={onLabelClick} className={styles.Text}>
             {value}
           </span>
+          {!clone && renderedItem && renderedItem}
           {!clone && onRemove && <Remove onClick={onRemove} />}
           {!clone && onAdd && <Add onClick={onAdd} />}
           {clone && childCount && childCount > 1 ?

src/SortableTree/components/TreeItem/TreeItem.tsx

@@ -135,6 +135,14 @@ export interface SortableTreeProps {
    * @param id - The id of the clicked item.
    */
   onItemClick?: (id: UniqueIdentifier) => void;
+
+  /**
+   * You can place a react component next to the item's label. This is temporal while we
+   * figure out a way of rendering a whole custom item
+   * @param item
+   * @returns
+   */
+  renderItem?: (item: TreeItem) => React.ReactNode;
 }
 
 /**