({
task,
isOverdue,
isCursor,
onToggle,
onOpen,
onFocusRow,
onReorder
}: Props)
| 37 | } |
| 38 | |
| 39 | export function TasksRow({ |
| 40 | task, |
| 41 | isOverdue, |
| 42 | isCursor, |
| 43 | onToggle, |
| 44 | onOpen, |
| 45 | onFocusRow, |
| 46 | onReorder |
| 47 | }: Props): JSX.Element { |
| 48 | const [dropPos, setDropPos] = useState<'before' | 'after' | null>(null) |
| 49 | const draggable = !!onReorder |
| 50 | return ( |
| 51 | <div |
| 52 | data-task-row={task.id} |
| 53 | draggable={draggable} |
| 54 | onDragStart={ |
| 55 | draggable |
| 56 | ? (e) => { |
| 57 | e.stopPropagation() |
| 58 | setDragPayload(e, { kind: 'task', id: task.id }) |
| 59 | } |
| 60 | : undefined |
| 61 | } |
| 62 | onDragOver={ |
| 63 | draggable |
| 64 | ? (e) => { |
| 65 | const drag = getCurrentDragPayload() |
| 66 | if (!drag || drag.kind !== 'task' || drag.id === task.id) { |
| 67 | if (dropPos) setDropPos(null) |
| 68 | return |
| 69 | } |
| 70 | e.preventDefault() |
| 71 | e.stopPropagation() |
| 72 | e.dataTransfer.dropEffect = 'move' |
| 73 | const rect = e.currentTarget.getBoundingClientRect() |
| 74 | const pos = e.clientY - rect.top < rect.height / 2 ? 'before' : 'after' |
| 75 | if (pos !== dropPos) setDropPos(pos) |
| 76 | } |
| 77 | : undefined |
| 78 | } |
| 79 | onDragLeave={draggable ? () => dropPos && setDropPos(null) : undefined} |
| 80 | onDrop={ |
| 81 | draggable |
| 82 | ? (e) => { |
| 83 | if (!dropPos) return |
| 84 | e.preventDefault() |
| 85 | e.stopPropagation() |
| 86 | const drag = readDragPayload(e) ?? getCurrentDragPayload() |
| 87 | const pos = dropPos |
| 88 | setDropPos(null) |
| 89 | if (drag?.kind === 'task') onReorder?.(drag.id, task.id, pos) |
| 90 | } |
| 91 | : undefined |
| 92 | } |
| 93 | onMouseEnter={onFocusRow} |
| 94 | onClick={() => { |
| 95 | onFocusRow() |
| 96 | onOpen() |
nothing calls this directly
no test coverage detected