react-native-sortable-dynamic 0.1.0

package/lib/commonjs/Tile.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _Config = require("./Config.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Tile Component
+ *
+ * This component represents a single tile in the sortable grid. It is designed to be flexible and
+ * allows for user interactions such as press and long press. The size of each tile is dynamically
+ * adjusted based on the configuration provided by `SortableListProvider`.
+ *
+ * Props:
+ * @param {function} onPress - Callback function called when the tile is pressed.
+ * @param {function} onLongPress - Callback function called when the tile is long-pressed.
+ * @param {number} activeOpacity - The opacity of the tile when it is pressed. Default is 0.7.
+ * @param {React.ReactNode} children - The content to render inside the tile.
+ *
+ * Usage:
+ *
+ * <Tile onPress={handlePress} onLongPress={handleLongPress}>
+ *   <Text>Tile Content</Text>
+ * </Tile>
+ */const Tile = ({
+  onPress,
+  onLongPress,
+  activeOpacity = 0.7,
+  children
+}) => {
+  // Get the size of the tile from the sortable config context
+  const {
+    SIZE
+  } = (0, _Config.useSortableConfig)();
+
+  // Define the style for the tile, ensuring that its size is consistent across the grid
+  const containerStyle = {
+    width: SIZE,
+    height: SIZE
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+    style: containerStyle,
+    onPress: onPress,
+    onLongPress: onLongPress,
+    activeOpacity: activeOpacity // Control the opacity when the tile is pressed
+    ,
+    children: children
+  });
+};
+var _default = exports.default = Tile;
+//# sourceMappingURL=Tile.js.map

package/lib/commonjs/Tile.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_Config","_jsxRuntime","e","__esModule","default","Tile","onPress","onLongPress","activeOpacity","children","SIZE","useSortableConfig","containerStyle","width","height","jsx","TouchableOpacity","style","_default","exports"],"sourceRoot":"../../src","sources":["Tile.js"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AAA6C,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAEA,MAAMG,IAAI,GAAGA,CAAC;EAAEC,OAAO;EAAEC,WAAW;EAAEC,aAAa,GAAG,GAAG;EAAEC;AAAS,CAAC,KAAK;EACxE;EACA,MAAM;IAAEC;EAAK,CAAC,GAAG,IAAAC,yBAAiB,EAAC,CAAC;;EAEpC;EACA,MAAMC,cAAc,GAAG;IACrBC,KAAK,EAAEH,IAAI;IACXI,MAAM,EAAEJ;EACV,CAAC;EAED,oBACE,IAAAT,WAAA,CAAAc,GAAA,EAAChB,YAAA,CAAAiB,gBAAgB;IACfC,KAAK,EAAEL,cAAe;IACtBN,OAAO,EAAEA,OAAQ;IACjBC,WAAW,EAAEA,WAAY;IACzBC,aAAa,EAAEA,aAAc,CAAC;IAAA;IAAAC,QAAA,EAE7BA;EAAQ,CACO,CAAC;AAEvB,CAAC;AAAC,IAAAS,QAAA,GAAAC,OAAA,CAAAf,OAAA,GAEaC,IAAI","ignoreList":[]}

package/lib/commonjs/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SortableList", {
+  enumerable: true,
+  get: function () {
+    return _SortableList.default;
+  }
+});
+Object.defineProperty(exports, "SortableListProvider", {
+  enumerable: true,
+  get: function () {
+    return _Config.default;
+  }
+});
+Object.defineProperty(exports, "Tile", {
+  enumerable: true,
+  get: function () {
+    return _Tile.default;
+  }
+});
+var _Config = _interopRequireDefault(require("./Config.js"));
+var _SortableList = _interopRequireDefault(require("./SortableList.js"));
+var _Tile = _interopRequireDefault(require("./Tile.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+//# sourceMappingURL=index.js.map

package/lib/commonjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_Config","_interopRequireDefault","require","_SortableList","_Tile","e","__esModule","default"],"sourceRoot":"../../src","sources":["index.js"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,KAAA,GAAAH,sBAAA,CAAAC,OAAA;AAAyC,SAAAD,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}

package/lib/module/Config.js

@@ -0,0 +1,93 @@
+"use strict";
+
+import { Dimensions } from 'react-native';
+import { Easing } from 'react-native-reanimated';
+import React, { createContext, useContext } from 'react';
+
+// Get screen width to calculate dynamic sizes
+import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  width
+} = Dimensions.get('window');
+
+// Default configuration for the sortable list
+const defaultConfig = {
+  MARGIN: 10,
+  // Default margin between items
+  COL: 2,
+  // Default number of columns
+  // Default size for each item, calculated based on the number of columns and margin
+  SIZE: width / 2 - 10 // (width / COL - MARGIN)
+};
+
+// Create a Context for the sortable list configuration
+const ConfigContext = /*#__PURE__*/createContext(defaultConfig);
+
+// Custom hook to use the sortable configuration context
+export const useSortableConfig = () => useContext(ConfigContext);
+
+// Configuration for animation settings
+export const animationConfig = {
+  easing: Easing.inOut(Easing.ease),
+  duration: 350
+};
+
+// Helper function to calculate the item's position based on its index
+// This is used to position items in a grid layout
+export const getPosition = (position, COL, SIZE) => {
+  'worklet';
+
+  // Necessary for Reanimated 2 to run this function on the UI thread
+  return {
+    x: position % COL === 0 ? 0 : SIZE * (position % COL),
+    y: Math.floor(position / COL) * SIZE
+  };
+};
+
+// Helper function to determine the new order of items during drag-and-drop
+export const getOrder = (tx, ty, max, COL, SIZE) => {
+  'worklet';
+
+  // Necessary for Reanimated 2 to run this function on the UI thread
+  const x = Math.round(tx / SIZE) * SIZE;
+  const y = Math.round(ty / SIZE) * SIZE;
+  const row = Math.max(y, 0) / SIZE;
+  const col = Math.max(x, 0) / SIZE;
+  return Math.min(row * COL + col, max);
+};
+
+/**
+ * SortableListProvider component
+ *
+ * Wrap your sortable list components with this provider to set custom configuration.
+ *
+ * @param {Object} config - Custom configuration to override the default settings.
+ * @param {number} config.MARGIN - Margin between items.
+ * @param {number} config.COL - Number of columns in the grid.
+ * @param {React.ReactNode} children - Child components that will use this configuration.
+ *
+ * Usage:
+ *
+ * <SortableListProvider config={{ MARGIN: 15, COL: 3 }}>
+ *   <YourSortableList />
+ * </SortableListProvider>
+ */
+const SortableListProvider = ({
+  children,
+  config
+}) => {
+  // Merge custom config with the default configuration
+  const mergedConfig = {
+    ...defaultConfig,
+    ...config
+  };
+
+  // Recalculate SIZE based on COL and MARGIN
+  mergedConfig.SIZE = width / mergedConfig.COL - mergedConfig.MARGIN;
+  return /*#__PURE__*/_jsx(ConfigContext.Provider, {
+    value: mergedConfig,
+    children: children
+  });
+};
+export default SortableListProvider;
+//# sourceMappingURL=Config.js.map

package/lib/module/Config.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Dimensions","Easing","React","createContext","useContext","jsx","_jsx","width","get","defaultConfig","MARGIN","COL","SIZE","ConfigContext","useSortableConfig","animationConfig","easing","inOut","ease","duration","getPosition","position","x","y","Math","floor","getOrder","tx","ty","max","round","row","col","min","SortableListProvider","children","config","mergedConfig","Provider","value"],"sourceRoot":"../../src","sources":["Config.js"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,MAAM,QAAQ,yBAAyB;AAChD,OAAOC,KAAK,IAAIC,aAAa,EAAEC,UAAU,QAAQ,OAAO;;AAExD;AAAA,SAAAC,GAAA,IAAAC,IAAA;AACA,MAAM;EAAEC;AAAM,CAAC,GAAGP,UAAU,CAACQ,GAAG,CAAC,QAAQ,CAAC;;AAE1C;AACA,MAAMC,aAAa,GAAG;EACpBC,MAAM,EAAE,EAAE;EAAE;EACZC,GAAG,EAAE,CAAC;EAAE;EACR;EACAC,IAAI,EAAEL,KAAK,GAAG,CAAC,GAAG,EAAE,CAAE;AACxB,CAAC;;AAED;AACA,MAAMM,aAAa,gBAAGV,aAAa,CAACM,aAAa,CAAC;;AAElD;AACA,OAAO,MAAMK,iBAAiB,GAAGA,CAAA,KAAMV,UAAU,CAACS,aAAa,CAAC;;AAEhE;AACA,OAAO,MAAME,eAAe,GAAG;EAC7BC,MAAM,EAAEf,MAAM,CAACgB,KAAK,CAAChB,MAAM,CAACiB,IAAI,CAAC;EACjCC,QAAQ,EAAE;AACZ,CAAC;;AAED;AACA;AACA,OAAO,MAAMC,WAAW,GAAGA,CAACC,QAAQ,EAAEV,GAAG,EAAEC,IAAI,KAAK;EAClD,SAAS;;EAAE;EACX,OAAO;IACLU,CAAC,EAAED,QAAQ,GAAGV,GAAG,KAAK,CAAC,GAAG,CAAC,GAAGC,IAAI,IAAIS,QAAQ,GAAGV,GAAG,CAAC;IACrDY,CAAC,EAAEC,IAAI,CAACC,KAAK,CAACJ,QAAQ,GAAGV,GAAG,CAAC,GAAGC;EAClC,CAAC;AACH,CAAC;;AAED;AACA,OAAO,MAAMc,QAAQ,GAAGA,CAACC,EAAE,EAAEC,EAAE,EAAEC,GAAG,EAAElB,GAAG,EAAEC,IAAI,KAAK;EAClD,SAAS;;EAAE;EACX,MAAMU,CAAC,GAAGE,IAAI,CAACM,KAAK,CAACH,EAAE,GAAGf,IAAI,CAAC,GAAGA,IAAI;EACtC,MAAMW,CAAC,GAAGC,IAAI,CAACM,KAAK,CAACF,EAAE,GAAGhB,IAAI,CAAC,GAAGA,IAAI;EACtC,MAAMmB,GAAG,GAAGP,IAAI,CAACK,GAAG,CAACN,CAAC,EAAE,CAAC,CAAC,GAAGX,IAAI;EACjC,MAAMoB,GAAG,GAAGR,IAAI,CAACK,GAAG,CAACP,CAAC,EAAE,CAAC,CAAC,GAAGV,IAAI;EACjC,OAAOY,IAAI,CAACS,GAAG,CAACF,GAAG,GAAGpB,GAAG,GAAGqB,GAAG,EAAEH,GAAG,CAAC;AACvC,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMK,oBAAoB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC;AAAO,CAAC,KAAK;EACrD;EACA,MAAMC,YAAY,GAAG;IACnB,GAAG5B,aAAa;IAChB,GAAG2B;EACL,CAAC;;EAED;EACAC,YAAY,CAACzB,IAAI,GAAGL,KAAK,GAAG8B,YAAY,CAAC1B,GAAG,GAAG0B,YAAY,CAAC3B,MAAM;EAElE,oBACEJ,IAAA,CAACO,aAAa,CAACyB,QAAQ;IAACC,KAAK,EAAEF,YAAa;IAAAF,QAAA,EACzCA;EAAQ,CACa,CAAC;AAE7B,CAAC;AAED,eAAeD,oBAAoB","ignoreList":[]}

package/lib/module/Item.js

@@ -0,0 +1,185 @@
+"use strict";
+
+import React, { useEffect } from 'react';
+import { Dimensions, StyleSheet } from 'react-native';
+import Animated, { useAnimatedGestureHandler, useAnimatedStyle, useAnimatedReaction, withSpring, scrollTo, withTiming, useSharedValue, runOnJS } from 'react-native-reanimated';
+import { PanGestureHandler } from 'react-native-gesture-handler';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { animationConfig, getOrder, getPosition } from "./Config.js";
+import { useSortableConfig } from "./Config.js";
+
+/**
+ * Item Component
+ *
+ * This component represents a draggable item in the sortable grid. It manages the gesture handling
+ * and animations needed to drag and reorder the item within the grid.
+ *
+ * Props:
+ * @param {React.ReactNode} children - The content to render inside the item.
+ * @param {object} positions - Shared value that contains the current positions of all items.
+ * @param {number} id - Unique identifier for the item.
+ * @param {function} onDragEnd - Callback function triggered when dragging ends.
+ * @param {object} scrollView - Reference to the scroll view for scrolling during drag.
+ * @param {object} scrollY - Shared value representing the current scroll position.
+ * @param {boolean} editing - Whether the list is in editing mode.
+ * @param {boolean} draggable - Whether the item is draggable (default: true).
+ * @param {Array} tiles - Array of tile items used to check reorderable state.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const Item = ({
+  children,
+  positions,
+  id,
+  onDragEnd,
+  scrollView,
+  scrollY,
+  editing,
+  draggable = true,
+  tiles
+}) => {
+  // Get safe area insets for accurate height calculation
+  const inset = useSafeAreaInsets();
+  const containerHeight = Dimensions.get('window').height - inset.top - inset.bottom;
+
+  // Get the configuration for columns and size
+  const {
+    COL,
+    SIZE
+  } = useSortableConfig();
+
+  // Calculate content height based on the number of items
+  const contentHeight = Object.keys(positions.value).length / COL * SIZE;
+  const isGestureActive = useSharedValue(false); // Whether the item is being actively dragged
+
+  // Calculate initial position of the item
+  const position = getPosition(positions.value[id], COL, SIZE);
+  const translateX = useSharedValue(position.x);
+  const translateY = useSharedValue(position.y);
+
+  // Effect to reset isGestureActive when not in editing mode
+  useEffect(() => {
+    if (!editing) {
+      isGestureActive.value = false;
+    }
+  }, [editing, isGestureActive]);
+
+  // React to changes in the positions object
+  useAnimatedReaction(() => positions.value[id],
+  // Track changes to this item's position
+  newOrder => {
+    if (!isGestureActive.value) {
+      const pos = getPosition(newOrder, COL, SIZE);
+      translateX.value = withTiming(pos.x, animationConfig);
+      translateY.value = withTiming(pos.y, animationConfig);
+    }
+  });
+
+  // Gesture handler for dragging
+  const onGestureEvent = useAnimatedGestureHandler({
+    onStart: (_, ctx) => {
+      if (editing && draggable) {
+        // Store the starting position
+        ctx.x = translateX.value;
+        ctx.y = translateY.value;
+        isGestureActive.value = false; // TODO: Set to false when grouping is implemented
+      }
+    },
+    onActive: ({
+      translationX,
+      translationY
+    }, ctx) => {
+      if (editing && draggable) {
+        // Calculate new position
+        translateX.value = ctx.x + translationX;
+        translateY.value = ctx.y + translationY;
+
+        // Calculate new order based on position
+        const newOrder = getOrder(translateX.value, translateY.value, Object.keys(positions.value).length - 1, COL, SIZE);
+        const oldOrder = positions.value[id];
+        if (newOrder !== oldOrder) {
+          // Find the item to swap positions with
+          const idToSwap = Object.keys(positions.value).find(key => positions.value[key] === newOrder);
+
+          // Only swap if the target item is reorderable
+          const targetItem = tiles.find(tile => tile.id === Number(idToSwap));
+          if (idToSwap && targetItem?.reorderable !== false) {
+            const newPositions = {
+              ...positions.value
+            };
+            newPositions[id] = newOrder;
+            newPositions[idToSwap] = oldOrder;
+            positions.value = newPositions;
+          }
+        }
+
+        // Handle scrolling during drag
+        const lowerBound = scrollY.value;
+        const upperBound = lowerBound + containerHeight - SIZE;
+        const maxScroll = contentHeight - containerHeight;
+        const leftToScrollDown = maxScroll - scrollY.value;
+
+        // Scroll up
+        if (translateY.value < lowerBound) {
+          const diff = Math.min(lowerBound - translateY.value, lowerBound);
+          scrollY.value -= diff;
+          scrollTo(scrollView, 0, scrollY.value, false);
+          ctx.y -= diff;
+          translateY.value = ctx.y + translationY;
+        }
+        // Scroll down
+        if (translateY.value > upperBound) {
+          const diff = Math.min(translateY.value - upperBound, leftToScrollDown);
+          scrollY.value += diff;
+          scrollTo(scrollView, 0, scrollY.value, false);
+          ctx.y += diff;
+          translateY.value = ctx.y + translationY;
+        }
+      }
+    },
+    onEnd: () => {
+      if (draggable) {
+        // Snap the item back into its place when the drag ends
+        const newPosition = getPosition(positions.value[id], COL, SIZE);
+        translateX.value = withTiming(newPosition.x, animationConfig, () => {
+          isGestureActive.value = false; // Set gesture to inactive
+          runOnJS(onDragEnd)(positions.value); // Call onDragEnd on the JS thread
+        });
+        translateY.value = withTiming(newPosition.y, animationConfig);
+      }
+    }
+  });
+
+  // Animated style for the item
+  const style = useAnimatedStyle(() => {
+    const zIndex = isGestureActive.value ? 100 : 0; // Bring the item to front when active
+    const scale = editing && isGestureActive.value ? withSpring(1.05) : withSpring(1); // Slightly enlarge the item when dragging
+    return {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: SIZE,
+      height: SIZE,
+      zIndex,
+      transform: [{
+        translateX: translateX.value
+      }, {
+        translateY: translateY.value
+      }, {
+        scale
+      }]
+    };
+  });
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: style,
+    children: /*#__PURE__*/_jsx(PanGestureHandler, {
+      enabled: editing,
+      onGestureEvent: onGestureEvent,
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        style: StyleSheet.absoluteFill,
+        children: children
+      })
+    })
+  });
+};
+export default Item;
+//# sourceMappingURL=Item.js.map

package/lib/module/Item.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","Dimensions","StyleSheet","Animated","useAnimatedGestureHandler","useAnimatedStyle","useAnimatedReaction","withSpring","scrollTo","withTiming","useSharedValue","runOnJS","PanGestureHandler","useSafeAreaInsets","animationConfig","getOrder","getPosition","useSortableConfig","jsx","_jsx","Item","children","positions","id","onDragEnd","scrollView","scrollY","editing","draggable","tiles","inset","containerHeight","get","height","top","bottom","COL","SIZE","contentHeight","Object","keys","value","length","isGestureActive","position","translateX","x","translateY","y","newOrder","pos","onGestureEvent","onStart","_","ctx","onActive","translationX","translationY","oldOrder","idToSwap","find","key","targetItem","tile","Number","reorderable","newPositions","lowerBound","upperBound","maxScroll","leftToScrollDown","diff","Math","min","onEnd","newPosition","style","zIndex","scale","left","width","transform","View","enabled","absoluteFill"],"sourceRoot":"../../src","sources":["Item.js"],"mappings":"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","ignoreList":[]}

package/lib/module/SortableList.js

@@ -0,0 +1,86 @@
+"use strict";
+
+import React, { memo } from 'react';
+import Animated, { useAnimatedRef, useAnimatedScrollHandler, useSharedValue } from 'react-native-reanimated';
+import Item from "./Item.js";
+import { useSortableConfig } from "./Config.js";
+
+/**
+ * SortableList Component
+ *
+ * This component renders a scrollable list of items that can be reordered using drag-and-drop gestures.
+ * It manages the overall layout of the items and provides the necessary props to each child `Item` component
+ * to enable dragging, scrolling, and reordering functionality.
+ *
+ * Props:
+ * @param {React.ReactNode[]} children - The list of items to render inside the sortable list.
+ * @param {boolean} editing - Whether the list is in editing mode, enabling drag-and-drop.
+ * @param {Array} tiles - Array of tile data to manage the reordering state.
+ * @param {function} onDragEnd - Callback function called with the updated positions when the drag ends.
+ *
+ * Usage:
+ *
+ * <SortableList editing={isEditing} tiles={tiles} onDragEnd={handleDragEnd}>
+ *   {tiles.map((tile) => (
+ *     <YourTileComponent key={tile.id} id={tile.id} />
+ *   ))}
+ * </SortableList>
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const SortableList = ({
+  children,
+  editing,
+  tiles,
+  onDragEnd
+}) => {
+  // Get the configuration for columns and size from context
+  const {
+    COL,
+    SIZE
+  } = useSortableConfig();
+
+  // Shared values to track scrolling and item positions
+  const scrollY = useSharedValue(0); // Current scroll position
+  const scrollView = useAnimatedRef(); // Reference to the scroll view
+  const positions = useSharedValue(children.reduce((acc, child, index) => ({
+    ...acc,
+    [child.props.id]: index
+  }), {}));
+
+  // Scroll event handler to update scrollY shared value
+  const onScroll = useAnimatedScrollHandler({
+    onScroll: ({
+      contentOffset: {
+        y
+      }
+    }) => {
+      scrollY.value = y;
+    }
+  });
+  return /*#__PURE__*/_jsx(Animated.ScrollView, {
+    onScroll: onScroll,
+    ref: scrollView,
+    contentContainerStyle: {
+      // Calculate the total height needed for the scroll view content
+      height: Math.ceil(children.length / COL) * SIZE
+    },
+    showsVerticalScrollIndicator: false,
+    bounces: false,
+    scrollEventThrottle: 16 // Control scroll event frequency
+    ,
+    children: children.map(child => /*#__PURE__*/_jsx(Item, {
+      id: child.props.id,
+      positions: positions,
+      editing: editing,
+      draggable: child.props.draggable,
+      reorderable: child.props.reorderable,
+      tiles: tiles,
+      onDragEnd: onDragEnd,
+      scrollView: scrollView,
+      scrollY: scrollY,
+      children: child
+    }, child.props.id))
+  });
+};
+export default /*#__PURE__*/memo(SortableList);
+//# sourceMappingURL=SortableList.js.map

package/lib/module/SortableList.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","Animated","useAnimatedRef","useAnimatedScrollHandler","useSharedValue","Item","useSortableConfig","jsx","_jsx","SortableList","children","editing","tiles","onDragEnd","COL","SIZE","scrollY","scrollView","positions","reduce","acc","child","index","props","id","onScroll","contentOffset","y","value","ScrollView","ref","contentContainerStyle","height","Math","ceil","length","showsVerticalScrollIndicator","bounces","scrollEventThrottle","map","draggable","reorderable"],"sourceRoot":"../../src","sources":["SortableList.js"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,IAAI,QAAQ,OAAO;AACnC,OAAOC,QAAQ,IACbC,cAAc,EACdC,wBAAwB,EACxBC,cAAc,QACT,yBAAyB;AAChC,OAAOC,IAAI,MAAM,WAAQ;AACzB,SAASC,iBAAiB,QAAQ,aAAU;;AAE5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AApBA,SAAAC,GAAA,IAAAC,IAAA;AAsBA,MAAMC,YAAY,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,OAAO;EAAEC,KAAK;EAAEC;AAAU,CAAC,KAAK;EAChE;EACA,MAAM;IAAEC,GAAG;IAAEC;EAAK,CAAC,GAAGT,iBAAiB,CAAC,CAAC;;EAEzC;EACA,MAAMU,OAAO,GAAGZ,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;EACnC,MAAMa,UAAU,GAAGf,cAAc,CAAC,CAAC,CAAC,CAAC;EACrC,MAAMgB,SAAS,GAAGd,cAAc,CAC9BM,QAAQ,CAACS,MAAM,CACb,CAACC,GAAG,EAAEC,KAAK,EAAEC,KAAK,MAAM;IAAE,GAAGF,GAAG;IAAE,CAACC,KAAK,CAACE,KAAK,CAACC,EAAE,GAAGF;EAAM,CAAC,CAAC,EAC5D,CAAC,CACH,CACF,CAAC;;EAED;EACA,MAAMG,QAAQ,GAAGtB,wBAAwB,CAAC;IACxCsB,QAAQ,EAAEA,CAAC;MAAEC,aAAa,EAAE;QAAEC;MAAE;IAAE,CAAC,KAAK;MACtCX,OAAO,CAACY,KAAK,GAAGD,CAAC;IACnB;EACF,CAAC,CAAC;EAEF,oBACEnB,IAAA,CAACP,QAAQ,CAAC4B,UAAU;IAClBJ,QAAQ,EAAEA,QAAS;IACnBK,GAAG,EAAEb,UAAW;IAChBc,qBAAqB,EAAE;MACrB;MACAC,MAAM,EAAEC,IAAI,CAACC,IAAI,CAACxB,QAAQ,CAACyB,MAAM,GAAGrB,GAAG,CAAC,GAAGC;IAC7C,CAAE;IACFqB,4BAA4B,EAAE,KAAM;IACpCC,OAAO,EAAE,KAAM;IACfC,mBAAmB,EAAE,EAAG,CAAC;IAAA;IAAA5B,QAAA,EAGxBA,QAAQ,CAAC6B,GAAG,CAAElB,KAAK,iBAClBb,IAAA,CAACH,IAAI;MAEHmB,EAAE,EAAEH,KAAK,CAACE,KAAK,CAACC,EAAG;MACnBN,SAAS,EAAEA,SAAU;MACrBP,OAAO,EAAEA,OAAQ;MACjB6B,SAAS,EAAEnB,KAAK,CAACE,KAAK,CAACiB,SAAU;MACjCC,WAAW,EAAEpB,KAAK,CAACE,KAAK,CAACkB,WAAY;MACrC7B,KAAK,EAAEA,KAAM;MACbC,SAAS,EAAEA,SAAU;MACrBI,UAAU,EAAEA,UAAW;MACvBD,OAAO,EAAEA,OAAQ;MAAAN,QAAA,EAEhBW;IAAK,GAXDA,KAAK,CAACE,KAAK,CAACC,EAYb,CACP;EAAC,CACiB,CAAC;AAE1B,CAAC;AAED,4BAAexB,IAAI,CAACS,YAAY,CAAC","ignoreList":[]}

package/lib/module/Tile.js

@@ -0,0 +1,53 @@
+"use strict";
+
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import { useSortableConfig } from "./Config.js";
+
+/**
+ * Tile Component
+ *
+ * This component represents a single tile in the sortable grid. It is designed to be flexible and
+ * allows for user interactions such as press and long press. The size of each tile is dynamically
+ * adjusted based on the configuration provided by `SortableListProvider`.
+ *
+ * Props:
+ * @param {function} onPress - Callback function called when the tile is pressed.
+ * @param {function} onLongPress - Callback function called when the tile is long-pressed.
+ * @param {number} activeOpacity - The opacity of the tile when it is pressed. Default is 0.7.
+ * @param {React.ReactNode} children - The content to render inside the tile.
+ *
+ * Usage:
+ *
+ * <Tile onPress={handlePress} onLongPress={handleLongPress}>
+ *   <Text>Tile Content</Text>
+ * </Tile>
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const Tile = ({
+  onPress,
+  onLongPress,
+  activeOpacity = 0.7,
+  children
+}) => {
+  // Get the size of the tile from the sortable config context
+  const {
+    SIZE
+  } = useSortableConfig();
+
+  // Define the style for the tile, ensuring that its size is consistent across the grid
+  const containerStyle = {
+    width: SIZE,
+    height: SIZE
+  };
+  return /*#__PURE__*/_jsx(TouchableOpacity, {
+    style: containerStyle,
+    onPress: onPress,
+    onLongPress: onLongPress,
+    activeOpacity: activeOpacity // Control the opacity when the tile is pressed
+    ,
+    children: children
+  });
+};
+export default Tile;
+//# sourceMappingURL=Tile.js.map

package/lib/module/Tile.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","TouchableOpacity","useSortableConfig","jsx","_jsx","Tile","onPress","onLongPress","activeOpacity","children","SIZE","containerStyle","width","height","style"],"sourceRoot":"../../src","sources":["Tile.js"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,gBAAgB,QAAQ,cAAc;AAC/C,SAASC,iBAAiB,QAAQ,aAAU;;AAE5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAlBA,SAAAC,GAAA,IAAAC,IAAA;AAoBA,MAAMC,IAAI,GAAGA,CAAC;EAAEC,OAAO;EAAEC,WAAW;EAAEC,aAAa,GAAG,GAAG;EAAEC;AAAS,CAAC,KAAK;EACxE;EACA,MAAM;IAAEC;EAAK,CAAC,GAAGR,iBAAiB,CAAC,CAAC;;EAEpC;EACA,MAAMS,cAAc,GAAG;IACrBC,KAAK,EAAEF,IAAI;IACXG,MAAM,EAAEH;EACV,CAAC;EAED,oBACEN,IAAA,CAACH,gBAAgB;IACfa,KAAK,EAAEH,cAAe;IACtBL,OAAO,EAAEA,OAAQ;IACjBC,WAAW,EAAEA,WAAY;IACzBC,aAAa,EAAEA,aAAc,CAAC;IAAA;IAAAC,QAAA,EAE7BA;EAAQ,CACO,CAAC;AAEvB,CAAC;AAED,eAAeJ,IAAI","ignoreList":[]}

package/lib/module/index.js

@@ -0,0 +1,6 @@
+"use strict";
+
+export { default as SortableListProvider } from "./Config.js";
+export { default as SortableList } from "./SortableList.js";
+export { default as Tile } from "./Tile.js";
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default","SortableListProvider","SortableList","Tile"],"sourceRoot":"../../src","sources":["index.js"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,oBAAoB,QAAQ,aAAU;AAC1D,SAASD,OAAO,IAAIE,YAAY,QAAQ,mBAAgB;AACxD,SAASF,OAAO,IAAIG,IAAI,QAAQ,WAAQ","ignoreList":[]}

package/lib/typescript/commonjs/package.json

@@ -0,0 +1 @@
+{"type":"commonjs"}

package/lib/typescript/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}