50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T2e76,import * as React from "react"; export interface DragReorderItemProps { draggable: true; onDragStart: (event: React.DragEvent) => void; onDragEnter: (event: React.DragEvent) => void; onDragOver: (event: React.DragEvent) => void; onDragLeave: (event: React.DragEvent) => void; onDrop: (event: React.DragEvent) => void; onDragEnd: (event: React.DragEvent) => void; } export interface DragReorderHandleProps { onPointerDown: (event: React.PointerEvent) => void; /** * `touchAction: 'none'` is the whole trick: a gesture that starts on the * handle is never claimed by the scroller, so the drag runs instead of the * container scrolling out from under it. */ style: React.CSSProperties; } export interface UseDragReorderOptions { /** How many items the list has. Required for the pointer path's hit-testing. */ count?: number; /** Resolves the row element at `index`, so a pointer drag can hit-test rows. */ getItemElement?: (index: number) => HTMLElement | null | undefined; /** * The scroller to auto-scroll when a pointer drag nears its edge. Usually the * list itself when height-capped, else its nearest scrollable ancestor. */ getScrollContainer?: () => HTMLElement | null | undefined; } export interface UseDragReorderResult { /** Index of the item currently being dragged, or null. */ draggingIndex: number | null; /** Index of the item currently being hovered as a drop target, or null. */ dragOverIndex: number | null; /** True while a touch/pen drag is in flight (the pointer path, not HTML5). */ pointerDragging: boolean; /** Returns drag handlers (and `draggable: true`) for the item at `index`. */ getItemProps: (index: number) => DragReorderItemProps; /** Returns pointer handlers for the drag handle of the item at `index`. */ getHandleProps: (index: number) => DragReorderHandleProps; } // How close to a scroller edge the pointer has to get before the list starts // auto-scrolling, and how fast it then moves (px per frame). const AUTOSCROLL_EDGE_PX = 48; const AUTOSCROLL_SPEED_PX = 12; /** * Drag-to-reorder for both input models. * * **Mouse** uses HTML5 drag-and-drop via `getItemProps` -- the whole row is * `draggable`, and the browser supplies the drag image and ancestor * auto-scroll for free. * * **Touch and pen** use Pointer Events via `getHandleProps`, because HTML5 * drag-and-drop does not exist on touch: mobile browsers never synthesize * `dragstart` from a finger, so before this path the handle did nothing at all * and the gesture just scrolled the container. The handle carries * `touch-action: none`, so a drag that starts there is the drag rather than a * scroll, and the pointer path does its own hit-testing and edge auto-scroll * (both of which the HTML5 path gets from the browser). * * The hook only tracks state -- the caller renders the items and decides what * visual feedback to show (e.g. opacity-down on the dragged item, ring on the * drop target). Drop semantics: `onReorder(from, to)` is called with indices * into the *original* array, and the splice-based caller pattern places the * moved item at `to` in the resulting array. * * The pointer path needs geometry the hook cannot see, so a caller that wants * it passes `count`, `getItemElement`, and `getScrollContainer`. Omit them and * the hook still works exactly as before, mouse-only -- which is why adding * this was additive for callers like FS Generator that only spread * `getItemProps`. * * Typical usage: * * ```tsx * const reorder = useDragReorder((from, to) => setItems(prev => { * const next = [...prev] * const [m] = next.splice(from, 1) * next.splice(to, 0, m) * return next * })) * * items.map((item, idx) => ( *

* :: * {item.content} *

* )) * ``` */ export function useDragReorder( onReorder: (from: number, to: number) => void, options: UseDragReorderOptions = {}, ): UseDragReorderResult { const [draggingIndex, setDraggingIndex] = React.useState(null); const [dragOverIndex, setDragOverIndex] = React.useState(null); const [pointerDragging, setPointerDragging] = React.useState(false); // Mirror draggingIndex into a ref so event handlers always read the latest // without having to be regenerated on every drag-state change. const draggingRef = React.useRef(null); React.useEffect(() => { draggingRef.current = draggingIndex; }, [draggingIndex]); // The pointer path reads the live drop target on pointerup, where a state // read would be a render behind. const overRef = React.useRef(null); const onReorderRef = React.useRef(onReorder); React.useEffect(() => { onReorderRef.current = onReorder; }, [onReorder]); const optionsRef = React.useRef(options); React.useEffect(() => { optionsRef.current = options; }); const getItemProps = React.useCallback((index: number): DragReorderItemProps => ({ draggable: true, onDragStart: (event) => { // setData is required for Firefox to actually start the drag. if (event.dataTransfer) { event.dataTransfer.effectAllowed = "move"; event.dataTransfer.setData("text/plain", String(index)); } setDraggingIndex(index); }, onDragEnter: (event) => { event.preventDefault(); setDragOverIndex(index); }, onDragOver: (event) => { // Both dragOver preventDefault and dropEffect are required for // the drop event to fire reliably across browsers. event.preventDefault(); if (event.dataTransfer) { event.dataTransfer.dropEffect = "move"; } }, onDragLeave: () => { // Intentionally a no-op. dragenter on a sibling races with dragleave // on the previous; clearing here causes flicker. State is cleared on // drop / dragend instead. }, onDrop: (event) => { event.preventDefault(); const from = draggingRef.current; const to = index; setDraggingIndex(null); setDragOverIndex(null); if (from === null || from === to) return; onReorderRef.current(from, to); }, onDragEnd: () => { setDraggingIndex(null); setDragOverIndex(null); }, }), []); // ---- Pointer (touch / pen) path ------------------------------------------ // Latest pointer Y, read by both the move handler and the auto-scroll frame // (which re-hit-tests after moving the scroller, since the rows have shifted // under a stationary finger). const pointerYRef = React.useRef(0); const rafRef = React.useRef(null); /** Which row `clientY` currently sits over, clamped to the list. */ const hitTest = React.useCallback((clientY: number): number | null => { const { count, getItemElement } = optionsRef.current; if (!count || !getItemElement) return null; let candidate: number | null = null; for (let i = 0; i < count; i += 1) { const el = getItemElement(i); if (!el) continue; const rect = el.getBoundingClientRect(); if (candidate === null) candidate = i; if (clientY >= rect.top && clientY <= rect.bottom) return i; // Past the row's bottom edge -- keep it as the running best so a pointer // dragged below the last row lands on the last row rather than nowhere. if (clientY > rect.bottom) candidate = i; } return candidate; }, []); const syncOver = React.useCallback(() => { const to = hitTest(pointerYRef.current); if (to === null) return; overRef.current = to; setDragOverIndex(to); }, [hitTest]); const stopAutoScroll = React.useCallback(() => { if (rafRef.current !== null) { cancelAnimationFrame(rafRef.current); rafRef.current = null; } }, []); const autoScrollFrame = React.useCallback(() => { const el = optionsRef.current.getScrollContainer?.(); if (el) { const rect = el.getBoundingClientRect(); const y = pointerYRef.current; if (y < rect.top + AUTOSCROLL_EDGE_PX) { el.scrollTop -= AUTOSCROLL_SPEED_PX; syncOver(); } else if (y > rect.bottom - AUTOSCROLL_EDGE_PX) { el.scrollTop += AUTOSCROLL_SPEED_PX; syncOver(); } } rafRef.current = requestAnimationFrame(autoScrollFrame); }, [syncOver]); // A drag interrupted by unmount must not leave a frame loop running. React.useEffect(() => stopAutoScroll, [stopAutoScroll]); const getHandleProps = React.useCallback((index: number): DragReorderHandleProps => ({ style: { touchAction: "none" }, onPointerDown: (event) => { // Mouse keeps the HTML5 path on the row, which already gives it a drag // image and native ancestor auto-scroll. if (event.pointerType === "mouse") return; const target = event.currentTarget; // Capture so the drag survives the finger leaving the handle -- without // it the very first move ends the gesture. target.setPointerCapture?.(event.pointerId); pointerYRef.current = event.clientY; draggingRef.current = index; overRef.current = index; setDraggingIndex(index); setDragOverIndex(index); setPointerDragging(true); stopAutoScroll(); rafRef.current = requestAnimationFrame(autoScrollFrame); const handleMove = (e: PointerEvent) => { if (e.pointerId !== event.pointerId) return; // The handle's touch-action already stops the scroller claiming this, // but a listener that reaches here should not also fire a click. e.preventDefault(); pointerYRef.current = e.clientY; syncOver(); }; const finish = (e: PointerEvent) => { if (e.pointerId !== event.pointerId) return; target.releasePointerCapture?.(event.pointerId); target.removeEventListener("pointermove", handleMove); target.removeEventListener("pointerup", finish); target.removeEventListener("pointercancel", cancel); stopAutoScroll(); const from = draggingRef.current; const to = overRef.current; draggingRef.current = null; overRef.current = null; setDraggingIndex(null); setDragOverIndex(null); setPointerDragging(false); if (from === null || to === null || from === to) return; onReorderRef.current(from, to); }; const cancel = (e: PointerEvent) => { if (e.pointerId !== event.pointerId) return; target.releasePointerCapture?.(event.pointerId); target.removeEventListener("pointermove", handleMove); target.removeEventListener("pointerup", finish); target.removeEventListener("pointercancel", cancel); stopAutoScroll(); draggingRef.current = null; overRef.current = null; setDraggingIndex(null); setDragOverIndex(null); setPointerDragging(false); }; // Bound to the capturing element rather than the document: pointer // capture routes every subsequent event for this pointer here anyway, // and it keeps the listeners scoped to the gesture. target.addEventListener("pointermove", handleMove); target.addEventListener("pointerup", finish); target.addEventListener("pointercancel", cancel); }, }), [autoScrollFrame, stopAutoScroll, syncOver]); return { draggingIndex, dragOverIndex, pointerDragging, getItemProps, getHandleProps, }; } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L50",null,{"files":[{"path":"hooks/use-drag-reorder.ts","content":"$51","type":"registry:hook","target":"hooks/use-drag-reorder.ts"}],"className":"h-[70svh] min-h-80"}]]}]