diff --git a/package-lock.json b/package-lock.json index 5f4ba6a..5969691 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@clevertask/react-sortable-tree", - "version": "0.0.5", + "version": "0.0.6", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@clevertask/react-sortable-tree", - "version": "0.0.5", + "version": "0.0.6", "license": "MIT", "dependencies": { "@dnd-kit/core": "^6.1.0", diff --git a/package.json b/package.json index 688fedf..d805f57 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@clevertask/react-sortable-tree", - "version": "0.0.5", + "version": "0.0.6", "type": "module", "license": "MIT", "author": "CleverTask", diff --git a/src/SortableTree/SortableTree.tsx b/src/SortableTree/SortableTree.tsx index 5d879cf..56c1ba7 100644 --- a/src/SortableTree/SortableTree.tsx +++ b/src/SortableTree/SortableTree.tsx @@ -84,6 +84,7 @@ function PrivateSortableTree({ onAddItem, onDragEnd, onItemClick, + renderItem, }: SortableTreeProps) { const [activeId, setActiveId] = useState(null); const [overId, setOverId] = useState(null); @@ -339,7 +340,16 @@ function PrivateSortableTree({ > {flattenedItems.map( - ({ id, label, children, collapsed, depth, canFetchChildren, disableDragging }) => ( + ({ + id, + label, + children, + collapsed, + depth, + canFetchChildren, + disableDragging, + ...rest + }) => ( onAddItem?.(id) : undefined} onLabelClick={onItemClick ? () => onItemClick(id) : undefined} + renderedItem={renderItem?.({ id, label, children, ...rest })} /> ), )} diff --git a/src/SortableTree/components/TreeItem/TreeItem.tsx b/src/SortableTree/components/TreeItem/TreeItem.tsx index 0afef50..661bafc 100644 --- a/src/SortableTree/components/TreeItem/TreeItem.tsx +++ b/src/SortableTree/components/TreeItem/TreeItem.tsx @@ -24,6 +24,7 @@ export interface Props extends Omit, 'id'> { onAdd?(): void; onLabelClick?(): void; wrapperRef?(node: HTMLLIElement): void; + renderedItem?: React.ReactNode; } export const _TreeItem = forwardRef( @@ -47,6 +48,7 @@ export const _TreeItem = forwardRef( style, value, wrapperRef, + renderedItem, ...props }, ref, @@ -82,6 +84,7 @@ export const _TreeItem = forwardRef( {value} + {!clone && renderedItem && renderedItem} {!clone && onRemove && } {!clone && onAdd && } {clone && childCount && childCount > 1 ? diff --git a/src/SortableTree/types.ts b/src/SortableTree/types.ts index 60283e3..be28639 100644 --- a/src/SortableTree/types.ts +++ b/src/SortableTree/types.ts @@ -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; } /**