import { createSignal, Accessor } from "solid-js"; export function useDragReorder( pinnedPaths: Accessor, persistPins: (paths: string[]) => void, isSearchActive: Accessor ) { const [dragIndex, setDragIndex] = createSignal(null); const [dragOverIndex, setDragOverIndex] = createSignal(null); const canDrag = () => !isSearchActive(); const handleDragStart = (e: DragEvent, index: number) => { if (!canDrag()) return; setDragIndex(index); if (e.dataTransfer) { e.dataTransfer.effectAllowed = "move"; e.dataTransfer.setData("text/plain", String(index)); } }; const handleDragOver = (e: DragEvent, index: number) => { if (!canDrag()) return; e.preventDefault(); if (e.dataTransfer) { e.dataTransfer.dropEffect = "move"; } setDragOverIndex(index); }; const handleDrop = (e: DragEvent, dropIndex: number) => { if (!canDrag()) return; e.preventDefault(); let from = dragIndex(); if (from === null && e.dataTransfer) { const data = e.dataTransfer.getData("text/plain"); if (data !== "") { const parsed = Number(data); if (!Number.isNaN(parsed)) from = parsed; } } setDragIndex(null); setDragOverIndex(null); if (from === null || from === dropIndex) return; const list = [...pinnedPaths()]; if ( from < 0 || from >= list.length || dropIndex < 0 || dropIndex >= list.length ) { return; } const [moved] = list.splice(from, 1); list.splice(dropIndex, 0, moved); persistPins(list); }; const handleDragEnd = () => { setDragIndex(null); setDragOverIndex(null); }; return { dragIndex, dragOverIndex, canDrag, handleDragStart, handleDragOver, handleDrop, handleDragEnd, }; }