iboard/src/components/task/useRowDrag.js

import { useCallback, useEffect, useMemo, useRef, useState } from 'react'

// 列表视图卡片拖动换列 (2026-10-24, 替代「长按 → ActionSheet」:
// 旧方案长按与复选框/行点击互相误触, 且菜单弹出时手指还按在屏上, 体验割裂)
//   手势与看板一致: 长按 400ms 行原位抬起(震动), 之后左右拖动;
//   水平位移按 80px/列 步进切换目标列 (顺序同列表分组), 行尾实时显示
//   目标列名徽标, 松手落到目标列 (≠当前列才提交)。
//   touch-action: pan-y —— 横向位移归拖动, 纵向仍归列表滚动;
//   激活后浏览器若接管纵向滚动 (pointercancel) 只放弃不提交。
//   注: 列表只展示有任务的列, 空列拖不进去 (用看板视图可拖空列)。
const STEP = 80

export default function useRowDrag({ columns, onDrop }) {
  // { task, fromIdx, toIdx }: 拖动中的行 + 当前目标列下标 (徽标渲染)
  const [drag, setDrag] = useState(null)
  const st = useRef({ timer: null, active: false, startX: 0, startY: 0, task: null, fromIdx: 0, toIdx: 0 })
  const lastEnd = useRef(0) // 拖动结束时刻

  // 目标列顺序 = 列表分组顺序 (sortOrder)
  const ordered = useMemo(
    () => [...(columns || [])].sort((a, b) => a.sortOrder - b.sortOrder),
    [columns],
  )

  const cleanup = useCallback(() => {
    if (st.current.timer) { clearTimeout(st.current.timer); st.current.timer = null }
    st.current.active = false
    setDrag(null)
  }, [])

  useEffect(() => () => cleanup(), [cleanup])

  /** 拖动刚结束 (350ms 内): 抑制松手合成的 click 误开详情页 */
  const justEnded = useCallback(() => Date.now() - lastEnd.current < 350, [])

  // 跟手浮层: 消费方渲染 <div ref={ghostRef}>, 拖动时直接改 transform
  const ghostRef = useRef(null)
  const moveGhost = (x, y) => {
    if (ghostRef.current) ghostRef.current.style.transform = `translate(${x}px, ${y}px) translate(-50%, -110%)`
  }

  const onMove = (ev) => {
    const s = st.current
    if (!s.active) {
      if (s.timer && (Math.abs(ev.clientX - s.startX) > 10 || Math.abs(ev.clientY - s.startY) > 10)) {
        clearTimeout(s.timer); s.timer = null
      }
      return
    }
    ev.preventDefault()
    moveGhost(ev.clientX, ev.clientY)
    const to = Math.max(0, Math.min(ordered.length - 1, s.fromIdx + Math.round((ev.clientX - s.startX) / STEP)))
    if (to !== s.toIdx) {
      s.toIdx = to
      setDrag({ task: s.task, fromIdx: s.fromIdx, toIdx: to })
    }
  }

  const onUp = () => {
    const s = st.current
    if (s.active && s.task) {
      lastEnd.current = Date.now()
      const target = ordered[s.toIdx]
      if (target && target.id !== s.task.columnId) onDrop?.(s.task, target.id)
    }
    cleanup()
  }

  // 指针监听装配 (capture + 非 passive touchmove: 激活后尽力拦截滚动接管;
  // instant=true 把手路径再挂 touchstart preventDefault, 规范上禁止浏览器对
  // 整个触摸的默认处理, 彻底杜绝滚动抢占)
  const armListeners = (ev, instant = false) => {
    try { ev.currentTarget.setPointerCapture(ev.pointerId) } catch { /* ignore */ }
    const el = ev.currentTarget
    const move = (e2) => onMove(e2)
    const tm = (e2) => { if (st.current.active) e2.preventDefault() }
    const ts = (e2) => e2.preventDefault()
    const up = () => { onUp(); detach() }
    const cancel = () => {
      if (st.current.active) lastEnd.current = Date.now()
      cleanup()
      detach()
    }
    const detach = () => {
      el.removeEventListener('pointermove', move)
      el.removeEventListener('pointerup', up)
      el.removeEventListener('pointercancel', cancel)
      el.removeEventListener('touchmove', tm)
      el.removeEventListener('touchstart', ts)
    }
    el.addEventListener('pointermove', move)
    el.addEventListener('pointerup', up)
    el.addEventListener('pointercancel', cancel)
    el.addEventListener('touchmove', tm, { passive: false })
    if (instant) el.addEventListener('touchstart', ts, { passive: false })
  }

  /** 绑定到列表行: 行元素需设置 touch-action: pan-y (长按路径, 可滚场景不可靠) */
  const bind = useCallback((task) => ({
    onPointerDown: (ev) => {
      if (ev.button !== undefined && ev.button !== 0) return
      const fromIdx = ordered.findIndex((c) => c.id === task.columnId)
      if (fromIdx < 0) return // 不在任何列 (如「其他」组) 的任务不支持拖动
      st.current = { ...st.current, startX: ev.clientX, startY: ev.clientY, task, fromIdx, toIdx: fromIdx, active: false }
      st.current.timer = setTimeout(() => {
        st.current.active = true
        if (navigator.vibrate) navigator.vibrate(15)
        setDrag({ task, fromIdx, toIdx: fromIdx })
        moveGhost(st.current.startX, st.current.startY)
      }, 400)
      armListeners(ev)
    },
    // 长按不弹系统菜单 (配合 CSS user-select:none, 防长按变文字选择)
    onContextMenu: (ev) => ev.preventDefault(),
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }), [ordered, onDrop])

  /** 绑定到行尾拖动把手: 把手需 touch-action: none, 按下立即拖动。
   *  pan-y 下整页可滚时浏览器滚动接管会取消指针流 (Android WebView 必现),
   *  把手路径浏览器完全不接管, 是可靠入口。 */
  const bindHandle = useCallback((task) => ({
    onPointerDown: (ev) => {
      if (ev.button !== undefined && ev.button !== 0) return
      const fromIdx = ordered.findIndex((c) => c.id === task.columnId)
      if (fromIdx < 0) return
      ev.stopPropagation() // 不触发行自身的长按路径
      st.current = { ...st.current, startX: ev.clientX, startY: ev.clientY, task, fromIdx, toIdx: fromIdx, active: false }
      st.current.active = true
      if (navigator.vibrate) navigator.vibrate(15)
      setDrag({ task, fromIdx, toIdx: fromIdx })
      moveGhost(st.current.startX, st.current.startY)
      armListeners(ev, true)
    },
    onContextMenu: (ev) => ev.preventDefault(),
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }), [ordered, onDrop])

  return { drag, bind, bindHandle, ghostRef, cancel: cleanup, justEnded }
}