react-native-sortable-dynamic 0.1.0 → 0.2.0

package/lib/commonjs/SortableView.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Config = _interopRequireDefault(require("./Config.js"));
+var _SortableContainer = _interopRequireDefault(require("./SortableContainer.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * SortableView Component
+ *
+ * This component combines the configuration provider and the sortable container into a single component
+ * to simplify usage. It provides an interface for managing the layout, editing mode, and the reordering
+ * of items within a grid or list.
+ *
+ * Props:
+ * @param {object} config - Configuration options such as `MARGIN` and `COL` for customizing the layout.
+ * @param {Array} data - Array of data objects to render and reorder. Each object should have a unique `id`.
+ * @param {boolean} editing - Whether the list is in editing mode, enabling drag-and-drop functionality.
+ * @param {function} onDragEnd - Callback function called with the updated positions when the drag ends.
+ * @param {function} renderItem - Function to render each item inside the sortable view. Receives an object containing `item` and `index`.
+ * @param {function} onPress - Function to handle the press event on an item.
+ * @param {function} onLongPress - Function to handle the long press event on an item.
+ * @param {object} itemStyle - Custom style to apply to each SortableItem.
+ * @param {object} itemProps - Additional props to be passed to each SortableItem.
+ *
+ * Usage:
+ * <SortableView
+ *   config={{ MARGIN: 10, COL: 2 }}
+ *   data={dataArray}
+ *   editing={isEditing}
+ *   onDragEnd={handleDragEnd}
+ *   renderItem={({ item }) => <YourCustomComponent item={item} />}
+ *   onPress={handlePress}
+ *   onLongPress={handleLongPress}
+ *   itemStyle={{backgroundColor: 'blue'}}
+ *   itemProps={{disabled: true}}
+ * />
+ */const SortableView = ({
+  config,
+  data,
+  editing,
+  onDragEnd,
+  renderItem,
+  onPress,
+  onLongPress,
+  itemStyle,
+  itemProps
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Config.default, {
+    config: config,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SortableContainer.default, {
+      editing: editing,
+      data: data,
+      onDragEnd: positions => {
+        onDragEnd(positions);
+      },
+      renderItem: renderItem,
+      onPress: onPress,
+      onLongPress: onLongPress,
+      style: itemStyle,
+      ...itemProps
+    })
+  });
+};
+var _default = exports.default = SortableView;
+//# sourceMappingURL=SortableView.js.map

package/lib/commonjs/SortableView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_Config","_SortableContainer","_jsxRuntime","e","__esModule","default","SortableView","config","data","editing","onDragEnd","renderItem","onPress","onLongPress","itemStyle","itemProps","jsx","children","positions","style","_default","exports"],"sourceRoot":"../../src","sources":["SortableView.js"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,kBAAA,GAAAH,sBAAA,CAAAC,OAAA;AAAoD,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GACA,MAAMG,YAAY,GAAGA,CAAC;EACpBC,MAAM;EACNC,IAAI;EACJC,OAAO;EACPC,SAAS;EACTC,UAAU;EACVC,OAAO;EACPC,WAAW;EACXC,SAAS;EACTC;AACF,CAAC,KAAK;EACJ,oBACE,IAAAb,WAAA,CAAAc,GAAA,EAAChB,OAAA,CAAAK,OAAoB;IAACE,MAAM,EAAEA,MAAO;IAAAU,QAAA,eACnC,IAAAf,WAAA,CAAAc,GAAA,EAACf,kBAAA,CAAAI,OAAiB;MAChBI,OAAO,EAAEA,OAAQ;MACjBD,IAAI,EAAEA,IAAK;MACXE,SAAS,EAAGQ,SAAS,IAAK;QACxBR,SAAS,CAACQ,SAAS,CAAC;MACtB,CAAE;MACFP,UAAU,EAAEA,UAAW;MACvBC,OAAO,EAAEA,OAAQ;MACjBC,WAAW,EAAEA,WAAY;MACzBM,KAAK,EAAEL,SAAU;MAAA,GACbC;IAAS,CACd;EAAC,CACkB,CAAC;AAE3B,CAAC;AAAC,IAAAK,QAAA,GAAAC,OAAA,CAAAhB,OAAA,GAEaC,YAAY","ignoreList":[]}

package/lib/commonjs/index.js

@@ -3,26 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "SortableList", {
+Object.defineProperty(exports, "SortableView", {
   enumerable: true,
   get: function () {
-    return _SortableList.default;
+    return _SortableView.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"));
+var _SortableView = _interopRequireDefault(require("./SortableView.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 //# sourceMappingURL=index.js.map

package/lib/commonjs/index.js.map

@@ -1 +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":[]}
+{"version":3,"names":["_SortableView","_interopRequireDefault","require","e","__esModule","default"],"sourceRoot":"../../src","sources":["index.js"],"mappings":";;;;;;;;;;;AAAA,IAAAA,aAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAyD,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}

package/lib/module/Config.js

@@ -10,17 +10,16 @@ const {
   width
 } = Dimensions.get('window');
 
-// Default configuration for the sortable list
+// Default configuration for the sortable grid/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)
+  SIZE: width / 2 - 10 // Default size for each item, calculated based on the number of columns and margin
 };
 
-// Create a Context for the sortable list configuration
+// Create a Context for the sortable grid/list configuration
 const ConfigContext = /*#__PURE__*/createContext(defaultConfig);
 
 // Custom hook to use the sortable configuration context
@@ -33,7 +32,7 @@ export const animationConfig = {
 };
 
 // Helper function to calculate the item's position based on its index
-// This is used to position items in a grid layout
+// Used to position items in a grid layout
 export const getPosition = (position, COL, SIZE) => {
   'worklet';
 
@@ -57,9 +56,10 @@ export const getOrder = (tx, ty, max, COL, SIZE) => {
 };
 
 /**
- * SortableListProvider component
+ * SortableConfigProvider component
  *
- * Wrap your sortable list components with this provider to set custom configuration.
+ * Wrap your sortable grid/list components with this provider to set custom configuration.
+ * This provider allows for overriding default settings like margin and the number of columns.
  *
  * @param {Object} config - Custom configuration to override the default settings.
  * @param {number} config.MARGIN - Margin between items.
@@ -68,11 +68,11 @@ export const getOrder = (tx, ty, max, COL, SIZE) => {
  *
  * Usage:
  *
- * <SortableListProvider config={{ MARGIN: 15, COL: 3 }}>
- *   <YourSortableList />
- * </SortableListProvider>
+ * <SortableConfigProvider config={{ MARGIN: 15, COL: 3 }}>
+ *   <YourSortableComponent />
+ * </SortableConfigProvider>
  */
-const SortableListProvider = ({
+const SortableConfigProvider = ({
   children,
   config
 }) => {
@@ -89,5 +89,5 @@ const SortableListProvider = ({
     children: children
   });
 };
-export default SortableListProvider;
+export default SortableConfigProvider;
 //# sourceMappingURL=Config.js.map

package/lib/module/Config.js.map

@@ -1 +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":[]}
+{"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","SortableConfigProvider","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;EACRC,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;AACA,MAAMK,sBAAsB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC;AAAO,CAAC,KAAK;EACvD;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,sBAAsB","ignoreList":[]}

package/lib/module/SortableContainer.js

@@ -0,0 +1,110 @@
+"use strict";
+
+import React, { memo } from 'react';
+import Animated, { useAnimatedRef, useAnimatedScrollHandler, useSharedValue } from 'react-native-reanimated';
+import SortableItemWrapper from "./SortableItemWrapper.js";
+import SortableItem from "./SortableItem.js";
+import { useSortableConfig } from "./Config.js";
+
+/**
+ * SortableContainer Component
+ *
+ * This component renders a scrollable grid or list of items that can be reordered using drag-and-drop gestures.
+ * It manages the layout and drag-and-drop logic for the items, providing the necessary props
+ * to each child `SortableItemWrapper` component to enable dragging, scrolling, and reordering functionality.
+ *
+ * Props:
+ * @param {Array} data - Array of data objects to render and reorder. Each object should have a unique `id`.
+ * @param {boolean} editing - Whether the container is in editing mode, enabling drag-and-drop functionality.
+ * @param {function} onDragEnd - Callback function called with the updated positions when a drag ends.
+ * @param {function} renderItem - Function to render the content of each item inside the sortable container. Receives an object containing `item` and `index`.
+ * @param {function} onPress - Function to handle the press event on a sortable item.
+ * @param {function} onLongPress - Function to handle the long press event on a sortable item.
+ * @param {object} itemStyle - Custom style to apply to each SortableItem.
+ * @param {...object} itemProps - Additional props to be passed to each SortableItem.
+ *
+ * Usage:
+ * <SortableContainer
+ *   data={dataArray}
+ *   editing={isEditing}
+ *   onDragEnd={handleDragEnd}
+ *   renderItem={({ item }) => <YourCustomComponent item={item} />}
+ *   onPress={handlePress}
+ *   onLongPress={handleLongPress}
+ *   accessible={true}
+ * />
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const SortableContainer = ({
+  data,
+  editing,
+  onDragEnd,
+  renderItem,
+  onPress,
+  onLongPress,
+  itemStyle,
+  ...itemProps
+}) => {
+  // 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(data.reduce((acc, item, index) => ({
+    ...acc,
+    [item.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(data.length / COL) * SIZE
+    },
+    showsVerticalScrollIndicator: false,
+    bounces: false,
+    scrollEventThrottle: 16 // Control scroll event frequency
+    ,
+    children: data.map((item, index) => /*#__PURE__*/_jsx(SortableItemWrapper, {
+      id: item.id,
+      positions: positions,
+      editing: editing,
+      draggable: item.draggable,
+      reorderable: item.reorderable,
+      data: data,
+      onDragEnd: onDragEnd,
+      scrollView: scrollView,
+      scrollY: scrollY,
+      children: /*#__PURE__*/_jsx(SortableItem, {
+        id: item.id,
+        draggable: item.draggable,
+        reorderable: item.reorderable,
+        onPress: () => onPress && onPress(item),
+        onLongPress: () => onLongPress && onLongPress(item),
+        style: itemStyle,
+        ...itemProps,
+        children: renderItem({
+          item: item,
+          index
+        })
+      })
+    }, item.id))
+  });
+};
+export default /*#__PURE__*/memo(SortableContainer);
+//# sourceMappingURL=SortableContainer.js.map

package/lib/module/SortableContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","Animated","useAnimatedRef","useAnimatedScrollHandler","useSharedValue","SortableItemWrapper","SortableItem","useSortableConfig","jsx","_jsx","SortableContainer","data","editing","onDragEnd","renderItem","onPress","onLongPress","itemStyle","itemProps","COL","SIZE","scrollY","scrollView","positions","reduce","acc","item","index","id","onScroll","contentOffset","y","value","ScrollView","ref","contentContainerStyle","height","Math","ceil","length","showsVerticalScrollIndicator","bounces","scrollEventThrottle","children","map","draggable","reorderable","style"],"sourceRoot":"../../src","sources":["SortableContainer.js"],"mappings":"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","ignoreList":[]}

package/lib/module/SortableItem.js

@@ -0,0 +1,58 @@
+"use strict";
+
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import { useSortableConfig } from "./Config.js";
+
+/**
+ * SortableItem Component
+ *
+ * This component represents a single item in the sortable grid or list. It is designed to be flexible
+ * and supports various user interactions, including press and long press events. The size of each item
+ * is dynamically adjusted based on the configuration provided by the `SortableConfigProvider`.
+ *
+ * Props:
+ * Accepts all TouchableOpacity props, including but not limited to:
+ * @param {function} onPress - Callback function called when the item is pressed.
+ * @param {function} onLongPress - Callback function called when the item is long-pressed.
+ * @param {number} activeOpacity - The opacity of the item when it is pressed. Default is 0.7.
+ * @param {object} style - Additional style for the item.
+ * @param {React.ReactNode} children - The content to render inside the item.
+ * @param {...object} rest - Other TouchableOpacity props such as `accessible`, `accessibilityLabel`, etc.
+ *
+ * Usage:
+ *
+ * <SortableItem onPress={handlePress} onLongPress={handleLongPress} accessibilityLabel="Custom Item">
+ *   <Text>Item Content</Text>
+ * </SortableItem>
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const SortableItem = ({
+  onPress,
+  onLongPress,
+  activeOpacity = 0.7,
+  children,
+  style,
+  ...rest
+}) => {
+  // Get the size of the item from the sortable config context
+  const {
+    SIZE
+  } = useSortableConfig();
+
+  // Define the style for the item, ensuring that its size is consistent across the grid or list
+  const containerStyle = {
+    width: SIZE,
+    height: SIZE
+  };
+  return /*#__PURE__*/_jsx(TouchableOpacity, {
+    style: [containerStyle, style],
+    onPress: onPress,
+    onLongPress: onLongPress,
+    activeOpacity: activeOpacity,
+    ...rest,
+    children: children
+  });
+};
+export default SortableItem;
+//# sourceMappingURL=SortableItem.js.map

package/lib/module/SortableItem.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","TouchableOpacity","useSortableConfig","jsx","_jsx","SortableItem","onPress","onLongPress","activeOpacity","children","style","rest","SIZE","containerStyle","width","height"],"sourceRoot":"../../src","sources":["SortableItem.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;AACA;AACA;AACA;AArBA,SAAAC,GAAA,IAAAC,IAAA;AAsBA,MAAMC,YAAY,GAAGA,CAAC;EACpBC,OAAO;EACPC,WAAW;EACXC,aAAa,GAAG,GAAG;EACnBC,QAAQ;EACRC,KAAK;EACL,GAAGC;AACL,CAAC,KAAK;EACJ;EACA,MAAM;IAAEC;EAAK,CAAC,GAAGV,iBAAiB,CAAC,CAAC;;EAEpC;EACA,MAAMW,cAAc,GAAG;IACrBC,KAAK,EAAEF,IAAI;IACXG,MAAM,EAAEH;EACV,CAAC;EAED,oBACER,IAAA,CAACH,gBAAgB;IACfS,KAAK,EAAE,CAACG,cAAc,EAAEH,KAAK,CAAE;IAC/BJ,OAAO,EAAEA,OAAQ;IACjBC,WAAW,EAAEA,WAAY;IACzBC,aAAa,EAAEA,aAAc;IAAA,GACzBG,IAAI;IAAAF,QAAA,EAEPA;EAAQ,CACO,CAAC;AAEvB,CAAC;AAED,eAAeJ,YAAY","ignoreList":[]}

package/lib/module/{Item.js → SortableItemWrapper.js}

@@ -9,24 +9,39 @@ import { animationConfig, getOrder, getPosition } from "./Config.js";
 import { useSortableConfig } from "./Config.js";
 
 /**
- * Item Component
+ * SortableItemWrapper 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.
+ * This component manages the gesture handling and animations for a draggable item in the sortable grid or list.
+ * It uses the Reanimated 2 and Gesture Handler libraries to provide smooth drag-and-drop functionality.
+ * The component calculates the item's position and handles reordering logic when the item is dragged.
  *
  * Props:
- * @param {React.ReactNode} children - The content to render inside the item.
+ * @param {React.ReactNode} children - The content to render inside the draggable 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 {function} onDragEnd - Callback function triggered when dragging ends, providing the updated item positions.
+ * @param {object} scrollView - Reference to the scroll view for scrolling the list during drag.
  * @param {object} scrollY - Shared value representing the current scroll position.
- * @param {boolean} editing - Whether the list is in editing mode.
+ * @param {boolean} editing - Whether the grid or list is in editing mode, enabling drag-and-drop.
  * @param {boolean} draggable - Whether the item is draggable (default: true).
- * @param {Array} tiles - Array of tile items used to check reorderable state.
+ * @param {Array} data - Array of items used to determine the reorderable state of items.
+ *
+ * Usage:
+ * <SortableItemWrapper
+ *   id={item.id}
+ *   positions={positions}
+ *   editing={isEditing}
+ *   draggable={item.draggable}
+ *   data={itemsArray}
+ *   onDragEnd={handleDragEnd}
+ *   scrollView={scrollView}
+ *   scrollY={scrollY}
+ * >
+ *   <YourItemComponent />
+ * </SortableItemWrapper>
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const Item = ({
+const SortableItemWrapper = ({
   children,
   positions,
   id,
@@ -35,7 +50,7 @@ const Item = ({
   scrollY,
   editing,
   draggable = true,
-  tiles
+  data
 }) => {
   // Get safe area insets for accurate height calculation
   const inset = useSafeAreaInsets();
@@ -44,12 +59,13 @@ const Item = ({
   // Get the configuration for columns and size
   const {
     COL,
-    SIZE
+    SIZE,
+    MARGIN
   } = 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
+  const isGestureActive = useSharedValue(false); // Whether the item is actively being dragged
 
   // Calculate initial position of the item
   const position = getPosition(positions.value[id], COL, SIZE);
@@ -81,7 +97,7 @@ const Item = ({
         // Store the starting position
         ctx.x = translateX.value;
         ctx.y = translateY.value;
-        isGestureActive.value = false; // TODO: Set to false when grouping is implemented
+        isGestureActive.value = false;
       }
     },
     onActive: ({
@@ -101,7 +117,7 @@ const Item = ({
           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));
+          const targetItem = data.find(tile => tile.id === Number(idToSwap));
           if (idToSwap && targetItem?.reorderable !== false) {
             const newPositions = {
               ...positions.value
@@ -151,7 +167,7 @@ const Item = ({
 
   // Animated style for the item
   const style = useAnimatedStyle(() => {
-    const zIndex = isGestureActive.value ? 100 : 0; // Bring the item to front when active
+    const zIndex = isGestureActive.value ? 100 : 0; // Bring the item to the front when active
     const scale = editing && isGestureActive.value ? withSpring(1.05) : withSpring(1); // Slightly enlarge the item when dragging
     return {
       position: 'absolute',
@@ -159,6 +175,7 @@ const Item = ({
       left: 0,
       width: SIZE,
       height: SIZE,
+      margin: MARGIN,
       zIndex,
       transform: [{
         translateX: translateX.value
@@ -181,5 +198,5 @@ const Item = ({
     })
   });
 };
-export default Item;
-//# sourceMappingURL=Item.js.map
+export default SortableItemWrapper;
+//# sourceMappingURL=SortableItemWrapper.js.map

package/lib/module/SortableItemWrapper.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","SortableItemWrapper","children","positions","id","onDragEnd","scrollView","scrollY","editing","draggable","data","inset","containerHeight","get","height","top","bottom","COL","SIZE","MARGIN","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","margin","transform","View","enabled","absoluteFill"],"sourceRoot":"../../src","sources":["SortableItemWrapper.js"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AACxC,SAASC,UAAU,EAAEC,UAAU,QAAQ,cAAc;AACrD,OAAOC,QAAQ,IACbC,yBAAyB,EACzBC,gBAAgB,EAChBC,mBAAmB,EACnBC,UAAU,EACVC,QAAQ,EACRC,UAAU,EACVC,cAAc,EACdC,OAAO,QACF,yBAAyB;AAChC,SAASC,iBAAiB,QAAQ,8BAA8B;AAChE,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,eAAe,EAAEC,QAAQ,EAAEC,WAAW,QAAQ,aAAU;AACjE,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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AA/BA,SAAAC,GAAA,IAAAC,IAAA;AAgCA,MAAMC,mBAAmB,GAAGA,CAAC;EAC3BC,QAAQ;EACRC,SAAS;EACTC,EAAE;EACFC,SAAS;EACTC,UAAU;EACVC,OAAO;EACPC,OAAO;EACPC,SAAS,GAAG,IAAI;EAChBC;AACF,CAAC,KAAK;EACJ;EACA,MAAMC,KAAK,GAAGjB,iBAAiB,CAAC,CAAC;EACjC,MAAMkB,eAAe,GACnB9B,UAAU,CAAC+B,GAAG,CAAC,QAAQ,CAAC,CAACC,MAAM,GAAGH,KAAK,CAACI,GAAG,GAAGJ,KAAK,CAACK,MAAM;;EAE5D;EACA,MAAM;IAAEC,GAAG;IAAEC,IAAI;IAAEC;EAAO,CAAC,GAAGrB,iBAAiB,CAAC,CAAC;;EAEjD;EACA,MAAMsB,aAAa,GAAIC,MAAM,CAACC,IAAI,CAACnB,SAAS,CAACoB,KAAK,CAAC,CAACC,MAAM,GAAGP,GAAG,GAAIC,IAAI;EACxE,MAAMO,eAAe,GAAGlC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;;EAE/C;EACA,MAAMmC,QAAQ,GAAG7B,WAAW,CAACM,SAAS,CAACoB,KAAK,CAACnB,EAAE,CAAC,EAAEa,GAAG,EAAEC,IAAI,CAAC;EAC5D,MAAMS,UAAU,GAAGpC,cAAc,CAACmC,QAAQ,CAACE,CAAC,CAAC;EAC7C,MAAMC,UAAU,GAAGtC,cAAc,CAACmC,QAAQ,CAACI,CAAC,CAAC;;EAE7C;EACAjD,SAAS,CAAC,MAAM;IACd,IAAI,CAAC2B,OAAO,EAAE;MACZiB,eAAe,CAACF,KAAK,GAAG,KAAK;IAC/B;EACF,CAAC,EAAE,CAACf,OAAO,EAAEiB,eAAe,CAAC,CAAC;;EAE9B;EACAtC,mBAAmB,CACjB,MAAMgB,SAAS,CAACoB,KAAK,CAACnB,EAAE,CAAC;EAAE;EAC1B2B,QAAQ,IAAK;IACZ,IAAI,CAACN,eAAe,CAACF,KAAK,EAAE;MAC1B,MAAMS,GAAG,GAAGnC,WAAW,CAACkC,QAAQ,EAAEd,GAAG,EAAEC,IAAI,CAAC;MAC5CS,UAAU,CAACJ,KAAK,GAAGjC,UAAU,CAAC0C,GAAG,CAACJ,CAAC,EAAEjC,eAAe,CAAC;MACrDkC,UAAU,CAACN,KAAK,GAAGjC,UAAU,CAAC0C,GAAG,CAACF,CAAC,EAAEnC,eAAe,CAAC;IACvD;EACF,CACF,CAAC;;EAED;EACA,MAAMsC,cAAc,GAAGhD,yBAAyB,CAAC;IAC/CiD,OAAO,EAAEA,CAACC,CAAC,EAAEC,GAAG,KAAK;MACnB,IAAI5B,OAAO,IAAIC,SAAS,EAAE;QACxB;QACA2B,GAAG,CAACR,CAAC,GAAGD,UAAU,CAACJ,KAAK;QACxBa,GAAG,CAACN,CAAC,GAAGD,UAAU,CAACN,KAAK;QACxBE,eAAe,CAACF,KAAK,GAAG,KAAK;MAC/B;IACF,CAAC;IACDc,QAAQ,EAAEA,CAAC;MAAEC,YAAY;MAAEC;IAAa,CAAC,EAAEH,GAAG,KAAK;MACjD,IAAI5B,OAAO,IAAIC,SAAS,EAAE;QACxB;QACAkB,UAAU,CAACJ,KAAK,GAAGa,GAAG,CAACR,CAAC,GAAGU,YAAY;QACvCT,UAAU,CAACN,KAAK,GAAGa,GAAG,CAACN,CAAC,GAAGS,YAAY;;QAEvC;QACA,MAAMR,QAAQ,GAAGnC,QAAQ,CACvB+B,UAAU,CAACJ,KAAK,EAChBM,UAAU,CAACN,KAAK,EAChBF,MAAM,CAACC,IAAI,CAACnB,SAAS,CAACoB,KAAK,CAAC,CAACC,MAAM,GAAG,CAAC,EACvCP,GAAG,EACHC,IACF,CAAC;QAED,MAAMsB,QAAQ,GAAGrC,SAAS,CAACoB,KAAK,CAACnB,EAAE,CAAC;QACpC,IAAI2B,QAAQ,KAAKS,QAAQ,EAAE;UACzB;UACA,MAAMC,QAAQ,GAAGpB,MAAM,CAACC,IAAI,CAACnB,SAAS,CAACoB,KAAK,CAAC,CAACmB,IAAI,CAC/CC,GAAG,IAAKxC,SAAS,CAACoB,KAAK,CAACoB,GAAG,CAAC,KAAKZ,QACpC,CAAC;;UAED;UACA,MAAMa,UAAU,GAAGlC,IAAI,CAACgC,IAAI,CAAEG,IAAI,IAAKA,IAAI,CAACzC,EAAE,KAAK0C,MAAM,CAACL,QAAQ,CAAC,CAAC;UACpE,IAAIA,QAAQ,IAAIG,UAAU,EAAEG,WAAW,KAAK,KAAK,EAAE;YACjD,MAAMC,YAAY,GAAG;cAAE,GAAG7C,SAAS,CAACoB;YAAM,CAAC;YAC3CyB,YAAY,CAAC5C,EAAE,CAAC,GAAG2B,QAAQ;YAC3BiB,YAAY,CAACP,QAAQ,CAAC,GAAGD,QAAQ;YACjCrC,SAAS,CAACoB,KAAK,GAAGyB,YAAY;UAChC;QACF;;QAEA;QACA,MAAMC,UAAU,GAAG1C,OAAO,CAACgB,KAAK;QAChC,MAAM2B,UAAU,GAAGD,UAAU,GAAGrC,eAAe,GAAGM,IAAI;QACtD,MAAMiC,SAAS,GAAG/B,aAAa,GAAGR,eAAe;QACjD,MAAMwC,gBAAgB,GAAGD,SAAS,GAAG5C,OAAO,CAACgB,KAAK;;QAElD;QACA,IAAIM,UAAU,CAACN,KAAK,GAAG0B,UAAU,EAAE;UACjC,MAAMI,IAAI,GAAGC,IAAI,CAACC,GAAG,CAACN,UAAU,GAAGpB,UAAU,CAACN,KAAK,EAAE0B,UAAU,CAAC;UAChE1C,OAAO,CAACgB,KAAK,IAAI8B,IAAI;UACrBhE,QAAQ,CAACiB,UAAU,EAAE,CAAC,EAAEC,OAAO,CAACgB,KAAK,EAAE,KAAK,CAAC;UAC7Ca,GAAG,CAACN,CAAC,IAAIuB,IAAI;UACbxB,UAAU,CAACN,KAAK,GAAGa,GAAG,CAACN,CAAC,GAAGS,YAAY;QACzC;QACA;QACA,IAAIV,UAAU,CAACN,KAAK,GAAG2B,UAAU,EAAE;UACjC,MAAMG,IAAI,GAAGC,IAAI,CAACC,GAAG,CACnB1B,UAAU,CAACN,KAAK,GAAG2B,UAAU,EAC7BE,gBACF,CAAC;UACD7C,OAAO,CAACgB,KAAK,IAAI8B,IAAI;UACrBhE,QAAQ,CAACiB,UAAU,EAAE,CAAC,EAAEC,OAAO,CAACgB,KAAK,EAAE,KAAK,CAAC;UAC7Ca,GAAG,CAACN,CAAC,IAAIuB,IAAI;UACbxB,UAAU,CAACN,KAAK,GAAGa,GAAG,CAACN,CAAC,GAAGS,YAAY;QACzC;MACF;IACF,CAAC;IACDiB,KAAK,EAAEA,CAAA,KAAM;MACX,IAAI/C,SAAS,EAAE;QACb;QACA,MAAMgD,WAAW,GAAG5D,WAAW,CAACM,SAAS,CAACoB,KAAK,CAACnB,EAAE,CAAC,EAAEa,GAAG,EAAEC,IAAI,CAAC;QAC/DS,UAAU,CAACJ,KAAK,GAAGjC,UAAU,CAACmE,WAAW,CAAC7B,CAAC,EAAEjC,eAAe,EAAE,MAAM;UAClE8B,eAAe,CAACF,KAAK,GAAG,KAAK,CAAC,CAAC;UAC/B/B,OAAO,CAACa,SAAS,CAAC,CAACF,SAAS,CAACoB,KAAK,CAAC,CAAC,CAAC;QACvC,CAAC,CAAC;QACFM,UAAU,CAACN,KAAK,GAAGjC,UAAU,CAACmE,WAAW,CAAC3B,CAAC,EAAEnC,eAAe,CAAC;MAC/D;IACF;EACF,CAAC,CAAC;;EAEF;EACA,MAAM+D,KAAK,GAAGxE,gBAAgB,CAAC,MAAM;IACnC,MAAMyE,MAAM,GAAGlC,eAAe,CAACF,KAAK,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC;IAChD,MAAMqC,KAAK,GACTpD,OAAO,IAAIiB,eAAe,CAACF,KAAK,GAAGnC,UAAU,CAAC,IAAI,CAAC,GAAGA,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IACvE,OAAO;MACLsC,QAAQ,EAAE,UAAU;MACpBX,GAAG,EAAE,CAAC;MACN8C,IAAI,EAAE,CAAC;MACPC,KAAK,EAAE5C,IAAI;MACXJ,MAAM,EAAEI,IAAI;MACZ6C,MAAM,EAAE5C,MAAM;MACdwC,MAAM;MACNK,SAAS,EAAE,CACT;QAAErC,UAAU,EAAEA,UAAU,CAACJ;MAAM,CAAC,EAChC;QAAEM,UAAU,EAAEA,UAAU,CAACN;MAAM,CAAC,EAChC;QAAEqC;MAAM,CAAC;IAEb,CAAC;EACH,CAAC,CAAC;EAEF,oBACE5D,IAAA,CAAChB,QAAQ,CAACiF,IAAI;IAACP,KAAK,EAAEA,KAAM;IAAAxD,QAAA,eAC1BF,IAAA,CAACP,iBAAiB;MAACyE,OAAO,EAAE1D,OAAQ;MAACyB,cAAc,EAAEA,cAAe;MAAA/B,QAAA,eAClEF,IAAA,CAAChB,QAAQ,CAACiF,IAAI;QAACP,KAAK,EAAE3E,UAAU,CAACoF,YAAa;QAAAjE,QAAA,EAC3CA;MAAQ,CACI;IAAC,CACC;EAAC,CACP,CAAC;AAEpB,CAAC;AAED,eAAeD,mBAAmB","ignoreList":[]}

package/lib/module/SortableView.js

@@ -0,0 +1,67 @@
+"use strict";
+
+import React from 'react';
+import SortableListProvider from "./Config.js";
+import SortableContainer from "./SortableContainer.js";
+
+/**
+ * SortableView Component
+ *
+ * This component combines the configuration provider and the sortable container into a single component
+ * to simplify usage. It provides an interface for managing the layout, editing mode, and the reordering
+ * of items within a grid or list.
+ *
+ * Props:
+ * @param {object} config - Configuration options such as `MARGIN` and `COL` for customizing the layout.
+ * @param {Array} data - Array of data objects to render and reorder. Each object should have a unique `id`.
+ * @param {boolean} editing - Whether the list is in editing mode, enabling drag-and-drop functionality.
+ * @param {function} onDragEnd - Callback function called with the updated positions when the drag ends.
+ * @param {function} renderItem - Function to render each item inside the sortable view. Receives an object containing `item` and `index`.
+ * @param {function} onPress - Function to handle the press event on an item.
+ * @param {function} onLongPress - Function to handle the long press event on an item.
+ * @param {object} itemStyle - Custom style to apply to each SortableItem.
+ * @param {object} itemProps - Additional props to be passed to each SortableItem.
+ *
+ * Usage:
+ * <SortableView
+ *   config={{ MARGIN: 10, COL: 2 }}
+ *   data={dataArray}
+ *   editing={isEditing}
+ *   onDragEnd={handleDragEnd}
+ *   renderItem={({ item }) => <YourCustomComponent item={item} />}
+ *   onPress={handlePress}
+ *   onLongPress={handleLongPress}
+ *   itemStyle={{backgroundColor: 'blue'}}
+ *   itemProps={{disabled: true}}
+ * />
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const SortableView = ({
+  config,
+  data,
+  editing,
+  onDragEnd,
+  renderItem,
+  onPress,
+  onLongPress,
+  itemStyle,
+  itemProps
+}) => {
+  return /*#__PURE__*/_jsx(SortableListProvider, {
+    config: config,
+    children: /*#__PURE__*/_jsx(SortableContainer, {
+      editing: editing,
+      data: data,
+      onDragEnd: positions => {
+        onDragEnd(positions);
+      },
+      renderItem: renderItem,
+      onPress: onPress,
+      onLongPress: onLongPress,
+      style: itemStyle,
+      ...itemProps
+    })
+  });
+};
+export default SortableView;
+//# sourceMappingURL=SortableView.js.map

package/lib/module/SortableView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","SortableListProvider","SortableContainer","jsx","_jsx","SortableView","config","data","editing","onDragEnd","renderItem","onPress","onLongPress","itemStyle","itemProps","children","positions","style"],"sourceRoot":"../../src","sources":["SortableView.js"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,oBAAoB,MAAM,aAAU;AAC3C,OAAOC,iBAAiB,MAAM,wBAAqB;;AAEnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AA9BA,SAAAC,GAAA,IAAAC,IAAA;AA+BA,MAAMC,YAAY,GAAGA,CAAC;EACpBC,MAAM;EACNC,IAAI;EACJC,OAAO;EACPC,SAAS;EACTC,UAAU;EACVC,OAAO;EACPC,WAAW;EACXC,SAAS;EACTC;AACF,CAAC,KAAK;EACJ,oBACEV,IAAA,CAACH,oBAAoB;IAACK,MAAM,EAAEA,MAAO;IAAAS,QAAA,eACnCX,IAAA,CAACF,iBAAiB;MAChBM,OAAO,EAAEA,OAAQ;MACjBD,IAAI,EAAEA,IAAK;MACXE,SAAS,EAAGO,SAAS,IAAK;QACxBP,SAAS,CAACO,SAAS,CAAC;MACtB,CAAE;MACFN,UAAU,EAAEA,UAAW;MACvBC,OAAO,EAAEA,OAAQ;MACjBC,WAAW,EAAEA,WAAY;MACzBK,KAAK,EAAEJ,SAAU;MAAA,GACbC;IAAS,CACd;EAAC,CACkB,CAAC;AAE3B,CAAC;AAED,eAAeT,YAAY","ignoreList":[]}

package/lib/module/index.js

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

package/lib/module/index.js.map

@@ -1 +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":[]}
+{"version":3,"names":["default","SortableView"],"sourceRoot":"../../src","sources":["index.js"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,YAAY,QAAQ,mBAAgB","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-sortable-dynamic",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "This package provides a highly customizable, animated, and performant sortable grid list component for React Native. It allows users to easily reorder grid items through drag-and-drop gestures, with smooth animations powered by react-native-reanimated and gesture handling by react-native-gesture-handler.",
   "source": "./src/index.js",
   "main": "./lib/commonjs/index.js",