react-native-drax 1.0.0 → 1.1.0

package/src/hooks/useCallbackDispatch.tsx

@@ -33,7 +33,9 @@ import {
 import { isDraggable } from './useSpatialIndex';
 
 /** Style override to strip margins — hover is positioned via translateX/Y */
-const noMargin = {
+/** Styles to strip from the hover content — margins and absolute positioning
+ *  are not needed since hover is positioned via translateX/Y. */
+const hoverResetStyle = {
   margin: 0,
   marginHorizontal: 0,
   marginVertical: 0,
@@ -41,6 +43,11 @@ const noMargin = {
   marginBottom: 0,
   marginLeft: 0,
   marginRight: 0,
+  position: 'relative',
+  left: 0,
+  top: 0,
+  right: undefined,
+  bottom: undefined,
 } as const;
 
 interface CallbackDispatchDeps {
@@ -238,7 +245,7 @@ export const useCallbackDispatch = (deps: CallbackDispatchDeps) => {
           <View style={[
             viewStyle,
             dims && { width: dims.width, height: dims.height },
-            noMargin,
+            hoverResetStyle,
           ]}>
             {draggedEntry.props.children}
           </View>

package/src/hooks/useSortableList.ts

@@ -9,9 +9,11 @@ import {
   defaultAutoScrollJumpRatio,
   defaultListItemLongPressDelay,
 } from '../params';
+import { packGrid } from '../math';
 import type {
   DraxSnapbackTarget,
   DraxViewMeasurements,
+  GridItemSpan,
   Position,
   SortableItemMeasurement,
   SortableListHandle,
@@ -51,6 +53,7 @@ export const useSortableList = <T,>(
     autoScrollBackThreshold = defaultAutoScrollBackThreshold,
     autoScrollForwardThreshold = defaultAutoScrollForwardThreshold,
     animationConfig = 'default',
+    getItemSpan,
     inactiveItemStyle,
     itemEntering,
     itemExiting,
@@ -215,6 +218,108 @@ export const useSortableList = <T,>(
   // Alias for internal use
   const getMeasForOrigIdx = getMeasurementByOriginalIndex;
 
+  /** Get the span for an item at the given original data index */
+  const getSpanForOrigIdx = (origIdx: number): GridItemSpan => {
+    if (!getItemSpan) return { colSpan: 1, rowSpan: 1 };
+    const item = stableData[origIdx];
+    if (item === undefined) return { colSpan: 1, rowSpan: 1 };
+    return getItemSpan(item, origIdx);
+  };
+
+  /**
+   * Derive grid geometry (cell size + gaps) from current measurements.
+   * Only used when getItemSpan is provided and numColumns > 1.
+   */
+  const deriveGridGeometry = (): {
+    cellWidth: number;
+    cellHeight: number;
+    colGap: number;
+    rowGap: number;
+    startX: number;
+    startY: number;
+  } | undefined => {
+    if (!getItemSpan || originalIndexes.length === 0) return undefined;
+
+    const firstOrigIdx = originalIndexes[0];
+    const startMeas = firstOrigIdx !== undefined ? getMeasForOrigIdx(firstOrigIdx) : undefined;
+    if (!startMeas) return undefined;
+
+    // Pack original order to know grid positions for gap derivation
+    const origPacking = packGrid(
+      originalIndexes.length,
+      numColumns,
+      (displayIdx) => getSpanForOrigIdx(originalIndexes[displayIdx]!),
+    );
+
+    // Find cell dimensions from measurements of items with span 1
+    let cellWidth: number | undefined;
+    let cellHeight: number | undefined;
+
+    for (let i = 0; i < originalIndexes.length; i++) {
+      const origIdx = originalIndexes[i]!;
+      const span = getSpanForOrigIdx(origIdx);
+      const meas = getMeasForOrigIdx(origIdx);
+      if (!meas) continue;
+      if (span.colSpan === 1 && cellWidth === undefined) cellWidth = meas.width;
+      if (span.rowSpan === 1 && cellHeight === undefined) cellHeight = meas.height;
+      if (cellWidth !== undefined && cellHeight !== undefined) break;
+    }
+
+    // Fallback: derive from first item divided by its span
+    if (cellWidth === undefined || cellHeight === undefined) {
+      const firstSpan = getSpanForOrigIdx(firstOrigIdx!);
+      if (cellWidth === undefined) cellWidth = startMeas.width / firstSpan.colSpan;
+      if (cellHeight === undefined) cellHeight = startMeas.height / firstSpan.rowSpan;
+    }
+
+    // Derive column gap from two items at different grid columns
+    let colGap = 0;
+    for (let i = 0; i < origPacking.positions.length && colGap === 0; i++) {
+      for (let j = i + 1; j < origPacking.positions.length; j++) {
+        const pi = origPacking.positions[i]!;
+        const pj = origPacking.positions[j]!;
+        if (pi.col !== pj.col) {
+          const mi = getMeasForOrigIdx(originalIndexes[i]!);
+          const mj = getMeasForOrigIdx(originalIndexes[j]!);
+          if (mi && mj) {
+            const colDiff = Math.abs(pj.col - pi.col);
+            const xDiff = Math.abs(mj.x - mi.x);
+            colGap = xDiff / colDiff - cellWidth;
+            break;
+          }
+        }
+      }
+    }
+
+    // Derive row gap from two items at different grid rows
+    let rowGap = 0;
+    for (let i = 0; i < origPacking.positions.length && rowGap === 0; i++) {
+      for (let j = i + 1; j < origPacking.positions.length; j++) {
+        const pi = origPacking.positions[i]!;
+        const pj = origPacking.positions[j]!;
+        if (pi.row !== pj.row) {
+          const mi = getMeasForOrigIdx(originalIndexes[i]!);
+          const mj = getMeasForOrigIdx(originalIndexes[j]!);
+          if (mi && mj) {
+            const rowDiff = Math.abs(pj.row - pi.row);
+            const yDiff = Math.abs(mj.y - mi.y);
+            rowGap = yDiff / rowDiff - cellHeight;
+            break;
+          }
+        }
+      }
+    }
+
+    return {
+      cellWidth,
+      cellHeight,
+      colGap: Math.max(colGap, 0),
+      rowGap: Math.max(rowGap, 0),
+      startX: startMeas.x,
+      startY: startMeas.y,
+    };
+  };
+
   // ── Shift application (merges ghost shifts for cross-container) ──
 
   const applyShifts = (shifts: Record<string, Position> | undefined) => {
@@ -309,7 +414,26 @@ export const useSortableList = <T,>(
         }
         displaySlot++;
       }
+    } else if (getItemSpan) {
+      // ── Mixed-size grid: bin-pack items into a 2D occupancy grid ──
+      const geo = deriveGridGeometry();
+      if (!geo) return undefined;
+
+      const packing = packGrid(
+        order.length,
+        numColumns,
+        (displayIdx) => getSpanForOrigIdx(order[displayIdx]!),
+      );
+
+      for (let i = 0; i < order.length; i++) {
+        const gp = packing.positions[i]!;
+        targetPositions.set(i, {
+          x: geo.startX + gp.col * (geo.cellWidth + geo.colGap),
+          y: geo.startY + gp.row * (geo.cellHeight + geo.rowGap),
+        });
+      }
     } else {
+      // ── Uniform grid: col = i % numColumns ──
       let cursorY = startMeas.y;
       const colXPositions: number[] = [];
       for (let c = 0; c < numColumns && c < originalIndexes.length; c++) {
@@ -652,8 +776,60 @@ export const useSortableList = <T,>(
         cursor += size + gap;
       }
       return itemCount - 1;
+    } else if (getItemSpan) {
+      // ── Mixed-size grid: map finger to cell, then to display index ──
+      const geo = deriveGridGeometry();
+      if (!geo) return draggedDisplayIndexRef.current ?? 0;
+
+      // Pack original order (stable positions during drag)
+      const origPacking = packGrid(
+        itemCount,
+        numColumns,
+        (displayIdx) => getSpanForOrigIdx(originalIndexes[displayIdx]!),
+      );
+
+      // Find which grid cell the finger is in
+      const cellCol = Math.max(0, Math.min(
+        Math.floor((contentPos.x - geo.startX + geo.colGap / 2) / (geo.cellWidth + geo.colGap)),
+        numColumns - 1,
+      ));
+      const cellRow = Math.max(0, Math.floor(
+        (contentPos.y - geo.startY + geo.rowGap / 2) / (geo.cellHeight + geo.rowGap),
+      ));
+
+      // Build cell → display index map (all cells each item occupies)
+      const cellOwner = new Map<string, number>();
+      for (let i = 0; i < origPacking.positions.length && i < itemCount; i++) {
+        const pos = origPacking.positions[i]!;
+        const span = getSpanForOrigIdx(originalIndexes[i]!);
+        for (let r = 0; r < span.rowSpan; r++) {
+          for (let c = 0; c < span.colSpan; c++) {
+            cellOwner.set(`${pos.row + r},${pos.col + c}`, i);
+          }
+        }
+      }
+
+      // Direct cell hit
+      const owner = cellOwner.get(`${cellRow},${cellCol}`);
+      if (owner !== undefined) return Math.min(owner, pending.length - 1);
+
+      // Empty cell — find nearest item by center distance
+      let minDist = Infinity;
+      let nearest = 0;
+      for (let i = 0; i < origPacking.positions.length && i < itemCount; i++) {
+        const meas = measurements[i];
+        if (!meas) continue;
+        const cx = meas.x + meas.width / 2;
+        const cy = meas.y + meas.height / 2;
+        const dist = Math.abs(contentPos.x - cx) + Math.abs(contentPos.y - cy);
+        if (dist < minDist) {
+          minDist = dist;
+          nearest = i;
+        }
+      }
+      return Math.min(nearest, pending.length - 1);
     } else {
-      // Multi-column grid — find row then column
+      // ── Uniform grid — find row then column ──
       const firstMeas = measurements[0];
       if (!firstMeas) return 0;
       let cursorY = firstMeas.y;
@@ -750,8 +926,26 @@ export const useSortableList = <T,>(
       targetPos = horizontal
         ? { x: cursor, y: snapStartMeas.y }
         : { x: snapStartMeas.x, y: cursor };
+    } else if (getItemSpan) {
+      // Mixed-size grid — pack items and find target position
+      const geo = deriveGridGeometry();
+      if (!geo) return DraxSnapbackTargetPreset.Default;
+
+      const packing = packGrid(
+        pending.length,
+        numColumns,
+        (di) => getSpanForOrigIdx(pending[di]!),
+      );
+
+      const gp = packing.positions[displayIdx];
+      if (!gp) return DraxSnapbackTargetPreset.Default;
+
+      targetPos = {
+        x: geo.startX + gp.col * (geo.cellWidth + geo.colGap),
+        y: geo.startY + gp.row * (geo.cellHeight + geo.rowGap),
+      };
     } else {
-      // Multi-column grid
+      // Uniform grid
       let cursorY = snapStartMeas.y;
       const targetRow = Math.floor(displayIdx / numColumns);
       const targetCol = displayIdx % numColumns;
@@ -801,6 +995,7 @@ export const useSortableList = <T,>(
     longPressDelay,
     lockToMainAxis,
     animationConfig,
+    getItemSpan,
     inactiveItemStyle,
     itemEntering,
     itemExiting,

package/src/index.ts

@@ -25,8 +25,8 @@ export { useSortableList } from './hooks/useSortableList';
 export { useSortableBoard } from './hooks/useSortableBoard';
 
 // ── Public Utilities ─────────────────────────────────────────────────
-export { snapToAlignment } from './math';
-export type { SnapAlignment } from './math';
+export { snapToAlignment, packGrid } from './math';
+export type { SnapAlignment, GridPackResult } from './math';
 
 // ── Public Types ─────────────────────────────────────────────────────
 export type {
@@ -75,6 +75,7 @@ export type {
   // Sortable types
   UseSortableListOptions,
   SortableListHandle,
+  GridItemSpan,
 } from './types';
 export type { SortableItemContextValue } from './SortableItemContext';
 export type {

package/src/math.ts

@@ -1,5 +1,6 @@
 import type {
   DraxViewMeasurements,
+  GridItemSpan,
   HitTestResult,
   Position,
   SpatialEntry,
@@ -249,3 +250,84 @@ export const snapToAlignment = (
 
   return { x: x + offset.x, y: y + offset.y };
 };
+
+// ─── Grid Packing ───────────────────────────────────────────────────────
+
+/** Result of packing items into a grid */
+export interface GridPackResult {
+  /** Grid position (row, col) for each item, in input order */
+  positions: { row: number; col: number }[];
+  /** Total number of rows in the packed grid */
+  totalRows: number;
+}
+
+/**
+ * Pack items into a grid with the given number of columns.
+ * Items are placed left-to-right, top-to-bottom, filling the first
+ * available position where the item's span fits.
+ *
+ * This is the same algorithm used by mobile home screens: scan cells
+ * in reading order and place each item at the first slot that can
+ * accommodate its colSpan × rowSpan.
+ *
+ * @param count Number of items to pack
+ * @param numColumns Number of columns in the grid
+ * @param getSpan Returns the span for the item at the given index
+ */
+export function packGrid(
+  count: number,
+  numColumns: number,
+  getSpan: (index: number) => GridItemSpan,
+): GridPackResult {
+  // Dynamic 2D occupancy grid — rows are added as needed
+  const occupied: boolean[][] = [];
+  const positions: { row: number; col: number }[] = [];
+  let maxRow = 0;
+
+  function ensureRow(row: number) {
+    while (occupied.length <= row) {
+      occupied.push(new Array<boolean>(numColumns).fill(false));
+    }
+  }
+
+  function isAvailable(row: number, col: number, cs: number, rs: number): boolean {
+    if (col + cs > numColumns) return false;
+    for (let r = row; r < row + rs; r++) {
+      ensureRow(r);
+      for (let c = col; c < col + cs; c++) {
+        if (occupied[r]![c]) return false;
+      }
+    }
+    return true;
+  }
+
+  function markOccupied(row: number, col: number, cs: number, rs: number) {
+    for (let r = row; r < row + rs; r++) {
+      ensureRow(r);
+      for (let c = col; c < col + cs; c++) {
+        occupied[r]![c] = true;
+      }
+    }
+    maxRow = Math.max(maxRow, row + rs - 1);
+  }
+
+  for (let i = 0; i < count; i++) {
+    const span = getSpan(i);
+    const cs = Math.max(1, Math.min(span.colSpan, numColumns));
+    const rs = Math.max(1, span.rowSpan);
+    let placed = false;
+    for (let r = 0; !placed; r++) {
+      ensureRow(r);
+      for (let c = 0; c <= numColumns - cs; c++) {
+        if (isAvailable(r, c, cs, rs)) {
+          markOccupied(r, c, cs, rs);
+          positions.push({ row: r, col: c });
+          placed = true;
+          break;
+        }
+      }
+    }
+  }
+
+  return { positions, totalRows: count > 0 ? maxRow + 1 : 0 };
+}

package/src/types.ts

@@ -39,6 +39,14 @@ export interface ViewDimensions {
   height: number;
 }
 
+/** Grid span for a sortable item (columns and rows it occupies) */
+export interface GridItemSpan {
+  /** Number of columns this item spans. @default 1 */
+  colSpan: number;
+  /** Number of rows this item spans. @default 1 */
+  rowSpan: number;
+}
+
 /** Measurements of a Drax view for bounds checking purposes */
 export interface DraxViewMeasurements extends Position, ViewDimensions {
   /** 1 when DraxView auto-detected transform-based positioning
@@ -724,6 +732,10 @@ export interface UseSortableListOptions<T> {
   autoScrollForwardThreshold?: number;
   /** Animation config for item shift animations. @default 'default' */
   animationConfig?: SortableAnimationConfig;
+  /** Returns the grid span for an item. Enables non-uniform grid layout
+   *  where items can span multiple columns and/or rows.
+   *  Only used when numColumns > 1. */
+  getItemSpan?: (item: T, index: number) => GridItemSpan;
   /** Style applied to all non-dragged items while a drag is active.
    *  Use for dimming/scaling inactive items (e.g., `{ opacity: 0.5 }`). */
   inactiveItemStyle?: ViewStyle;
@@ -762,6 +774,8 @@ export interface SortableListInternal<T> {
   longPressDelay: number;
   lockToMainAxis: boolean;
   animationConfig: SortableAnimationConfig;
+  /** Returns the grid span for an item (non-uniform grid layout) */
+  getItemSpan?: (item: T, index: number) => GridItemSpan;
   inactiveItemStyle?: ViewStyle;
   itemEntering?: EntryOrExitLayoutType;
   itemExiting?: EntryOrExitLayoutType;