react-native-swappable-grid 1.0.0

package/README.md

@@ -0,0 +1,284 @@
+# react-native-swappable-grid
+
+A powerful React Native component for creating draggable, swappable grid layouts with smooth animations, reordering, and delete functionality.
+
+## Features
+
+- 🎯 **Drag & Drop**: Long press to drag and reorder items in a grid layout
+- 📐 **Flexible Layout**: Automatic column calculation or fixed number of columns
+- 🎨 **Smooth Animations**: Optional wiggle animation during drag mode
+- 🗑️ **Delete Support**: Built-in hold-to-delete or custom delete component
+- ➕ **Trailing Components**: Support for additional components (e.g., "Add" button)
+- 📜 **Auto-scroll**: Automatic scrolling when dragging near edges
+- 🔄 **Order Tracking**: Callbacks for order changes and drag end events
+- ⚡ **Performance**: Built with React Native Reanimated and Gesture Handler for 60fps animations
+
+## Installation
+
+```bash
+npm install react-native-swappable-grid
+# or
+yarn add react-native-swappable-grid
+```
+
+### Peer Dependencies
+
+This package requires the following peer dependencies:
+
+```bash
+npm install react react-native react-native-gesture-handler react-native-reanimated
+# or
+yarn add react react-native react-native-gesture-handler react-native-reanimated
+```
+
+**Important**: Make sure to follow the setup instructions for:
+
+- [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/installation)
+- [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/installation)
+
+## Basic Usage
+
+```tsx
+import React, { useState } from "react";
+import { View, Text } from "react-native";
+import { SwappableGrid } from "react-native-swappable-grid";
+
+const MyComponent = () => {
+  const [items, setItems] = useState([
+    { id: "1", title: "Item 1" },
+    { id: "2", title: "Item 2" },
+    { id: "3", title: "Item 3" },
+  ]);
+
+  return (
+    <SwappableGrid
+      itemWidth={100}
+      itemHeight={100}
+      numColumns={3}
+      gap={8}
+      onOrderChange={(keys) => {
+        // Reorder items based on new key order
+        const newOrder = keys
+          .map((key) => items.find((item) => item.id === key))
+          .filter(Boolean);
+        setItems(newOrder);
+      }}
+    >
+      {items.map((item) => (
+        <View
+          key={item.id}
+          style={{ backgroundColor: "#ccc", borderRadius: 8 }}
+        >
+          <Text>{item.title}</Text>
+        </View>
+      ))}
+    </SwappableGrid>
+  );
+};
+```
+
+## API Reference
+
+### SwappableGrid Props
+
+| Prop                     | Type                                    | Required | Default | Description                                                                                                |
+| ------------------------ | --------------------------------------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------- |
+| `children`               | `ReactNode`                             | ✅       | -       | The child components to render in the grid. Each child should have a unique key.                           |
+| `itemWidth`              | `number`                                | ✅       | -       | Width of each grid item in pixels                                                                          |
+| `itemHeight`             | `number`                                | ✅       | -       | Height of each grid item in pixels                                                                         |
+| `gap`                    | `number`                                | ❌       | `8`     | Gap between grid items in pixels                                                                           |
+| `containerPadding`       | `number`                                | ❌       | `8`     | Padding around the container in pixels                                                                     |
+| `longPressMs`            | `number`                                | ❌       | `300`   | Duration in milliseconds to hold before drag starts                                                        |
+| `numColumns`             | `number`                                | ❌       | Auto    | Number of columns in the grid. If not provided, will be calculated automatically based on container width  |
+| `wiggle`                 | `{ duration: number; degrees: number }` | ❌       | -       | Wiggle animation configuration when items are in drag mode or delete mode                                  |
+| `onDragEnd`              | `(ordered: ChildNode[]) => void`        | ❌       | -       | Callback fired when drag ends, providing the ordered array of child nodes                                  |
+| `onOrderChange`          | `(keys: string[]) => void`              | ❌       | -       | Callback fired when the order changes, providing an array of keys in the new order                         |
+| `onDelete`               | `(key: string) => void`                 | ❌       | -       | Callback fired when an item is deleted, providing the key of the deleted item                              |
+| `dragSizeIncreaseFactor` | `number`                                | ❌       | `1.06`  | Factor by which the dragged item scales up                                                                 |
+| `scrollSpeed`            | `number`                                | ❌       | `10`    | Speed of auto-scrolling when dragging near edges                                                           |
+| `scrollThreshold`        | `number`                                | ❌       | `100`   | Distance from edge in pixels that triggers auto-scroll                                                     |
+| `style`                  | `StyleProp<ViewStyle>`                  | ❌       | -       | Custom style for the ScrollView container                                                                  |
+| `trailingComponent`      | `ReactNode`                             | ❌       | -       | Component to render after all grid items (e.g., an "Add" button)                                           |
+| `deleteComponent`        | `ReactNode`                             | ❌       | -       | Component to render as a delete target (shown when dragging). If provided, disables hold-to-delete feature |
+| `deleteComponentStyle`   | `StyleProp<ViewStyle>`                  | ❌       | -       | Custom style for the delete component. If provided, allows custom positioning                              |
+| `reverse`                | `boolean`                               | ❌       | `false` | If true, reverses the order of items (right-to-left, bottom-to-top)                                        |
+
+### SwappableGridRef
+
+The component can be used with a ref to access imperative methods:
+
+```tsx
+const gridRef = useRef<SwappableGridRef>(null);
+
+<SwappableGrid ref={gridRef} ... />
+
+// Cancel delete mode programmatically
+gridRef.current?.cancelDeleteMode();
+```
+
+| Method               | Description                                                     |
+| -------------------- | --------------------------------------------------------------- |
+| `cancelDeleteMode()` | Cancels the delete mode if any item is currently in delete mode |
+
+## Examples
+
+### With Wiggle Animation
+
+```tsx
+<SwappableGrid
+  itemWidth={100}
+  itemHeight={100}
+  numColumns={3}
+  wiggle={{ duration: 200, degrees: 3 }}
+  onOrderChange={(keys) => console.log("New order:", keys)}
+>
+  {items.map((item) => (
+    <View key={item.id}>{item.content}</View>
+  ))}
+</SwappableGrid>
+```
+
+### With Delete Functionality (Hold-to-Delete)
+
+```tsx
+<SwappableGrid
+  itemWidth={100}
+  itemHeight={100}
+  numColumns={3}
+  onDelete={(key) => {
+    setItems(items.filter((item) => item.id !== key));
+  }}
+>
+  {items.map((item) => (
+    <View key={item.id}>{item.content}</View>
+  ))}
+</SwappableGrid>
+```
+
+### With Delete Component
+
+```tsx
+<SwappableGrid
+  itemWidth={100}
+  itemHeight={100}
+  numColumns={3}
+  deleteComponent={
+    <View
+      style={{
+        backgroundColor: "red",
+        borderRadius: 8,
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Text style={{ color: "white" }}>Drop to Delete</Text>
+    </View>
+  }
+  onDelete={(key) => {
+    setItems(items.filter((item) => item.id !== key));
+  }}
+>
+  {items.map((item) => (
+    <View key={item.id}>{item.content}</View>
+  ))}
+</SwappableGrid>
+```
+
+### With Trailing Component (Add Button)
+
+```tsx
+<SwappableGrid
+  itemWidth={100}
+  itemHeight={100}
+  numColumns={3}
+  trailingComponent={
+    <Pressable
+      onPress={() => addNewItem()}
+      style={{
+        backgroundColor: "#007AFF",
+        borderRadius: 8,
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Text style={{ color: "white", fontSize: 24 }}>+</Text>
+    </Pressable>
+  }
+>
+  {items.map((item) => (
+    <View key={item.id}>{item.content}</View>
+  ))}
+</SwappableGrid>
+```
+
+### Auto-calculated Columns
+
+```tsx
+<SwappableGrid
+  itemWidth={100}
+  itemHeight={100}
+  gap={12}
+  containerPadding={16}
+  // numColumns not provided - will be calculated automatically
+  onOrderChange={(keys) => console.log("New order:", keys)}
+>
+  {items.map((item) => (
+    <View key={item.id}>{item.content}</View>
+  ))}
+</SwappableGrid>
+```
+
+### Custom Delete Component Position
+
+```tsx
+<SwappableGrid
+  itemWidth={100}
+  itemHeight={100}
+  numColumns={3}
+  deleteComponent={
+    <View style={{ backgroundColor: "red", borderRadius: 8 }}>
+      <Text>Delete</Text>
+    </View>
+  }
+  deleteComponentStyle={{
+    position: "absolute",
+    top: 20,
+    right: 20,
+    width: 100,
+    height: 100,
+  }}
+  onDelete={(key) => {
+    setItems(items.filter((item) => item.id !== key));
+  }}
+>
+  {items.map((item) => (
+    <View key={item.id}>{item.content}</View>
+  ))}
+</SwappableGrid>
+```
+
+## How It Works
+
+1. **Long Press**: Hold an item for `longPressMs` milliseconds to enter drag mode
+2. **Drag**: Move the item to swap positions with other items
+3. **Auto-scroll**: When dragging near edges, the grid automatically scrolls
+4. **Delete**:
+   - **Hold-to-delete**: Hold an item still for 1 second to enter delete mode (shows delete button)
+   - **Delete component**: Drag an item to the delete component to delete it
+5. **Order Change**: The `onOrderChange` callback fires whenever items are reordered
+
+## Notes
+
+- Each child component **must** have a unique `key` prop
+- The component uses `react-native-reanimated` for smooth 60fps animations
+- When `deleteComponent` is provided, the hold-to-delete feature is automatically disabled
+- The trailing component is positioned after all grid items
+- The delete component appears only when dragging (if provided)
+
+## License
+
+ISC
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.

package/lib/commonjs/ChildWrapper.js

@@ -0,0 +1,320 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ChildWrapper;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function ChildWrapper({
+  position,
+  itemWidth,
+  itemHeight,
+  dragMode,
+  anyItemInDeleteMode,
+  children,
+  wiggle,
+  dragSizeIncreaseFactor,
+  onDelete,
+  disableHoldToDelete = false
+}) {
+  const rotation = (0, _reactNativeReanimated.useSharedValue)(0);
+  const currentWiggleMode = (0, _reactNativeReanimated.useSharedValue)("none");
+  const previousDragMode = (0, _reactNativeReanimated.useSharedValue)(false);
+  const showDelete = (0, _reactNativeReanimated.useSharedValue)(false);
+  const deleteModeActive = (0, _reactNativeReanimated.useSharedValue)(false); // Persistent delete mode state
+  const stillTimer = (0, _reactNativeReanimated.useSharedValue)(0);
+  const lastX = (0, _reactNativeReanimated.useSharedValue)(position.x.value);
+  const lastY = (0, _reactNativeReanimated.useSharedValue)(position.y.value);
+  const frameCounter = (0, _reactNativeReanimated.useSharedValue)(0);
+  const wasReleasedAfterDeleteMode = (0, _reactNativeReanimated.useSharedValue)(false); // Track if item was released after entering delete mode
+
+  // Timer logic that runs every frame via useDerivedValue
+  (0, _reactNativeReanimated.useDerivedValue)(() => {
+    "worklet";
+
+    frameCounter.value = frameCounter.value + 1;
+
+    // If hold-to-delete is disabled, skip all delete mode logic
+    if (disableHoldToDelete) {
+      deleteModeActive.value = false;
+      showDelete.value = false;
+      stillTimer.value = 0;
+      anyItemInDeleteMode.value = false;
+      return;
+    }
+    const isDragging = dragMode.value;
+    const isActive = position.active.value > 0.5;
+    const x = position.x.value;
+    const y = position.y.value;
+
+    // Track dragMode changes for detecting touches outside
+    const dragModeJustEnded = previousDragMode.value && !isDragging;
+    previousDragMode.value = isDragging;
+
+    // If delete mode is active, keep it active unless:
+    // 1. Another item becomes active (dragMode true but this item not active)
+    // 2. This item becomes active again AFTER it was released (user starts dragging it again)
+    // 3. User touches outside (dragMode becomes false and no item is active)
+    if (deleteModeActive.value) {
+      // Check if item was released (became inactive)
+      if (!isActive && !wasReleasedAfterDeleteMode.value) {
+        wasReleasedAfterDeleteMode.value = true;
+      }
+      if (isDragging && !isActive) {
+        // Another item is being dragged, exit delete mode
+        deleteModeActive.value = false;
+        anyItemInDeleteMode.value = false; // Clear global delete mode
+        showDelete.value = false;
+        stillTimer.value = 0;
+        wasReleasedAfterDeleteMode.value = false;
+      } else if (isActive && wasReleasedAfterDeleteMode.value) {
+        // This item became active again AFTER it was released, exit delete mode
+        deleteModeActive.value = false;
+        anyItemInDeleteMode.value = false; // Clear global delete mode
+        showDelete.value = false;
+        stillTimer.value = 0;
+        wasReleasedAfterDeleteMode.value = false;
+      } else if (!isDragging && !isActive) {
+        // Keep delete mode active (waiting for user interaction)
+        // The tap gesture handler in SwappableGrid will cancel it when user taps outside
+        showDelete.value = true;
+      } else {
+        // Keep delete mode active (item can still be held or released)
+        showDelete.value = true;
+      }
+      return;
+    }
+
+    // Reset release tracking when not in delete mode
+    wasReleasedAfterDeleteMode.value = false;
+
+    // If not in drag mode or not active, reset timer
+    if (!isDragging || !isActive) {
+      stillTimer.value = 0;
+      return;
+    }
+
+    // Item is active (being held down) - check if it's still
+    // Check if position has changed significantly (more than 10px threshold)
+    const moved = Math.abs(x - lastX.value) > 10 || Math.abs(y - lastY.value) > 10;
+    if (moved) {
+      // Reset timer if item moved while being held
+      stillTimer.value = 0;
+      lastX.value = x;
+      lastY.value = y;
+      return;
+    }
+
+    // Initialize last position on first frame when active
+    if (stillTimer.value === 0) {
+      lastX.value = x;
+      lastY.value = y;
+    }
+
+    // If the tile hasn't moved significantly while being held → increment timer
+    // Increment by ~16ms per frame (assuming 60fps)
+    stillTimer.value += 16;
+
+    // Enter delete mode after 1 second (1000ms) of being held still
+    if (stillTimer.value >= 1000) {
+      deleteModeActive.value = true;
+      anyItemInDeleteMode.value = true; // Set global delete mode
+      showDelete.value = true;
+      wasReleasedAfterDeleteMode.value = false; // Reset on entry
+    }
+  });
+  const deleteButtonStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    // Show delete button when delete mode is active (persists after release)
+    const shouldShow = showDelete.value;
+    return {
+      opacity: shouldShow ? 1 : 0,
+      pointerEvents: shouldShow ? "auto" : "none",
+      transform: [{
+        scale: (0, _reactNativeReanimated.withTiming)(shouldShow ? 1 : 0.6, {
+          duration: 120
+        })
+      }]
+    };
+  });
+
+  // Watch for when global delete mode is cancelled (user tapped outside)
+  (0, _reactNativeReanimated.useAnimatedReaction)(() => anyItemInDeleteMode.value, (current, previous) => {
+    "worklet";
+
+    // If delete mode was cancelled globally (user tapped outside)
+    if (previous && !current && deleteModeActive.value) {
+      deleteModeActive.value = false;
+      showDelete.value = false;
+      stillTimer.value = 0;
+      wasReleasedAfterDeleteMode.value = false;
+    }
+  });
+
+  // Wiggle animation — triggers on editMode/active changes and delete mode
+  (0, _reactNativeReanimated.useAnimatedReaction)(() => ({
+    isEditMode: dragMode.value,
+    isActive: position.active.value > 0.5,
+    inDeleteMode: deleteModeActive.value,
+    anyInDeleteMode: anyItemInDeleteMode.value
+  }), ({
+    isEditMode,
+    isActive,
+    inDeleteMode,
+    anyInDeleteMode
+  }) => {
+    if (!wiggle) {
+      if (currentWiggleMode.value !== "none") {
+        (0, _reactNativeReanimated.cancelAnimation)(rotation);
+        currentWiggleMode.value = "none";
+      }
+      rotation.value = (0, _reactNativeReanimated.withTiming)(0, {
+        duration: 150
+      });
+      return;
+    }
+
+    // Determine the target wiggle mode
+    let targetMode = "none";
+    if (inDeleteMode) {
+      targetMode = "delete";
+    } else if (anyInDeleteMode && !isActive) {
+      targetMode = "normal";
+    } else if (isEditMode && !isActive) {
+      targetMode = "normal";
+    }
+
+    // Only restart animation if mode changed
+    if (currentWiggleMode.value === targetMode) {
+      return; // Already in the correct mode, don't restart
+    }
+    const previousMode = currentWiggleMode.value;
+    currentWiggleMode.value = targetMode;
+
+    // Cancel current animation
+    (0, _reactNativeReanimated.cancelAnimation)(rotation);
+
+    // If this item is in delete mode, wiggle more (2x degrees, faster)
+    if (targetMode === "delete") {
+      const deleteWiggleDegrees = wiggle.degrees * 2;
+      const deleteWiggleDuration = wiggle.duration * 0.7; // Faster wiggle
+
+      // If transitioning from normal wiggle, preserve the phase by scaling
+      if (previousMode === "normal") {
+        const currentRot = rotation.value;
+        const scaleFactor = deleteWiggleDegrees / wiggle.degrees;
+        rotation.value = currentRot * scaleFactor;
+      }
+      rotation.value = (0, _reactNativeReanimated.withRepeat)((0, _reactNativeReanimated.withSequence)((0, _reactNativeReanimated.withTiming)(deleteWiggleDegrees, {
+        duration: deleteWiggleDuration,
+        easing: _reactNativeReanimated.Easing.linear
+      }), (0, _reactNativeReanimated.withTiming)(-deleteWiggleDegrees, {
+        duration: deleteWiggleDuration,
+        easing: _reactNativeReanimated.Easing.linear
+      })), -1,
+      // infinite
+      true);
+    }
+    // Normal wiggle (when dragging but not this item, or any item in delete mode)
+    else if (targetMode === "normal") {
+      // If transitioning from delete wiggle, preserve the phase by scaling
+      if (previousMode === "delete") {
+        const currentRot = rotation.value;
+        const scaleFactor = wiggle.degrees / (wiggle.degrees * 2);
+        rotation.value = currentRot * scaleFactor;
+      }
+      rotation.value = (0, _reactNativeReanimated.withRepeat)((0, _reactNativeReanimated.withSequence)((0, _reactNativeReanimated.withTiming)(wiggle.degrees, {
+        duration: wiggle.duration,
+        easing: _reactNativeReanimated.Easing.linear
+      }), (0, _reactNativeReanimated.withTiming)(-wiggle.degrees, {
+        duration: wiggle.duration,
+        easing: _reactNativeReanimated.Easing.linear
+      })), -1,
+      // infinite
+      true);
+    }
+    // Stop wiggling
+    else {
+      rotation.value = (0, _reactNativeReanimated.withTiming)(0, {
+        duration: 150
+      });
+    }
+  }, [dragMode, position.active, deleteModeActive, anyItemInDeleteMode]);
+  const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    const scale = position.active.value ? (0, _reactNativeReanimated.withTiming)(dragSizeIncreaseFactor, {
+      duration: 120
+    }) : (0, _reactNativeReanimated.withTiming)(1, {
+      duration: 120
+    });
+    return {
+      position: "absolute",
+      width: itemWidth,
+      height: itemHeight,
+      transform: [{
+        translateX: position.x.value
+      }, {
+        translateY: position.y.value
+      }, {
+        scale: scale
+      }, {
+        rotate: `${rotation.value}deg`
+      }],
+      zIndex: position.active.value ? 2 : 0
+    };
+  });
+
+  // Track delete mode on JS thread for conditional rendering
+  const [isInDeleteMode, setIsInDeleteMode] = (0, _react.useState)(false);
+  (0, _reactNativeReanimated.useAnimatedReaction)(() => deleteModeActive.value, current => {
+    (0, _reactNativeReanimated.runOnJS)(setIsInDeleteMode)(current);
+  });
+  const handleDelete = () => {
+    // Exit delete mode when delete button is pressed
+    deleteModeActive.value = false;
+    anyItemInDeleteMode.value = false; // Clear global delete mode
+    showDelete.value = false;
+    stillTimer.value = 0;
+    wasReleasedAfterDeleteMode.value = false;
+    if (onDelete) {
+      onDelete();
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
+    style: animatedStyle,
+    pointerEvents: "box-none"
+  }, isInDeleteMode && /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
+    onPress: handleDelete,
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      width: itemWidth,
+      height: itemHeight,
+      zIndex: 2
+    }
+  }), /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
+    style: [{
+      position: "absolute",
+      top: itemHeight * 0.01,
+      right: itemWidth * 0.04,
+      width: itemWidth * 0.2,
+      height: itemHeight * 0.2,
+      borderRadius: 12,
+      justifyContent: "center",
+      alignItems: "center",
+      zIndex: 3
+    }, deleteButtonStyle],
+    pointerEvents: "none"
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: {
+      fontSize: itemWidth * 0.2,
+      color: "black",
+      fontWeight: 500
+    }
+  }, "\xD7")), children);
+}
+//# sourceMappingURL=ChildWrapper.js.map

package/lib/commonjs/ChildWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ChildWrapper","position","itemWidth","itemHeight","dragMode","anyItemInDeleteMode","children","wiggle","dragSizeIncreaseFactor","onDelete","disableHoldToDelete","rotation","useSharedValue","currentWiggleMode","previousDragMode","showDelete","deleteModeActive","stillTimer","lastX","x","value","lastY","y","frameCounter","wasReleasedAfterDeleteMode","useDerivedValue","isDragging","isActive","active","dragModeJustEnded","moved","Math","abs","deleteButtonStyle","useAnimatedStyle","shouldShow","opacity","pointerEvents","transform","scale","withTiming","duration","useAnimatedReaction","current","previous","isEditMode","inDeleteMode","anyInDeleteMode","cancelAnimation","targetMode","previousMode","deleteWiggleDegrees","degrees","deleteWiggleDuration","currentRot","scaleFactor","withRepeat","withSequence","easing","Easing","linear","animatedStyle","width","height","translateX","translateY","rotate","zIndex","isInDeleteMode","setIsInDeleteMode","useState","runOnJS","handleDelete","createElement","View","style","Pressable","onPress","top","left","right","bottom","borderRadius","justifyContent","alignItems","Text","fontSize","color","fontWeight"],"sources":["ChildWrapper.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { Text, View, Pressable } from \"react-native\";\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useAnimatedReaction,\n  useSharedValue,\n  withRepeat,\n  withSequence,\n  withTiming,\n  SharedValue,\n  useDerivedValue,\n  cancelAnimation,\n  runOnJS,\n} from \"react-native-reanimated\";\n\ntype Props = {\n  position: {\n    x: SharedValue<number>;\n    y: SharedValue<number>;\n    active: SharedValue<number>;\n  };\n  itemWidth: number;\n  itemHeight: number;\n  dragMode: SharedValue<boolean>;\n  anyItemInDeleteMode: SharedValue<boolean>;\n  children: React.ReactNode;\n  wiggle?: { duration: number; degrees: number };\n  dragSizeIncreaseFactor: number;\n  onDelete?: () => void;\n  disableHoldToDelete?: boolean; // If true, disable the hold-to-delete feature\n};\n\nexport default function ChildWrapper({\n  position,\n  itemWidth,\n  itemHeight,\n  dragMode,\n  anyItemInDeleteMode,\n  children,\n  wiggle,\n  dragSizeIncreaseFactor,\n  onDelete,\n  disableHoldToDelete = false,\n}: Props) {\n  const rotation = useSharedValue(0);\n  const currentWiggleMode = useSharedValue<\"none\" | \"normal\" | \"delete\">(\n    \"none\"\n  );\n  const previousDragMode = useSharedValue(false);\n\n  const showDelete = useSharedValue(false);\n  const deleteModeActive = useSharedValue(false); // Persistent delete mode state\n  const stillTimer = useSharedValue(0);\n  const lastX = useSharedValue(position.x.value);\n  const lastY = useSharedValue(position.y.value);\n  const frameCounter = useSharedValue(0);\n  const wasReleasedAfterDeleteMode = useSharedValue(false); // Track if item was released after entering delete mode\n\n  // Timer logic that runs every frame via useDerivedValue\n  useDerivedValue(() => {\n    \"worklet\";\n    frameCounter.value = frameCounter.value + 1;\n\n    // If hold-to-delete is disabled, skip all delete mode logic\n    if (disableHoldToDelete) {\n      deleteModeActive.value = false;\n      showDelete.value = false;\n      stillTimer.value = 0;\n      anyItemInDeleteMode.value = false;\n      return;\n    }\n\n    const isDragging = dragMode.value;\n    const isActive = position.active.value > 0.5;\n    const x = position.x.value;\n    const y = position.y.value;\n\n    // Track dragMode changes for detecting touches outside\n    const dragModeJustEnded = previousDragMode.value && !isDragging;\n    previousDragMode.value = isDragging;\n\n    // If delete mode is active, keep it active unless:\n    // 1. Another item becomes active (dragMode true but this item not active)\n    // 2. This item becomes active again AFTER it was released (user starts dragging it again)\n    // 3. User touches outside (dragMode becomes false and no item is active)\n    if (deleteModeActive.value) {\n      // Check if item was released (became inactive)\n      if (!isActive && !wasReleasedAfterDeleteMode.value) {\n        wasReleasedAfterDeleteMode.value = true;\n      }\n\n      if (isDragging && !isActive) {\n        // Another item is being dragged, exit delete mode\n        deleteModeActive.value = false;\n        anyItemInDeleteMode.value = false; // Clear global delete mode\n        showDelete.value = false;\n        stillTimer.value = 0;\n        wasReleasedAfterDeleteMode.value = false;\n      } else if (isActive && wasReleasedAfterDeleteMode.value) {\n        // This item became active again AFTER it was released, exit delete mode\n        deleteModeActive.value = false;\n        anyItemInDeleteMode.value = false; // Clear global delete mode\n        showDelete.value = false;\n        stillTimer.value = 0;\n        wasReleasedAfterDeleteMode.value = false;\n      } else if (!isDragging && !isActive) {\n        // Keep delete mode active (waiting for user interaction)\n        // The tap gesture handler in SwappableGrid will cancel it when user taps outside\n        showDelete.value = true;\n      } else {\n        // Keep delete mode active (item can still be held or released)\n        showDelete.value = true;\n      }\n      return;\n    }\n\n    // Reset release tracking when not in delete mode\n    wasReleasedAfterDeleteMode.value = false;\n\n    // If not in drag mode or not active, reset timer\n    if (!isDragging || !isActive) {\n      stillTimer.value = 0;\n      return;\n    }\n\n    // Item is active (being held down) - check if it's still\n    // Check if position has changed significantly (more than 10px threshold)\n    const moved =\n      Math.abs(x - lastX.value) > 10 || Math.abs(y - lastY.value) > 10;\n\n    if (moved) {\n      // Reset timer if item moved while being held\n      stillTimer.value = 0;\n      lastX.value = x;\n      lastY.value = y;\n      return;\n    }\n\n    // Initialize last position on first frame when active\n    if (stillTimer.value === 0) {\n      lastX.value = x;\n      lastY.value = y;\n    }\n\n    // If the tile hasn't moved significantly while being held → increment timer\n    // Increment by ~16ms per frame (assuming 60fps)\n    stillTimer.value += 16;\n\n    // Enter delete mode after 1 second (1000ms) of being held still\n    if (stillTimer.value >= 1000) {\n      deleteModeActive.value = true;\n      anyItemInDeleteMode.value = true; // Set global delete mode\n      showDelete.value = true;\n      wasReleasedAfterDeleteMode.value = false; // Reset on entry\n    }\n  });\n\n  const deleteButtonStyle = useAnimatedStyle(() => {\n    // Show delete button when delete mode is active (persists after release)\n    const shouldShow = showDelete.value;\n    return {\n      opacity: shouldShow ? 1 : 0,\n      pointerEvents: shouldShow ? \"auto\" : \"none\",\n      transform: [\n        { scale: withTiming(shouldShow ? 1 : 0.6, { duration: 120 }) },\n      ],\n    };\n  });\n\n  // Watch for when global delete mode is cancelled (user tapped outside)\n  useAnimatedReaction(\n    () => anyItemInDeleteMode.value,\n    (current, previous) => {\n      \"worklet\";\n      // If delete mode was cancelled globally (user tapped outside)\n      if (previous && !current && deleteModeActive.value) {\n        deleteModeActive.value = false;\n        showDelete.value = false;\n        stillTimer.value = 0;\n        wasReleasedAfterDeleteMode.value = false;\n      }\n    }\n  );\n\n  // Wiggle animation — triggers on editMode/active changes and delete mode\n  useAnimatedReaction(\n    () => ({\n      isEditMode: dragMode.value,\n      isActive: position.active.value > 0.5,\n      inDeleteMode: deleteModeActive.value,\n      anyInDeleteMode: anyItemInDeleteMode.value,\n    }),\n    ({ isEditMode, isActive, inDeleteMode, anyInDeleteMode }) => {\n      if (!wiggle) {\n        if (currentWiggleMode.value !== \"none\") {\n          cancelAnimation(rotation);\n          currentWiggleMode.value = \"none\";\n        }\n        rotation.value = withTiming(0, { duration: 150 });\n        return;\n      }\n\n      // Determine the target wiggle mode\n      let targetMode: \"none\" | \"normal\" | \"delete\" = \"none\";\n      if (inDeleteMode) {\n        targetMode = \"delete\";\n      } else if (anyInDeleteMode && !isActive) {\n        targetMode = \"normal\";\n      } else if (isEditMode && !isActive) {\n        targetMode = \"normal\";\n      }\n\n      // Only restart animation if mode changed\n      if (currentWiggleMode.value === targetMode) {\n        return; // Already in the correct mode, don't restart\n      }\n\n      const previousMode = currentWiggleMode.value;\n      currentWiggleMode.value = targetMode;\n\n      // Cancel current animation\n      cancelAnimation(rotation);\n\n      // If this item is in delete mode, wiggle more (2x degrees, faster)\n      if (targetMode === \"delete\") {\n        const deleteWiggleDegrees = wiggle.degrees * 2;\n        const deleteWiggleDuration = wiggle.duration * 0.7; // Faster wiggle\n\n        // If transitioning from normal wiggle, preserve the phase by scaling\n        if (previousMode === \"normal\") {\n          const currentRot = rotation.value;\n          const scaleFactor = deleteWiggleDegrees / wiggle.degrees;\n          rotation.value = currentRot * scaleFactor;\n        }\n\n        rotation.value = withRepeat(\n          withSequence(\n            withTiming(deleteWiggleDegrees, {\n              duration: deleteWiggleDuration,\n              easing: Easing.linear,\n            }),\n            withTiming(-deleteWiggleDegrees, {\n              duration: deleteWiggleDuration,\n              easing: Easing.linear,\n            })\n          ),\n          -1, // infinite\n          true\n        );\n      }\n      // Normal wiggle (when dragging but not this item, or any item in delete mode)\n      else if (targetMode === \"normal\") {\n        // If transitioning from delete wiggle, preserve the phase by scaling\n        if (previousMode === \"delete\") {\n          const currentRot = rotation.value;\n          const scaleFactor = wiggle.degrees / (wiggle.degrees * 2);\n          rotation.value = currentRot * scaleFactor;\n        }\n\n        rotation.value = withRepeat(\n          withSequence(\n            withTiming(wiggle.degrees, {\n              duration: wiggle.duration,\n              easing: Easing.linear,\n            }),\n            withTiming(-wiggle.degrees, {\n              duration: wiggle.duration,\n              easing: Easing.linear,\n            })\n          ),\n          -1, // infinite\n          true\n        );\n      }\n      // Stop wiggling\n      else {\n        rotation.value = withTiming(0, { duration: 150 });\n      }\n    },\n    [dragMode, position.active, deleteModeActive, anyItemInDeleteMode]\n  );\n\n  const animatedStyle = useAnimatedStyle(() => {\n    const scale = position.active.value\n      ? withTiming(dragSizeIncreaseFactor, { duration: 120 })\n      : withTiming(1, { duration: 120 });\n\n    return {\n      position: \"absolute\",\n      width: itemWidth,\n      height: itemHeight,\n      transform: [\n        { translateX: position.x.value as any },\n        { translateY: position.y.value as any },\n        { scale: scale as any },\n        { rotate: `${rotation.value}deg` as any },\n      ],\n      zIndex: position.active.value ? 2 : 0,\n    } as any;\n  });\n\n  // Track delete mode on JS thread for conditional rendering\n  const [isInDeleteMode, setIsInDeleteMode] = useState(false);\n\n  useAnimatedReaction(\n    () => deleteModeActive.value,\n    (current) => {\n      runOnJS(setIsInDeleteMode)(current);\n    }\n  );\n\n  const handleDelete = () => {\n    // Exit delete mode when delete button is pressed\n    deleteModeActive.value = false;\n    anyItemInDeleteMode.value = false; // Clear global delete mode\n    showDelete.value = false;\n    stillTimer.value = 0;\n    wasReleasedAfterDeleteMode.value = false;\n    if (onDelete) {\n      onDelete();\n    }\n  };\n\n  return (\n    <Animated.View style={animatedStyle} pointerEvents=\"box-none\">\n      {/* Full-item Pressable for delete - only active when in delete mode */}\n      {isInDeleteMode && (\n        <Pressable\n          onPress={handleDelete}\n          style={{\n            position: \"absolute\",\n            top: 0,\n            left: 0,\n            right: 0,\n            bottom: 0,\n            width: itemWidth,\n            height: itemHeight,\n            zIndex: 2,\n          }}\n        />\n      )}\n\n      {/* Delete button (×) - visual indicator only */}\n      <Animated.View\n        style={[\n          {\n            position: \"absolute\",\n            top: itemHeight * 0.01,\n            right: itemWidth * 0.04,\n            width: itemWidth * 0.2,\n            height: itemHeight * 0.2,\n            borderRadius: 12,\n            justifyContent: \"center\",\n            alignItems: \"center\",\n            zIndex: 3,\n          },\n          deleteButtonStyle,\n        ]}\n        pointerEvents=\"none\"\n      >\n        <Text\n          style={{\n            fontSize: itemWidth * 0.2,\n            color: \"black\",\n            fontWeight: 500,\n          }}\n        >\n          ×\n        </Text>\n      </Animated.View>\n\n      {children}\n    </Animated.View>\n  );\n}\n"],"mappings":"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","ignoreList":[]}