@clevertask/react-sortable-tree 0.0.4 → 0.0.6

package/README.md

@@ -1,6 +1,6 @@
 # @clevertask/react-sortable-tree
 
-A customizable React component for rendering and managing tree structures with drag-and-drop functionality.
+A customizable React component for rendering and managing tree structures with drag-and-drop functionality. This is built on top of the [sortable tree Component from the dnd-kit library](https://github.com/clauderic/dnd-kit/blob/master/stories/3%20-%20Examples/Tree/SortableTree.tsx).
 
 ## Table of Contents
 
@@ -10,9 +10,8 @@ A customizable React component for rendering and managing tree structures with d
 - [Types](#types)
   - [TreeItem](#treeitem)
   - [TreeItems](#treeitems)
-  - [OptimizedTreeStructure](#optimizedtreestructure)
 - [Helper Functions](#helper-functions)
-  - [createOptimizedTreeStructure](#createoptimizedtreestructure)
+  - [getItemById](#getItemById)
   - [removeItemById](#removeitembyid)
   - [setTreeItemProperties](#settreeitemproperties)
 - [Roadmap](#roadmap)
@@ -29,20 +28,19 @@ npm install @clevertask/react-sortable-tree
 
 ```tsx
 import '@clevertask/react-sortable-tree/dist/style.css';
-import { SortableTree, createOptimizedTreeStructure } from '@clevertask/react-sortable-tree';
+import React, { useState } from 'react';
+import { SortableTree, TreeItems } from '@clevertask/react-sortable-tree';
 
 function App() {
-  const [treeStructure, setTreeStructure] = useState(
-    createOptimizedTreeStructure([
-      { id: '1', label: 'Item 1', children: [] },
-      { id: '2', label: 'Item 2', children: [{ id: '3', label: 'Item 2.1', children: [] }] },
-    ]),
-  );
+  const [items, setItems] = useState<TreeItems>([
+    { id: '1', label: 'Item 1', children: [] },
+    { id: '2', label: 'Item 2', children: [{ id: '3', label: 'Item 2.1', children: [] }] },
+  ]);
 
   return (
     <SortableTree
-      treeStructure={treeStructure}
-      setTreeStructure={setTreeStructure}
+      items={items}
+      setItems={setItems}
       isCollapsible
       isRemovable
       allowNestedItemAddition
@@ -56,8 +54,8 @@ function App() {
 
 | Prop                      | Type                                                            | Default     | Description                                                                                                          |
 | ------------------------- | --------------------------------------------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------- |
-| `treeStructure`           | `OptimizedTreeStructure`                                        | Required    | The array of tree items to be rendered.                                                                              |
-| `setTreeStructure`        | `React.Dispatch<React.SetStateAction<OptimizedTreeStructure>>`  | Required    | Callback function called when the tree structure changes.                                                            |
+| `items`                   | `TreeItems`                                                     | Required    | The array of tree items to be rendered.                                                                              |
+| `setItems`                | `React.Dispatch<React.SetStateAction<TreeItems>>`               | Required    | Callback function called when the tree items array changes.                                                          |
 | `indentationWidth`        | `number`                                                        | `undefined` | The indentation width for children elements.                                                                         |
 | `isCollapsible`           | `boolean`                                                       | `false`     | Determines if tree items can be collapsed/expanded.                                                                  |
 | `onLazyLoadChildren`      | `(id: UniqueIdentifier, isExpanding: boolean) => Promise<void>` | `undefined` | Callback for lazy loading child items when a parent is expanded. Useful for getting child items from an API endpoint |
@@ -91,79 +89,60 @@ type TreeItem = {
 type TreeItems = TreeItem[];
 ```
 
-### OptimizedTreeStructure
-
-```typescript
-interface OptimizedTreeStructure {
-  items: TreeItems;
-  itemMap: Map<UniqueIdentifier, TreeItem>;
-}
-```
-
-The `OptimizedTreeStructure` is used internally to improve performance for large trees. Use the `createOptimizedTreeStructure` function to create this structure from a `TreeItems` array.
-
 ## Helper Functions
 
-### createOptimizedTreeStructure
+### getItemById
 
 ```typescript
-function createOptimizedTreeStructure(items: TreeItems): OptimizedTreeStructure;
+function getItemById(items: TreeItems, id: UniqueIdentifier): TreeItem | undefined;
 ```
 
-### getItemById
 Retrieves a tree item by its unique identifier.
+
+Usage example:
+
 ```typescript
-function getItemById(
-  structure: OptimizedTreeStructure,
-  id: UniqueIdentifier,
-): TreeItem | undefined;
+const item = getItemById(items, '1');
 ```
 
 ### removeItemById
 
 ```typescript
-function removeItemById(
-  structure: OptimizedTreeStructure,
-  id: UniqueIdentifier,
-): OptimizedTreeStructure;
+function removeItemById(items: TreeItems, id: UniqueIdentifier): TreeItems;
 ```
 
-This function removes an item from the tree structure by its ID. It returns a new `OptimizedTreeStructure` with the item removed from both the `items` array and the `itemMap`. It also handles removing the item from nested children.
+This function removes an item from the tree structure by its ID. It returns a new `TreeItems` array with the item removed. It also handles removing the item from nested children.
 
 Usage example:
 
 ```typescript
-const updatedStructure = removeItemById(currentStructure, '123');
-setTreeStructure(updatedStructure);
+const updatedItems = removeItemById(items, '123');
+setItems(updatedItems);
 ```
 
 ### setTreeItemProperties
 
 ```typescript
 function setTreeItemProperties(
-  structure: OptimizedTreeStructure,
+  items: TreeItems,
   id: UniqueIdentifier,
   setter: (value: TreeItem) => Partial<TreeItem>,
-): OptimizedTreeStructure;
+): TreeItems;
 ```
 
-This function updates the properties of a specific tree item. It takes a setter function that receives the current item and returns an object with the properties to be updated. It returns a new `OptimizedTreeStructure` with the updated item in both the `items` array and the `itemMap`.
+This function updates the properties of a specific tree item. It takes a setter function that receives the current item and returns an object with the properties to be updated. It returns a new `TreeItems` array with the updated item.
 
 Usage example:
 
 ```typescript
-setTreeStructure((treeStructure) => {
-  return setTreeItemProperties(treeStructure, '123', (item) => ({
+setItems((items) => {
+  return setTreeItemProperties(items, '123', (item) => ({
     label: 'New Label',
     collapsed: !item.collapsed,
   }));
 });
 ```
 
-These helper functions are designed to work with the `OptimizedTreeStructure` to ensure efficient updates to the tree. They maintain both the tree hierarchy in the `items` array and the fast lookup `O(1)` capability of the `itemMap`.
-
-Use this function to create an `OptimizedTreeStructure` from a `TreeItems` array. This is useful when initializing your state.
-
 ## Roadmap
 
 We're constantly working to improve @clevertask/react-sortable-tree. Here are some features we're planning to implement:

package/dist/SortableTree/SortableTree.d.ts

@@ -1,4 +1,4 @@
 import { SortableTreeProps } from './types';
-declare function PrivateSortableTree({ treeStructure, setTreeStructure, isCollapsible, onLazyLoadChildren, showDropIndicator, indentationWidth, isRemovable, onRemoveItem, allowNestedItemAddition, onAddItem, onDragEnd, onItemClick, }: SortableTreeProps): import("react/jsx-runtime").JSX.Element;
+declare function PrivateSortableTree({ items, setItems, isCollapsible, onLazyLoadChildren, showDropIndicator, indentationWidth, isRemovable, onRemoveItem, allowNestedItemAddition, onAddItem, onDragEnd, onItemClick, renderItem, }: SortableTreeProps): import("react/jsx-runtime").JSX.Element;
 export declare const SortableTree: import('react').MemoExoticComponent<typeof PrivateSortableTree>;
 export {};

package/dist/SortableTree/components/TreeItem/TreeItem.d.ts

@@ -17,6 +17,7 @@ export interface Props extends Omit<HTMLAttributes<HTMLLIElement>, 'id'> {
     onAdd?(): void;
     onLabelClick?(): void;
     wrapperRef?(node: HTMLLIElement): void;
+    renderedItem?: React.ReactNode;
 }
 export declare const _TreeItem: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export declare const TreeItem: React.MemoExoticComponent<React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>>;

package/dist/SortableTree/index.d.ts

@@ -1,3 +1,3 @@
 export * from './types';
 export { SortableTree } from './SortableTree';
-export { setTreeItemProperties, removeItemById, createOptimizedTreeStructure, getItemById, } from './utilities';
+export { setTreeItemProperties, removeItemById, getItemById } from './utilities';

package/dist/SortableTree/types.d.ts

@@ -1,9 +1,5 @@
 import { MutableRefObject } from 'react';
 import { UniqueIdentifier } from '@dnd-kit/core';
-export interface OptimizedTreeStructure {
-    items: TreeItems;
-    itemMap: Map<UniqueIdentifier, TreeItem>;
-}
 /**
  * Represents an item in the tree structure.
  */
@@ -64,12 +60,12 @@ export interface SortableTreeProps {
     /**
      * The array of tree items to be rendered.
      */
-    treeStructure: OptimizedTreeStructure;
+    items: TreeItems;
     /**
      * Callback function called when the tree structure changes.
      * @param items - The updated array of tree items.
      */
-    setTreeStructure: React.Dispatch<React.SetStateAction<OptimizedTreeStructure>>;
+    setItems: React.Dispatch<React.SetStateAction<TreeItems>>;
     /**
      * Determines if tree items can be collapsed/expanded.
      * @default false
@@ -117,6 +113,13 @@ 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;
 }
 /**
  * Represents the result of a drag operation in the tree.

package/dist/SortableTree/utilities.d.ts

@@ -1,5 +1,5 @@
 import { UniqueIdentifier } from '@dnd-kit/core';
-import { FlattenedItem, OptimizedTreeStructure, TreeItem, TreeItems } from './types';
+import { FlattenedItem, TreeItem, TreeItems } from './types';
 export declare const iOS: boolean;
 export declare function getProjection(items: FlattenedItem[], activeId: UniqueIdentifier, overId: UniqueIdentifier, dragOffset: number, indentationWidth: number): {
     depth: number;
@@ -10,22 +10,15 @@ export declare function getProjection(items: FlattenedItem[], activeId: UniqueId
 export declare function flattenTree(items: TreeItems): FlattenedItem[];
 export declare function buildTree(flattenedItems: FlattenedItem[]): TreeItems;
 export declare function findItem(items: TreeItem[], itemId: UniqueIdentifier): TreeItem | undefined;
-export declare function findItemDeep(structure: OptimizedTreeStructure, itemId: UniqueIdentifier): TreeItem | undefined;
-export declare function removeItemById(structure: OptimizedTreeStructure, id: UniqueIdentifier): OptimizedTreeStructure;
-export declare function setTreeItemProperties(structure: OptimizedTreeStructure, id: UniqueIdentifier, setter: (value: TreeItem) => Partial<TreeItem>): OptimizedTreeStructure;
+export declare function findItemDeep(items: TreeItems, itemId: UniqueIdentifier): TreeItem | undefined;
+export declare function removeItemById(items: TreeItems, id: UniqueIdentifier): TreeItems;
+export declare function setTreeItemProperties(items: TreeItems, id: UniqueIdentifier, setter: (value: TreeItem) => Partial<TreeItem>): TreeItems;
 /**
  * Retrieves a tree item by its unique identifier.
- * @param structure The optimized tree structure containing items and their map.
+ * @param structure The current tree items array
  * @param id The unique identifier of the item to retrieve.
  * @returns The tree item if found, undefined otherwise.
  */
-export declare function getItemById(structure: OptimizedTreeStructure, id: UniqueIdentifier): TreeItem | undefined;
-/**
- * Creates an optimized tree structure from the given items.
- * This structure includes both the original items and a map for efficient item lookup.
- * @param items The original tree items to optimize.
- * @returns An OptimizedTreeStructure containing the items and their map.
- */
-export declare function createOptimizedTreeStructure(items: TreeItems): OptimizedTreeStructure;
-export declare function getChildCount(treeStructure: OptimizedTreeStructure, id: UniqueIdentifier): number;
+export declare function getItemById(items: TreeItems, id: UniqueIdentifier): TreeItem | undefined;
+export declare function getChildCount(treeStructure: TreeItems, id: UniqueIdentifier): number;
 export declare function removeChildrenOf(items: FlattenedItem[], ids: UniqueIdentifier[]): FlattenedItem[];