react-native-sortable-dynamic 0.1.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2024 Adam Lee
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,189 @@
+# react-native-sortable-dynamic
+
+![ScreenRecording2024-09-13at16 16 14-ezgif com-resize](https://github.com/user-attachments/assets/01f5e3e7-7046-4d7a-8658-6ba10978fe83)
+
+`react-native-sortable-dynamic` is a highly customizable, drag-and-drop library for creating sortable grid and list layouts in React Native. It provides smooth animations and supports reordering items in a dynamic, flexible layout. Ideal for creating dashboards, photo galleries, task boards, and more, with easy-to-use configuration options for both grid and list layouts.
+
+## Features
+
+- 🖱️ **Drag-and-drop**: Easily reorder grid and list items using intuitive gestures.
+- 🖼️ **Grid & List Support**: Configurable for both grid and list views.
+- 🧩 **Flexible Layout**: Customize columns, margins, and item sizes to fit your needs.
+- 🛠️ **Editable Mode**: Toggle between editing and non-editing modes to enable/disable reordering.
+- ⚡ **Smooth Animations**: Built using `react-native-reanimated` for seamless and performant animations.
+- 🔐 **Lock Items**: Mark specific items as non-reorderable or non-draggable.
+- 🧩 **Dynamic Layout Configuration**: Easily switch between grid and list views by configuring the layout dynamically.
+
+## Installation
+
+### Step 1: Install the package
+
+```bash
+npm install react-native-sortable-dynamic
+```
+
+##### or
+
+```bash
+yarn add react-native-sortable-dynamic
+```
+
+### Step 2: Install dependencies
+
+You'll also need to install dependencies like react-native-reanimated and react-native-gesture-handler if you haven't already:
+
+```bash
+npm install react-native-reanimated react-native-gesture-handler
+```
+
+##### or
+
+```bash
+yarn add react-native-reanimated react-native-gesture-handler
+```
+
+### Step 3: Additional setup
+
+1. **Reanimated Setup**: Follow the [react-native-reanimated installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/) to properly set up `react-native-reanimated`. This includes updating the `babel.config.js` file:
+
+   ```js
+   // babel.config.js
+   module.exports = {
+     presets: ['module:metro-react-native-babel-preset'],
+     plugins: [
+       'react-native-reanimated/plugin', // Add this line
+     ],
+   };
+   ```
+
+2. **Gesture Handler Setup**: Follow the [react-native-gesture-handler installation guide](https://docs.swmansion.com/react-native-gesture-handler/docs/) to set up `react-native-gesture-handler` correctly.
+
+3. **Android Specific Configuration**:
+
+   - If you're using this library on Android, make sure to wrap the root component with `GestureHandlerRootView`.
+   - Update `MainActivity.java` to enable gesture handling:
+
+   ```java
+   import com.facebook.react.ReactActivity;
+   import com.facebook.react.ReactActivityDelegate;
+   import com.facebook.react.ReactRootView;
+   import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView; // Add this import
+
+   public class MainActivity extends ReactActivity {
+     @Override
+     protected ReactActivityDelegate createReactActivityDelegate() {
+       return new ReactActivityDelegate(this, getMainComponentName()) {
+         @Override
+         protected ReactRootView createRootView() {
+           return new RNGestureHandlerEnabledRootView(MainActivity.this); // Modify this line
+         }
+       };
+     }
+   }
+   ```
+
+4. **iOS Specific Configuration**:
+
+   - For iOS, ensure that you run `pod install` in the `ios` directory of your project after installing the dependencies:
+
+   ```bash
+   cd ios
+   pod install
+   ```
+
+## Usage
+
+### Basic Example
+
+Here's a simple example of how to use `react-native-sortable-dynamic` in your React Native project:
+
+```jsx
+import React, { useState } from 'react';
+import { Text, View } from 'react-native';
+import {
+  SortableListProvider,
+  SortableList,
+  Tile,
+} from 'react-native-sortable-dynamic';
+
+const tiles = [
+  { id: 1, text: 'Tile 1' },
+  { id: 2, text: 'Tile 2' },
+  { id: 3, text: 'Tile 3' },
+  { id: 4, text: 'Tile 4' },
+];
+
+const App = () => {
+  const [enableEditing, setEnableEditing] = useState(false);
+
+  return (
+    <SortableListProvider config={{ MARGIN: 10, COL: 2 }}>
+      <SortableList
+        tiles={tiles}
+        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>
+  );
+};
+
+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`
+
+| 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. |
+
+#### `Tile`
+
+| 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`. |
+
+## Roadmap
+
+- ✅ Support for grid layouts
+- 🔜 Support for list layouts
+- 🔜 Add more customization options for animations and gestures
+- 🔜 Improve accessibility and performance
+
+## License
+
+This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
+
+## Contributing
+
+Contributions are welcome! See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

package/lib/commonjs/Config.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSortableConfig = exports.getPosition = exports.getOrder = exports.default = exports.animationConfig = void 0;
+var _reactNative = require("react-native");
+var _reactNativeReanimated = require("react-native-reanimated");
+var _react = _interopRequireWildcard(require("react"));
+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; }
+// Get screen width to calculate dynamic sizes
+const {
+  width
+} = _reactNative.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__*/(0, _react.createContext)(defaultConfig);
+
+// Custom hook to use the sortable configuration context
+const useSortableConfig = () => (0, _react.useContext)(ConfigContext);
+
+// Configuration for animation settings
+exports.useSortableConfig = useSortableConfig;
+const animationConfig = exports.animationConfig = {
+  easing: _reactNativeReanimated.Easing.inOut(_reactNativeReanimated.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
+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
+exports.getPosition = getPosition;
+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>
+ */
+exports.getOrder = getOrder;
+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__*/(0, _jsxRuntime.jsx)(ConfigContext.Provider, {
+    value: mergedConfig,
+    children: children
+  });
+};
+var _default = exports.default = SortableListProvider;
+//# sourceMappingURL=Config.js.map

package/lib/commonjs/Config.js.map

@@ -0,0 +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":[]}

package/lib/commonjs/Item.js

@@ -0,0 +1,188 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _reactNativeGestureHandler = require("react-native-gesture-handler");
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+var _Config = require("./Config.js");
+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
+ *
+ * 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.
+ */const Item = ({
+  children,
+  positions,
+  id,
+  onDragEnd,
+  scrollView,
+  scrollY,
+  editing,
+  draggable = true,
+  tiles
+}) => {
+  // Get safe area insets for accurate height calculation
+  const inset = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  const containerHeight = _reactNative.Dimensions.get('window').height - inset.top - inset.bottom;
+
+  // Get the configuration for columns and size
+  const {
+    COL,
+    SIZE
+  } = (0, _Config.useSortableConfig)();
+
+  // 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
+
+  // Calculate initial position of the item
+  const position = (0, _Config.getPosition)(positions.value[id], COL, SIZE);
+  const translateX = (0, _reactNativeReanimated.useSharedValue)(position.x);
+  const translateY = (0, _reactNativeReanimated.useSharedValue)(position.y);
+
+  // Effect to reset isGestureActive when not in editing mode
+  (0, _react.useEffect)(() => {
+    if (!editing) {
+      isGestureActive.value = false;
+    }
+  }, [editing, isGestureActive]);
+
+  // React to changes in the positions object
+  (0, _reactNativeReanimated.useAnimatedReaction)(() => positions.value[id],
+  // Track changes to this item's position
+  newOrder => {
+    if (!isGestureActive.value) {
+      const pos = (0, _Config.getPosition)(newOrder, COL, SIZE);
+      translateX.value = (0, _reactNativeReanimated.withTiming)(pos.x, _Config.animationConfig);
+      translateY.value = (0, _reactNativeReanimated.withTiming)(pos.y, _Config.animationConfig);
+    }
+  });
+
+  // Gesture handler for dragging
+  const onGestureEvent = (0, _reactNativeReanimated.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 = (0, _Config.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;
+          (0, _reactNativeReanimated.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;
+          (0, _reactNativeReanimated.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 = (0, _Config.getPosition)(positions.value[id], COL, SIZE);
+        translateX.value = (0, _reactNativeReanimated.withTiming)(newPosition.x, _Config.animationConfig, () => {
+          isGestureActive.value = false; // Set gesture to inactive
+          (0, _reactNativeReanimated.runOnJS)(onDragEnd)(positions.value); // Call onDragEnd on the JS thread
+        });
+        translateY.value = (0, _reactNativeReanimated.withTiming)(newPosition.y, _Config.animationConfig);
+      }
+    }
+  });
+
+  // Animated style for the item
+  const style = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    const zIndex = isGestureActive.value ? 100 : 0; // Bring the item to 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',
+      top: 0,
+      left: 0,
+      width: SIZE,
+      height: SIZE,
+      zIndex,
+      transform: [{
+        translateX: translateX.value
+      }, {
+        translateY: translateY.value
+      }, {
+        scale
+      }]
+    };
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+    style: style,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.PanGestureHandler, {
+      enabled: editing,
+      onGestureEvent: onGestureEvent,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+        style: _reactNative.StyleSheet.absoluteFill,
+        children: children
+      })
+    })
+  });
+};
+var _default = exports.default = Item;
+//# sourceMappingURL=Item.js.map

package/lib/commonjs/Item.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","Item","children","positions","id","onDragEnd","scrollView","scrollY","editing","draggable","tiles","inset","useSafeAreaInsets","containerHeight","Dimensions","height","top","bottom","COL","SIZE","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","transform","jsx","View","PanGestureHandler","enabled","StyleSheet","absoluteFill","_default","exports"],"sourceRoot":"../../src","sources":["Item.js"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/SortableList.js

@@ -0,0 +1,91 @@
+"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 _Item = _interopRequireDefault(require("./Item.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; }
+/**
+ * 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>
+ */const SortableList = ({
+  children,
+  editing,
+  tiles,
+  onDragEnd
+}) => {
+  // 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)(children.reduce((acc, child, index) => ({
+    ...acc,
+    [child.props.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(children.length / COL) * SIZE
+    },
+    showsVerticalScrollIndicator: false,
+    bounces: false,
+    scrollEventThrottle: 16 // Control scroll event frequency
+    ,
+    children: children.map(child => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.default, {
+      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))
+  });
+};
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(SortableList);
+//# sourceMappingURL=SortableList.js.map

package/lib/commonjs/SortableList.js.map

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