@lotics/ui 1.9.0 → 1.11.0

package/src/kanban/kanban_board.tsx

@@ -0,0 +1,616 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { FlatList, ScrollView, StyleSheet, View } from "react-native";
+import { KanbanColumn } from "./kanban_column";
+import { DragPreview } from "./drag_preview";
+import { ColumnPlaceholder } from "./placeholders";
+import {
+  CardMoveResult,
+  ColumnMoveResult,
+  DragInfo,
+  DragPreviewInfo,
+  DropTarget,
+  KanbanColumn as KanbanColumnType,
+  KanbanRenderAddCardPlaceholderProps,
+  KanbanRenderInsertCardButtonProps,
+  KanbanRenderCardProps,
+  KanbanRenderCollapsedColumnProps,
+  KanbanRenderColumnHeaderProps,
+} from "./types";
+import {
+  AUTO_SCROLL_SPEED,
+  AUTO_SCROLL_THRESHOLD,
+  COLUMN_CONTENT_PADDING,
+  DEFAULT_COLUMN_GAP,
+  DEFAULT_COLUMN_WIDTH,
+  DEFAULT_ITEM_GAP,
+  MINIMIZED_COLUMN_WIDTH,
+} from "./constants";
+import {
+  defaultRenderAddCardPlaceholder,
+  defaultRenderCollapsedColumn,
+  defaultRenderColumnHeader,
+} from "./default_renderers";
+
+export interface KanbanBoardProps<T> {
+  columns: KanbanColumnType<T>[];
+  renderCard: (props: KanbanRenderCardProps<T>) => React.ReactNode;
+  renderColumnHeader?: (props: KanbanRenderColumnHeaderProps) => React.ReactNode;
+  renderAddCardPlaceholder?: (props: KanbanRenderAddCardPlaceholderProps) => React.ReactNode;
+  /** Custom renderer for the insert card button shown between cards on hover */
+  renderInsertCardButton?: (props: KanbanRenderInsertCardButtonProps) => React.ReactNode;
+  renderCollapsedColumn?: (props: KanbanRenderCollapsedColumnProps) => React.ReactNode;
+  onCardMove?: (result: CardMoveResult<T>) => void;
+  onColumnMove?: (result: ColumnMoveResult) => void;
+  onCardPress?: (cardId: string, item: T, columnKey: string) => void;
+  onAddCard?: (columnKey: string) => void;
+  /** Called when user clicks the insert button between cards */
+  onAddCardAtIndex?: (columnKey: string, index: number) => void;
+  columnWidth?: number;
+  columnGap?: number;
+  /** Height of each card. Number for fixed height, function for variable heights */
+  itemHeight: number | ((item: T, index: number) => number);
+  /** Gap between items in a column */
+  itemGap?: number;
+  /** When true, cards can only be dropped into columns (highlights entire column), not between specific cards */
+  columnOnlyCardDrop?: boolean;
+}
+
+/** Column registration data */
+export interface ColumnRegistration {
+  element: HTMLElement;
+  headerHeight: number;
+  /** FlatList ref for scrolling - null when column is minimized */
+  listRef: FlatList | null;
+}
+
+export function KanbanBoard<T>({
+  columns,
+  renderCard,
+  renderColumnHeader = defaultRenderColumnHeader,
+  renderAddCardPlaceholder = defaultRenderAddCardPlaceholder,
+  renderInsertCardButton,
+  renderCollapsedColumn = defaultRenderCollapsedColumn,
+  onCardMove,
+  onColumnMove,
+  onCardPress,
+  onAddCard,
+  onAddCardAtIndex,
+  columnWidth = DEFAULT_COLUMN_WIDTH,
+  columnGap = DEFAULT_COLUMN_GAP,
+  itemHeight,
+  itemGap = DEFAULT_ITEM_GAP,
+  columnOnlyCardDrop = false,
+}: KanbanBoardProps<T>) {
+  // Helper to get height for an item
+  const getHeight = useCallback(
+    (item: T, index: number): number => {
+      return typeof itemHeight === "function" ? itemHeight(item, index) : itemHeight;
+    },
+    [itemHeight],
+  );
+
+  // === State ===
+  const [dragInfo, setDragInfo] = useState<DragInfo | null>(null);
+  const [dropTarget, setDropTarget] = useState<DropTarget | null>(null);
+  const [dragPreview, setDragPreview] = useState<DragPreviewInfo | null>(null);
+  const [minimizedColumns, setMinimizedColumns] = useState<Set<string>>(new Set());
+
+  const toggleMinimized = useCallback((columnKey: string) => {
+    setMinimizedColumns((prev) => {
+      const next = new Set(prev);
+      if (next.has(columnKey)) {
+        next.delete(columnKey);
+      } else {
+        next.add(columnKey);
+      }
+      return next;
+    });
+  }, []);
+
+  // === Refs ===
+  const dragPositionRef = useRef<{ x: number; y: number } | null>(null);
+  const dragPreviewUpdateRef = useRef<((x: number, y: number) => void) | null>(null);
+
+  // Column data - consolidated into single map
+  const columnDataRef = useRef<Map<string, ColumnRegistration & { scrollY: number }>>(new Map());
+
+  // Track which column mouse is currently over during drag
+  const hoveredColumnRef = useRef<string | null>(null);
+
+  // Refs to avoid stale closures
+  const dragInfoRef = useRef<DragInfo | null>(null);
+  const dropTargetRef = useRef<DropTarget | null>(null);
+  const onCardMoveRef = useRef(onCardMove);
+  const onColumnMoveRef = useRef(onColumnMove);
+  const columnsRef = useRef(columns);
+  const getHeightRef = useRef(getHeight);
+  const itemGapRef = useRef(itemGap);
+
+  // Keep refs in sync
+  onCardMoveRef.current = onCardMove;
+  onColumnMoveRef.current = onColumnMove;
+  columnsRef.current = columns;
+  getHeightRef.current = getHeight;
+  itemGapRef.current = itemGap;
+
+  const isDragging = dragInfo !== null;
+
+  // === Drop Target Detection ===
+  const findDropTarget = useCallback(
+    (clientX: number, clientY: number, dragType: "card" | "column"): DropTarget | null => {
+      if (dragType === "column") {
+        const draggedColumnKey = dragInfoRef.current?.id;
+        const sourceIndex = dragInfoRef.current?.sourceIndex ?? 0;
+
+        // The dragged column is not rendered (hidden), so we work with visible columns only
+        const visibleColumns = columnsRef.current.filter((c) => c.key !== draggedColumnKey);
+
+        // Sort by visual position (left edge) to handle any layout differences
+        const sortedColumns = [...visibleColumns].sort((a, b) => {
+          const dataA = columnDataRef.current.get(a.key);
+          const dataB = columnDataRef.current.get(b.key);
+          if (!dataA || !dataB) return 0;
+          return (
+            dataA.element.getBoundingClientRect().left - dataB.element.getBoundingClientRect().left
+          );
+        });
+
+        // Find drop position among visible columns using midpoint detection
+        let visibleTargetIndex = 0;
+        for (let i = 0; i < sortedColumns.length; i++) {
+          const data = columnDataRef.current.get(sortedColumns[i].key);
+          if (!data) continue;
+          const rect = data.element.getBoundingClientRect();
+          const midpoint = rect.left + rect.width / 2;
+          if (clientX < midpoint) {
+            visibleTargetIndex = i;
+            break;
+          }
+          visibleTargetIndex = i + 1;
+        }
+
+        // Map visible index back to full array index
+        // Example: columns [A, B, C, D], dragging B (sourceIndex=1)
+        // Visible: [A, C, D] at indices [0, 1, 2]
+        // If visibleTargetIndex=2 (between C and D), actual index should be 3
+        // because B was at index 1, so indices after it shifted down by 1
+        const targetIndex =
+          visibleTargetIndex > sourceIndex ? visibleTargetIndex + 1 : visibleTargetIndex;
+
+        return {
+          type: "column",
+          columnKey:
+            columnsRef.current[Math.min(targetIndex, columnsRef.current.length - 1)]?.key ?? "",
+          index: targetIndex,
+        };
+      }
+
+      // For card drag, detect column from pointer position
+      // (more reliable than relying on pointerenter events)
+      let columnKey: string | null = null;
+      let columnData:
+        | (typeof columnDataRef.current extends Map<string, infer V> ? V : never)
+        | null = null;
+      let rect: DOMRect | null = null;
+
+      // Find which column contains the pointer
+      for (const [key, data] of columnDataRef.current) {
+        const columnRect = data.element.getBoundingClientRect();
+        if (
+          clientX >= columnRect.left &&
+          clientX <= columnRect.right &&
+          clientY >= columnRect.top &&
+          clientY <= columnRect.bottom
+        ) {
+          columnKey = key;
+          columnData = data;
+          rect = columnRect;
+          break;
+        }
+      }
+
+      if (!columnKey || !columnData || !rect) return null;
+
+      // Update hoveredColumnRef for auto-scroll
+      hoveredColumnRef.current = columnKey;
+
+      // Column-only card drop mode: just return the column, no specific index
+      if (columnOnlyCardDrop) {
+        return { type: "card", columnKey, index: -1 };
+      }
+
+      // Y position relative to item layout (subtract content padding)
+      const relativeY =
+        clientY - rect.top - columnData.headerHeight + columnData.scrollY - COLUMN_CONTENT_PADDING;
+
+      // Find card index based on cumulative heights
+      const column = columnsRef.current.find((c) => c.key === columnKey);
+      const items = column?.items ?? [];
+
+      // Get dragging card info
+      const draggedCardSourceColumn = dragInfoRef.current?.sourceColumnKey;
+      const draggedCardSourceIndex = dragInfoRef.current?.sourceIndex ?? -1;
+      const isInSourceColumn = draggedCardSourceColumn === columnKey;
+
+      let offset = 0;
+      for (let i = 0; i < items.length; i++) {
+        const height = getHeightRef.current(items[i].data, i);
+        const midpoint = offset + height / 2;
+        if (relativeY < midpoint) {
+          // When in source column, dropping at sourceIndex or sourceIndex+1
+          // both mean "keep card in same position", so normalize to sourceIndex
+          if (
+            isInSourceColumn &&
+            (i === draggedCardSourceIndex || i === draggedCardSourceIndex + 1)
+          ) {
+            return { type: "card", columnKey, index: draggedCardSourceIndex };
+          }
+          return { type: "card", columnKey, index: i };
+        }
+        offset += height + itemGapRef.current;
+      }
+
+      // Dropping at the end - same normalization for source column
+      if (isInSourceColumn && items.length === draggedCardSourceIndex + 1) {
+        return { type: "card", columnKey, index: draggedCardSourceIndex };
+      }
+      return { type: "card", columnKey, index: items.length };
+    },
+    [columnOnlyCardDrop],
+  );
+
+  // === Auto-scroll within columns ===
+  const performAutoScroll = useCallback((clientX: number, clientY: number) => {
+    const columnKey = hoveredColumnRef.current;
+    if (!columnKey) return;
+
+    const columnData = columnDataRef.current.get(columnKey);
+    if (!columnData || !columnData.listRef) return; // Skip if minimized (no listRef)
+
+    const rect = columnData.element.getBoundingClientRect();
+    const relativeY = clientY - rect.top - columnData.headerHeight;
+    const contentHeight = rect.height - columnData.headerHeight;
+
+    if (relativeY < AUTO_SCROLL_THRESHOLD) {
+      columnData.listRef.scrollToOffset({
+        offset: Math.max(0, columnData.scrollY - AUTO_SCROLL_SPEED),
+        animated: false,
+      });
+    } else if (relativeY > contentHeight - AUTO_SCROLL_THRESHOLD) {
+      columnData.listRef.scrollToOffset({
+        offset: columnData.scrollY + AUTO_SCROLL_SPEED,
+        animated: false,
+      });
+    }
+  }, []);
+
+  // === Drag Position Updates ===
+  const updateDragPosition = useCallback(
+    (clientX: number, clientY: number) => {
+      dragPositionRef.current = { x: clientX, y: clientY };
+      dragPreviewUpdateRef.current?.(clientX, clientY);
+
+      const info = dragInfoRef.current;
+      if (!info) return;
+
+      const target = findDropTarget(clientX, clientY, info.type);
+
+      // Only update state if target changed
+      const prev = dropTargetRef.current;
+      if (
+        target?.type !== prev?.type ||
+        target?.columnKey !== prev?.columnKey ||
+        target?.index !== prev?.index
+      ) {
+        dropTargetRef.current = target;
+        setDropTarget(target);
+      }
+
+      if (info.type === "card") {
+        performAutoScroll(clientX, clientY);
+      }
+    },
+    [findDropTarget, performAutoScroll],
+  );
+
+  // === End Drag ===
+  const endDrag = useCallback(() => {
+    const info = dragInfoRef.current;
+    const target = dropTargetRef.current;
+
+    if (info && target) {
+      if (info.type === "card" && onCardMoveRef.current) {
+        const card = columnsRef.current
+          .find((col) => col.key === info.sourceColumnKey)
+          ?.items.find((item) => item.id === info.id);
+
+        if (card) {
+          // Adjust index when moving within same column and moving forward
+          // Because removing the card shifts all subsequent indices down by 1
+          let targetIndex = target.index;
+          if (info.sourceColumnKey === target.columnKey && info.sourceIndex < target.index) {
+            targetIndex--;
+          }
+
+          onCardMoveRef.current({
+            cardId: info.id,
+            cardData: card.data,
+            sourceColumnKey: info.sourceColumnKey,
+            sourceIndex: info.sourceIndex,
+            targetColumnKey: target.columnKey,
+            targetIndex,
+          });
+        }
+      } else if (info.type === "column" && onColumnMoveRef.current) {
+        // Adjust index when moving forward (same reason as cards)
+        // findDropTarget returns "placeholder position", we need "final position after removal"
+        let targetIndex = target.index;
+        if (info.sourceIndex < target.index) {
+          targetIndex--;
+        }
+
+        onColumnMoveRef.current({
+          columnKey: info.id,
+          sourceIndex: info.sourceIndex,
+          targetIndex,
+        });
+      }
+    }
+
+    // Reset all state
+    setDragInfo(null);
+    setDropTarget(null);
+    setDragPreview(null);
+    dragInfoRef.current = null;
+    dropTargetRef.current = null;
+    dragPositionRef.current = null;
+    hoveredColumnRef.current = null;
+  }, []);
+
+  // === Global Pointer Listeners ===
+  useEffect(() => {
+    if (!isDragging) return;
+
+    const handlePointerMove = (e: PointerEvent) => {
+      e.preventDefault();
+      updateDragPosition(e.clientX, e.clientY);
+    };
+
+    const handlePointerUp = (e: PointerEvent) => {
+      e.preventDefault();
+      endDrag();
+    };
+
+    const preventDefault = (e: Event) => e.preventDefault();
+
+    // Use pointer events only - they handle both mouse and touch
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", handlePointerUp);
+    window.addEventListener("selectstart", preventDefault);
+
+    return () => {
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", handlePointerUp);
+      window.removeEventListener("selectstart", preventDefault);
+    };
+  }, [isDragging, updateDragPosition, endDrag]);
+
+  // === Start Drag Callbacks ===
+  const startCardDrag = useCallback(
+    (
+      cardId: string,
+      columnKey: string,
+      index: number,
+      startX: number,
+      startY: number,
+      rect: { x: number; y: number; width: number; height: number },
+    ) => {
+      const info: DragInfo = {
+        type: "card",
+        id: cardId,
+        sourceColumnKey: columnKey,
+        sourceIndex: index,
+      };
+      setDragInfo(info);
+      dragInfoRef.current = info;
+      dragPositionRef.current = { x: startX, y: startY };
+      hoveredColumnRef.current = columnKey;
+      setDragPreview({
+        width: rect.width,
+        height: rect.height,
+        offsetX: startX - rect.x,
+        offsetY: startY - rect.y,
+      });
+      // In column-only mode, use index -1 to show column highlight instead of position indicator
+      const initialIndex = columnOnlyCardDrop ? -1 : index;
+      setDropTarget({ type: "card", columnKey, index: initialIndex });
+      dropTargetRef.current = { type: "card", columnKey, index: initialIndex };
+    },
+    [columnOnlyCardDrop],
+  );
+
+  const startColumnDrag = useCallback(
+    (
+      columnKey: string,
+      index: number,
+      startX: number,
+      startY: number,
+      rect: { x: number; y: number; width: number; height: number },
+    ) => {
+      const info: DragInfo = {
+        type: "column",
+        id: columnKey,
+        sourceColumnKey: columnKey,
+        sourceIndex: index,
+      };
+      setDragInfo(info);
+      dragInfoRef.current = info;
+      dragPositionRef.current = { x: startX, y: startY };
+      setDragPreview({
+        width: rect.width,
+        height: rect.height,
+        offsetX: startX - rect.x,
+        offsetY: startY - rect.y,
+      });
+      setDropTarget({ type: "column", columnKey, index });
+      dropTargetRef.current = { type: "column", columnKey, index };
+    },
+    [],
+  );
+
+  // === Column Registration (consolidated) ===
+  const registerColumn = useCallback((columnKey: string, data: ColumnRegistration | null) => {
+    if (data) {
+      const existing = columnDataRef.current.get(columnKey);
+      columnDataRef.current.set(columnKey, {
+        ...data,
+        scrollY: existing?.scrollY ?? 0,
+      });
+    } else {
+      columnDataRef.current.delete(columnKey);
+    }
+  }, []);
+
+  const updateColumnScroll = useCallback((columnKey: string, scrollY: number) => {
+    const data = columnDataRef.current.get(columnKey);
+    if (data) {
+      data.scrollY = scrollY;
+    }
+  }, []);
+
+  // Kept for potential future use, but column detection now happens in findDropTarget
+  const handleColumnPointerEnter = useCallback((columnKey: string) => {
+    if (dragInfoRef.current?.type === "card") {
+      hoveredColumnRef.current = columnKey;
+    }
+  }, []);
+
+  // STABLE: Callback for DragPreview position updates
+  const handlePositionUpdate = useCallback((cb: (x: number, y: number) => void) => {
+    dragPreviewUpdateRef.current = cb;
+  }, []);
+
+  // === Derived State ===
+  const dragType = dragInfo?.type ?? null;
+  const dragId = dragInfo?.id ?? null;
+  const sourceColumnKey = dragInfo?.sourceColumnKey ?? null;
+  const dropTargetType = dropTarget?.type ?? null;
+  const dropTargetColumnKey = dropTarget?.columnKey ?? null;
+  const dropTargetIndex = dropTarget?.index ?? null;
+
+  // Width of the column being dragged (for placeholder sizing)
+  const draggedColumnWidth =
+    dragType === "column" && dragId
+      ? minimizedColumns.has(dragId)
+        ? MINIMIZED_COLUMN_WIDTH
+        : columnWidth
+      : columnWidth;
+
+  // Height of the column being dragged (for placeholder sizing)
+  const draggedColumnHeight = dragType === "column" && dragPreview ? dragPreview.height : undefined;
+
+  // Height of the card being dragged (for placeholder sizing)
+  const draggedCardHeight = dragType === "card" && dragPreview ? dragPreview.height : null;
+
+  // Stable scroll content style
+  const scrollContentStyle = useMemo(() => [styles.scrollContent, { gap: columnGap }], [columnGap]);
+
+  return (
+    <View style={styles.container}>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        style={styles.scrollView}
+        contentContainerStyle={scrollContentStyle}
+        scrollEventThrottle={16}
+      >
+        {columns.map((column, columnIndex) => {
+          const isColumnDragging = dragType === "column" && dragId === column.key;
+          const isColumnDropTarget =
+            dragType === "column" && dropTargetType === "column" && dropTargetIndex === columnIndex;
+
+          // Only source column needs cardDragId (to mark dragged card)
+          const isSourceColumn = sourceColumnKey === column.key;
+          // Only target column needs drop index (to show placeholder)
+          const isTargetColumn =
+            dragType === "card" && dropTargetType === "card" && dropTargetColumnKey === column.key;
+
+          const isMinimized = minimizedColumns.has(column.key);
+          const effectiveWidth = isMinimized ? MINIMIZED_COLUMN_WIDTH : columnWidth;
+
+          // In column-only mode, show full column highlight instead of position indicators
+          const showCardDropHighlight = columnOnlyCardDrop && isTargetColumn;
+
+          return (
+            <KanbanColumn
+              key={column.key}
+              columnKey={column.key}
+              title={column.title}
+              index={columnIndex}
+              items={column.items}
+              renderCard={renderCard}
+              renderColumnHeader={renderColumnHeader}
+              renderAddCardPlaceholder={renderAddCardPlaceholder}
+              renderInsertCardButton={renderInsertCardButton}
+              renderCollapsedColumn={renderCollapsedColumn}
+              isDragging={isColumnDragging}
+              isDropTarget={isColumnDropTarget}
+              isDragInProgress={isDragging}
+              // Only pass to source column - other columns don't need to re-render
+              cardDragId={isSourceColumn ? dragId : null}
+              // Only pass to target column - other columns don't need to re-render
+              // Don't pass index in column-only mode (no position indicators)
+              cardDropTargetIndex={isTargetColumn && !columnOnlyCardDrop ? dropTargetIndex : null}
+              draggedCardHeight={isTargetColumn ? draggedCardHeight : null}
+              showCardDropHighlight={showCardDropHighlight}
+              columnWidth={effectiveWidth}
+              placeholderWidth={isColumnDropTarget ? draggedColumnWidth : effectiveWidth}
+              placeholderHeight={isColumnDropTarget ? draggedColumnHeight : undefined}
+              itemHeight={itemHeight}
+              itemGap={itemGap}
+              onCardPress={onCardPress}
+              onAddCard={onAddCard}
+              onAddCardAtIndex={onAddCardAtIndex}
+              startCardDrag={startCardDrag}
+              startColumnDrag={startColumnDrag}
+              registerColumn={registerColumn}
+              updateColumnScroll={updateColumnScroll}
+              onPointerEnter={handleColumnPointerEnter}
+              isMinimized={isMinimized}
+              onMinimizeToggle={toggleMinimized}
+            />
+          );
+        })}
+        {dragType === "column" &&
+          dropTargetType === "column" &&
+          dropTargetIndex === columns.length && (
+            <ColumnPlaceholder width={draggedColumnWidth} height={draggedColumnHeight} />
+          )}
+      </ScrollView>
+      <DragPreview
+        columns={columns}
+        dragInfo={dragInfo}
+        dragPreview={dragPreview}
+        renderCard={renderCard}
+        renderColumnHeader={renderColumnHeader}
+        onPositionUpdate={handlePositionUpdate}
+        initialPosition={dragPositionRef.current}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexBasis: 0,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  scrollContent: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    height: "100%",
+  },
+});