pixel-react 1.10.6 → 1.10.8

package/src/utils/getTreeDetails/getTreeDetails.stories.tsx

@@ -1,13 +1,14 @@
 import { useState } from 'react';
-import { getTreeDetails, TreeNode, TreeDetailsResult } from './getTreeDetails';
+import { getTreeDetails, TreeDetailsResult } from './getTreeDetails';
 import React from 'react';
+import { TreeNodeProps } from '../../ComponentProps/TreeNodeProps';
 
 export default {
   title: 'Utils/getTreeDetails',
   component: getTreeDetails,
 };
 
-const initialData: TreeNode[] = [
+const initialData: TreeNodeProps[] = [
   {
     createdBy: 'USR4705',
     modifiedBy: '--',
@@ -65,15 +66,31 @@ const initialData: TreeNode[] = [
 ];
 
 export const InteractivePlayground = () => {
-  const [data, setData] = useState<TreeNode[]>(initialData);
-  const [newData, setNewData] = useState<TreeNode[]>([]);
-  const [action, setAction] = useState<'above' | 'below' | 'expand' | 'collapse' | 'start'>('below');
+  const [data, setData] = useState<TreeNodeProps[]>(initialData);
+  const [newData, setNewData] = useState<TreeNodeProps[]>([]);
+  const [action, setAction] = useState<
+    | 'above'
+    | 'below'
+    | 'expand'
+    | 'collapse'
+    | 'start'
+    | 'addAbove'
+    | 'addBelow'
+  >('below');
   const [index, setIndex] = useState<number | undefined>(undefined);
+  const [sourceId, setSourceId] = useState<string | undefined>(undefined); // State for sourceId
   const [result, setResult] = useState<TreeDetailsResult | null>(null);
 
   const handleGetTreeDetails = () => {
     try {
-      const treeDetails = getTreeDetails(action, data, newData, index);
+      // If sourceId exists, we pass it, otherwise we pass the index
+      const treeDetails = getTreeDetails(
+        action,
+        data,
+        newData,
+        index,
+        sourceId
+      );
       setData(treeDetails.treeDataList);
       setResult(treeDetails);
     } catch (error) {
@@ -91,7 +108,16 @@ export const InteractivePlayground = () => {
           id="action"
           value={action}
           onChange={(e) =>
-            setAction(e.target.value as 'above' | 'below' | 'expand' | 'collapse' | 'start')
+            setAction(
+              e.target.value as
+                | 'above'
+                | 'below'
+                | 'expand'
+                | 'collapse'
+                | 'start'
+                | 'addAbove'
+                | 'addBelow'
+            )
           }
         >
           <option value="above">Above</option>
@@ -99,10 +125,32 @@ export const InteractivePlayground = () => {
           <option value="expand">Expand</option>
           <option value="collapse">Collapse</option>
           <option value="start">Start</option>
+          <option value="addAbove">Add Above</option>
+          <option value="addBelow">Add Below</option>
         </select>
       </div>
 
-      {(action === 'expand' || action === 'collapse') && (
+      {/* Input for sourceId, if action requires it */}
+      {(action === 'expand' ||
+        action === 'collapse' ||
+        action === 'addAbove' ||
+        action === 'addBelow') && (
+        <div>
+          <label htmlFor="sourceId">
+            Source ID (for expand/collapse/addAbove/addBelow):
+          </label>
+          <input
+            type="text"
+            id="sourceId"
+            value={sourceId || ''}
+            onChange={(e) => setSourceId(e.target.value)}
+            placeholder="Enter Source ID"
+          />
+        </div>
+      )}
+
+      {/* Input for index, for actions requiring index */}
+      {(action === 'expand' || action === 'collapse') && !sourceId && (
         <div>
           <label htmlFor="index">Index (for expand/collapse):</label>
           <input
@@ -110,7 +158,9 @@ export const InteractivePlayground = () => {
             id="index"
             value={index !== undefined ? index : ''}
             onChange={(e) =>
-              setIndex(e.target.value ? parseInt(e.target.value, 10) : undefined)
+              setIndex(
+                e.target.value ? parseInt(e.target.value, 10) : undefined
+              )
             }
             disabled={action !== 'expand' && action !== 'collapse'}
           />

package/src/utils/getTreeDetails/getTreeDetails.ts

@@ -11,14 +11,37 @@ export interface TreeDetailsResult {
 }
 
 export const getTreeDetails = (
-  action: 'above' | 'below' | 'expand' | 'collapse' | 'start',
+  action:
+    | 'above'
+    | 'below'
+    | 'expand'
+    | 'collapse'
+    | 'start'
+    | 'addAbove'
+    | 'addBelow',
   oldData: TreeNode[],
   newData: TreeNode[],
-  index?: number
+  index?: number,
+  sourceId?: string
 ): TreeDetailsResult => {
   let treeDataList: TreeNode[];
   let root: TreeNode | undefined = undefined;
 
+  const findIndexByKey = (data: TreeNode[], key: string): number => {
+    return data.findIndex((node) => node.key === key);
+  };
+
+  const getIndex = (): number | undefined => {
+    if (sourceId) {
+      const indexByKey = findIndexByKey(oldData, sourceId);
+      if (indexByKey === -1) {
+        throw new Error(`Key "${sourceId}" not found in oldData.`);
+      }
+      return indexByKey;
+    }
+    return index; // Use index if sourceId is not provided
+  };
+
   switch (action) {
     case 'above':
       treeDataList = [...newData, ...oldData].slice(0, 40);
@@ -28,13 +51,39 @@ export const getTreeDetails = (
       break;
     case 'expand':
     case 'collapse':
-      if (typeof index === 'number') {
-        treeDataList = [...oldData.slice(0, index), ...newData];
-      } else {
+      const actionIndex = getIndex();
+      if (actionIndex === undefined) {
         throw new Error(
-          "Index is required for 'expand' or 'collapse' actions."
+          "Both sourceId and index are required for 'expand' or 'collapse' actions."
         );
       }
+      treeDataList = [...oldData.slice(0, actionIndex), ...newData];
+      break;
+    case 'addAbove':
+      const addAboveIndex = getIndex();
+      if (addAboveIndex === undefined) {
+        throw new Error(
+          "Both sourceId and index are required for 'addAbove' action."
+        );
+      }
+      treeDataList = [
+        ...oldData.slice(0, addAboveIndex),
+        ...newData,
+        ...oldData.slice(addAboveIndex),
+      ];
+      break;
+    case 'addBelow':
+      const addBelowIndex = getIndex();
+      if (addBelowIndex === undefined) {
+        throw new Error(
+          "Both sourceId and index are required for 'addBelow' action."
+        );
+      }
+      treeDataList = [
+        ...oldData.slice(0, addBelowIndex + 1),
+        ...newData,
+        ...oldData.slice(addBelowIndex + 1),
+      ];
       break;
     case 'start':
       if (!checkEmpty(newData)) {
@@ -53,7 +102,10 @@ export const getTreeDetails = (
   }
 
   const firstNode = treeDataList[0] || root!;
-  const lastNode = treeDataList[treeDataList.length - 1]!;
+  const lastNode = treeDataList[treeDataList.length - 1] || {
+    lastResource: true,
+    key: '',
+  };
 
   return {
     treeDataList,