react-native-swappable-grid 1.0.0

package/src/utils/helpers/gestures/PanWithLongPress.ts

@@ -0,0 +1,304 @@
+import { Gesture } from "react-native-gesture-handler";
+import {
+  runOnJS,
+  SharedValue,
+  withSpring,
+  withTiming,
+  scrollTo,
+  AnimatedRef,
+  useSharedValue,
+  useDerivedValue,
+} from "react-native-reanimated";
+import {
+  indexToXY,
+  toIndex1ColFromLiveMidlines,
+  xyToIndex,
+} from "../indexCalculations";
+
+interface PanProps {
+  order: SharedValue<string[]>;
+  dynamicNumColumns: SharedValue<number>;
+  activeKey: SharedValue<string | null>;
+  offsetX: SharedValue<number>;
+  offsetY: SharedValue<number>;
+  startX: SharedValue<number>;
+  startY: SharedValue<number>;
+  dragMode: SharedValue<boolean>;
+  positions: any;
+  itemsByKey: any;
+  itemWidth: number;
+  itemHeight: number;
+  containerPadding: number;
+  gap: number;
+  setOrderState: React.Dispatch<React.SetStateAction<string[]>>;
+  onDragEnd?: (ordered: ChildNode[]) => void;
+  onOrderChange?: (keys: string[]) => void;
+
+  // scrolling
+  scrollSpeed: number;
+  scrollThreshold: number;
+  scrollViewRef: AnimatedRef<any>;
+  scrollOffset: SharedValue<number>;
+  viewportH: SharedValue<number>;
+  longPressMs: number;
+  contentH: SharedValue<number>;
+  reverse?: boolean;
+  deleteComponentPosition?: SharedValue<{
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  } | null>;
+  deleteItem?: (key: string) => void;
+  contentPaddingBottom?: number; // Padding bottom from style prop to allow dragging into padding area
+}
+
+export const PanWithLongPress = (props: PanProps & { longPressMs: number }) => {
+  const {
+    order,
+    dynamicNumColumns,
+    activeKey,
+    offsetX,
+    offsetY,
+    startX,
+    startY,
+    dragMode,
+    positions,
+    itemsByKey,
+    itemWidth,
+    itemHeight,
+    containerPadding,
+    gap,
+    setOrderState,
+    onDragEnd,
+    onOrderChange,
+    scrollSpeed,
+    scrollThreshold,
+    scrollViewRef,
+    scrollOffset,
+    viewportH,
+    longPressMs,
+    contentH,
+    reverse = false,
+    deleteComponentPosition,
+    deleteItem,
+    contentPaddingBottom = 0,
+  } = props;
+
+  const scrollDir = useSharedValue(0); // -1 = up, 1 = down, 0 = none
+  const initialScrollOffset = useSharedValue(0);
+
+  useDerivedValue(() => {
+    if (!dragMode.value || !activeKey.value) return;
+
+    if (viewportH.value <= 0 || contentH.value <= 0) return;
+
+    const key = activeKey.value;
+    const p = positions[key];
+    if (!p) return;
+
+    // 1. Clamp scroll offset
+    const maxScroll = contentH.value - viewportH.value;
+    const newScroll = Math.max(
+      0,
+      Math.min(scrollOffset.value + scrollDir.value * scrollSpeed, maxScroll)
+    );
+
+    scrollTo(scrollViewRef, 0, newScroll, false);
+    const scrollDelta = newScroll - initialScrollOffset.value;
+    scrollOffset.value = newScroll;
+
+    // 2. Clamp item position
+    // Allow dragging into padding area (paddingBottom from style prop)
+    const minY = 0;
+    // Add paddingBottom to maxY to allow dragging into the padding area
+    const maxY = contentH.value - itemHeight + contentPaddingBottom;
+    const proposedY = startY.value + offsetY.value + scrollDelta;
+    p.y.value = Math.max(minY, Math.min(proposedY, maxY));
+
+    // X stays normal
+    p.x.value = startX.value + offsetX.value;
+
+    // Keep loop alive
+    requestAnimationFrame(() => {
+      scrollDir.value = scrollDir.value;
+    });
+  });
+
+  const getIndexOfKey = (key: string) => {
+    "worklet";
+    return order.value.findIndex((x) => x === key);
+  };
+
+  return Gesture.Pan()
+    .minDistance(10)
+    .activateAfterLongPress(longPressMs)
+    .onStart(({ x, y }) => {
+      initialScrollOffset.value = scrollOffset.value;
+      dragMode.value = true;
+      let bestKey: string | null = null;
+      let bestDist = Number.MAX_VALUE;
+      order.value.forEach((key) => {
+        const p = positions[key];
+        if (!p) return;
+        const cx = p.x.value + itemWidth / 2;
+        const cy = p.y.value + itemHeight / 2;
+        const dx = cx - x;
+        const dy = cy - y;
+        const dist2 = dx * dx + dy * dy;
+        if (dist2 < bestDist) {
+          bestDist = dist2;
+          bestKey = key;
+        }
+      });
+      if (!bestKey) return;
+      activeKey.value = bestKey;
+      const p = positions[bestKey]!;
+      p.active.value = withTiming(1, { duration: 120 });
+      startX.value = p.x.value;
+      startY.value = p.y.value;
+      offsetX.value = 0;
+      offsetY.value = 0;
+    })
+    .onUpdate(({ translationX, translationY }) => {
+      if (!dragMode.value) return;
+      const key = activeKey.value;
+      if (!key) return;
+
+      const p = positions[key]!;
+      const scrollDelta = scrollOffset.value - initialScrollOffset.value;
+
+      // Update active (top-left)
+      offsetX.value = translationX;
+      offsetY.value = translationY;
+      p.x.value = startX.value + offsetX.value;
+      p.y.value = startY.value + offsetY.value + scrollDelta;
+
+      // Auto-scroll (unchanged)
+      const pointerYInViewport = p.y.value - scrollOffset.value;
+      if (pointerYInViewport > viewportH.value - scrollThreshold) {
+        scrollDir.value = 1;
+      } else if (pointerYInViewport < scrollThreshold) {
+        scrollDir.value = -1;
+      } else {
+        scrollDir.value = 0;
+      }
+
+      // Compute target index from the active tile's **center**
+      const centerY = p.y.value + itemHeight / 2;
+      const fromIndex = getIndexOfKey(key);
+
+      let toIndex: number;
+      if (dynamicNumColumns.value === 1) {
+        toIndex = toIndex1ColFromLiveMidlines(
+          order,
+          positions,
+          activeKey,
+          itemHeight,
+          centerY,
+          reverse // ← pass your prop
+        );
+      } else {
+        // unchanged multi-column path
+        const centerX = p.x.value + itemWidth / 2;
+        toIndex = xyToIndex({
+          order,
+          x: centerX,
+          y: centerY,
+          itemWidth,
+          itemHeight,
+          dynamicNumColumns,
+          containerPadding,
+          gap,
+        });
+      }
+
+      if (
+        toIndex !== fromIndex &&
+        toIndex >= 0 &&
+        toIndex <= order.value.length - 1
+      ) {
+        const next = [...order.value];
+        next.splice(fromIndex, 1);
+        next.splice(toIndex, 0, key);
+        order.value = next;
+      }
+    })
+    .onEnd(() => {
+      scrollDir.value = 0; // stop auto-scroll
+      if (!dragMode.value) return;
+      const key = activeKey.value;
+      if (!key) {
+        dragMode.value = false;
+        return;
+      }
+      const p = positions[key]!;
+
+      // Check if item was dropped into delete component
+      if (deleteComponentPosition?.value && deleteItem) {
+        const deletePos = deleteComponentPosition.value;
+
+        // Add tolerance/padding to make it easier to hit (20% of item size)
+        const tolerance = Math.min(itemWidth, itemHeight) * 0.2;
+        const expandedDeleteX = deletePos.x - tolerance;
+        const expandedDeleteY = deletePos.y - tolerance;
+        const expandedDeleteWidth = deletePos.width + tolerance * 2;
+        const expandedDeleteHeight = deletePos.height + tolerance * 2;
+
+        // Check if item bounding box overlaps with expanded delete component bounds
+        // This is more forgiving than checking just the center point
+        const itemLeft = p.x.value;
+        const itemRight = p.x.value + itemWidth;
+        const itemTop = p.y.value;
+        const itemBottom = p.y.value + itemHeight;
+
+        // Bounding box intersection check
+        const overlaps =
+          itemLeft < expandedDeleteX + expandedDeleteWidth &&
+          itemRight > expandedDeleteX &&
+          itemTop < expandedDeleteY + expandedDeleteHeight &&
+          itemBottom > expandedDeleteY;
+
+        if (overlaps) {
+          // Item was dropped into delete component - delete it
+          runOnJS(deleteItem)(key);
+          // Note: deleteItem will handle calling onDelete callback if provided
+          p.active.value = withTiming(0, { duration: 120 });
+          activeKey.value = null;
+          dragMode.value = false;
+          return;
+        }
+      }
+
+      // Normal drop - return to grid position
+      const idx = getIndexOfKey(key);
+      const { x, y } = indexToXY({
+        index: idx,
+        itemWidth,
+        itemHeight,
+        dynamicNumColumns,
+        containerPadding,
+        gap,
+      });
+      const scale = Math.min(itemWidth, itemHeight) / 200; // 100px baseline
+
+      const damping = 18 * scale;
+      const stiffness = 240 * scale;
+      const mass = Math.max(0.05, scale); // helps stability for tiny items
+
+      p.x.value = withSpring(x, { damping, stiffness, mass });
+      p.y.value = withSpring(y, { damping, stiffness, mass });
+
+      p.active.value = withTiming(0, { duration: 120 });
+
+      runOnJS(setOrderState)(order.value);
+      if (onDragEnd) {
+        runOnJS(onDragEnd)(order.value.map((key) => itemsByKey[key]));
+      }
+      if (onOrderChange) {
+        runOnJS(onOrderChange)([...order.value]);
+      }
+      activeKey.value = null;
+      dragMode.value = false;
+    });
+};

package/src/utils/helpers/indexCalculations.ts

@@ -0,0 +1,91 @@
+import { SharedValue } from "react-native-reanimated";
+
+interface IndexToXYProps {
+  index: number;
+  itemHeight: number;
+  itemWidth: number;
+  dynamicNumColumns: SharedValue<number>;
+  containerPadding: number;
+  gap: number;
+}
+
+export const indexToXY = ({
+  index,
+  itemHeight,
+  itemWidth,
+  dynamicNumColumns,
+  containerPadding,
+  gap,
+}: IndexToXYProps) => {
+  "worklet";
+  const cols = dynamicNumColumns.value;
+  const col = index % cols;
+  const row = Math.floor(index / cols);
+  const x = containerPadding + col * (itemWidth + gap);
+  const y = containerPadding + row * (itemHeight + gap);
+  return { x, y };
+};
+
+interface XYToIndexProps {
+  order: SharedValue<string[]>;
+  x: number;
+  y: number;
+  itemHeight: number;
+  itemWidth: number;
+  dynamicNumColumns: SharedValue<number>;
+  containerPadding: number;
+  gap: number;
+}
+
+export const xyToIndex = ({
+  order,
+  x,
+  y,
+  itemHeight,
+  itemWidth,
+  dynamicNumColumns,
+  gap,
+  containerPadding,
+}: XYToIndexProps) => {
+  "worklet";
+  const cols = dynamicNumColumns.value;
+
+  // Work with CENTER coordinates relative to the content box
+  const relX = x - containerPadding;
+  const relY = y - containerPadding;
+
+  const col = Math.floor(relX / (itemWidth + gap));
+  const row = Math.floor(relY / (itemHeight + gap));
+
+  const clampedCol = Math.max(0, Math.min(cols - 1, col));
+  const maxRows = Math.max(1, Math.ceil(order.value.length / cols));
+  const clampedRow = Math.max(0, Math.min(maxRows - 1, row));
+
+  return clampedRow * cols + clampedCol;
+};
+
+export const toIndex1ColFromLiveMidlines = (
+  order: SharedValue<string[]>,
+  positions: Record<string, { y: SharedValue<number> }>,
+  activeKey: SharedValue<string | null>,
+  itemHeight: number,
+  centerY: number,
+  reverse: boolean
+) => {
+  "worklet";
+  const list = order.value.filter((k) => k !== activeKey.value);
+
+  // Sort by actual on-screen Y (top → bottom)
+  list.sort((a, b) => positions[a].y.value - positions[b].y.value);
+
+  // Find visual slot v (0..list.length)
+  let v = 0;
+  for (; v < list.length; v++) {
+    const mid = positions[list[v]].y.value + itemHeight / 2;
+    if (centerY < mid) break;
+  }
+
+  // Map visual slot → array index AFTER removal (reverse aware)
+  const afterRemovalLen = list.length;
+  return reverse ? afterRemovalLen - v : v;
+};

package/src/utils/useGridLayout.ts

@@ -0,0 +1,236 @@
+import { Children, isValidElement, ReactNode, useMemo, useState } from "react";
+import { LayoutChangeEvent } from "react-native";
+import { Gesture } from "react-native-gesture-handler";
+import {
+  AnimatedRef,
+  SharedValue,
+  useAnimatedScrollHandler,
+  useDerivedValue,
+  useSharedValue,
+  withSpring,
+} from "react-native-reanimated";
+import { indexToXY } from "./helpers/indexCalculations";
+import { PanWithLongPress } from "./helpers/gestures/PanWithLongPress";
+
+interface useGridLayoutProps {
+  reverse?: boolean;
+  children: ReactNode;
+  itemWidth: number;
+  itemHeight: number;
+  gap: number;
+  containerPadding: number;
+  longPressMs: number;
+  numColumns?: number;
+  onDragEnd?: (ordered: ChildNode[]) => void;
+  onOrderChange?: (keys: string[]) => void;
+  onDelete?: (key: string) => void;
+  scrollViewRef: AnimatedRef<any>;
+  scrollSpeed: number;
+  scrollThreshold: number;
+  contentPaddingBottom?: number;
+}
+
+export function useGridLayout({
+  reverse,
+  children,
+  itemWidth,
+  itemHeight,
+  gap,
+  containerPadding,
+  longPressMs,
+  numColumns,
+  onDragEnd,
+  onOrderChange,
+  onDelete,
+  scrollViewRef,
+  scrollSpeed,
+  scrollThreshold,
+  contentPaddingBottom = 0,
+}: useGridLayoutProps) {
+  const childArray = Children.toArray(children).filter(isValidElement);
+  const keys = childArray.map((child) => {
+    if (!("key" in child) || child.key == null) {
+      throw new Error("All children must have a unique 'key' prop.");
+    }
+    return String(child.key);
+  });
+
+  const [orderState, setOrderState] = useState(keys);
+
+  const itemsByKey = useMemo(() => {
+    const map: Record<string, ReactNode> = {};
+    childArray.forEach((child) => {
+      map[String(child.key)] = child;
+    });
+    return map;
+  }, [children]);
+
+  const dynamicNumColumns: SharedValue<number> = useSharedValue(
+    numColumns ? numColumns : 1
+  );
+  const order = useSharedValue<string[]>(orderState);
+  const contentW = useSharedValue(0);
+  const viewportH = useSharedValue(0); // **visible height of ScrollView**
+  const activeKey = useSharedValue<string | null>(null);
+  const offsetX = useSharedValue(0);
+  const offsetY = useSharedValue(0);
+  const startX = useSharedValue(0);
+  const startY = useSharedValue(0);
+  const dragMode = useSharedValue(false);
+  const anyItemInDeleteMode = useSharedValue(false); // Global delete mode state
+  const contentH = useSharedValue(0);
+  const scrollOffset = useSharedValue(0);
+
+  const onScroll = useAnimatedScrollHandler({
+    onScroll: (e) => {
+      scrollOffset.value = e.contentOffset.y;
+    },
+  });
+
+  // initial positions (create shared values consistently by data length)
+  const positionsArray = childArray.map((d, i) => {
+    const { x, y } = indexToXY({
+      index: i,
+      itemWidth,
+      itemHeight,
+      dynamicNumColumns,
+      containerPadding,
+      gap,
+    });
+    return {
+      key: d.key,
+      pos: {
+        x: useSharedValue(x),
+        y: useSharedValue(y),
+        active: useSharedValue(0),
+      },
+    };
+  });
+
+  const positions = useMemo(() => {
+    const obj: Record<string, (typeof positionsArray)[number]["pos"]> = {};
+
+    positionsArray.forEach(({ key, pos }) => {
+      obj[key ?? `key-${Math.random().toString(36).slice(2)}`] = pos;
+    });
+
+    return obj;
+  }, [positionsArray]);
+
+  const deleteItem = (key: string) => {
+    setOrderState((prev) => prev.filter((k) => k !== key));
+    order.value = order.value.filter((k) => k !== key);
+    onOrderChange?.([...order.value]);
+    // Call onDelete callback if provided (for both delete button and drop-to-delete)
+    if (onDelete) {
+      onDelete(key);
+    }
+  };
+
+  useDerivedValue(() => {
+    order.value.forEach((key, i) => {
+      if (activeKey.value === key) return; // ⬅️ do not layout the active tile
+
+      const p = positions[key];
+      if (!p) return;
+
+      const displayIndex = reverse ? order.value.length - 1 - i : i;
+
+      const { x, y } = indexToXY({
+        index: displayIndex,
+        itemWidth,
+        itemHeight,
+        dynamicNumColumns,
+        containerPadding,
+        gap,
+      });
+
+      const scale = Math.min(itemWidth, itemHeight) / 100; // 100px baseline
+
+      const damping = 18 * scale;
+      const stiffness = 240 * scale;
+      const mass = Math.max(0.1, scale); // helps stability for tiny items
+
+      p.x.value = withSpring(x, { damping, stiffness, mass });
+      p.y.value = withSpring(y, { damping, stiffness, mass });
+    });
+  });
+
+  // Layout of the ScrollView (viewport) — height we compare against for edge-scrolling
+  const onLayoutScrollView = (e: LayoutChangeEvent) => {
+    viewportH.value = e.nativeEvent.layout.height;
+  };
+
+  // Layout of the content view — width used to compute columns
+  const onLayoutContent = (e: LayoutChangeEvent) => {
+    contentW.value = e.nativeEvent.layout.width;
+    contentH.value = e.nativeEvent.layout.height;
+
+    if (numColumns) {
+      dynamicNumColumns.value = numColumns;
+    } else {
+      const possibleCols = Math.floor(
+        (e.nativeEvent.layout.width - containerPadding * 2 + gap) /
+          (itemWidth + gap)
+      );
+      dynamicNumColumns.value = Math.max(1, possibleCols);
+    }
+  };
+
+  const deleteComponentPosition = useSharedValue<{
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  } | null>(null);
+
+  const composed = Gesture.Simultaneous(
+    PanWithLongPress({
+      contentH,
+      order,
+      dynamicNumColumns,
+      activeKey,
+      offsetX,
+      offsetY,
+      startX,
+      startY,
+      dragMode,
+      positions,
+      itemsByKey,
+      itemWidth,
+      itemHeight,
+      containerPadding,
+      gap,
+      setOrderState,
+      onDragEnd,
+      onOrderChange,
+      scrollViewRef,
+      scrollOffset,
+      viewportH,
+      longPressMs,
+      scrollSpeed,
+      scrollThreshold,
+      reverse,
+      deleteComponentPosition,
+      deleteItem,
+      contentPaddingBottom,
+    })
+  );
+
+  return {
+    itemsByKey,
+    orderState,
+    dragMode,
+    anyItemInDeleteMode,
+    composed,
+    dynamicNumColumns,
+    onLayoutContent,
+    onLayoutScrollView,
+    positions,
+    onScroll,
+    childArray,
+    order,
+    deleteItem,
+    deleteComponentPosition,
+  };
+}