@lotics/ui 2.6.1 → 3.0.0

package/src/kanban/kanban_board.tsx

@@ -1,635 +0,0 @@
-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;
-  /**
-   * Whether cards can be dragged. Defaults to whether `onCardMove` is provided —
-   * a card with no move handler does not initiate a drag (it can still be
-   * pressed via `onCardPress`). Pass `false` for a read-only / action-driven
-   * board.
-   */
-  cardDraggable?: boolean;
-  /** Whether columns can be reordered. Defaults to whether `onColumnMove` is provided. */
-  columnDraggable?: 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,
-  cardDraggable,
-  columnDraggable,
-}: KanbanBoardProps<T>) {
-  // A card/column is draggable only when there is a handler to receive the
-  // move — an explicit prop overrides. This makes a read-only or action-driven
-  // board (no move handler) non-draggable without extra wiring.
-  const cardsDraggable = cardDraggable ?? onCardMove != null;
-  const columnsDraggable = columnDraggable ?? onColumnMove != null;
-
-  // 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}
-              cardDraggable={cardsDraggable}
-              columnDraggable={columnsDraggable}
-              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%",
-  },
-});