@farmzone/fz-react-ui 1.0.10 → 1.0.11

package/dist/index.js

@@ -7926,6 +7926,15 @@ function MultiTabBar(props) {
   const [draggingId, setDraggingId] = useState(null);
   const [dropTargetId, setDropTargetId] = useState(null);
   const [dropSide, setDropSide] = useState("before");
+  const draggingIdRef = useRef(null);
+  const dropTargetIdRef = useRef(null);
+  const dropSideRef = useRef("before");
+  const tabsRef = useRef(tabs);
+  const dropHandledRef = useRef(false);
+  draggingIdRef.current = draggingId;
+  dropTargetIdRef.current = dropTargetId;
+  dropSideRef.current = dropSide;
+  tabsRef.current = tabs;
   useEffect(() => {
     if (!activeTabId || !scrollRef.current) return;
     const el = tabRefs.current.get(activeTabId);
@@ -7963,60 +7972,100 @@ function MultiTabBar(props) {
     el.addEventListener("wheel", onWheel, { passive: false });
     return () => el.removeEventListener("wheel", onWheel);
   }, []);
+  const resolveDropPosition = (clientX) => {
+    for (const [tabId, el] of tabRefs.current) {
+      if (tabId === draggingIdRef.current) continue;
+      const rect = el.getBoundingClientRect();
+      if (clientX >= rect.left && clientX < rect.right) {
+        setDropSide(clientX < rect.left + rect.width / 2 ? "before" : "after");
+        setDropTargetId(tabId);
+        return;
+      }
+    }
+    let rightmostTabId = null;
+    let maxRight = -Infinity;
+    for (const [tabId, el] of tabRefs.current) {
+      if (tabId === draggingIdRef.current) continue;
+      const rect = el.getBoundingClientRect();
+      if (rect.right > maxRight) {
+        maxRight = rect.right;
+        rightmostTabId = tabId;
+      }
+    }
+    if (rightmostTabId && clientX >= maxRight) {
+      setDropSide("after");
+      setDropTargetId(rightmostTabId);
+    }
+  };
+  const reorderTabs = (targetTabId, side, sourceTabs, sourceId) => {
+    if (!onTabsReorder || sourceId === targetTabId) return;
+    const fromIdx = sourceTabs.findIndex((t) => t.id === sourceId);
+    if (fromIdx === -1) return;
+    const newTabs = [...sourceTabs];
+    const moved = newTabs.splice(fromIdx, 1)[0];
+    let insertIdx = newTabs.findIndex((t) => t.id === targetTabId);
+    if (insertIdx === -1) return;
+    if (side === "after") insertIdx += 1;
+    newTabs.splice(insertIdx, 0, moved);
+    onTabsReorder(newTabs);
+  };
+  useEffect(() => {
+    if (!onTabsReorder) return;
+    const onDocDragOver = (e) => {
+      if (!draggingIdRef.current) return;
+      e.preventDefault();
+      resolveDropPosition(e.clientX);
+    };
+    const onDocDrop = (e) => {
+      if (dropHandledRef.current) {
+        dropHandledRef.current = false;
+        return;
+      }
+      e.preventDefault();
+      const id = draggingIdRef.current;
+      const target = dropTargetIdRef.current;
+      if (id && target) reorderTabs(target, dropSideRef.current, tabsRef.current, id);
+      setDraggingId(null);
+      setDropTargetId(null);
+    };
+    document.addEventListener("dragover", onDocDragOver);
+    document.addEventListener("drop", onDocDrop);
+    return () => {
+      document.removeEventListener("dragover", onDocDragOver);
+      document.removeEventListener("drop", onDocDrop);
+    };
+  }, [onTabsReorder]);
   const handleDragStart = (e, tabId) => {
     setDraggingId(tabId);
     e.dataTransfer.effectAllowed = "move";
   };
-  const handleDragOver = (e, tabId) => {
-    e.preventDefault();
-    if (tabId === draggingId) return;
-    e.dataTransfer.dropEffect = "move";
-    const rect = e.currentTarget.getBoundingClientRect();
-    setDropSide(e.clientX < rect.left + rect.width / 2 ? "before" : "after");
-    setDropTargetId(tabId);
-  };
   const handleDrop = (e, targetTabId) => {
     e.preventDefault();
     e.stopPropagation();
-    if (!draggingId || draggingId === targetTabId) {
-      setDraggingId(null);
-      setDropTargetId(null);
-      return;
-    }
-    if (onTabsReorder) {
-      const fromIdx = tabs.findIndex((t) => t.id === draggingId);
-      if (fromIdx !== -1) {
-        const newTabs = [...tabs];
-        const moved = newTabs.splice(fromIdx, 1)[0];
-        let insertIdx = newTabs.findIndex((t) => t.id === targetTabId);
-        if (insertIdx !== -1) {
-          if (dropSide === "after") insertIdx += 1;
-          newTabs.splice(insertIdx, 0, moved);
-          onTabsReorder(newTabs);
-        }
-      }
-    }
+    dropHandledRef.current = true;
+    const id = draggingIdRef.current;
+    if (id && id !== targetTabId) reorderTabs(targetTabId, dropSideRef.current, tabsRef.current, id);
     setDraggingId(null);
     setDropTargetId(null);
   };
   const handleContainerDrop = (e) => {
     e.preventDefault();
-    if (!draggingId || !onTabsReorder) {
-      setDraggingId(null);
-      setDropTargetId(null);
-      return;
-    }
-    const fromIdx = tabs.findIndex((t) => t.id === draggingId);
-    if (fromIdx !== -1 && fromIdx < tabs.length - 1) {
-      const newTabs = [...tabs];
-      const moved = newTabs.splice(fromIdx, 1)[0];
-      newTabs.push(moved);
-      onTabsReorder(newTabs);
+    dropHandledRef.current = true;
+    const id = draggingIdRef.current;
+    if (id && onTabsReorder) {
+      const fromIdx = tabsRef.current.findIndex((t) => t.id === id);
+      if (fromIdx !== -1 && fromIdx < tabsRef.current.length - 1) {
+        const newTabs = [...tabsRef.current];
+        const moved = newTabs.splice(fromIdx, 1)[0];
+        newTabs.push(moved);
+        onTabsReorder(newTabs);
+      }
     }
     setDraggingId(null);
     setDropTargetId(null);
   };
   const handleDragEnd = () => {
+    dropHandledRef.current = false;
     setDraggingId(null);
     setDropTargetId(null);
   };
@@ -8067,7 +8116,6 @@ function MultiTabBar(props) {
                 if (!isActive) onTabClick(tab.id);
               },
               onDragStart: (e) => handleDragStart(e, tab.id),
-              onDragOver: (e) => handleDragOver(e, tab.id),
               onDrop: (e) => handleDrop(e, tab.id),
               onDragEnd: handleDragEnd,
               className: `