@lotics/ui 2.6.1 → 3.1.0

package/src/kanban/kanban_card.tsx

@@ -1,321 +0,0 @@
-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;
-  /** When false, this card does not initiate a drag (press still works) */
-  cardDraggable: 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,
-  cardDraggable,
-  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 (!cardDraggable) {
-        // Card cannot be dragged — only a press is detected. Never enable drag.
-        canDragRef.current = false;
-      } else 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);
-      });
-    },
-    [cardDraggable],
-  );
-
-  // 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;