@weasel-js/ui 1.4.1 → 1.4.3

package/dist/chunks/useReorderDragList-UvHJFjTZ.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useReorderDragList-UvHJFjTZ.js","names":[],"sources":["../../src/useReorderDragList.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport type { ReactNode, PointerEvent as ReactPointerEvent, RefCallback } from 'react';\nimport { openPointerSession, type PointerSession } from '@weasel-js/core';\n\n/** One row in a reorderable list. */\nexport interface LayerListItem {\n  id: string;\n  label: ReactNode;\n  /** Locked rows cannot be dragged, cannot be crossed by drops, and\n   *  never combine with other rows in a multi-selection. */\n  locked?: boolean;\n  /** Optional color swatch rendered before the label. Any CSS color string. */\n  swatch?: string;\n}\n\n/**\n * Options for {@link useReorderDragList}. `onReorder` receives the dragged ids\n * and the index they were dropped at, measured against the pre-drag `items`.\n */\nexport interface UseReorderDragListOptions {\n  items: LayerListItem[];\n  selectedIds: string[];\n  onReorder(ids: string[], targetIndex: number): void;\n  /** A press that was released without ever engaging a drag — the click a\n   *  list row means by it. Fires for locked rows too, which can be selected\n   *  but not dragged. Modifiers are read at press, not at release. */\n  onPress?(id: string, mods: PressModifiers): void;\n  /** Pointer-move distance (px) before pending drag engages. Default 4. */\n  threshold?: number;\n}\n\n/** Modifier keys held when a press began. */\nexport interface PressModifiers {\n  shiftKey: boolean;\n  ctrlKey: boolean;\n  metaKey: boolean;\n  altKey: boolean;\n}\n\n/**\n * Live drag state for rendering feedback: which ids are being dragged and the\n * insertion index the drop would use. Both `null` when no drag is engaged.\n */\nexport interface ReorderDragState {\n  draggedIds: string[] | null;\n  targetIndex: number | null;\n}\n\n/**\n * A `ref` for the list container, an `onPointerDown` for each row, and the\n * live {@link ReorderDragState}. The container ref is required, not optional\n * decoration: it is what the drop index is measured against and what the\n * pointer session is opened on.\n */\nexport interface ReorderDragHandlers {\n  rowProps(id: string, index: number): { onPointerDown(e: ReactPointerEvent): void };\n  containerProps: {\n    ref: RefCallback<HTMLElement>;\n  };\n  state: ReorderDragState;\n}\n\n/**\n * The half-open run of indices a row at `sourceIndex` may be dropped into:\n * bounded by the nearest locked row above and below it, so a locked row is a\n * wall in both directions rather than a global ceiling.\n */\nfunction unlockedSegment(items: readonly LayerListItem[], sourceIndex: number): [number, number] {\n  let lo = 0;\n  for (let i = sourceIndex - 1; i >= 0; i--) {\n    if (items[i]?.locked) { lo = i + 1; break; }\n  }\n  let hi = items.length;\n  for (let i = sourceIndex + 1; i < items.length; i++) {\n    if (items[i]?.locked) { hi = i; break; }\n  }\n  return [lo, hi];\n}\n\n/** Would dropping `draggedIds` at `targetIndex` leave a contiguous block where it already is? */\nfunction isNoopDrop(items: readonly LayerListItem[], draggedIds: readonly string[], targetIndex: number): boolean {\n  const indices = draggedIds\n    .map((id) => items.findIndex((it) => it.id === id))\n    .filter((i) => i >= 0)\n    .sort((a, b) => a - b);\n  const contiguous =\n    indices.length > 0 &&\n    indices.every((v, i) => {\n      if (i === 0) return true;\n      const prev = indices[i - 1];\n      return prev !== undefined && v === prev + 1;\n    });\n  const first = indices[0];\n  const last = indices[indices.length - 1];\n  return contiguous\n    && first !== undefined\n    && last !== undefined\n    && targetIndex >= first\n    && targetIndex <= last + 1;\n}\n\n/**\n * Drag-to-reorder for a vertical list of rows. Dragging a row that is part of\n * the current selection drags the whole selection; dragging any other row\n * drags just that row. Locked rows can neither be dragged nor crossed by a\n * drop. A drop that would leave a contiguous block where it already is does\n * not call `onReorder`.\n *\n * A press opens an `openPointerSession` on the *container*, which owns the\n * rest of the gesture: a drag that leaves the list still tracks, a release\n * anywhere still drops, and a release the window never delivered still ends\n * the drag. The container is the origin rather than the row because rows come\n * and go as the list re-renders, and a drag must outlive the row it grabbed.\n */\nexport function useReorderDragList(opts: UseReorderDragListOptions): ReorderDragHandlers {\n  const optsRef = useRef(opts);\n  optsRef.current = opts;\n  const containerRef = useRef<HTMLElement | null>(null);\n  const sessionRef = useRef<PointerSession | null>(null);\n  const [state, setState] = useState<ReorderDragState>({ draggedIds: null, targetIndex: null });\n\n  useEffect(() => () => { sessionRef.current?.cancel(); }, []);\n\n  const computeTargetIndex = useCallback((clientY: number, sourceIndex: number): number => {\n    const [lo, hi] = unlockedSegment(optsRef.current.items, sourceIndex);\n    const c = containerRef.current;\n    if (!c) return lo;\n    const rows = Array.from(c.children) as HTMLElement[];\n    let raw = rows.length;\n    for (let i = 0; i < rows.length; i++) {\n      const row = rows[i];\n      if (!row) continue;\n      const r = row.getBoundingClientRect();\n      if (clientY < r.bottom) { raw = i; break; }\n    }\n    return Math.max(lo, Math.min(raw, hi));\n  }, []);\n\n  const refCb = useCallback<RefCallback<HTMLElement>>((el) => {\n    containerRef.current = el;\n  }, []);\n\n  const reset = useCallback(() => {\n    sessionRef.current = null;\n    setState({ draggedIds: null, targetIndex: null });\n  }, []);\n\n  const onPointerDownRow = useCallback((id: string, index: number, e: ReactPointerEvent) => {\n    const container = containerRef.current;\n    if (!container || sessionRef.current) return;\n\n    // A locked row still opens a session: it cannot be dragged, but the press\n    // has to reach `onPress` for the row to be selectable at all.\n    const draggable = !optsRef.current.items[index]?.locked;\n    const startX = e.clientX;\n    const startY = e.clientY;\n    const mods: PressModifiers = {\n      shiftKey: e.shiftKey, ctrlKey: e.ctrlKey, metaKey: e.metaKey, altKey: e.altKey,\n    };\n    let active: { draggedIds: string[]; targetIndex: number } | null = null;\n\n    sessionRef.current = openPointerSession(container, e, {\n      onMove: (ev) => {\n        if (active) {\n          const targetIndex = computeTargetIndex(ev.clientY, index);\n          if (targetIndex === active.targetIndex) return;\n          active.targetIndex = targetIndex;\n          setState({ draggedIds: active.draggedIds, targetIndex });\n          return;\n        }\n        if (!draggable) return;\n        if (Math.hypot(ev.clientX - startX, ev.clientY - startY) < (optsRef.current.threshold ?? 4)) return;\n        const selected = optsRef.current.selectedIds;\n        const [lo, hi] = unlockedSegment(optsRef.current.items, index);\n        const draggedIds = (selected.includes(id) ? [...selected] : [id]).filter((x) => {\n          const i = optsRef.current.items.findIndex((it) => it.id === x);\n          return i >= lo && i < hi;\n        });\n        const targetIndex = computeTargetIndex(ev.clientY, index);\n        active = { draggedIds, targetIndex };\n        setState({ draggedIds, targetIndex });\n      },\n      onEnd: (ev) => {\n        if (active) {\n          const targetIndex = computeTargetIndex(ev.clientY, index);\n          if (!isNoopDrop(optsRef.current.items, active.draggedIds, targetIndex)) {\n            optsRef.current.onReorder(active.draggedIds, targetIndex);\n          }\n        } else {\n          optsRef.current.onPress?.(id, mods);\n        }\n        reset();\n      },\n      // Every cancel reason — the browser's, a lost capture, an unmount —\n      // says the gesture was interrupted rather than aimed, so the rows stay\n      // where they were.\n      onCancel: reset,\n    });\n  }, [computeTargetIndex, reset]);\n\n  return {\n    rowProps: (id, index) => ({\n      onPointerDown: (e) => onPointerDownRow(id, index, e),\n    }),\n    containerProps: {\n      ref: refCb,\n    },\n    state,\n  };\n}\n"],"mappings":"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"}