react-native-sortable-dynamic 0.1.1 → 0.2.1

package/README.md

@@ -100,49 +100,57 @@ Here's a simple example of how to use `react-native-sortable-dynamic` in your Re
 ```jsx
 import React, { useState } from 'react';
 import { Text, View } from 'react-native';
-import {
-  SortableListProvider,
-  SortableList,
-  Tile,
-} from 'react-native-sortable-dynamic';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { SortableView } from 'react-native-sortable-dynamic';
 
-const tiles = [
+const data = [
   { id: 1, text: 'Tile 1' },
   { id: 2, text: 'Tile 2' },
   { id: 3, text: 'Tile 3' },
-  { id: 4, text: 'Tile 4' },
+  { id: 4, text: 'Tile 4', reorderable: false },
 ];
 
 const App = () => {
   const [enableEditing, setEnableEditing] = useState(false);
 
+  const handleLongPress = () => {
+    setEnableEditing((prev) => !prev);
+  };
+
+  const renderItem = ({ item, index }) => (
+    <View
+      key={`${item.id}-${index}`}
+      style={{
+        backgroundColor: 'red',
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: 5,
+        margin: 10,
+        opacity:
+          enableEditing &&
+          item.draggable !== false &&
+          item.reorderable !== false
+            ? 0.5
+            : 1,
+      }}
+    >
+      <Text style={{ color: 'white', fontSize: 20 }}>{item.text}</Text>
+    </View>
+  );
+
   return (
-    <SortableListProvider config={{ MARGIN: 10, COL: 2 }}>
-      <SortableList
-        tiles={tiles}
+    <SafeAreaView style={{ flex: 1 }}>
+      <SortableView
+        config={{ MARGIN: 10, COL: 2 }}
+        data={data}
         editing={enableEditing}
         onDragEnd={(positions) => console.log(positions)}
-      >
-        {tiles.map((tile) => (
-          <Tile
-            key={tile.id}
-            id={tile.id}
-            onLongPress={() => setEnableEditing(!enableEditing)}
-          >
-            <View
-              style={{
-                flex: 1,
-                justifyContent: 'center',
-                alignItems: 'center',
-                backgroundColor: 'red',
-              }}
-            >
-              <Text style={{ color: 'white', fontSize: 20 }}>{tile.text}</Text>
-            </View>
-          </Tile>
-        ))}
-      </SortableList>
-    </SortableListProvider>
+        renderItem={renderItem}
+        onPress={handleLongPress}
+        onLongPress={handleLongPress}
+      />
+    </SafeAreaView>
   );
 };
 
@@ -151,34 +159,30 @@ export default App;
 
 ### Props
 
-#### `SortableListProvider`
-
-| Prop     | Type     | Description                                                                                       |
-| -------- | -------- | ------------------------------------------------------------------------------------------------- |
-| `config` | `object` | Configuration options such as `MARGIN` and `COL`. Use this to dynamically adjust the grid layout. |
-
-#### `SortableList`
+#### `SortableView`
 
-| Prop        | Type       | Description                                                           |
-| ----------- | ---------- | --------------------------------------------------------------------- |
-| `tiles`     | `array`    | Array of items to be rendered and sorted.                             |
-| `editing`   | `boolean`  | If true, allows items to be dragged and reordered.                    |
-| `onDragEnd` | `function` | Callback function that receives updated positions when the drag ends. |
+| Prop          | Type       | Description                                                                                        |
+| ------------- | ---------- | -------------------------------------------------------------------------------------------------- |
+| `config`      | `object`   | Configuration options such as `MARGIN` and `COL`. Use this to dynamically adjust the grid layout.  |
+| `data`        | `array`    | Array of items to be rendered and sorted.                                                          |
+| `editing`     | `boolean`  | If true, allows items to be dragged and reordered.                                                 |
+| `onDragEnd`   | `function` | Callback function that receives updated positions when the drag ends.                              |
+| `renderItem`  | `function` | Function to render each item inside the sortable container. Receives item and index as parameters. |
+| `onPress`     | `function` | Function to handle the press event on a sortable item.                                             |
+| `onLongPress` | `function` | Function to handle the long press event on a sortable item.                                        |
+| `itemStyle`   | `object`   | Custom style to apply to each SortableItem.                                                        |
+| `itemProps`   | `object`   | Additional props to be passed to each SortableItem.                                                |
 
-#### `Tile`
+### Note
 
-| Prop            | Type       | Description                                                   |
-| --------------- | ---------- | ------------------------------------------------------------- |
-| `onPress`       | `function` | Function called when the tile is pressed.                     |
-| `onLongPress`   | `function` | Function called when the tile is long-pressed.                |
-| `activeOpacity` | `number`   | The opacity of the tile when it is pressed. Default is `0.7`. |
+renderItem function will receive the item and index as parameters, allowing you to customize the rendering of each item.
 
 ## Roadmap
 
 - ✅ Support for grid layouts
+- ✅ Improve accessibility and performance
 - 🔜 Support for list layouts
 - 🔜 Add more customization options for animations and gestures
-- 🔜 Improve accessibility and performance
 
 ## License
 

package/lib/commonjs/Config.js

@@ -15,17 +15,16 @@ const {
   width
 } = _reactNative.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__*/(0, _react.createContext)(defaultConfig);
 
 // Custom hook to use the sortable configuration context
@@ -39,7 +38,7 @@ const animationConfig = exports.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
 const getPosition = (position, COL, SIZE) => {
   'worklet';
 
@@ -64,9 +63,10 @@ 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.
@@ -75,12 +75,12 @@ const getOrder = (tx, ty, max, COL, SIZE) => {
  *
  * Usage:
  *
- * <SortableListProvider config={{ MARGIN: 15, COL: 3 }}>
- *   <YourSortableList />
- * </SortableListProvider>
+ * <SortableConfigProvider config={{ MARGIN: 15, COL: 3 }}>
+ *   <YourSortableComponent />
+ * </SortableConfigProvider>
  */
 exports.getOrder = getOrder;
-const SortableListProvider = ({
+const SortableConfigProvider = ({
   children,
   config
 }) => {
@@ -97,5 +97,5 @@ const SortableListProvider = ({
     children: children
   });
 };
-var _default = exports.default = SortableListProvider;
+var _default = exports.default = SortableConfigProvider;
 //# sourceMappingURL=Config.js.map

package/lib/commonjs/Config.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_reactNativeReanimated","_react","_interopRequireWildcard","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","width","Dimensions","defaultConfig","MARGIN","COL","SIZE","ConfigContext","createContext","useSortableConfig","useContext","exports","animationConfig","easing","Easing","inOut","ease","duration","getPosition","position","x","y","Math","floor","getOrder","tx","ty","max","round","row","col","min","SortableListProvider","children","config","mergedConfig","jsx","Provider","value","_default"],"sourceRoot":"../../src","sources":["Config.js"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_reactNative","require","_reactNativeReanimated","_react","_interopRequireWildcard","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","width","Dimensions","defaultConfig","MARGIN","COL","SIZE","ConfigContext","createContext","useSortableConfig","useContext","exports","animationConfig","easing","Easing","inOut","ease","duration","getPosition","position","x","y","Math","floor","getOrder","tx","ty","max","round","row","col","min","SortableConfigProvider","children","config","mergedConfig","jsx","Provider","value","_default"],"sourceRoot":"../../src","sources":["Config.js"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/SortableContainer.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _SortableItemWrapper = _interopRequireDefault(require("./SortableItemWrapper.js"));
+var _SortableItem = _interopRequireDefault(require("./SortableItem.js"));
+var _Config = require("./Config.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * 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}
+ * />
+ */const SortableContainer = ({
+  data,
+  editing,
+  onDragEnd,
+  renderItem,
+  onPress,
+  onLongPress,
+  itemStyle,
+  ...itemProps
+}) => {
+  // Get the configuration for columns and size from context
+  const {
+    COL,
+    SIZE
+  } = (0, _Config.useSortableConfig)();
+
+  // Shared values to track scrolling and item positions
+  const scrollY = (0, _reactNativeReanimated.useSharedValue)(0); // Current scroll position
+  const scrollView = (0, _reactNativeReanimated.useAnimatedRef)(); // Reference to the scroll view
+  const positions = (0, _reactNativeReanimated.useSharedValue)(data.reduce((acc, item, index) => ({
+    ...acc,
+    [item.id]: index
+  }), {}));
+
+  // Scroll event handler to update scrollY shared value
+  const onScroll = (0, _reactNativeReanimated.useAnimatedScrollHandler)({
+    onScroll: ({
+      contentOffset: {
+        y
+      }
+    }) => {
+      scrollY.value = y;
+    }
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.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__*/(0, _jsxRuntime.jsx)(_SortableItemWrapper.default, {
+      id: item.id.toString(),
+      positions: positions,
+      editing: editing,
+      draggable: item.draggable,
+      reorderable: item.reorderable,
+      data: data,
+      onDragEnd: onDragEnd,
+      scrollView: scrollView,
+      scrollY: scrollY,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SortableItem.default, {
+        id: item.id.toString(),
+        draggable: item.draggable,
+        reorderable: item.reorderable,
+        onPress: () => onPress && onPress(item),
+        onLongPress: () => onLongPress && onLongPress(item),
+        style: itemStyle,
+        ...itemProps,
+        children: renderItem({
+          item: item,
+          index
+        })
+      })
+    }, item.id.toString()))
+  });
+};
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(SortableContainer);
+//# sourceMappingURL=SortableContainer.js.map

package/lib/commonjs/SortableContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNativeReanimated","_SortableItemWrapper","_interopRequireDefault","_SortableItem","_Config","_jsxRuntime","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SortableContainer","data","editing","onDragEnd","renderItem","onPress","onLongPress","itemStyle","itemProps","COL","SIZE","useSortableConfig","scrollY","useSharedValue","scrollView","useAnimatedRef","positions","reduce","acc","item","index","id","onScroll","useAnimatedScrollHandler","contentOffset","y","value","jsx","ScrollView","ref","contentContainerStyle","height","Math","ceil","length","showsVerticalScrollIndicator","bounces","scrollEventThrottle","children","map","toString","draggable","reorderable","style","_default","exports","memo"],"sourceRoot":"../../src","sources":["SortableContainer.js"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/SortableItem.js

@@ -0,0 +1,61 @@
+"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 }; }
+/**
+ * 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>
+ */const SortableItem = ({
+  onPress,
+  onLongPress,
+  activeOpacity = 0.7,
+  children,
+  style,
+  ...rest
+}) => {
+  // Get the size of the item from the sortable config context
+  const {
+    SIZE
+  } = (0, _Config.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__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+    style: [containerStyle, style],
+    onPress: onPress,
+    onLongPress: onLongPress,
+    activeOpacity: activeOpacity,
+    ...rest,
+    children: children
+  });
+};
+var _default = exports.default = SortableItem;
+//# sourceMappingURL=SortableItem.js.map

package/lib/commonjs/SortableItem.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_Config","_jsxRuntime","e","__esModule","default","SortableItem","onPress","onLongPress","activeOpacity","children","style","rest","SIZE","useSortableConfig","containerStyle","width","height","jsx","TouchableOpacity","_default","exports"],"sourceRoot":"../../src","sources":["SortableItem.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;AACA;AACA;AACA,GACA,MAAMG,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,GAAG,IAAAC,yBAAiB,EAAC,CAAC;;EAEpC;EACA,MAAMC,cAAc,GAAG;IACrBC,KAAK,EAAEH,IAAI;IACXI,MAAM,EAAEJ;EACV,CAAC;EAED,oBACE,IAAAX,WAAA,CAAAgB,GAAA,EAAClB,YAAA,CAAAmB,gBAAgB;IACfR,KAAK,EAAE,CAACI,cAAc,EAAEJ,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;AAAC,IAAAU,QAAA,GAAAC,OAAA,CAAAhB,OAAA,GAEaC,YAAY","ignoreList":[]}

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

@@ -14,22 +14,37 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
- * 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.
- */const Item = ({
+ * @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>
+ */const SortableItemWrapper = ({
   children,
   positions,
   id,
@@ -38,7 +53,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
   scrollY,
   editing,
   draggable = true,
-  tiles
+  data
 }) => {
   // Get safe area insets for accurate height calculation
   const inset = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
@@ -53,7 +68,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
   // Calculate content height based on the number of items
   const contentHeight = Object.keys(positions.value).length / COL * SIZE;
-  const isGestureActive = (0, _reactNativeReanimated.useSharedValue)(false); // Whether the item is being actively dragged
+  const isGestureActive = (0, _reactNativeReanimated.useSharedValue)(false); // Whether the item is actively being dragged
 
   // Calculate initial position of the item
   const position = (0, _Config.getPosition)(positions.value[id], COL, SIZE);
@@ -85,7 +100,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
         // 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: ({
@@ -105,7 +120,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
           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
@@ -155,7 +170,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
   // Animated style for the item
   const style = (0, _reactNativeReanimated.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 ? (0, _reactNativeReanimated.withSpring)(1.05) : (0, _reactNativeReanimated.withSpring)(1); // Slightly enlarge the item when dragging
     return {
       position: 'absolute',
@@ -186,5 +201,5 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
     })
   });
 };
-var _default = exports.default = Item;
-//# sourceMappingURL=Item.js.map
+var _default = exports.default = SortableItemWrapper;
+//# sourceMappingURL=SortableItemWrapper.js.map

package/lib/commonjs/SortableItemWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_reactNativeGestureHandler","_reactNativeSafeAreaContext","_Config","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SortableItemWrapper","children","positions","id","onDragEnd","scrollView","scrollY","editing","draggable","data","inset","useSafeAreaInsets","containerHeight","Dimensions","height","top","bottom","COL","SIZE","MARGIN","useSortableConfig","contentHeight","keys","value","length","isGestureActive","useSharedValue","position","getPosition","translateX","x","translateY","y","useEffect","useAnimatedReaction","newOrder","pos","withTiming","animationConfig","onGestureEvent","useAnimatedGestureHandler","onStart","_","ctx","onActive","translationX","translationY","getOrder","oldOrder","idToSwap","find","key","targetItem","tile","Number","reorderable","newPositions","lowerBound","upperBound","maxScroll","leftToScrollDown","diff","Math","min","scrollTo","onEnd","newPosition","runOnJS","style","useAnimatedStyle","zIndex","scale","withSpring","left","width","margin","transform","jsx","View","PanGestureHandler","enabled","StyleSheet","absoluteFill","_default","exports"],"sourceRoot":"../../src","sources":["SortableItemWrapper.js"],"mappings":"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","ignoreList":[]}

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