@lotics/ui 1.9.0 → 1.11.0

package/src/kanban/kanban_card.tsx

@@ -0,0 +1,312 @@
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Platform, View } from "react-native";
+import { KanbanRenderCardProps, KanbanRenderInsertCardButtonProps } from "./types";
+import { CardPlaceholder } from "./placeholders";
+import { DRAG_THRESHOLD, TOUCH_DRAG_DELAY, TOUCH_TOLERANCE } from "./constants";
+import { InsertCardZone } from "./insert_card_zone";
+
+interface KanbanCardProps<T> {
+  id: string;
+  columnKey: string;
+  index: number;
+  item: T;
+  renderCard: (props: KanbanRenderCardProps<T>) => React.ReactNode;
+  isDragging: boolean;
+  isDropTarget: boolean;
+  /** True when any card is being dragged (disables insert zones) */
+  isDragInProgress: boolean;
+  onCardPress?: (cardId: string, item: T, columnKey: string) => void;
+  onAddCardAtIndex?: (columnKey: string, index: number) => void;
+  renderInsertCardButton?: (props: KanbanRenderInsertCardButtonProps) => React.ReactNode;
+  startCardDrag: (
+    cardId: string,
+    columnKey: string,
+    index: number,
+    startX: number,
+    startY: number,
+    rect: { x: number; y: number; width: number; height: number },
+  ) => void;
+  /** Height of this card (used when this card is dragging and also drop target) */
+  placeholderHeight: number;
+  /** Height of the card being dragged (used for drop target placeholder) */
+  draggedCardHeight: number | null;
+  /** Gap between items for consistent spacing */
+  itemGap: number;
+}
+
+type PointerType = "mouse" | "touch" | "pen";
+
+function KanbanCardInner<T>({
+  id,
+  columnKey,
+  index,
+  item,
+  renderCard,
+  isDragging,
+  isDropTarget,
+  isDragInProgress,
+  onCardPress,
+  onAddCardAtIndex,
+  renderInsertCardButton,
+  startCardDrag,
+  placeholderHeight,
+  draggedCardHeight,
+  itemGap,
+}: KanbanCardProps<T>) {
+  const containerRef = useRef<View>(null);
+  const [isHovered, setIsHovered] = useState(false);
+  const [isPressing, setIsPressing] = useState(false);
+  // Visual feedback when touch delay is active (preparing to drag)
+  const [isDragPending, setIsDragPending] = useState(false);
+
+  const pressStartRef = useRef<{ x: number; y: number } | null>(null);
+  const hasDraggedRef = useRef(false);
+  const wasCancelledRef = useRef(false);
+  const elementRectRef = useRef<{
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  } | null>(null);
+  const pointerTypeRef = useRef<PointerType>("mouse");
+  const delayTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // True when delay has elapsed and drag can start (always true for mouse)
+  const canDragRef = useRef(false);
+
+  // Clear hover when this card starts dragging or any drag is in progress
+  useEffect(() => {
+    if (isDragging || isDragInProgress) setIsHovered(false);
+  }, [isDragging, isDragInProgress]);
+
+  // Reset internal state when drag ends (drag is handled at board level)
+  useEffect(() => {
+    if (!isDragging && hasDraggedRef.current) {
+      // Drag just ended - reset all internal state
+      hasDraggedRef.current = false;
+      wasCancelledRef.current = false;
+      canDragRef.current = false;
+      setIsPressing(false);
+      setIsDragPending(false);
+      pressStartRef.current = null;
+      elementRectRef.current = null;
+      if (delayTimerRef.current) {
+        clearTimeout(delayTimerRef.current);
+        delayTimerRef.current = null;
+      }
+    }
+  }, [isDragging]);
+
+  // Cleanup delay timer on unmount
+  useEffect(() => {
+    return () => {
+      if (delayTimerRef.current) {
+        clearTimeout(delayTimerRef.current);
+      }
+    };
+  }, []);
+
+  // Handle pointer down - attached via useEffect on web
+  const handlePointerDown = useCallback((e: PointerEvent) => {
+    // Determine pointer type
+    const pointerType = e.pointerType as PointerType;
+    pointerTypeRef.current = pointerType;
+
+    pressStartRef.current = { x: e.clientX, y: e.clientY };
+    hasDraggedRef.current = false;
+    wasCancelledRef.current = false;
+
+    // For touch/pen: require a delay before drag can start
+    // For mouse: drag can start immediately
+    const isTouch = pointerType === "touch" || pointerType === "pen";
+
+    if (isTouch) {
+      canDragRef.current = false;
+      setIsDragPending(true);
+
+      delayTimerRef.current = setTimeout(() => {
+        canDragRef.current = true;
+        delayTimerRef.current = null;
+      }, TOUCH_DRAG_DELAY);
+    } else {
+      canDragRef.current = true;
+    }
+
+    // Measure element position
+    containerRef.current?.measureInWindow((x, y, width, height) => {
+      elementRectRef.current = { x, y, width, height };
+      setIsPressing(true);
+    });
+  }, []);
+
+  // Attach pointer down listener to DOM element on web
+  // Must depend on isDragging because when isDragging=true, the element returns null
+  // and is unmounted. When isDragging becomes false, a NEW element is created
+  // and we need to re-attach the listener.
+  useEffect(() => {
+    if (Platform.OS !== "web") return;
+    if (isDragging) return; // Element doesn't exist when dragging
+
+    // Get the DOM node from the React Native View ref
+    const node = containerRef.current as unknown as HTMLElement | null;
+    if (!node) return;
+
+    node.addEventListener("pointerdown", handlePointerDown);
+
+    return () => {
+      node.removeEventListener("pointerdown", handlePointerDown);
+    };
+  }, [handlePointerDown, isDragging]);
+
+  useEffect(() => {
+    if (!isPressing) return;
+
+    const handlePointerMove = (e: PointerEvent) => {
+      if (!pressStartRef.current || hasDraggedRef.current || wasCancelledRef.current) return;
+
+      const dx = Math.abs(e.clientX - pressStartRef.current.x);
+      const dy = Math.abs(e.clientY - pressStartRef.current.y);
+      const distance = Math.max(dx, dy);
+
+      // If we're still in the delay period (touch only)
+      if (!canDragRef.current) {
+        // Too much movement during delay - cancel drag possibility
+        if (distance > TOUCH_TOLERANCE) {
+          wasCancelledRef.current = true;
+          setIsDragPending(false);
+          if (delayTimerRef.current) {
+            clearTimeout(delayTimerRef.current);
+            delayTimerRef.current = null;
+          }
+        }
+        return;
+      }
+
+      // Past delay (or mouse) - check drag threshold
+      if (distance > DRAG_THRESHOLD) {
+        hasDraggedRef.current = true;
+        setIsDragPending(false);
+        if (elementRectRef.current) {
+          startCardDrag(id, columnKey, index, e.clientX, e.clientY, elementRectRef.current);
+        }
+      }
+    };
+
+    const handlePointerUp = () => {
+      // Cleanup delay timer
+      if (delayTimerRef.current) {
+        clearTimeout(delayTimerRef.current);
+        delayTimerRef.current = null;
+      }
+      setIsDragPending(false);
+
+      // Trigger click if no drag occurred and wasn't cancelled
+      if (!hasDraggedRef.current && !wasCancelledRef.current && onCardPress) {
+        onCardPress(id, item, columnKey);
+      }
+
+      setIsPressing(false);
+      pressStartRef.current = null;
+      elementRectRef.current = null;
+    };
+
+    const handlePointerCancel = () => {
+      if (delayTimerRef.current) {
+        clearTimeout(delayTimerRef.current);
+        delayTimerRef.current = null;
+      }
+      setIsDragPending(false);
+      setIsPressing(false);
+      pressStartRef.current = null;
+      elementRectRef.current = null;
+    };
+
+    // Use pointer events for unified mouse/touch handling
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", handlePointerUp);
+    window.addEventListener("pointercancel", handlePointerCancel);
+
+    return () => {
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", handlePointerUp);
+      window.removeEventListener("pointercancel", handlePointerCancel);
+    };
+  }, [isPressing, id, columnKey, index, item, startCardDrag, onCardPress]);
+
+  const handleHoverIn = useCallback(() => {
+    // Don't show hover when any drag is in progress
+    if (!isDragInProgress) {
+      setIsHovered(true);
+    }
+  }, [isDragInProgress]);
+
+  const handleHoverOut = useCallback(() => {
+    setIsHovered(false);
+  }, []);
+
+  // Stable style for gap between placeholder and card - MUST be before early returns
+  const gapStyle = useMemo(() => ({ height: itemGap }), [itemGap]);
+
+  const cardContent = renderCard({
+    item,
+    columnKey,
+    id,
+    hovered: isHovered,
+    isDragging,
+  });
+
+  if (isDragging) {
+    // This card is being dragged - show placeholder at its own position if it's also drop target
+    if (isDropTarget) {
+      return (
+        <View style={{ overflow: "visible" }}>
+          {/* Maintain gap above placeholder when insert zones are enabled */}
+          {onAddCardAtIndex && <View style={gapStyle} />}
+          <CardPlaceholder height={placeholderHeight} />
+        </View>
+      );
+    }
+    return null;
+  }
+
+  // Placeholder should match the dragged card's height, not this card's height
+  const dropPlaceholderHeight = draggedCardHeight ?? placeholderHeight;
+
+  // Visual feedback style when drag is pending (touch hold)
+  const pendingStyle = isDragPending
+    ? { opacity: 0.8, transform: [{ scale: 1.02 }] as const }
+    : undefined;
+
+  return (
+    <View style={{ overflow: "visible" }}>
+      {/* Insert zone above this card - allows inserting at this card's position */}
+      {onAddCardAtIndex && (
+        <View style={{ height: itemGap, overflow: "visible", zIndex: 1 }}>
+          <InsertCardZone
+            height={itemGap}
+            columnKey={columnKey}
+            index={index}
+            onAddCardAtIndex={onAddCardAtIndex}
+            renderInsertCardButton={renderInsertCardButton}
+            isDragInProgress={isDragInProgress}
+          />
+        </View>
+      )}
+      {isDropTarget && (
+        <>
+          <CardPlaceholder height={dropPlaceholderHeight} />
+          <View style={gapStyle} />
+        </>
+      )}
+      <View
+        ref={containerRef}
+        style={pendingStyle}
+        onPointerEnter={handleHoverIn}
+        onPointerLeave={handleHoverOut}
+      >
+        {cardContent}
+      </View>
+    </View>
+  );
+}
+
+export const KanbanCard = memo(KanbanCardInner) as typeof KanbanCardInner;