fix(web): draggable-list-update-issue

tractorss · tractorss · commit 55363959efa0 · 2025-06-04T23:29:23.000+05:30
diff --git a/package.json b/package.json
@@ -52,6 +52,7 @@
     "@storybook/test": "^8.6.4",
     "@tailwindcss/postcss": "^4.0.11",
     "@tailwindcss/vite": "^4.1.4",
+    "@types/lodash": "^4",
     "@types/node": "^22.13.10",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.3",
@@ -93,6 +94,7 @@
     "@internationalized/date": "^3.7.0",
     "bignumber.js": "^9.1.2",
     "clsx": "^2.1.1",
+    "lodash": "^4.17.21",
     "react": "^18.0.0",
     "react-aria-components": "^1.7.1",
     "react-dom": "^18.0.0",
diff --git a/src/lib/draggable-list/index.tsx b/src/lib/draggable-list/index.tsx
@@ -1,5 +1,4 @@
-import React, { useEffect } from "react";
-import { useListData } from "react-stately";
+import React from "react";
 import {
   Button,
   ListBox,
@@ -13,6 +12,7 @@ import { cn } from "../../utils";
 import DragAndDropIcon from "../../assets/svgs/drag-and-drop.svg";
 import Trash from "../../assets/svgs/trash.svg";
 import clsx from "clsx";
+import { useList } from "./useList";
 
 type ListItem = {
   id: string | number;
@@ -53,24 +53,26 @@ function DraggableList({
   deletionDisabled = false,
   ...props
 }: Readonly<IDraggableList>) {
-  const list = useListData({
+  const {
+    items: list,
+    moveAfter,
+    moveBefore,
+    remove,
+    getItem,
+  } = useList({
     initialItems: items,
+    onChange: updateCallback,
   });
 
-  useEffect(() => {
-    if (!updateCallback) return;
-    updateCallback(list.items);
-  }, [list, updateCallback, items]);
-
   const { dragAndDropHooks } = useDragAndDrop({
     getItems: (keys) =>
-      [...keys].map((key) => ({ "text/plain": list.getItem(key)!.name })),
+      [...keys].map((key) => ({ "text/plain": getItem(key)!.name })),
     getAllowedDropOperations: () => ["move"],
     onReorder(e) {
       if (e.target.dropPosition === "before") {
-        list.moveBefore(e.target.key, e.keys);
+        moveBefore(e.target.key, e.keys);
       } else if (e.target.dropPosition === "after") {
-        list.moveAfter(e.target.key, e.keys);
+        moveAfter(e.target.key, e.keys);
       }
     },
     renderDragPreview,
@@ -81,11 +83,11 @@ function DraggableList({
       {...props}
       aria-label={props["aria-label"] ?? "Reorderable list"}
       selectionMode="single"
-      items={list.items}
+      items={list}
       dragAndDropHooks={dragDisabled ? undefined : dragAndDropHooks}
       onSelectionChange={(keys) => {
         const keyArr = Array.from(keys);
-        const selectedItem = list.getItem(keyArr[0]);
+        const selectedItem = getItem(keyArr[0]);
 
         if (selectionCallback && selectedItem) selectionCallback(selectedItem);
       }}
@@ -96,50 +98,53 @@ function DraggableList({
         className,
       )}
     >
-      {(item) => (
-        <ListBoxItem
-          textValue={item.name}
-          className={({ isHovered, isDragging, isSelected }) =>
-            cn(
-              "h-11.25 w-full cursor-pointer border-l-3 border-l-transparent",
-              "flex items-center gap-4 px-4",
-              "focus-visible:outline-klerosUIComponentsPrimaryBlue focus-visible:outline",
-              (isHovered || isSelected) && "bg-klerosUIComponentsMediumBlue",
-              isSelected && "border-l-klerosUIComponentsPrimaryBlue",
-              isDragging && "cursor-grabbing opacity-60",
-            )
-          }
-        >
-          {({ isHovered }) => (
-            <>
-              {dragDisabled ? null : (
-                <DragAndDropIcon className="size-4 cursor-grab" />
-              )}
-              <span className="text-klerosUIComponentsPrimaryText flex-1 text-base">
-                {item.name}
-              </span>
-              {isHovered && !deletionDisabled ? (
-                <Button
-                  className={"cursor-pointer hover:scale-105"}
-                  onPress={() => {
-                    list.remove(item.id);
-                  }}
-                >
-                  {({ isHovered: isButtonHovered }) => (
-                    <Trash
-                      className={clsx(
-                        "ease-ease size-4 transition",
-                        isButtonHovered &&
-                          "[&_path]:fill-klerosUIComponentsPrimaryBlue",
-                      )}
-                    />
-                  )}
-                </Button>
-              ) : null}
-            </>
-          )}
-        </ListBoxItem>
-      )}
+      {items.map((item) => {
+        return (
+          <ListBoxItem
+            key={item.id}
+            textValue={item.name}
+            className={({ isHovered, isDragging, isSelected }) =>
+              cn(
+                "h-11.25 w-full cursor-pointer border-l-3 border-l-transparent",
+                "flex items-center gap-4 px-4",
+                "focus-visible:outline-klerosUIComponentsPrimaryBlue focus-visible:outline",
+                (isHovered || isSelected) && "bg-klerosUIComponentsMediumBlue",
+                isSelected && "border-l-klerosUIComponentsPrimaryBlue",
+                isDragging && "cursor-grabbing opacity-60",
+              )
+            }
+          >
+            {({ isHovered, isSelected }) => (
+              <>
+                {dragDisabled ? null : (
+                  <DragAndDropIcon className="size-4 cursor-grab" />
+                )}
+                <span className="text-klerosUIComponentsPrimaryText flex-1 text-base">
+                  {item.name}
+                </span>
+                {isHovered && !deletionDisabled ? (
+                  <Button
+                    className={"cursor-pointer hover:scale-105"}
+                    onPress={() => {
+                      remove(item.id);
+                    }}
+                  >
+                    {({ isHovered: isButtonHovered }) => (
+                      <Trash
+                        className={clsx(
+                          "ease-ease size-4 transition",
+                          (isButtonHovered || isSelected) &&
+                            "[&_path]:fill-klerosUIComponentsPrimaryBlue",
+                        )}
+                      />
+                    )}
+                  </Button>
+                ) : null}
+              </>
+            )}
+          </ListBoxItem>
+        );
+      })}
     </ListBox>
   );
 }
diff --git a/src/lib/draggable-list/useList.ts b/src/lib/draggable-list/useList.ts
@@ -0,0 +1,97 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import _ from "lodash";
+
+type Key = string | number;
+
+export interface ListItem {
+  id: Key;
+  name: string;
+  value: any;
+}
+
+interface UseListOptions {
+  initialItems: ListItem[];
+  onChange?: (updatedItems: ListItem[]) => void;
+}
+
+export function useList({ initialItems, onChange }: UseListOptions) {
+  const [items, setItems] = useState<ListItem[]>(initialItems);
+
+  useEffect(() => {
+    // preventing callback loop, we cannot rely on useEffect dependency since that does not utilize deep comparison
+    if (_.isEqual(initialItems, items)) return;
+
+    setItems(initialItems);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialItems]);
+
+  const updateItems = useCallback(
+    (newItems: ListItem[]) => {
+      setItems(newItems);
+      onChange?.(newItems);
+    },
+    [onChange],
+  );
+
+  const itemsMap = useMemo(() => {
+    const map = new Map<Key, ListItem>();
+    for (const item of items) {
+      map.set(item.id, item);
+    }
+    return map;
+  }, [items]);
+
+  const getItem = useCallback((key: Key) => itemsMap.get(key), [itemsMap]);
+
+  const remove = useCallback(
+    (key: Key) => {
+      updateItems(items.filter((item) => key !== item.id));
+    },
+    [items, updateItems],
+  );
+
+  const moveBefore = useCallback(
+    (targetKey: Key, keys: Iterable<Key>) => {
+      const key = Array.from(keys)[0];
+      if (key === targetKey) return;
+
+      const indexFrom = items.findIndex((item) => item.id === key);
+      const indexTo = items.findIndex((item) => item.id === targetKey);
+      if (indexFrom === -1 || indexTo === -1) return;
+
+      const reordered = [...items];
+      const [movedItem] = reordered.splice(indexFrom, 1);
+      reordered.splice(indexTo, 0, movedItem);
+      updateItems(reordered);
+    },
+    [items, updateItems],
+  );
+
+  const moveAfter = useCallback(
+    (targetKey: Key, keys: Iterable<Key>) => {
+      const key = Array.from(keys)[0];
+      if (key === targetKey) return;
+
+      const indexFrom = items.findIndex((item) => item.id === key);
+      const indexTo = items.findIndex((item) => item.id === targetKey);
+      if (indexFrom === -1 || indexTo === -1) return;
+
+      const reordered = [...items];
+      const [movedItem] = reordered.splice(indexFrom, 1);
+
+      // Adjust if removing item before target index
+      const insertIndex = indexFrom < indexTo ? indexTo : indexTo + 1;
+      reordered.splice(insertIndex, 0, movedItem);
+      updateItems(reordered);
+    },
+    [items, updateItems],
+  );
+
+  return {
+    items,
+    getItem,
+    remove,
+    moveBefore,
+    moveAfter,
+  };
+}
diff --git a/src/stories/draggable-list.stories.tsx b/src/stories/draggable-list.stories.tsx
@@ -1,9 +1,10 @@
-import React from "react";
+import React, { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { IPreviewArgs } from "./utils";
 
 import DraggableList from "../lib/draggable-list";
+import { Button } from "../lib";
 
 const meta = {
   component: DraggableList,
@@ -33,8 +34,25 @@ export const Default: Story = {
       { id: 3, name: "Acrobat", value: "" },
     ],
   },
-  render: (args) => {
-    return <DraggableList {...args} />;
+  render: function Render(args) {
+    const [items, setItems] = useState([
+      { id: 1, name: "Illustrator", value: "" },
+      { id: 2, name: "Premiere", value: "" },
+      { id: 3, name: "Acrobat", value: "" },
+    ]);
+
+    const addItem = () => {
+      setItems([
+        ...items,
+        { id: items.length + 1, name: "New Item", value: "" },
+      ]);
+    };
+    return (
+      <div>
+        <DraggableList {...args} items={items} />
+        <Button onPress={addItem} text="Add Item" className="mt-4" />
+      </div>
+    );
   },
 };
 
diff --git a/yarn.lock b/yarn.lock
@@ -1132,6 +1132,7 @@ __metadata:
     "@storybook/test": "npm:^8.6.4"
     "@tailwindcss/postcss": "npm:^4.0.11"
     "@tailwindcss/vite": "npm:^4.1.4"
+    "@types/lodash": "npm:^4"
     "@types/node": "npm:^22.13.10"
     "@types/react": "npm:^18.0.9"
     "@types/react-dom": "npm:^18.0.3"
@@ -1153,6 +1154,7 @@ __metadata:
     globals: "npm:^16.0.0"
     husky: "npm:^7.0.0"
     lint-staged: "npm:^12.1.2"
+    lodash: "npm:^4.17.21"
     prettier: "npm:^3.5.3"
     prettier-plugin-tailwindcss: "npm:^0.6.11"
     process: "npm:^0.11.10"
@@ -4172,6 +4174,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash@npm:^4":
+  version: 4.17.17
+  resolution: "@types/lodash@npm:4.17.17"
+  checksum: 10c0/8e75df02a15f04d4322c5a503e4efd0e7a92470570ce80f17e9f11ce2b1f1a7c994009c9bcff39f07e0f9ffd8ccaff09b3598997c404b801abd5a7eee5a639dc
+  languageName: node
+  linkType: hard
+
 "@types/mdx@npm:^2.0.0":
   version: 2.0.13
   resolution: "@types/mdx@npm:2.0.13"
