@clevertask/react-sortable-tree 0.0.1 → 0.0.3

package/README.md

@@ -32,17 +32,17 @@ import '@clevertask/react-sortable-tree/dist/style.css';
 import { SortableTree, createOptimizedTreeStructure } 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 [treeStructure, setTreeStructure] = useState(
+    createOptimizedTreeStructure([
+      { id: '1', label: 'Item 1', children: [] },
+      { id: '2', label: 'Item 2', children: [{ id: '3', label: 'Item 2.1', children: [] }] },
+    ]),
+  );
 
   return (
     <SortableTree
-      items={treeStructure.items}
-      onItemsChange={setTreeStructure}
+      treeStructure={treeStructure}
+      setTreeStructure={setTreeStructure}
       isCollapsible
       isRemovable
       allowNestedItemAddition
@@ -54,20 +54,20 @@ function App() {
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `items` | `TreeItems` | Required | The array of tree items to be rendered. |
-| `onItemsChange` | `React.Dispatch<React.SetStateAction<OptimizedTreeStructure>>` | Required | Callback function called when the tree structure 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 |
-| `showDropIndicator` | `boolean` | `false` | Determines if a drop indicator should be shown when dragging items. |
-| `isRemovable` | `boolean` | `false` | Determines if items can be removed from the tree. |
-| `onRemoveItem` | `(id: UniqueIdentifier) => void` | `undefined` | Callback function called when an item is removed from the tree. |
-| `allowNestedItemAddition` | `boolean` | `false` | Determines if new items can be added as children to existing items. |
-| `onAddItem` | `(parentId: UniqueIdentifier \| null) => void` | `undefined` | Callback function called when a new item is added to the tree. |
-| `onDragEnd` | `(result: DropResult) => void` | `undefined` | Callback function called when a drag operation ends. |
-| `onItemClick` | `(id: UniqueIdentifier) => void` | `undefined` | Callback function called when an item in the tree is clicked. |
+| 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.                                                            |
+| `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 |
+| `showDropIndicator`       | `boolean`                                                       | `false`     | Determines if a drop indicator should be shown when dragging items.                                                  |
+| `isRemovable`             | `boolean`                                                       | `false`     | Determines if items can be removed from the tree.                                                                    |
+| `onRemoveItem`            | `(id: UniqueIdentifier) => void`                                | `undefined` | Callback function called when an item is removed from the tree.                                                      |
+| `allowNestedItemAddition` | `boolean`                                                       | `false`     | Determines if new items can be added as children to existing items.                                                  |
+| `onAddItem`               | `(parentId: UniqueIdentifier \| null) => void`                  | `undefined` | Callback function called when a new item is added to the tree.                                                       |
+| `onDragEnd`               | `(result: DropResult) => void`                                  | `undefined` | Callback function called when a drag operation ends.                                                                 |
+| `onItemClick`             | `(id: UniqueIdentifier) => void`                                | `undefined` | Callback function called when an item in the tree is clicked.                                                        |
 
 ## Types
 
@@ -107,13 +107,25 @@ The `OptimizedTreeStructure` is used internally to improve performance for large
 ### createOptimizedTreeStructure
 
 ```typescript
-function createOptimizedTreeStructure(items: TreeItems): OptimizedTreeStructure
+function createOptimizedTreeStructure(items: TreeItems): OptimizedTreeStructure;
+```
+
+### getItemById
+Retrieves a tree item by its unique identifier.
+```typescript
+function getItemById(
+  structure: OptimizedTreeStructure,
+  id: UniqueIdentifier,
+): TreeItem | undefined;
 ```
 
 ### removeItemById
 
 ```typescript
-function removeItemById(structure: OptimizedTreeStructure, id: UniqueIdentifier): OptimizedTreeStructure
+function removeItemById(
+  structure: OptimizedTreeStructure,
+  id: UniqueIdentifier,
+): OptimizedTreeStructure;
 ```
 
 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.
@@ -131,8 +143,8 @@ setTreeStructure(updatedStructure);
 function setTreeItemProperties(
   structure: OptimizedTreeStructure,
   id: UniqueIdentifier,
-  setter: (value: TreeItem) => Partial<TreeItem>
-): OptimizedTreeStructure
+  setter: (value: TreeItem) => Partial<TreeItem>,
+): OptimizedTreeStructure;
 ```
 
 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`.
@@ -141,11 +153,10 @@ Usage example:
 
 ```typescript
 setTreeStructure((treeStructure) => {
-  return setTreeItemProperties(
-    treeStructure,
-    '123',
-    (item) => ({ label: 'New Label', collapsed: !item.collapsed })
-  );
+  return setTreeItemProperties(treeStructure, '123', (item) => ({
+    label: 'New Label',
+    collapsed: !item.collapsed,
+  }));
 });
 ```
 

package/dist/SortableTree/SortableTree.d.ts

@@ -1,4 +1,4 @@
 import { SortableTreeProps } from './types';
-declare function PrivateSortableTree({ items, onItemsChange: setItems, isCollapsible, onLazyLoadChildren, showDropIndicator, indentationWidth, isRemovable, onRemoveItem, allowNestedItemAddition, onAddItem, onDragEnd, onItemClick, }: SortableTreeProps): import("react/jsx-runtime").JSX.Element;
+declare function PrivateSortableTree({ treeStructure, setTreeStructure, isCollapsible, onLazyLoadChildren, showDropIndicator, indentationWidth, isRemovable, onRemoveItem, allowNestedItemAddition, onAddItem, onDragEnd, onItemClick, }: 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

@@ -1,5 +1,5 @@
 import { default as React, HTMLAttributes } from 'react';
-export interface Props extends Omit<HTMLAttributes<HTMLLIElement>, "id"> {
+export interface Props extends Omit<HTMLAttributes<HTMLLIElement>, 'id'> {
     childCount?: number;
     clone?: boolean;
     collapsed?: boolean;

package/dist/SortableTree/types.d.ts

@@ -64,12 +64,12 @@ export interface SortableTreeProps {
     /**
      * The array of tree items to be rendered.
      */
-    items: TreeItems;
+    treeStructure: OptimizedTreeStructure;
     /**
      * Callback function called when the tree structure changes.
      * @param items - The updated array of tree items.
      */
-    onItemsChange: React.Dispatch<React.SetStateAction<OptimizedTreeStructure>>;
+    setTreeStructure: React.Dispatch<React.SetStateAction<OptimizedTreeStructure>>;
     /**
      * Determines if tree items can be collapsed/expanded.
      * @default false
@@ -81,7 +81,7 @@ export interface SortableTreeProps {
      * @param id - The id of the parent item being expanded.
      * @param isExpanding - True if the item is being expanded, false if collapsing.
      */
-    onLazyLoadChildren?: (id: UniqueIdentifier, isExpanding: boolean) => Promise<void>;
+    onLazyLoadChildren?: (id: UniqueIdentifier, isExpanding: boolean) => void;
     /**
      * Determines if a drop indicator should be shown when dragging items.
      * @default false

package/dist/SortableTree/utilities.d.ts

@@ -10,9 +10,22 @@ 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(items: TreeItems, 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;
+/**
+ * Retrieves a tree item by its unique identifier.
+ * @param structure The optimized tree structure containing items and their map.
+ * @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(items: TreeItems, id: UniqueIdentifier): number;
+export declare function getChildCount(treeStructure: OptimizedTreeStructure, id: UniqueIdentifier): number;
 export declare function removeChildrenOf(items: FlattenedItem[], ids: UniqueIdentifier[]): FlattenedItem[];