react-native-reanimated-dnd 1.0.4 → 1.1.0

package/README.md

@@ -16,11 +16,14 @@ _Powerful, performant, and built for the modern React Native developer_
 
 <br />
 
+<a href="https://www.npmjs.com/package/react-native-reanimated-dnd" target="_blank">
+  <img src="https://img.shields.io/badge/📦%20View%20on%20NPM-cb3837?style=for-the-badge&logo=npm&logoColor=white&labelColor=1e293b&fontSize=24" alt="NPM Package" height="36"/>
+</a>
 <a href="https://react-native-reanimated-dnd.netlify.app/" target="_blank">
-  <img src="https://img.shields.io/badge/📖%20Read%20the%20Docs-4f46e5?style=for-the-badge&logo=gitbook&logoColor=white&labelColor=1e293b&color=6366f1" alt="Documentation" />
+  <img src="https://img.shields.io/badge/📖%20Read%20the%20Docs-4f46e5?style=for-the-badge&logo=gitbook&logoColor=white&labelColor=1e293b&color=6366f1&fontSize=24" alt="Documentation"  height="36"/>
 </a>
 <a href="#-interactive-examples" target="_blank">
-  <img src="https://img.shields.io/badge/📱%20Try%20Live%20Demo-ff3b30?style=for-the-badge&logo=expo&logoColor=white&labelColor=1e293b" alt="Live Demo" />
+  <img src="https://img.shields.io/badge/📱%20Try%20Live%20Demo-fcba03?style=for-the-badge&logo=expo&logoColor=white&labelColor=1e293b&fontSize=24" alt="Live Demo" height="36"/>
 </a>
 
 </div>
@@ -36,6 +39,9 @@ After countless attempts with drag-and-drop solutions that don't work or are sim
 ## ✨ Features
 
 - 🚀 **High Performance** - Built with Reanimated 3 for buttery-smooth 60fps animations
+- 🏗️ **Full RN Fabric Support** - Works seamlessly with both New Architecture and Old Architecture
+- 📦 **Expo Compatible** - Zero configuration needed, works out of the box with Expo
+- 🪶 **Tiny Bundle Size** - Only 70kb unpacked size, won't bloat your app
 - 🎯 **Flexible API** - From simple drag-and-drop to complex sortable lists
 - 📱 **React Native First** - Designed specifically for mobile, not ported from web
 - 🔧 **TypeScript Ready** - Full type safety with comprehensive definitions
@@ -67,7 +73,7 @@ After countless attempts with drag-and-drop solutions that don't work or are sim
 
 <img src="https://github.com/user-attachments/assets/80f923f6-7c5f-42e9-9817-7770ee27a70b" alt="Expo QR Code" width="200" height="200" />
 
-*Scan with your camera or Expo Go app*
+_Scan with your camera or Expo Go app_
 
 </td>
 <td align="center" width="50%">
@@ -92,7 +98,7 @@ After countless attempts with drag-and-drop solutions that don't work or are sim
   <img src="https://img.shields.io/badge/📖%20Documentation-Visit%20Docs-4f46e5?style=for-the-badge&logo=gitbook&logoColor=white&labelColor=1e293b" alt="Documentation" />
 </a>
 
-*Comprehensive guides, API reference, and interactive examples*
+_Comprehensive guides, API reference, and interactive examples_
 
 </div>
 
@@ -116,7 +122,8 @@ The example app includes:
 <td align="center" width="50%">
 
 ### 📋 Sortable Lists
-*Drag and drop to reorder items with smooth animations*
+
+_Drag and drop to reorder items with smooth animations_
 
 https://github.com/user-attachments/assets/1cd1929c-724b-4dda-a916-f3e69f917f7b
 
@@ -126,7 +133,8 @@ https://github.com/user-attachments/assets/1cd1929c-724b-4dda-a916-f3e69f917f7b
 <td align="center" width="50%">
 
 ### 🎯 Collision Detection
-*Multiple algorithms for precise drop targeting*
+
+_Multiple algorithms for precise drop targeting_
 
 https://github.com/user-attachments/assets/379040d7-8489-430b-bae4-3fcbde34264e
 
@@ -138,7 +146,8 @@ https://github.com/user-attachments/assets/379040d7-8489-430b-bae4-3fcbde34264e
 <td align="center" width="50%">
 
 ### 🎪 Drag Handles
-*Precise control with dedicated drag areas*
+
+_Precise control with dedicated drag areas_
 
 https://github.com/user-attachments/assets/ec051d5b-8ba0-41b7-86ae-379de26a97dd
 
@@ -148,7 +157,8 @@ https://github.com/user-attachments/assets/ec051d5b-8ba0-41b7-86ae-379de26a97dd
 <td align="center" width="50%">
 
 ### 📦 Bounded Dragging
-*Constrain movement within specific boundaries*
+
+_Constrain movement within specific boundaries_
 
 https://github.com/user-attachments/assets/7bd5045b-47c4-4d9b-a0c5-eb89122ec9c0
 
@@ -160,7 +170,8 @@ https://github.com/user-attachments/assets/7bd5045b-47c4-4d9b-a0c5-eb89122ec9c0
 <td align="center" width="50%">
 
 ### ✨ Active Drop Styles
-*Visual feedback during drag operations*
+
+_Visual feedback during drag operations_
 
 https://github.com/user-attachments/assets/3b8a3d00-38ad-4532-bd42-173037ea61b9
 
@@ -170,7 +181,8 @@ https://github.com/user-attachments/assets/3b8a3d00-38ad-4532-bd42-173037ea61b9
 <td align="center" width="50%">
 
 ### 🔄 State Management
-*Complete lifecycle tracking and callbacks*
+
+_Complete lifecycle tracking and callbacks_
 
 https://github.com/user-attachments/assets/da5e526f-f2d2-4dc5-96b5-3fecc4faf57a
 
@@ -205,24 +217,18 @@ Follow the setup guides:
 
 ```tsx
 import React from "react";
-import { View, Text } from "react-native";
+import { View, Text, StyleSheet } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { Draggable, DropProvider } from "react-native-reanimated-dnd";
 
 export default function App() {
   return (
-    <GestureHandlerRootView style={{ flex: 1 }}>
+    <GestureHandlerRootView style={styles.container}>
       <DropProvider>
-        <View style={{ flex: 1, padding: 20 }}>
+        <View style={styles.content}>
           <Draggable data={{ id: "1", title: "Drag me!" }}>
-            <View
-              style={{
-                padding: 20,
-                backgroundColor: "#007AFF",
-                borderRadius: 8,
-              }}
-            >
-              <Text style={{ color: "white" }}>Drag me around!</Text>
+            <View style={styles.draggableItem}>
+              <Text style={styles.itemText}>🎯 Drag me around!</Text>
             </View>
           </Draggable>
         </View>
@@ -230,13 +236,44 @@ export default function App() {
     </GestureHandlerRootView>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#000000",
+  },
+  content: {
+    flex: 1,
+    padding: 20,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  draggableItem: {
+    padding: 20,
+    backgroundColor: "#1C1C1E",
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: "#3A3A3C",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  itemText: {
+    color: "#FFFFFF",
+    fontSize: 16,
+    fontWeight: "600",
+    textAlign: "center",
+  },
+});
 ```
 
 ### Drag & Drop with Multiple Zones
 
 ```tsx
 import React from "react";
-import { View, Text } from "react-native";
+import { Alert, StyleSheet, Text, View } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import {
   Draggable,
@@ -245,95 +282,322 @@ import {
 } from "react-native-reanimated-dnd";
 
 export default function DragDropExample() {
-  const handleDrop = (data: any) => {
-    console.log("Item dropped:", data);
+  const handleDrop = (data: any, zoneId: string) => {
+    Alert.alert("Item Dropped", `"${data.title}" dropped in ${zoneId}`);
   };
 
   return (
-    <GestureHandlerRootView style={{ flex: 1 }}>
+    <GestureHandlerRootView style={styles.container}>
       <DropProvider>
-        <View style={{ flex: 1, padding: 20 }}>
-          {/* Draggable Item */}
-          <Draggable data={{ id: "1", title: "Drag me!" }}>
-            <View style={styles.draggableItem}>
-              <Text>📦 Drag me to a zone</Text>
-            </View>
-          </Draggable>
-
+        <View style={styles.content}>
           {/* Drop Zones */}
-          <Droppable onDrop={handleDrop}>
-            <View style={styles.dropZone}>
-              <Text>🎯 Drop Zone 1</Text>
-            </View>
-          </Droppable>
+          <View style={styles.dropZonesSection}>
+            <Text style={styles.sectionTitle}>Drop Zones</Text>
 
-          <Droppable onDrop={handleDrop}>
-            <View style={styles.dropZone}>
-              <Text>🎯 Drop Zone 2</Text>
-            </View>
-          </Droppable>
+            <Droppable
+              onDrop={(data) => handleDrop(data, "Zone 1")}
+              activeStyle={styles.dropZoneActive}
+              style={styles.droppable}
+            >
+              <View style={[styles.dropZoneBlue, styles.dropZone]}>
+                <Text style={styles.dropZoneText}>🎯 Zone 1</Text>
+                <Text style={styles.dropZoneSubtext}>Drop here</Text>
+              </View>
+            </Droppable>
+
+            <Droppable
+              onDrop={(data) => handleDrop(data, "Zone 2")}
+              activeStyle={styles.dropZoneActive}
+              style={styles.droppable}
+            >
+              <View style={[styles.dropZone, styles.dropZoneGreen]}>
+                <Text style={styles.dropZoneText}>🎯 Zone 2</Text>
+                <Text style={styles.dropZoneSubtext}>Drop here</Text>
+              </View>
+            </Droppable>
+          </View>
+
+          {/* Draggable Item */}
+          <View style={styles.draggableSection}>
+            <Text style={styles.sectionTitle}>Draggable Item</Text>
+            <Draggable data={{ id: "1", title: "Task Item" }}>
+              <View style={styles.draggableItem}>
+                <Text style={styles.itemText}>📦 Drag me to a zone</Text>
+              </View>
+            </Draggable>
+          </View>
         </View>
       </DropProvider>
     </GestureHandlerRootView>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#000000",
+  },
+  content: {
+    flex: 1,
+    padding: 20,
+    justifyContent: "space-between",
+  },
+  sectionTitle: {
+    color: "#FFFFFF",
+    fontSize: 18,
+    fontWeight: "700",
+    marginBottom: 20,
+    textAlign: "center",
+  },
+  draggableSection: {
+    alignItems: "center",
+    paddingVertical: 40,
+  },
+  draggableItem: {
+    padding: 20,
+    backgroundColor: "#1C1C1E",
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: "#3A3A3C",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  itemText: {
+    color: "#FFFFFF",
+    fontSize: 16,
+    fontWeight: "600",
+    textAlign: "center",
+  },
+  dropZonesSection: {
+    flex: 1,
+    paddingVertical: 40,
+  },
+  droppable: {
+    marginBottom: 20,
+    overflow: "hidden",
+    borderRadius: 16,
+  },
+  dropZone: {
+    height: 140,
+    borderWidth: 2,
+    borderStyle: "dashed",
+    borderRadius: 16,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 20,
+  },
+  dropZoneBlue: {
+    borderColor: "#58a6ff",
+    backgroundColor: "rgba(88, 166, 255, 0.08)",
+  },
+  dropZoneGreen: {
+    borderColor: "#3fb950",
+    backgroundColor: "rgba(63, 185, 80, 0.08)",
+  },
+  dropZoneActive: {
+    backgroundColor: "rgba(255, 255, 255, 0.1)",
+    borderStyle: "solid",
+    transform: [{ scale: 1.02 }],
+  },
+  dropZoneText: {
+    color: "#FFFFFF",
+    fontSize: 18,
+    fontWeight: "600",
+    textAlign: "center",
+    marginBottom: 8,
+  },
+  dropZoneSubtext: {
+    color: "#8E8E93",
+    fontSize: 14,
+    textAlign: "center",
+  },
+});
 ```
 
 ### Sortable List
 
 ```tsx
-import React, { useState } from "react";
-import { View, Text } from "react-native";
+import React, { useCallback, useState } from "react";
+import { StyleSheet, Text, View } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
-import { Sortable, SortableItem } from "react-native-reanimated-dnd";
+import {
+  Sortable,
+  SortableItem,
+  SortableRenderItemProps,
+} from "react-native-reanimated-dnd";
 
 interface Task {
   id: string;
   title: string;
+  completed: boolean;
 }
 
 export default function SortableExample() {
   const [tasks, setTasks] = useState<Task[]>([
-    { id: "1", title: "Learn React Native" },
-    { id: "2", title: "Build an app" },
-    { id: "3", title: "Deploy to store" },
+    { id: "1", title: "Learn React Native", completed: false },
+    { id: "2", title: "Build an app", completed: false },
+    { id: "3", title: "Deploy to store", completed: true },
+    { id: "4", title: "Celebrate success", completed: false },
   ]);
 
-  const renderTask = ({ item, id, positions, ...props }) => (
-    <SortableItem
-      key={id}
-      id={id}
-      positions={positions}
-      {...props}
-      onMove={(itemId, from, to) => {
-        const newTasks = [...tasks];
-        const [movedTask] = newTasks.splice(from, 1);
-        newTasks.splice(to, 0, movedTask);
-        setTasks(newTasks);
-      }}
-    >
-      <View style={styles.taskItem}>
-        <Text>{item.title}</Text>
-
-        {/* Drag Handle */}
-        <SortableItem.Handle style={styles.dragHandle}>
-          <Text>⋮⋮</Text>
-        </SortableItem.Handle>
-      </View>
-    </SortableItem>
+  const renderTask = useCallback(
+    (props: SortableRenderItemProps<Task>) => {
+      const {
+        item,
+        id,
+        positions,
+        lowerBound,
+        autoScrollDirection,
+        itemsCount,
+        itemHeight,
+      } = props;
+      return (
+        <SortableItem
+          key={id}
+          data={item}
+          id={id}
+          positions={positions}
+          lowerBound={lowerBound}
+          autoScrollDirection={autoScrollDirection}
+          itemsCount={itemsCount}
+          itemHeight={itemHeight}
+          onMove={(itemId, from, to) => {
+            const newTasks = [...tasks];
+            const [movedTask] = newTasks.splice(from, 1);
+            newTasks.splice(to, 0, movedTask);
+            setTasks(newTasks);
+          }}
+          style={styles.taskItem}
+        >
+          <View style={styles.taskContent}>
+            <View style={styles.taskInfo}>
+              <Text style={styles.taskTitle}>{item.title}</Text>
+              <Text style={styles.taskStatus}>
+                {item.completed ? "✅ Completed" : "⏳ Pending"}
+              </Text>
+            </View>
+
+            {/* Drag Handle */}
+            <SortableItem.Handle style={styles.dragHandle}>
+              <View style={styles.dragIconContainer}>
+                <View style={styles.dragColumn}>
+                  <View style={styles.dragDot} />
+                  <View style={styles.dragDot} />
+                  <View style={styles.dragDot} />
+                </View>
+                <View style={styles.dragColumn}>
+                  <View style={styles.dragDot} />
+                  <View style={styles.dragDot} />
+                  <View style={styles.dragDot} />
+                </View>
+              </View>
+            </SortableItem.Handle>
+          </View>
+        </SortableItem>
+      );
+    },
+    [tasks]
   );
 
   return (
-    <GestureHandlerRootView style={{ flex: 1 }}>
+    <GestureHandlerRootView style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.headerTitle}>📋 My Tasks</Text>
+        <Text style={styles.headerSubtitle}>Drag to reorder</Text>
+      </View>
+
       <Sortable
         data={tasks}
         renderItem={renderTask}
-        itemHeight={60}
-        style={{ flex: 1, padding: 16 }}
+        itemHeight={80}
+        style={styles.list}
       />
     </GestureHandlerRootView>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#000000",
+  },
+  header: {
+    padding: 20,
+    paddingBottom: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: "#2C2C2E",
+  },
+  headerTitle: {
+    color: "#FFFFFF",
+    fontSize: 24,
+    fontWeight: "700",
+    marginBottom: 4,
+  },
+  headerSubtitle: {
+    color: "#8E8E93",
+    fontSize: 14,
+  },
+  list: {
+    flex: 1,
+    backgroundColor: "#000000",
+    marginTop: 20,
+    paddingHorizontal: 20,
+    borderRadius: 20,
+    overflow: "hidden",
+  },
+  taskItem: {
+    height: 80,
+
+    backgroundColor: "transparent",
+  },
+  taskContent: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 20,
+    backgroundColor: "#1C1C1E",
+
+    borderWidth: 1,
+    borderColor: "#3A3A3C",
+  },
+  taskInfo: {
+    flex: 1,
+    paddingRight: 16,
+  },
+  taskTitle: {
+    color: "#FFFFFF",
+    fontSize: 16,
+    fontWeight: "600",
+    marginBottom: 4,
+  },
+  taskStatus: {
+    color: "#8E8E93",
+    fontSize: 14,
+  },
+  dragHandle: {
+    padding: 12,
+    borderRadius: 8,
+    backgroundColor: "rgba(255, 255, 255, 0.05)",
+  },
+  dragIconContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 3,
+  },
+  dragColumn: {
+    flexDirection: "column",
+    gap: 2,
+  },
+  dragDot: {
+    width: 3,
+    height: 3,
+    borderRadius: 1.5,
+    backgroundColor: "#6D6D70",
+  },
+});
 ```
 
 ## 📚 API Reference
@@ -606,9 +870,73 @@ npx expo run:android
 
 The example app includes all 15 interactive examples showcasing every feature of the library.
 
+## 🗺️ Project Roadmap
+
+I am constantly working to improve React Native Reanimated DnD. Here's what's coming next:
+
+### 🎯 Next Release (v2.0.0)
+
+**Focus: Enhanced Functionality & Bug Fixes**
+
+- 🐛 **Bug Fixes & Issues Resolution**
+
+  - Address existing reported issues
+  - Performance optimizations
+  - Gesture handling improvements
+  - API Improvements
+
+- 📐 **Sortable Grids**
+
+  - 2D grid drag-and-drop support
+  - Flexible grid layouts (2x2, 3x3, custom)
+  - Smart auto-positioning and gap management
+  - Responsive grid behavior
+
+- ↔️ **Horizontal Sortable Lists**
+
+  - Full horizontal scrolling support
+  - Auto-scroll for out-of-view items
+  - Customizable scroll behavior
+
+- 🪆 **Nested Sortable Lists**
+
+  - Multi-level hierarchy support
+  - Collapse/expand functionality
+  - Parent-child relationship management
+  - Tree-like data structure handling
+
+- 📋 **Kanban Board Support**
+  - Cross-list dragging capabilities
+  - Multiple column support
+  - Inter-list item transfer
+  - Board-level state management
+
+### 💡 Community Requests
+
+Vote on features you'd like to see by raising an issue.
+
+**Have an idea?** [Open a feature request](https://github.com/entropyconquers/react-native-reanimated-dnd/issues/new?assignees=&labels=enhancement&template=feature_request.md) and let me know!
+
 ## 🤝 Contributing
 
-Contributions are always welcome! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
+Contributions are always welcome! We believe in building this library together with the community.
+
+**Ways to contribute:**
+
+- 🐛 Report bugs and issues
+- ✨ Suggest new features
+- 🔧 Submit pull requests
+- 📚 Improve documentation
+- 🧪 Write tests
+- 💬 Help others in discussions
+
+Please see our [**Contributing Guide**](CONTRIBUTING.md) for detailed information on:
+
+- Setting up the development environment
+- Code style guidelines
+- Pull request process
+- Testing requirements
+- Community guidelines
 
 ## 📄 License
 
@@ -621,6 +949,24 @@ MIT © [Vishesh Raheja](https://github.com/entropyconquers)
 - Inspired by the React ecosystem's drag-and-drop libraries
 - Special thanks to the React Native community for feedback and contributions
 
+## ☕ Support the Project
+
+<div align="center">
+<body>
+If this library has helped you build amazing apps, consider supporting its development!
+</br></br>
+    <a href="https://www.buymeacoffee.com/entropyconquers" target="_blank">
+        <img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me a Coffee" style="height: 60px; width: 217px;">
+    </a>
+    </br>
+</br>
+  Your support helps maintain and improve this library for the entire React Native community! 🚀
+</body>
+</html>
+
+</div>
+<br/>
+
 ---
 
 <div align="center">

package/lib/components/Draggable.js

@@ -1 +1 @@
-import React,{createContext,useContext}from"react";import Animated from"react-native-reanimated";import{GestureDetector}from"react-native-gesture-handler";import{useDraggable}from"../hooks/useDraggable";const DraggableContext=createContext(null),Handle=({children:e,style:t})=>{const a=useContext(DraggableContext);return a?React.createElement(GestureDetector,{gesture:a.gesture},React.createElement(Animated.View,{style:t},e)):React.createElement(React.Fragment,null,e)},DraggableComponent=({style:e,children:t,...a})=>{const{animatedViewProps:r,gesture:n,state:l,hasHandle:o,animatedViewRef:c}=useDraggable({...a,children:t,handleComponent:Handle}),s={gesture:n,state:l},g=React.createElement(Animated.View,{ref:c,...r,style:[e,r.style],collapsable:!1},React.createElement(DraggableContext.Provider,{value:s},t));return o?g:React.createElement(GestureDetector,{gesture:n},g)};export const Draggable=Object.assign(DraggableComponent,{Handle});
+import React,{createContext,useContext}from"react";import Animated from"react-native-reanimated";import{GestureDetector}from"react-native-gesture-handler";import{useDraggable}from"../hooks/useDraggable";const DraggableContext=createContext(null);const Handle=({children,style})=>{const draggableContext=useContext(DraggableContext);if(!draggableContext){console.warn("Draggable.Handle must be used within a Draggable component");return React.createElement(React.Fragment,null,children)}return React.createElement(GestureDetector,{gesture:draggableContext.gesture},React.createElement(Animated.View,{style},children))};const DraggableComponent=({style:componentStyle,children,...useDraggableHookOptions})=>{const{animatedViewProps,gesture,state,hasHandle,animatedViewRef}=useDraggable({...useDraggableHookOptions,children,handleComponent:Handle});const contextValue={gesture,state};const content=React.createElement(Animated.View,{ref:animatedViewRef,...animatedViewProps,style:[componentStyle,animatedViewProps.style],collapsable:false},React.createElement(DraggableContext.Provider,{value:contextValue},children));if(hasHandle){return content}else{return React.createElement(GestureDetector,{gesture},content)}};export const Draggable=Object.assign(DraggableComponent,{Handle});

package/lib/components/Droppable.js

@@ -1 +1 @@
-import React from"react";import Animated from"react-native-reanimated";import{useDroppable}from"../hooks/useDroppable";let _nextDroppableId=1;export const _getUniqueDroppableId=()=>_nextDroppableId++;export const Droppable=({onDrop:e,dropDisabled:t,onActiveChange:o,dropAlignment:p,dropOffset:r,activeStyle:a,droppableId:l,capacity:n,style:i,children:d})=>{const{viewProps:c,animatedViewRef:s}=useDroppable({onDrop:e,dropDisabled:t,onActiveChange:o,dropAlignment:p,dropOffset:r,activeStyle:a,droppableId:l,capacity:n});return React.createElement(Animated.View,{ref:s,...c,style:[i,c.style],collapsable:!1},d)};
+import React from"react";import Animated from"react-native-reanimated";import{useDroppable}from"../hooks/useDroppable";let _nextDroppableId=1;export const _getUniqueDroppableId=()=>_nextDroppableId++;export const Droppable=({onDrop,dropDisabled,onActiveChange,dropAlignment,dropOffset,activeStyle,droppableId,capacity,style,children})=>{const{viewProps,animatedViewRef}=useDroppable({onDrop,dropDisabled,onActiveChange,dropAlignment,dropOffset,activeStyle,droppableId,capacity});return React.createElement(Animated.View,{ref:animatedViewRef,...viewProps,style:[style,viewProps.style],collapsable:false},children)};

package/lib/components/Sortable.d.ts

@@ -1,5 +1,3 @@
 import React from "react";
 import { SortableProps } from "../types/sortable";
-export declare function Sortable<TData extends {
-    id: string;
-}>({ data, renderItem, itemHeight, style, contentContainerStyle, itemKeyExtractor, }: SortableProps<TData>): React.JSX.Element;
+export declare const Sortable: React.MemoExoticComponent<({ data, renderItem, ...props }: SortableProps<any>) => React.JSX.Element>;

package/lib/components/Sortable.js

@@ -1 +1 @@
-import React from"react";import{StyleSheet}from"react-native";import Animated from"react-native-reanimated";import{GestureHandlerRootView,ScrollView}from"react-native-gesture-handler";import{DropProvider}from"../context/DropContext";import{useSortableList}from"../hooks/useSortableList";const AnimatedScrollView=Animated.createAnimatedComponent(ScrollView);export function Sortable({data:e,renderItem:t,itemHeight:r,style:o,contentContainerStyle:l,itemKeyExtractor:n=e=>e.id}){const i={data:e,itemHeight:r,itemKeyExtractor:n},{scrollViewRef:a,dropProviderRef:c,handleScroll:m,handleScrollEnd:s,contentHeight:d,getItemProps:S}=useSortableList(i);return React.createElement(GestureHandlerRootView,{style:styles.flex},React.createElement(DropProvider,{ref:c},React.createElement(AnimatedScrollView,{ref:a,onScroll:m,scrollEventThrottle:16,style:[styles.scrollView,o],contentContainerStyle:[{height:d},l],onScrollEndDrag:s,onMomentumScrollEnd:s,simultaneousHandlers:c},e.map(((e,r)=>{const o={item:e,index:r,...S(e,r)};return t(o)})))))}const styles=StyleSheet.create({flex:{flex:1},scrollView:{flex:1,position:"relative",backgroundColor:"white"}});
+import React,{memo,useCallback}from"react";import{StyleSheet}from"react-native";import Animated from"react-native-reanimated";import{GestureHandlerRootView,FlatList,ScrollView}from"react-native-gesture-handler";import{DropProvider}from"../context/DropContext";import{SortableDirection}from"../types/sortable";import{useSortableList}from"../hooks/useSortableList";import{useHorizontalSortableList}from"../hooks/useHorizontalSortableList";import{dataHash}from"./sortableUtils";const AnimatedFlatList=Animated.createAnimatedComponent(FlatList);const AnimatedScrollView=Animated.createAnimatedComponent(ScrollView);function SortableComponent({data,renderItem,direction=SortableDirection.Vertical,itemHeight,itemWidth,gap=0,paddingHorizontal=0,style,contentContainerStyle,itemKeyExtractor=item=>item.id,useFlatList=true}){if(direction===SortableDirection.Vertical&&!itemHeight){throw new Error("itemHeight is required when direction is vertical")}if(direction===SortableDirection.Horizontal&&!itemWidth){throw new Error("itemWidth is required when direction is horizontal")}if(direction===SortableDirection.Horizontal){const horizontalOptions={data,itemWidth,gap,paddingHorizontal,itemKeyExtractor};const{scrollViewRef:horizontalScrollViewRef,dropProviderRef:horizontalDropProviderRef,handleScroll:horizontalHandleScroll,handleScrollEnd:horizontalHandleScrollEnd,contentWidth,getItemProps:getHorizontalItemProps}=useHorizontalSortableList(horizontalOptions);const memoizedHorizontalRenderItem=useCallback((({item,index})=>{const itemProps=getHorizontalItemProps(item,index);const sortableItemProps={item,index,direction:SortableDirection.Horizontal,autoScrollHorizontalDirection:itemProps.autoScrollDirection,...itemProps};return renderItem(sortableItemProps)}),[getHorizontalItemProps,renderItem]);return React.createElement(GestureHandlerRootView,{style:styles.flex},React.createElement(DropProvider,{ref:horizontalDropProviderRef},useFlatList?React.createElement(AnimatedFlatList,{ref:horizontalScrollViewRef,data,keyExtractor:itemKeyExtractor,horizontal:true,renderItem:memoizedHorizontalRenderItem,onScroll:horizontalHandleScroll,scrollEventThrottle:16,style:[styles.scrollView,style],contentContainerStyle:[{width:contentWidth},contentContainerStyle],onScrollEndDrag:horizontalHandleScrollEnd,onMomentumScrollEnd:horizontalHandleScrollEnd,simultaneousHandlers:horizontalDropProviderRef,showsHorizontalScrollIndicator:false}):React.createElement(AnimatedScrollView,{ref:horizontalScrollViewRef,onScroll:horizontalHandleScroll,scrollEventThrottle:16,horizontal:true,style:[styles.scrollView,style],contentContainerStyle:[{width:contentWidth},contentContainerStyle],onScrollEndDrag:horizontalHandleScrollEnd,onMomentumScrollEnd:horizontalHandleScrollEnd,simultaneousHandlers:horizontalDropProviderRef,showsHorizontalScrollIndicator:false},data.map(((item,index)=>{const itemProps=getHorizontalItemProps(item,index);const sortableItemProps={item,index,direction:SortableDirection.Horizontal,autoScrollHorizontalDirection:itemProps.autoScrollDirection,...itemProps};return renderItem(sortableItemProps)})))))}const verticalOptions={data,itemHeight,itemKeyExtractor};const{scrollViewRef,dropProviderRef,handleScroll,handleScrollEnd,contentHeight,getItemProps}=useSortableList(verticalOptions);const memoizedVerticalRenderItem=useCallback((({item,index})=>{const itemProps=getItemProps(item,index);const sortableItemProps={item,index,direction:SortableDirection.Vertical,...itemProps};return renderItem(sortableItemProps)}),[getItemProps,renderItem]);return React.createElement(GestureHandlerRootView,{style:styles.flex},React.createElement(DropProvider,{ref:dropProviderRef},useFlatList?React.createElement(AnimatedFlatList,{ref:scrollViewRef,data,keyExtractor:itemKeyExtractor,renderItem:memoizedVerticalRenderItem,onScroll:handleScroll,scrollEventThrottle:16,style:[styles.scrollView,style],contentContainerStyle:[{height:contentHeight},contentContainerStyle],onScrollEndDrag:handleScrollEnd,onMomentumScrollEnd:handleScrollEnd,simultaneousHandlers:dropProviderRef,showsVerticalScrollIndicator:false}):React.createElement(AnimatedScrollView,{ref:scrollViewRef,onScroll:handleScroll,scrollEventThrottle:16,style:[styles.scrollView,style],contentContainerStyle:[{height:contentHeight},contentContainerStyle],onScrollEndDrag:handleScrollEnd,onMomentumScrollEnd:handleScrollEnd,simultaneousHandlers:dropProviderRef},data.map(((item,index)=>{const itemProps=getItemProps(item,index);const sortableItemProps={item,index,direction:SortableDirection.Vertical,...itemProps};return renderItem(sortableItemProps)})))))}export const Sortable=memo((({data,renderItem,...props})=>{const dataHashKey=dataHash(data);return React.createElement(SortableComponent,{data,renderItem,...props,key:dataHashKey})}));const styles=StyleSheet.create({flex:{flex:1},scrollView:{flex:1,position:"relative",backgroundColor:"white"}});

package/lib/components/SortableItem.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { SortableItemProps, SortableHandleProps } from "../types/sortable";
-export declare function SortableItem<T>({ id, data, positions, lowerBound, autoScrollDirection, itemsCount, itemHeight, containerHeight, children, style, animatedStyle: customAnimatedStyle, onMove, onDragStart, onDrop, onDragging, }: SortableItemProps<T>): React.JSX.Element;
+export declare function SortableItem<T>({ id, data, positions, direction, lowerBound, leftBound, autoScrollDirection, autoScrollHorizontalDirection, itemsCount, itemHeight, itemWidth, gap, paddingHorizontal, containerHeight, containerWidth, children, style, animatedStyle: customAnimatedStyle, onMove, onDragStart, onDrop, onDragging, onDraggingHorizontal, }: SortableItemProps<T>): React.JSX.Element;
 export declare namespace SortableItem {
     var Handle: ({ children, style }: SortableHandleProps) => React.JSX.Element;
 }

package/lib/components/SortableItem.js

@@ -1 +1 @@
-import React,{createContext,useContext}from"react";import Animated from"react-native-reanimated";import{PanGestureHandler}from"react-native-gesture-handler";import{useSortable}from"../hooks/useSortable";const SortableContext=createContext(null),SortableHandle=({children:e,style:t})=>{const n=useContext(SortableContext);return n?React.createElement(PanGestureHandler,{onGestureEvent:n.panGestureHandler},React.createElement(Animated.View,{style:t},e)):React.createElement(React.Fragment,null,e)};export function SortableItem({id:e,data:t,positions:n,lowerBound:a,autoScrollDirection:r,itemsCount:o,itemHeight:l,containerHeight:i,children:c,style:s,animatedStyle:d,onMove:m,onDragStart:u,onDrop:S,onDragging:g}){const H={id:e,positions:n,lowerBound:a,autoScrollDirection:r,itemsCount:o,itemHeight:l,containerHeight:i,onMove:m,onDragStart:u,onDrop:S,onDragging:g,children:c,handleComponent:SortableHandle},{animatedStyle:h,panGestureHandler:p,isMoving:b,hasHandle:C}=useSortable(H),v=[h,d],E={panGestureHandler:p},R=React.createElement(Animated.View,{style:v},React.createElement(SortableContext.Provider,{value:E},React.createElement(Animated.View,{style:s},c)));return C?R:React.createElement(PanGestureHandler,{onGestureEvent:p,activateAfterLongPress:200,shouldCancelWhenOutside:!1},R)}SortableItem.Handle=SortableHandle;
+import React,{createContext,useContext}from"react";import Animated from"react-native-reanimated";import{PanGestureHandler}from"react-native-gesture-handler";import{useSortable}from"../hooks/useSortable";import{useHorizontalSortable}from"../hooks/useHorizontalSortable";import{SortableDirection}from"../types/sortable";const SortableContext=createContext(null);const SortableHandle=({children,style})=>{const sortableContext=useContext(SortableContext);if(!sortableContext){console.warn("SortableHandle must be used within a SortableItem component");return React.createElement(React.Fragment,null,children)}return React.createElement(PanGestureHandler,{onGestureEvent:sortableContext.panGestureHandler},React.createElement(Animated.View,{style},children))};export function SortableItem({id,data,positions,direction=SortableDirection.Vertical,lowerBound,leftBound,autoScrollDirection,autoScrollHorizontalDirection,itemsCount,itemHeight,itemWidth,gap=0,paddingHorizontal=0,containerHeight,containerWidth,children,style,animatedStyle:customAnimatedStyle,onMove,onDragStart,onDrop,onDragging,onDraggingHorizontal}){if(direction===SortableDirection.Vertical&&(!itemHeight||!lowerBound||!autoScrollDirection)){throw new Error("itemHeight, lowerBound, and autoScrollDirection are required for vertical direction")}if(direction===SortableDirection.Horizontal&&(!itemWidth||!leftBound||!autoScrollHorizontalDirection)){throw new Error("itemWidth, leftBound, and autoScrollHorizontalDirection are required for horizontal direction")}if(direction===SortableDirection.Horizontal){const horizontalOptions={id,positions,leftBound,autoScrollDirection:autoScrollHorizontalDirection,itemsCount,itemWidth,gap,paddingHorizontal,containerWidth,onMove,onDragStart,onDrop,onDragging:onDraggingHorizontal,children,handleComponent:SortableHandle};const{animatedStyle:horizontalAnimatedStyle,panGestureHandler:horizontalPanGestureHandler,isMoving:horizontalIsMoving,hasHandle:horizontalHasHandle}=useHorizontalSortable(horizontalOptions);const combinedAnimatedStyle=[horizontalAnimatedStyle,customAnimatedStyle];const contextValue={panGestureHandler:horizontalPanGestureHandler};const content=React.createElement(Animated.View,{style:combinedAnimatedStyle},React.createElement(SortableContext.Provider,{value:contextValue},React.createElement(Animated.View,{style},children)));if(horizontalHasHandle){return content}else{return React.createElement(PanGestureHandler,{onGestureEvent:horizontalPanGestureHandler,activateAfterLongPress:200,shouldCancelWhenOutside:false},content)}}const verticalOptions={id,positions,lowerBound,autoScrollDirection,itemsCount,itemHeight,containerHeight,onMove,onDragStart,onDrop,onDragging,children,handleComponent:SortableHandle};const{animatedStyle:verticalAnimatedStyle,panGestureHandler:verticalPanGestureHandler,isMoving:verticalIsMoving,hasHandle:verticalHasHandle}=useSortable(verticalOptions);const combinedAnimatedStyle=[verticalAnimatedStyle,customAnimatedStyle];const contextValue={panGestureHandler:verticalPanGestureHandler};const content=React.createElement(Animated.View,{style:combinedAnimatedStyle},React.createElement(SortableContext.Provider,{value:contextValue},React.createElement(Animated.View,{style},children)));if(verticalHasHandle){return content}else{return React.createElement(PanGestureHandler,{onGestureEvent:verticalPanGestureHandler,activateAfterLongPress:200,shouldCancelWhenOutside:false},content)}}SortableItem.Handle=SortableHandle;

package/lib/components/sortableUtils.d.ts

@@ -4,6 +4,11 @@ export declare enum ScrollDirection {
     Up = "up",
     Down = "down"
 }
+export declare enum HorizontalScrollDirection {
+    None = "none",
+    Left = "left",
+    Right = "right"
+}
 export declare function clamp(value: number, lowerBound: number, upperBound: number): number;
 export declare function objectMove(object: {
     [id: string]: number;
@@ -19,3 +24,10 @@ export declare function setPosition(positionY: number, itemsCount: number, posit
     [id: string]: number;
 }>, id: string, itemHeight: number): void;
 export declare function setAutoScroll(positionY: number, lowerBound: number, upperBound: number, scrollThreshold: number, autoScroll: SharedValue<ScrollDirection>): void;
+export declare function getItemXPosition(position: number, itemWidth: number, gap?: number, paddingHorizontal?: number): number;
+export declare function getContentWidth(itemsCount: number, itemWidth: number, gap?: number, paddingHorizontal?: number): number;
+export declare function setHorizontalPosition(positionX: number, itemsCount: number, positions: SharedValue<{
+    [id: string]: number;
+}>, id: string, itemWidth: number, gap?: number, paddingHorizontal?: number): void;
+export declare function setHorizontalAutoScroll(positionX: number, leftBound: number, rightBound: number, scrollThreshold: number, autoScrollDirection: SharedValue<HorizontalScrollDirection>): void;
+export declare const dataHash: (data: any[]) => string;

package/lib/components/sortableUtils.js

@@ -1 +1 @@
-export var ScrollDirection;!function(o){o.None="none",o.Up="up",o.Down="down"}(ScrollDirection||(ScrollDirection={}));export function clamp(o,t,n){return Math.max(t,Math.min(o,n))}export function objectMove(o,t,n){const e=Object.assign({},o);for(const c in o)o[c]===t&&(e[c]=n),o[c]===n&&(e[c]=t);return e}export function listToObject(o){const t=Object.values(o),n={};for(let o=0;o<t.length;o++)n[t[o].id]=o;return n}export function setPosition(o,t,n,e,c){const r=clamp(Math.floor(o/c),0,t-1);r!==n.value[e]&&(n.value=objectMove(n.value,n.value[e],r))}export function setAutoScroll(o,t,n,e,c){c.value=o<=t+e?ScrollDirection.Up:o>=n-e?ScrollDirection.Down:ScrollDirection.None}
+export var ScrollDirection;(function(ScrollDirection){ScrollDirection["None"]="none";ScrollDirection["Up"]="up";ScrollDirection["Down"]="down"})(ScrollDirection||(ScrollDirection={}));export var HorizontalScrollDirection;(function(HorizontalScrollDirection){HorizontalScrollDirection["None"]="none";HorizontalScrollDirection["Left"]="left";HorizontalScrollDirection["Right"]="right"})(HorizontalScrollDirection||(HorizontalScrollDirection={}));export function clamp(value,lowerBound,upperBound){"worklet";return Math.max(lowerBound,Math.min(value,upperBound))}export function objectMove(object,from,to){"worklet";const newObject=Object.assign({},object);for(const id in object){if(object[id]===from){newObject[id]=to}if(object[id]===to){newObject[id]=from}}return newObject}export function listToObject(list){const values=Object.values(list);const object={};for(let i=0;i<values.length;i++){object[values[i].id]=i}return object}export function setPosition(positionY,itemsCount,positions,id,itemHeight){"worklet";const newPosition=clamp(Math.floor(positionY/itemHeight),0,itemsCount-1);if(newPosition!==positions.value[id]){positions.value=objectMove(positions.value,positions.value[id],newPosition)}}export function setAutoScroll(positionY,lowerBound,upperBound,scrollThreshold,autoScroll){"worklet";if(positionY<=lowerBound+scrollThreshold){autoScroll.value=ScrollDirection.Up}else if(positionY>=upperBound-scrollThreshold){autoScroll.value=ScrollDirection.Down}else{autoScroll.value=ScrollDirection.None}}export function getItemXPosition(position,itemWidth,gap=0,paddingHorizontal=0){"worklet";return paddingHorizontal+position*(itemWidth+gap)}export function getContentWidth(itemsCount,itemWidth,gap=0,paddingHorizontal=0){"worklet";if(itemsCount===0){return paddingHorizontal*2}const totalItemsWidth=itemsCount*itemWidth;const totalGaps=Math.max(0,itemsCount-1)*gap;return totalItemsWidth+totalGaps+paddingHorizontal*2}export function setHorizontalPosition(positionX,itemsCount,positions,id,itemWidth,gap=0,paddingHorizontal=0){"worklet";const adjustedX=positionX-paddingHorizontal;const itemWithGapWidth=itemWidth+gap;const newPosition=clamp(Math.floor(adjustedX/itemWithGapWidth),0,itemsCount-1);if(newPosition!==positions.value[id]){positions.value=objectMove(positions.value,positions.value[id],newPosition)}}export function setHorizontalAutoScroll(positionX,leftBound,rightBound,scrollThreshold,autoScrollDirection){"worklet";const effectiveThreshold=Math.max(scrollThreshold,60);const leftEdge=leftBound+effectiveThreshold;const rightEdge=rightBound-effectiveThreshold;if(positionX<leftEdge){autoScrollDirection.value=HorizontalScrollDirection.Left}else if(positionX>rightEdge){autoScrollDirection.value=HorizontalScrollDirection.Right}else{autoScrollDirection.value=HorizontalScrollDirection.None}}export const dataHash=data=>{const str=data.reduce(((acc,item)=>acc+item.id),"");let hash=0;for(let i=0,len=str.length;i<len;i++){let chr=str.charCodeAt(i);hash=(hash<<5)-hash+chr;hash|=0}return hash.toString()};

package/lib/context/DropContext.js

@@ -1 +1 @@
-import React,{useRef,useState,useMemo,useCallback,forwardRef,useImperativeHandle,useEffect}from"react";import{SlotsContext}from"../types/context";export const DropProvider=forwardRef((({children:e,onLayoutUpdateComplete:t,onDroppedItemsUpdate:r,onDragging:a,onDragStart:o,onDragEnd:s},n)=>{const l=useRef({}),[u,c]=useState(null),[i,d]=useState({}),p=useRef({}),g=useCallback(((e,t)=>{p.current[e]=t}),[]),v=useCallback((e=>{delete p.current[e]}),[]);useEffect((()=>{r&&r(i)}),[i,r]);const f=useCallback(((e,t,r)=>{d((a=>({...a,[e]:{droppableId:t,data:r}})))}),[]),m=useCallback((e=>{d((t=>{const r={...t};return delete r[e],r}))}),[]),b=useCallback((()=>i),[i]),D=useCallback((()=>{const e=p.current;Object.values(e).forEach((e=>{e()})),null==t||t()}),[t]);useImperativeHandle(n,(()=>({requestPositionUpdate:D,getDroppedItems:b})));const C=useCallback((e=>{const t=Object.values(i).filter((t=>t.droppableId===e)).length,r=Object.values(l.current).find((t=>t.id===e));return!!r&&t<(void 0!==r.capacity?r.capacity:1)}),[i]),I=useCallback((e=>{o&&o(e),D()}),[o,D]),S=useMemo((()=>({register:(e,t)=>{l.current[e]=t},unregister:e=>{delete l.current[e]},isRegistered:e=>void 0!==l.current[e],getSlots:()=>l.current,setActiveHoverSlot:e=>c(e),activeHoverSlotId:u,registerPositionUpdateListener:g,unregisterPositionUpdateListener:v,requestPositionUpdate:D,registerDroppedItem:f,unregisterDroppedItem:m,getDroppedItems:b,hasAvailableCapacity:C,onDragging:a,onDragStart:I,onDragEnd:s})),[u,g,v,D,f,m,b,C,a,I,s]);return React.createElement(SlotsContext.Provider,{value:S},e)}));DropProvider.displayName="DropProvider";
+import React,{useRef,useState,useMemo,useCallback,forwardRef,useImperativeHandle,useEffect}from"react";import{SlotsContext}from"../types/context";export const DropProvider=forwardRef((({children,onLayoutUpdateComplete,onDroppedItemsUpdate,onDragging,onDragStart,onDragEnd},ref)=>{const slotsRef=useRef({});const[activeHoverSlotId,setActiveHoverSlotIdState]=useState(null);const[droppedItems,setDroppedItems]=useState({});const positionUpdateListenersRef=useRef({});const registerPositionUpdateListener=useCallback(((id,listener)=>{positionUpdateListenersRef.current[id]=listener}),[]);const unregisterPositionUpdateListener=useCallback((id=>{delete positionUpdateListenersRef.current[id]}),[]);useEffect((()=>{if(onDroppedItemsUpdate){onDroppedItemsUpdate(droppedItems)}}),[droppedItems,onDroppedItemsUpdate]);const registerDroppedItem=useCallback(((draggableId,droppableId,itemData)=>{setDroppedItems((prev=>({...prev,[draggableId]:{droppableId,data:itemData}})))}),[]);const unregisterDroppedItem=useCallback((draggableId=>{setDroppedItems((prev=>{const newItems={...prev};delete newItems[draggableId];return newItems}))}),[]);const getDroppedItems=useCallback((()=>droppedItems),[droppedItems]);const internalRequestPositionUpdate=useCallback((()=>{const listeners=positionUpdateListenersRef.current;Object.values(listeners).forEach((listener=>{listener()}));onLayoutUpdateComplete===null||onLayoutUpdateComplete===void 0?void 0:onLayoutUpdateComplete()}),[onLayoutUpdateComplete]);useImperativeHandle(ref,(()=>({requestPositionUpdate:internalRequestPositionUpdate,getDroppedItems})));const hasAvailableCapacity=useCallback((droppableId=>{const droppedCount=Object.values(droppedItems).filter((item=>item.droppableId===droppableId)).length;const droppableSlot=Object.values(slotsRef.current).find((slot=>slot.id===droppableId));if(!droppableSlot){return false}const capacity=droppableSlot.capacity!==undefined?droppableSlot.capacity:1;return droppedCount<capacity}),[droppedItems]);const handleDragStart=useCallback((data=>{if(onDragStart){onDragStart(data)}internalRequestPositionUpdate()}),[onDragStart,internalRequestPositionUpdate]);const contextValue=useMemo((()=>({register:(id,slot)=>{slotsRef.current[id]=slot},unregister:id=>{delete slotsRef.current[id]},isRegistered:id=>slotsRef.current[id]!==undefined,getSlots:()=>slotsRef.current,setActiveHoverSlot:id=>setActiveHoverSlotIdState(id),activeHoverSlotId,registerPositionUpdateListener,unregisterPositionUpdateListener,requestPositionUpdate:internalRequestPositionUpdate,registerDroppedItem,unregisterDroppedItem,getDroppedItems,hasAvailableCapacity,onDragging,onDragStart:handleDragStart,onDragEnd})),[activeHoverSlotId,registerPositionUpdateListener,unregisterPositionUpdateListener,internalRequestPositionUpdate,registerDroppedItem,unregisterDroppedItem,getDroppedItems,hasAvailableCapacity,onDragging,handleDragStart,onDragEnd]);return React.createElement(SlotsContext.Provider,{value:contextValue},children)}));DropProvider.displayName="DropProvider";

package/lib/hooks/useDraggable.js

@@ -1 +1 @@
-import React,{useRef,useCallback,useContext,useEffect,useState}from"react";import{useSharedValue,useAnimatedStyle,withSpring,runOnJS,runOnUI,useAnimatedReaction,useAnimatedRef,measure}from"react-native-reanimated";import{Gesture}from"react-native-gesture-handler";import{SlotsContext}from"../types/context";import{DraggableState}from"../types/draggable";export const useDraggable=e=>{const{data:a,draggableId:t,dragDisabled:u=!1,onDragStart:r,onDragEnd:n,onDragging:l,onStateChange:s,animationFunction:i,dragBoundsRef:o,dragAxis:v="both",collisionAlgorithm:c="intersect",children:h,handleComponent:d}=e,g=useAnimatedRef(),[S,f]=useState(DraggableState.IDLE),[m,p]=useState(!1);useEffect((()=>{if(!h||!d)return void p(!1);const e=a=>{if(React.isValidElement(a)){if(a.type===d)return!0;if(a.props&&a.props.children&&React.Children.toArray(a.props.children).some(e))return!0}return!1};p(React.Children.toArray(h).some(e))}),[h,d]),useEffect((()=>{null==s||s(S)}),[S,s]);const b=useSharedValue(0),y=useSharedValue(0),x=useSharedValue(0),D=useSharedValue(0),O=useSharedValue(u),V=useSharedValue(v),k=useSharedValue(0),C=useSharedValue(0),J=useSharedValue(0),w=useSharedValue(0),E=useRef(!1),R=useRef(t||`draggable-${Math.random().toString(36).substr(2,9)}`).current,I=useSharedValue(0),A=useSharedValue(0),U=useSharedValue(0),L=useSharedValue(0),M=useSharedValue(!1),{getSlots:P,setActiveHoverSlot:G,activeHoverSlotId:X,registerPositionUpdateListener:Y,unregisterPositionUpdateListener:H,registerDroppedItem:Z,unregisterDroppedItem:B,hasAvailableCapacity:F,onDragging:N,onDragStart:$,onDragEnd:j}=useContext(SlotsContext);useEffect((()=>{O.value=u}),[u,O]),useEffect((()=>{V.value=v}),[v,V]);const q=useCallback((()=>{runOnUI((()=>{const e=measure(g);if(null===e)return;const a=b.value,t=y.value;if(0===a&&0===t){const u=e.pageX-a,r=e.pageY-t;k.value=u,C.value=r}J.value=e.width,w.value=e.height,E.current||(E.current=!0)}))()}),[g,k,C,J,w,b,y]),z=useCallback((()=>{const e=measure(g);if(null===e)return;const a=b.value,t=y.value;if(0===a&&0===t){const u=e.pageX-a,r=e.pageY-t;k.value=u,C.value=r}J.value=e.width,w.value=e.height,E.current||(E.current=!0)}),[g,k,C,J,w,b,y]),K=useCallback((()=>{const e=null==o?void 0:o.current;e?e.measure(((e,a,t,u,r,n)=>{"number"==typeof r&&"number"==typeof n&&t>0&&u>0&&runOnUI((()=>{I.value=r,A.value=n,U.value=t,L.value=u,M.value||(M.value=!0)}))()})):runOnUI((()=>{M.value&&(M.value=!1)}))()}),[o,I,A,U,L,M]);useEffect((()=>(Y(R,(()=>{q(),K()})),()=>{H(R)})),[R,Y,H,q,K]),useEffect((()=>{K()}),[K]);const Q=useCallback((e=>{q()}),[q]),T=useCallback(((e,a)=>{i?(b.value=i(e),y.value=i(a)):(b.value=withSpring(e),y.value=withSpring(a))}),[i,b,y]),W=useCallback(((e,a,t,u,r,n)=>{if("intersect"===n)return e<r.x+r.width&&e+t>r.x&&a<r.y+r.height&&a+u>r.y;if("contain"===n)return e>=r.x&&e+t<=r.x+r.width&&a>=r.y&&a+u<=r.y+r.height;{const n=e+t/2,l=a+u/2;return n>=r.x&&n<=r.x+r.width&&l>=r.y&&l<=r.y+r.height}}),[]),_=useCallback(((e,a,t,u,r,n,l)=>{const s=P(),i=u+e,o=r+a;let v,h,d=null,g=null;for(const e in s){const a=parseInt(e,10),t=s[a];if(W(i,o,n,l,t,c)&&F(t.id)){d=t,g=a;break}}if(d&&null!==g){d.onDrop&&runOnJS(d.onDrop)(t),runOnJS(Z)(R,d.id,t),runOnJS(f)(DraggableState.DROPPED);const e=d.dropAlignment||"center",a=d.dropOffset||{x:0,y:0};let s=0,i=0;switch(e){case"top-left":s=d.x,i=d.y;break;case"top-center":s=d.x+d.width/2-n/2,i=d.y;break;case"top-right":s=d.x+d.width-n,i=d.y;break;case"center-left":s=d.x,i=d.y+d.height/2-l/2;break;case"center":default:s=d.x+d.width/2-n/2,i=d.y+d.height/2-l/2;break;case"center-right":s=d.x+d.width-n,i=d.y+d.height/2-l/2;break;case"bottom-left":s=d.x,i=d.y+d.height-l;break;case"bottom-center":s=d.x+d.width/2-n/2,i=d.y+d.height-l;break;case"bottom-right":s=d.x+d.width-n,i=d.y+d.height-l}v=s+a.x-u,h=i+a.y-r}else v=0,h=0,runOnJS(f)(DraggableState.IDLE),runOnJS(B)(R);runOnUI(T)(v,h)}),[P,T,c,W,f,R,Z,B,F]),ee=useCallback(((e,a,t,u,r,n)=>{const l=P(),s=t+e,i=u+a;let o=null;for(const e in l){const a=parseInt(e,10),t=l[a];if(W(s,i,r,n,t,c)){o=a;break}}X!==o&&G(o)}),[P,G,X,c,W]),ae=React.useMemo((()=>Gesture.Pan().onBegin((()=>{z(),O.value||(x.value=b.value,D.value=y.value,runOnJS(f)(DraggableState.DRAGGING),r&&runOnJS(r)(a),$&&runOnJS($)(a))})).onUpdate((e=>{if(O.value)return;let t=x.value+e.translationX,u=D.value+e.translationY;if(M.value){const e=J.value,a=w.value,r=I.value-k.value,n=I.value+U.value-k.value-e,l=A.value-C.value,s=A.value+L.value-C.value-a;t=Math.max(r,Math.min(t,n)),u=Math.max(l,Math.min(u,s))}"x"===V.value?b.value=t:("y"===V.value||(b.value=t),y.value=u),l&&runOnJS(l)({x:k.value,y:C.value,tx:b.value,ty:y.value,itemData:a}),N&&runOnJS(N)({x:k.value,y:C.value,tx:b.value,ty:y.value,itemData:a}),runOnJS(ee)(b.value,y.value,k.value,C.value,J.value,w.value)})).onEnd((()=>{O.value||(n&&runOnJS(n)(a),j&&runOnJS(j)(a),runOnJS(_)(b.value,y.value,a,k.value,C.value,J.value,w.value),runOnJS(G)(null))}))),[O,x,D,b,y,k,C,J,w,r,n,a,_,ee,G,i,l,M,I,A,U,L,V,f,z,N,$,j]),te=useAnimatedStyle((()=>({transform:[{translateX:b.value},{translateY:y.value}]})),[b,y]);return useAnimatedReaction((()=>({txValue:b.value,tyValue:y.value,isZero:0===b.value&&0===y.value})),((e,a)=>{e.isZero&&a&&!a.isZero&&(runOnJS(f)(DraggableState.IDLE),runOnJS(B)(R))}),[f,B,R]),useEffect((()=>()=>{B(R)}),[R,B]),{animatedViewProps:{style:te,onLayout:Q},gesture:ae,state:S,animatedViewRef:g,hasHandle:m}};
+import React,{useRef,useCallback,useContext,useEffect,useState}from"react";import{useSharedValue,useAnimatedStyle,withSpring,runOnJS,runOnUI,useAnimatedReaction,useAnimatedRef,measure}from"react-native-reanimated";import{Gesture}from"react-native-gesture-handler";import{SlotsContext}from"../types/context";import{DraggableState}from"../types/draggable";export const useDraggable=options=>{const{data,draggableId,dragDisabled=false,onDragStart,onDragEnd,onDragging,onStateChange,animationFunction,dragBoundsRef,dragAxis="both",collisionAlgorithm="intersect",children,handleComponent}=options;const animatedViewRef=useAnimatedRef();const[state,setState]=useState(DraggableState.IDLE);const[hasHandle,setHasHandle]=useState(false);useEffect((()=>{if(!children||!handleComponent){setHasHandle(false);return}const checkForHandle=child=>{if(React.isValidElement(child)){if(child.type===handleComponent){return true}if(child.props&&child.props.children){if(React.Children.toArray(child.props.children).some(checkForHandle)){return true}}}return false};setHasHandle(React.Children.toArray(children).some(checkForHandle))}),[children,handleComponent]);useEffect((()=>{onStateChange===null||onStateChange===void 0?void 0:onStateChange(state)}),[state,onStateChange]);const tx=useSharedValue(0);const ty=useSharedValue(0);const offsetX=useSharedValue(0);const offsetY=useSharedValue(0);const dragDisabledShared=useSharedValue(dragDisabled);const dragAxisShared=useSharedValue(dragAxis);const originX=useSharedValue(0);const originY=useSharedValue(0);const itemW=useSharedValue(0);const itemH=useSharedValue(0);const isOriginSet=useRef(false);const internalDraggableId=useRef(draggableId||`draggable-${Math.random().toString(36).substr(2,9)}`).current;const boundsX=useSharedValue(0);const boundsY=useSharedValue(0);const boundsWidth=useSharedValue(0);const boundsHeight=useSharedValue(0);const boundsAreSet=useSharedValue(false);const{getSlots,setActiveHoverSlot,activeHoverSlotId,registerPositionUpdateListener,unregisterPositionUpdateListener,registerDroppedItem,unregisterDroppedItem,hasAvailableCapacity,onDragging:contextOnDragging,onDragStart:contextOnDragStart,onDragEnd:contextOnDragEnd}=useContext(SlotsContext);useEffect((()=>{dragDisabledShared.value=dragDisabled}),[dragDisabled,dragDisabledShared]);useEffect((()=>{dragAxisShared.value=dragAxis}),[dragAxis,dragAxisShared]);const updateDraggablePosition=useCallback((()=>{runOnUI((()=>{"worklet";const measurement=measure(animatedViewRef);if(measurement===null){return}const currentTx=tx.value;const currentTy=ty.value;if(currentTx===0&&currentTy===0){const newOriginX=measurement.pageX-currentTx;const newOriginY=measurement.pageY-currentTy;originX.value=newOriginX;originY.value=newOriginY}itemW.value=measurement.width;itemH.value=measurement.height;if(!isOriginSet.current){isOriginSet.current=true}}))()}),[animatedViewRef,originX,originY,itemW,itemH,tx,ty]);const updateDraggablePositionWorklet=useCallback((()=>{"worklet";const measurement=measure(animatedViewRef);if(measurement===null){return}const currentTx=tx.value;const currentTy=ty.value;if(currentTx===0&&currentTy===0){const newOriginX=measurement.pageX-currentTx;const newOriginY=measurement.pageY-currentTy;originX.value=newOriginX;originY.value=newOriginY}itemW.value=measurement.width;itemH.value=measurement.height;if(!isOriginSet.current){isOriginSet.current=true}}),[animatedViewRef,originX,originY,itemW,itemH,tx,ty]);const updateBounds=useCallback((()=>{const currentBoundsView=dragBoundsRef===null||dragBoundsRef===void 0?void 0:dragBoundsRef.current;if(currentBoundsView){currentBoundsView.measure(((_x,_y,width,height,pageX,pageY)=>{if(typeof pageX==="number"&&typeof pageY==="number"&&width>0&&height>0){runOnUI((()=>{"worklet";boundsX.value=pageX;boundsY.value=pageY;boundsWidth.value=width;boundsHeight.value=height;if(!boundsAreSet.value){boundsAreSet.value=true}}))()}else{console.warn("useDraggable: dragBoundsRef measurement failed or returned invalid dimensions. Bounds may be stale or item unbounded.")}}))}else{runOnUI((()=>{"worklet";if(boundsAreSet.value){boundsAreSet.value=false}}))()}}),[dragBoundsRef,boundsX,boundsY,boundsWidth,boundsHeight,boundsAreSet]);useEffect((()=>{const handlePositionUpdate=()=>{updateDraggablePosition();updateBounds()};registerPositionUpdateListener(internalDraggableId,handlePositionUpdate);return()=>{unregisterPositionUpdateListener(internalDraggableId)}}),[internalDraggableId,registerPositionUpdateListener,unregisterPositionUpdateListener,updateDraggablePosition,updateBounds]);useEffect((()=>{updateBounds()}),[updateBounds]);const handleLayoutHandler=useCallback((event=>{updateDraggablePosition()}),[updateDraggablePosition]);const animateDragEndPosition=useCallback(((targetXValue,targetYValue)=>{"worklet";if(animationFunction){tx.value=animationFunction(targetXValue);ty.value=animationFunction(targetYValue)}else{tx.value=withSpring(targetXValue);ty.value=withSpring(targetYValue)}}),[animationFunction,tx,ty]);const performCollisionCheck=useCallback(((draggableX,draggableY,draggableW,draggableH,slot,algo)=>{if(algo==="intersect"){return draggableX<slot.x+slot.width&&draggableX+draggableW>slot.x&&draggableY<slot.y+slot.height&&draggableY+draggableH>slot.y}else if(algo==="contain"){return draggableX>=slot.x&&draggableX+draggableW<=slot.x+slot.width&&draggableY>=slot.y&&draggableY+draggableH<=slot.y+slot.height}else{const draggableCenterX=draggableX+draggableW/2;const draggableCenterY=draggableY+draggableH/2;return draggableCenterX>=slot.x&&draggableCenterX<=slot.x+slot.width&&draggableCenterY>=slot.y&&draggableCenterY<=slot.y+slot.height}}),[]);const processDropAndAnimate=useCallback(((currentTxVal,currentTyVal,draggableData,currentOriginX,currentOriginY,currentItemW,currentItemH)=>{const slots=getSlots();const currentDraggableX=currentOriginX+currentTxVal;const currentDraggableY=currentOriginY+currentTyVal;let hitSlotData=null;let hitSlotId=null;for(const key in slots){const slotId=parseInt(key,10);const s=slots[slotId];const isCollision=performCollisionCheck(currentDraggableX,currentDraggableY,currentItemW,currentItemH,s,collisionAlgorithm);if(isCollision){const hasCapacity=hasAvailableCapacity(s.id);if(hasCapacity){hitSlotData=s;hitSlotId=slotId;break}}}let finalTxValue;let finalTyValue;if(hitSlotData&&hitSlotId!==null){if(hitSlotData.onDrop){runOnJS(hitSlotData.onDrop)(draggableData)}runOnJS(registerDroppedItem)(internalDraggableId,hitSlotData.id,draggableData);runOnJS(setState)(DraggableState.DROPPED);const alignment=hitSlotData.dropAlignment||"center";const offset=hitSlotData.dropOffset||{x:0,y:0};let targetX=0;let targetY=0;switch(alignment){case"top-left":targetX=hitSlotData.x;targetY=hitSlotData.y;break;case"top-center":targetX=hitSlotData.x+hitSlotData.width/2-currentItemW/2;targetY=hitSlotData.y;break;case"top-right":targetX=hitSlotData.x+hitSlotData.width-currentItemW;targetY=hitSlotData.y;break;case"center-left":targetX=hitSlotData.x;targetY=hitSlotData.y+hitSlotData.height/2-currentItemH/2;break;case"center":targetX=hitSlotData.x+hitSlotData.width/2-currentItemW/2;targetY=hitSlotData.y+hitSlotData.height/2-currentItemH/2;break;case"center-right":targetX=hitSlotData.x+hitSlotData.width-currentItemW;targetY=hitSlotData.y+hitSlotData.height/2-currentItemH/2;break;case"bottom-left":targetX=hitSlotData.x;targetY=hitSlotData.y+hitSlotData.height-currentItemH;break;case"bottom-center":targetX=hitSlotData.x+hitSlotData.width/2-currentItemW/2;targetY=hitSlotData.y+hitSlotData.height-currentItemH;break;case"bottom-right":targetX=hitSlotData.x+hitSlotData.width-currentItemW;targetY=hitSlotData.y+hitSlotData.height-currentItemH;break;default:targetX=hitSlotData.x+hitSlotData.width/2-currentItemW/2;targetY=hitSlotData.y+hitSlotData.height/2-currentItemH/2}const draggableTargetX=targetX+offset.x;const draggableTargetY=targetY+offset.y;finalTxValue=draggableTargetX-currentOriginX;finalTyValue=draggableTargetY-currentOriginY}else{finalTxValue=0;finalTyValue=0;runOnJS(setState)(DraggableState.IDLE);runOnJS(unregisterDroppedItem)(internalDraggableId)}runOnUI(animateDragEndPosition)(finalTxValue,finalTyValue)}),[getSlots,animateDragEndPosition,collisionAlgorithm,performCollisionCheck,setState,internalDraggableId,registerDroppedItem,unregisterDroppedItem,hasAvailableCapacity]);const updateHoverState=useCallback(((currentTxVal,currentTyVal,currentOriginX,currentOriginY,currentItemW,currentItemH)=>{const slots=getSlots();const currentDraggableX=currentOriginX+currentTxVal;const currentDraggableY=currentOriginY+currentTyVal;let newHoveredSlotId=null;for(const key in slots){const slotId=parseInt(key,10);const s=slots[slotId];const isCollision=performCollisionCheck(currentDraggableX,currentDraggableY,currentItemW,currentItemH,s,collisionAlgorithm);if(isCollision){newHoveredSlotId=slotId;break}}if(activeHoverSlotId!==newHoveredSlotId){setActiveHoverSlot(newHoveredSlotId)}}),[getSlots,setActiveHoverSlot,activeHoverSlotId,collisionAlgorithm,performCollisionCheck]);const gesture=React.useMemo((()=>Gesture.Pan().onBegin((()=>{"worklet";updateDraggablePositionWorklet();if(dragDisabledShared.value){return}offsetX.value=tx.value;offsetY.value=ty.value;runOnJS(setState)(DraggableState.DRAGGING);if(onDragStart){runOnJS(onDragStart)(data)}if(contextOnDragStart){runOnJS(contextOnDragStart)(data)}})).onUpdate((event=>{"worklet";if(dragDisabledShared.value){return}let newTx=offsetX.value+event.translationX;let newTy=offsetY.value+event.translationY;if(boundsAreSet.value){const currentItemW=itemW.value;const currentItemH=itemH.value;const minTx=boundsX.value-originX.value;const maxTx=boundsX.value+boundsWidth.value-originX.value-currentItemW;const minTy=boundsY.value-originY.value;const maxTy=boundsY.value+boundsHeight.value-originY.value-currentItemH;newTx=Math.max(minTx,Math.min(newTx,maxTx));newTy=Math.max(minTy,Math.min(newTy,maxTy))}if(dragAxisShared.value==="x"){tx.value=newTx}else if(dragAxisShared.value==="y"){ty.value=newTy}else{tx.value=newTx;ty.value=newTy}if(onDragging){runOnJS(onDragging)({x:originX.value,y:originY.value,tx:tx.value,ty:ty.value,itemData:data})}if(contextOnDragging){runOnJS(contextOnDragging)({x:originX.value,y:originY.value,tx:tx.value,ty:ty.value,itemData:data})}runOnJS(updateHoverState)(tx.value,ty.value,originX.value,originY.value,itemW.value,itemH.value)})).onEnd((()=>{"worklet";if(dragDisabledShared.value){return}if(onDragEnd){runOnJS(onDragEnd)(data)}if(contextOnDragEnd){runOnJS(contextOnDragEnd)(data)}runOnJS(processDropAndAnimate)(tx.value,ty.value,data,originX.value,originY.value,itemW.value,itemH.value);runOnJS(setActiveHoverSlot)(null)}))),[dragDisabledShared,offsetX,offsetY,tx,ty,originX,originY,itemW,itemH,onDragStart,onDragEnd,data,processDropAndAnimate,updateHoverState,setActiveHoverSlot,animationFunction,onDragging,boundsAreSet,boundsX,boundsY,boundsWidth,boundsHeight,dragAxisShared,setState,updateDraggablePositionWorklet,contextOnDragging,contextOnDragStart,contextOnDragEnd]);const animatedStyleProp=useAnimatedStyle((()=>{"worklet";return{transform:[{translateX:tx.value},{translateY:ty.value}]}}),[tx,ty]);useAnimatedReaction((()=>({txValue:tx.value,tyValue:ty.value,isZero:tx.value===0&&ty.value===0})),((result,previous)=>{if(result.isZero&&previous&&!previous.isZero){runOnJS(setState)(DraggableState.IDLE);runOnJS(unregisterDroppedItem)(internalDraggableId)}}),[setState,unregisterDroppedItem,internalDraggableId]);useEffect((()=>()=>{unregisterDroppedItem(internalDraggableId)}),[internalDraggableId,unregisterDroppedItem]);return{animatedViewProps:{style:animatedStyleProp,onLayout:handleLayoutHandler},gesture,state,animatedViewRef,hasHandle}};

package/lib/hooks/useDroppable.js

@@ -1 +1 @@
-import{useRef,useEffect,useContext,useCallback,useMemo}from"react";import{StyleSheet}from"react-native";import{useAnimatedRef,measure,runOnUI,runOnJS}from"react-native-reanimated";import{SlotsContext}from"../types/context";import{_getUniqueDroppableId}from"../components/Droppable";export const useDroppable=e=>{const{onDrop:t,dropDisabled:r,onActiveChange:o,dropAlignment:s,dropOffset:n,activeStyle:a,droppableId:i,capacity:u}=e,c=useAnimatedRef(),p=useRef(_getUniqueDroppableId()).current,f=useRef(i||`droppable-${p}`).current,l=useRef(`droppable-${p}-${Math.random().toString(36).substr(2,9)}`).current,{register:m,unregister:d,isRegistered:g,activeHoverSlotId:y,registerPositionUpdateListener:v,unregisterPositionUpdateListener:S}=useContext(SlotsContext),h=y===p,{processedActiveStyle:b,activeTransforms:A}=useMemo((()=>{if(!h||!a)return{processedActiveStyle:null,activeTransforms:[]};const e=StyleSheet.flatten(a);let t={...e},r=[];return e.transform&&(Array.isArray(e.transform)&&(r=[...e.transform]),delete t.transform),{processedActiveStyle:t,activeTransforms:r}}),[h,a]),x=useMemo((()=>{if(h&&a)return 0===A.length?b:{...b,transform:A}}),[h,a,b,A]);useEffect((()=>{null==o||o(h)}),[h,o]),useEffect((()=>{}),[p,f,i]);const C=useCallback((()=>{runOnUI((()=>{const e=measure(c);null!==e&&e.width>0&&e.height>0&&runOnJS(m)(p,{id:i||`droppable-${p}`,x:e.pageX,y:e.pageY,width:e.width,height:e.height,onDrop:t,dropAlignment:s||"center",dropOffset:n||{x:0,y:0},capacity:u})}))()}),[p,i,t,m,c,s,n,u]),R=useCallback((e=>{C()}),[C]);return useEffect((()=>(v(l,C),()=>{S(l)})),[l,v,S,C]),useEffect((()=>{r?d(p):C()}),[r,p,d,C]),useEffect((()=>()=>{d(p)}),[p,d]),{viewProps:{onLayout:R,style:x},isActive:h,activeStyle:a,animatedViewRef:c}};
+import{useRef,useEffect,useContext,useCallback,useMemo}from"react";import{StyleSheet}from"react-native";import{useAnimatedRef,measure,runOnUI,runOnJS}from"react-native-reanimated";import{SlotsContext}from"../types/context";import{_getUniqueDroppableId}from"../components/Droppable";export const useDroppable=options=>{const{onDrop,dropDisabled,onActiveChange,dropAlignment,dropOffset,activeStyle,droppableId,capacity}=options;const animatedViewRef=useAnimatedRef();const id=useRef(_getUniqueDroppableId()).current;const stringId=useRef(droppableId||`droppable-${id}`).current;const instanceId=useRef(`droppable-${id}-${Math.random().toString(36).substr(2,9)}`).current;const{register,unregister,isRegistered,activeHoverSlotId:contextActiveHoverSlotId,registerPositionUpdateListener,unregisterPositionUpdateListener}=useContext(SlotsContext);const isActive=contextActiveHoverSlotId===id;const{processedActiveStyle,activeTransforms}=useMemo((()=>{if(!isActive||!activeStyle){return{processedActiveStyle:null,activeTransforms:[]}}const flattenedStyle=StyleSheet.flatten(activeStyle);let processedStyle={...flattenedStyle};let transforms=[];if(flattenedStyle.transform){if(Array.isArray(flattenedStyle.transform)){transforms=[...flattenedStyle.transform]}delete processedStyle.transform}return{processedActiveStyle:processedStyle,activeTransforms:transforms}}),[isActive,activeStyle]);const combinedActiveStyle=useMemo((()=>{if(!isActive||!activeStyle){return undefined}if(activeTransforms.length===0){return processedActiveStyle}return{...processedActiveStyle,transform:activeTransforms}}),[isActive,activeStyle,processedActiveStyle,activeTransforms]);useEffect((()=>{onActiveChange===null||onActiveChange===void 0?void 0:onActiveChange(isActive)}),[isActive,onActiveChange]);useEffect((()=>{console.log(`Droppable ${id} using string ID: ${stringId}, provided ID: ${droppableId||"none"}`)}),[id,stringId,droppableId]);const updateDroppablePosition=useCallback((()=>{runOnUI((()=>{"worklet";const measurement=measure(animatedViewRef);if(measurement===null){return}if(measurement.width>0&&measurement.height>0){runOnJS(register)(id,{id:droppableId||`droppable-${id}`,x:measurement.pageX,y:measurement.pageY,width:measurement.width,height:measurement.height,onDrop,dropAlignment:dropAlignment||"center",dropOffset:dropOffset||{x:0,y:0},capacity})}}))()}),[id,droppableId,onDrop,register,animatedViewRef,dropAlignment,dropOffset,capacity]);const handleLayoutHandler=useCallback((_event=>{updateDroppablePosition()}),[updateDroppablePosition]);useEffect((()=>{registerPositionUpdateListener(instanceId,updateDroppablePosition);return()=>{unregisterPositionUpdateListener(instanceId)}}),[instanceId,registerPositionUpdateListener,unregisterPositionUpdateListener,updateDroppablePosition]);useEffect((()=>{if(dropDisabled){unregister(id)}else{updateDroppablePosition()}}),[dropDisabled,id,unregister,updateDroppablePosition]);useEffect((()=>()=>{unregister(id)}),[id,unregister]);return{viewProps:{onLayout:handleLayoutHandler,style:combinedActiveStyle},isActive,activeStyle,animatedViewRef}};

package/lib/hooks/useHorizontalSortable.d.ts

@@ -0,0 +1,2 @@
+import { UseHorizontalSortableOptions, UseHorizontalSortableReturn } from "../types/sortable";
+export declare function useHorizontalSortable<T>(options: UseHorizontalSortableOptions<T>): UseHorizontalSortableReturn;

package/lib/hooks/useHorizontalSortable.js

@@ -0,0 +1 @@
+import{useState,useRef,useEffect}from"react";import React from"react";import{runOnJS,runOnUI,useAnimatedGestureHandler,useAnimatedReaction,useAnimatedStyle,useDerivedValue,useSharedValue,withSpring,withTiming}from"react-native-reanimated";import{setHorizontalPosition,setHorizontalAutoScroll,getItemXPosition,getContentWidth}from"../components/sortableUtils";import{HorizontalScrollDirection}from"../types/sortable";export function useHorizontalSortable(options){const{id,positions,leftBound,autoScrollDirection,itemsCount,itemWidth,gap=0,paddingHorizontal=0,containerWidth=500,onMove,onDragStart,onDrop,onDragging,children,handleComponent}=options;const[isMoving,setIsMoving]=useState(false);const[hasHandle,setHasHandle]=useState(false);const movingSV=useSharedValue(false);const currentOverItemId=useSharedValue(null);const onDraggingLastCallTimestamp=useSharedValue(0);const THROTTLE_INTERVAL=50;const positionX=useSharedValue(0);const left=useSharedValue(0);const targetLeftBound=useSharedValue(0);useEffect((()=>{runOnUI((()=>{"worklet";const initialLeftVal=getItemXPosition(positions.value[id],itemWidth,gap,paddingHorizontal);const initialLeftBoundVal=leftBound.value;left.value=initialLeftVal;positionX.value=initialLeftVal;targetLeftBound.value=initialLeftBoundVal}))()}),[]);const calculatedContainerWidth=useRef(containerWidth).current;const rightBound=useDerivedValue((()=>leftBound.value+calculatedContainerWidth));useEffect((()=>{if(!children||!handleComponent){setHasHandle(false);return}const checkForHandle=child=>{if(React.isValidElement(child)){if(child.type===handleComponent){return true}if(child.props&&child.props.children){if(React.Children.toArray(child.props.children).some(checkForHandle)){return true}}}return false};setHasHandle(React.Children.toArray(children).some(checkForHandle))}),[children,handleComponent]);useAnimatedReaction((()=>positionX.value),((currentX,previousX)=>{if(currentX===null||!movingSV.value){return}if(previousX!==null&&currentX===previousX){return}const adjustedX=currentX-paddingHorizontal;const itemWithGapWidth=itemWidth+gap;const clampedPosition=Math.min(Math.max(0,Math.ceil(adjustedX/itemWithGapWidth)),itemsCount-1);let newOverItemId=null;for(const[itemIdIter,itemPosIter]of Object.entries(positions.value)){if(itemPosIter===clampedPosition&&itemIdIter!==id){newOverItemId=itemIdIter;break}}if(currentOverItemId.value!==newOverItemId){currentOverItemId.value=newOverItemId}if(onDragging){const now=Date.now();if(now-onDraggingLastCallTimestamp.value>THROTTLE_INTERVAL){runOnJS(onDragging)(id,newOverItemId,Math.round(currentX));onDraggingLastCallTimestamp.value=now}}left.value=currentX;setHorizontalPosition(currentX,itemsCount,positions,id,itemWidth,gap,paddingHorizontal);setHorizontalAutoScroll(currentX,leftBound.value,rightBound.value,itemWidth,autoScrollDirection)}),[movingSV,itemWidth,gap,paddingHorizontal,itemsCount,positions,id,onDragging,leftBound,rightBound,autoScrollDirection,currentOverItemId,left,onDraggingLastCallTimestamp]);useAnimatedReaction((()=>positions.value[id]),((currentPosition,previousPosition)=>{if(currentPosition!==null&&previousPosition!==null&&currentPosition!==previousPosition){if(!movingSV.value){const newLeft=getItemXPosition(currentPosition,itemWidth,gap,paddingHorizontal);left.value=withSpring(newLeft);if(onMove){runOnJS(onMove)(id,previousPosition,currentPosition)}}}}),[movingSV,itemWidth,gap,paddingHorizontal]);useAnimatedReaction((()=>autoScrollDirection.value),((scrollDirection,previousValue)=>{if(scrollDirection!==null&&previousValue!==null&&scrollDirection!==previousValue){switch(scrollDirection){case HorizontalScrollDirection.Left:{targetLeftBound.value=leftBound.value;targetLeftBound.value=withTiming(0,{duration:1500});break}case HorizontalScrollDirection.Right:{const contentWidth=getContentWidth(itemsCount,itemWidth,gap,paddingHorizontal);const maxScroll=Math.max(0,contentWidth-calculatedContainerWidth);targetLeftBound.value=leftBound.value;targetLeftBound.value=withTiming(maxScroll,{duration:1500});break}case HorizontalScrollDirection.None:{targetLeftBound.value=leftBound.value;break}}}}));useAnimatedReaction((()=>targetLeftBound.value),((targetLeftBoundValue,previousValue)=>{if(targetLeftBoundValue!==null&&previousValue!==null&&targetLeftBoundValue!==previousValue){if(movingSV.value){leftBound.value=targetLeftBoundValue}}}),[movingSV]);const panGestureHandler=useAnimatedGestureHandler({onStart(event,ctx){"worklet";ctx.initialItemContentX=getItemXPosition(positions.value[id],itemWidth,gap,paddingHorizontal);ctx.initialFingerAbsoluteX=event.absoluteX;ctx.initialLeftBound=leftBound.value;positionX.value=ctx.initialItemContentX;movingSV.value=true;runOnJS(setIsMoving)(true);if(onDragStart){runOnJS(onDragStart)(id,positions.value[id])}},onActive(event,ctx){"worklet";const fingerDxScreen=event.absoluteX-ctx.initialFingerAbsoluteX;const scrollDeltaSinceStart=leftBound.value-ctx.initialLeftBound;positionX.value=ctx.initialItemContentX+fingerDxScreen+scrollDeltaSinceStart},onFinish(){"worklet";const finishPosition=getItemXPosition(positions.value[id],itemWidth,gap,paddingHorizontal);left.value=withTiming(finishPosition);movingSV.value=false;runOnJS(setIsMoving)(false);if(onDrop){runOnJS(onDrop)(id,positions.value[id])}currentOverItemId.value=null}});const animatedStyle=useAnimatedStyle((()=>{"worklet";return{position:"absolute",top:0,bottom:0,left:left.value,width:itemWidth,zIndex:movingSV.value?1:0,backgroundColor:"transparent",shadowColor:"black",shadowOpacity:withSpring(movingSV.value?.2:0),shadowRadius:10}}),[movingSV,itemWidth]);return{animatedStyle,panGestureHandler,isMoving,hasHandle}}

package/lib/hooks/useHorizontalSortableList.d.ts

@@ -0,0 +1,4 @@
+import { UseHorizontalSortableListOptions, UseHorizontalSortableListReturn } from "../types/sortable";
+export declare function useHorizontalSortableList<TData extends {
+    id: string;
+}>(options: UseHorizontalSortableListOptions<TData>): UseHorizontalSortableListReturn<TData>;

package/lib/hooks/useHorizontalSortableList.js

@@ -0,0 +1 @@
+import{useRef,useCallback}from"react";import{scrollTo,useAnimatedReaction,useAnimatedRef,useAnimatedScrollHandler,useSharedValue}from"react-native-reanimated";import{listToObject,getContentWidth}from"../components/sortableUtils";import{HorizontalScrollDirection}from"../types/sortable";export function useHorizontalSortableList(options){const{data,itemWidth,gap=0,paddingHorizontal=0,itemKeyExtractor=item=>item.id}=options;const positions=useSharedValue(listToObject(data));const scrollX=useSharedValue(0);const autoScroll=useSharedValue(HorizontalScrollDirection.None);const scrollViewRef=useAnimatedRef();const dropProviderRef=useRef(null);useAnimatedReaction((()=>scrollX.value),(scrolling=>{scrollTo(scrollViewRef,scrolling,0,false)}));const handleScroll=useAnimatedScrollHandler((event=>{scrollX.value=event.contentOffset.x}));const handleScrollEnd=useCallback((()=>{let localScrollTimeout=null;if(localScrollTimeout){clearTimeout(localScrollTimeout)}localScrollTimeout=setTimeout((()=>{var _a;(_a=dropProviderRef.current)===null||_a===void 0?void 0:_a.requestPositionUpdate()}),50)}),[]);const contentWidth=getContentWidth(data.length,itemWidth,gap,paddingHorizontal);const getItemProps=useCallback(((item,index)=>{const id=itemKeyExtractor(item,index);return{id,positions,leftBound:scrollX,autoScrollDirection:autoScroll,itemsCount:data.length,itemWidth,gap,paddingHorizontal}}),[data.length,itemWidth,gap,paddingHorizontal,itemKeyExtractor,positions,scrollX,autoScroll]);return{positions,scrollX,autoScroll,scrollViewRef,dropProviderRef,handleScroll,handleScrollEnd,contentWidth,getItemProps}}

package/lib/hooks/useSortable.js

@@ -1 +1 @@
-import{useState,useRef,useEffect}from"react";import React from"react";import{runOnJS,runOnUI,useAnimatedGestureHandler,useAnimatedReaction,useAnimatedStyle,useDerivedValue,useSharedValue,withSpring,withTiming}from"react-native-reanimated";export var ScrollDirection;!function(e){e.None="none",e.Up="up",e.Down="down"}(ScrollDirection||(ScrollDirection={}));export function clamp(e,t,n){return Math.max(t,Math.min(e,n))}export function objectMove(e,t,n){const a=Object.assign({},e);for(const l in e)e[l]===t&&(a[l]=n),e[l]===n&&(a[l]=t);return a}export function listToObject(e){const t=Object.values(e),n={};for(let e=0;e<t.length;e++)n[t[e].id]=e;return n}export function setPosition(e,t,n,a,l){const u=clamp(Math.floor(e/l),0,t-1);u!==n.value[a]&&(n.value=objectMove(n.value,n.value[a],u))}export function setAutoScroll(e,t,n,a,l){l.value=e<=t+a?ScrollDirection.Up:e>=n-a?ScrollDirection.Down:ScrollDirection.None}export function useSortable(e){const{id:t,positions:n,lowerBound:a,autoScrollDirection:l,itemsCount:u,itemHeight:o,containerHeight:i=500,onMove:r,onDragStart:s,onDrop:c,onDragging:v,children:d,handleComponent:S}=e,[h,m]=useState(!1),[f,p]=useState(!1),g=useSharedValue(!1),w=useSharedValue(null),D=useSharedValue(0),b=useSharedValue(0),A=useSharedValue(0),O=useSharedValue(0);useEffect((()=>{runOnUI((()=>{const e=n.value[t]*o,l=a.value;A.value=e,b.value=e,O.value=l}))()}),[]);const R=useRef(i).current,M=useDerivedValue((()=>a.value+R));useEffect((()=>{if(!d||!S)return void p(!1);const e=t=>{if(React.isValidElement(t)){if(t.type===S)return!0;if(t.props&&t.props.children&&React.Children.toArray(t.props.children).some(e))return!0}return!1};p(React.Children.toArray(d).some(e))}),[d,S]),useAnimatedReaction((()=>b.value),((e,i)=>{if(null===e||!g.value)return;if(null!==i&&e===i)return;const r=Math.min(Math.max(0,Math.ceil(e/o)),u-1);let s=null;for(const[e,a]of Object.entries(n.value))if(a===r&&e!==t){s=e;break}if(w.value!==s&&(w.value=s),v){const n=Date.now();n-D.value>50&&(runOnJS(v)(t,s,Math.round(e)),D.value=n)}A.value=e,setPosition(e,u,n,t,o),setAutoScroll(e,a.value,M.value,o,l)}),[g,o,u,n,t,v,a,M,l,w,A,D]),useAnimatedReaction((()=>n.value[t]),((e,n)=>{null!==e&&null!==n&&e!==n&&(g.value||(A.value=withSpring(e*o),r&&runOnJS(r)(t,n,e)))}),[g]),useAnimatedReaction((()=>l.value),((e,t)=>{if(null!==e&&null!==t&&e!==t)switch(e){case ScrollDirection.Up:O.value=a.value,O.value=withTiming(0,{duration:1500});break;case ScrollDirection.Down:{const e=u*o-R;O.value=a.value,O.value=withTiming(e,{duration:1500});break}case ScrollDirection.None:O.value=a.value}})),useAnimatedReaction((()=>O.value),((e,t)=>{null!==e&&null!==t&&e!==t&&g.value&&(a.value=e)}),[g]);const x=useAnimatedGestureHandler({onStart(e,l){l.initialItemContentY=n.value[t]*o,l.initialFingerAbsoluteY=e.absoluteY,l.initialLowerBound=a.value,b.value=l.initialItemContentY,g.value=!0,runOnJS(m)(!0),s&&runOnJS(s)(t,n.value[t])},onActive(e,t){const n=e.absoluteY-t.initialFingerAbsoluteY,l=a.value-t.initialLowerBound;b.value=t.initialItemContentY+n+l},onFinish(){const e=n.value[t]*o;A.value=withTiming(e),g.value=!1,runOnJS(m)(!1),c&&runOnJS(c)(t,n.value[t]),w.value=null}});return{animatedStyle:useAnimatedStyle((()=>({position:"absolute",left:0,right:0,top:A.value,zIndex:g.value?1:0,backgroundColor:"#000000",shadowColor:"black",shadowOpacity:withSpring(g.value?.2:0),shadowRadius:10})),[g]),panGestureHandler:x,isMoving:h,hasHandle:f}}
+import{useState,useRef,useEffect}from"react";import React from"react";import{runOnJS,runOnUI,useAnimatedGestureHandler,useAnimatedReaction,useAnimatedStyle,useDerivedValue,useSharedValue,withSpring,withTiming}from"react-native-reanimated";export var ScrollDirection;(function(ScrollDirection){ScrollDirection["None"]="none";ScrollDirection["Up"]="up";ScrollDirection["Down"]="down"})(ScrollDirection||(ScrollDirection={}));export function clamp(value,lowerBound,upperBound){"worklet";return Math.max(lowerBound,Math.min(value,upperBound))}export function objectMove(object,from,to){"worklet";const newObject=Object.assign({},object);const movedUp=to<from;for(const id in object){if(object[id]===from){newObject[id]=to;continue}const currentPosition=object[id];if(movedUp&&currentPosition>=to&&currentPosition<from){newObject[id]++}else if(currentPosition<=to&&currentPosition>from){newObject[id]--}}return newObject}export function listToObject(list){const values=Object.values(list);const object={};for(let i=0;i<values.length;i++){object[values[i].id]=i}return object}export function setPosition(positionY,itemsCount,positions,id,itemHeight){"worklet";const newPosition=clamp(Math.floor(positionY/itemHeight),0,itemsCount-1);if(newPosition!==positions.value[id]){positions.value=objectMove(positions.value,positions.value[id],newPosition)}}export function setAutoScroll(positionY,lowerBound,upperBound,scrollThreshold,autoScroll){"worklet";if(positionY<=lowerBound+scrollThreshold){autoScroll.value=ScrollDirection.Up}else if(positionY>=upperBound-scrollThreshold){autoScroll.value=ScrollDirection.Down}else{autoScroll.value=ScrollDirection.None}}export function useSortable(options){const{id,positions,lowerBound,autoScrollDirection,itemsCount,itemHeight,containerHeight=500,onMove,onDragStart,onDrop,onDragging,children,handleComponent}=options;const[isMoving,setIsMoving]=useState(false);const[hasHandle,setHasHandle]=useState(false);const movingSV=useSharedValue(false);const currentOverItemId=useSharedValue(null);const onDraggingLastCallTimestamp=useSharedValue(0);const THROTTLE_INTERVAL=50;const positionY=useSharedValue(0);const top=useSharedValue(0);const targetLowerBound=useSharedValue(0);useEffect((()=>{runOnUI((()=>{"worklet";const initialTopVal=positions.value[id]*itemHeight;const initialLowerBoundVal=lowerBound.value;top.value=initialTopVal;positionY.value=initialTopVal;targetLowerBound.value=initialLowerBoundVal}))()}),[]);const calculatedContainerHeight=useRef(containerHeight).current;const upperBound=useDerivedValue((()=>lowerBound.value+calculatedContainerHeight));useEffect((()=>{if(!children||!handleComponent){setHasHandle(false);return}const checkForHandle=child=>{if(React.isValidElement(child)){if(child.type===handleComponent){return true}if(child.props&&child.props.children){if(React.Children.toArray(child.props.children).some(checkForHandle)){return true}}}return false};setHasHandle(React.Children.toArray(children).some(checkForHandle))}),[children,handleComponent]);useAnimatedReaction((()=>positionY.value),((currentY,previousY)=>{if(currentY===null||!movingSV.value){return}if(previousY!==null&&currentY===previousY){return}const clampedPosition=Math.min(Math.max(0,Math.ceil(currentY/itemHeight)),itemsCount-1);let newOverItemId=null;for(const[itemIdIter,itemPosIter]of Object.entries(positions.value)){if(itemPosIter===clampedPosition&&itemIdIter!==id){newOverItemId=itemIdIter;break}}if(currentOverItemId.value!==newOverItemId){currentOverItemId.value=newOverItemId}if(onDragging){const now=Date.now();if(now-onDraggingLastCallTimestamp.value>THROTTLE_INTERVAL){runOnJS(onDragging)(id,newOverItemId,Math.round(currentY));onDraggingLastCallTimestamp.value=now}}top.value=currentY;setPosition(currentY,itemsCount,positions,id,itemHeight);setAutoScroll(currentY,lowerBound.value,upperBound.value,itemHeight,autoScrollDirection)}),[movingSV,itemHeight,itemsCount,positions,id,onDragging,lowerBound,upperBound,autoScrollDirection,currentOverItemId,top,onDraggingLastCallTimestamp]);useAnimatedReaction((()=>positions.value[id]),((currentPosition,previousPosition)=>{if(currentPosition!==null&&previousPosition!==null&&currentPosition!==previousPosition){if(!movingSV.value){top.value=withSpring(currentPosition*itemHeight);if(onMove){runOnJS(onMove)(id,previousPosition,currentPosition)}}}}),[movingSV]);useAnimatedReaction((()=>autoScrollDirection.value),((scrollDirection,previousValue)=>{if(scrollDirection!==null&&previousValue!==null&&scrollDirection!==previousValue){switch(scrollDirection){case ScrollDirection.Up:{targetLowerBound.value=lowerBound.value;targetLowerBound.value=withTiming(0,{duration:1500});break}case ScrollDirection.Down:{const contentHeight=itemsCount*itemHeight;const maxScroll=contentHeight-calculatedContainerHeight;targetLowerBound.value=lowerBound.value;targetLowerBound.value=withTiming(maxScroll,{duration:1500});break}case ScrollDirection.None:{targetLowerBound.value=lowerBound.value;break}}}}));useAnimatedReaction((()=>targetLowerBound.value),((targetLowerBoundValue,previousValue)=>{if(targetLowerBoundValue!==null&&previousValue!==null&&targetLowerBoundValue!==previousValue){if(movingSV.value){lowerBound.value=targetLowerBoundValue}}}),[movingSV]);const panGestureHandler=useAnimatedGestureHandler({onStart(event,ctx){"worklet";ctx.initialItemContentY=positions.value[id]*itemHeight;ctx.initialFingerAbsoluteY=event.absoluteY;ctx.initialLowerBound=lowerBound.value;positionY.value=ctx.initialItemContentY;movingSV.value=true;runOnJS(setIsMoving)(true);if(onDragStart){runOnJS(onDragStart)(id,positions.value[id])}},onActive(event,ctx){"worklet";const fingerDyScreen=event.absoluteY-ctx.initialFingerAbsoluteY;const scrollDeltaSinceStart=lowerBound.value-ctx.initialLowerBound;positionY.value=ctx.initialItemContentY+fingerDyScreen+scrollDeltaSinceStart},onFinish(){"worklet";const finishPosition=positions.value[id]*itemHeight;top.value=withTiming(finishPosition);movingSV.value=false;runOnJS(setIsMoving)(false);if(onDrop){runOnJS(onDrop)(id,positions.value[id])}currentOverItemId.value=null}});const animatedStyle=useAnimatedStyle((()=>{"worklet";return{position:"absolute",left:0,right:0,top:top.value,zIndex:movingSV.value?1:0,backgroundColor:"#000000",shadowColor:"black",shadowOpacity:withSpring(movingSV.value?.2:0),shadowRadius:10}}),[movingSV]);return{animatedStyle,panGestureHandler,isMoving,hasHandle}}

package/lib/hooks/useSortableList.js

@@ -1 +1 @@
-import{useRef,useCallback}from"react";import{scrollTo,useAnimatedReaction,useAnimatedRef,useAnimatedScrollHandler,useSharedValue}from"react-native-reanimated";import{listToObject}from"../components/sortableUtils";import{ScrollDirection}from"../types/sortable";export function useSortableList(e){const{data:t,itemHeight:o,itemKeyExtractor:l=e=>e.id}=e,r=useSharedValue(listToObject(t)),i=useSharedValue(0),a=useSharedValue(ScrollDirection.None),n=useAnimatedRef(),s=useRef(null);useAnimatedReaction((()=>i.value),(e=>{scrollTo(n,0,e,!1)}));const u=useAnimatedScrollHandler((e=>{i.value=e.contentOffset.y})),c=useCallback((()=>{let e=null;e&&clearTimeout(e),e=setTimeout((()=>{var e;null===(e=s.current)||void 0===e||e.requestPositionUpdate()}),50)}),[]),d=t.length*o,m=useCallback(((e,n)=>({id:l(e,n),positions:r,lowerBound:i,autoScrollDirection:a,itemsCount:t.length,itemHeight:o})),[t.length,o,l,r,i,a]);return{positions:r,scrollY:i,autoScroll:a,scrollViewRef:n,dropProviderRef:s,handleScroll:u,handleScrollEnd:c,contentHeight:d,getItemProps:m}}
+import{useRef,useCallback}from"react";import{scrollTo,useAnimatedReaction,useAnimatedRef,useAnimatedScrollHandler,useSharedValue}from"react-native-reanimated";import{listToObject}from"../components/sortableUtils";import{ScrollDirection}from"../types/sortable";export function useSortableList(options){const{data,itemHeight,itemKeyExtractor=item=>item.id}=options;const positions=useSharedValue(listToObject(data));const scrollY=useSharedValue(0);const autoScroll=useSharedValue(ScrollDirection.None);const scrollViewRef=useAnimatedRef();const dropProviderRef=useRef(null);useAnimatedReaction((()=>scrollY.value),(scrolling=>{scrollTo(scrollViewRef,0,scrolling,false)}));const handleScroll=useAnimatedScrollHandler((event=>{scrollY.value=event.contentOffset.y}));const handleScrollEnd=useCallback((()=>{let localScrollTimeout=null;if(localScrollTimeout){clearTimeout(localScrollTimeout)}localScrollTimeout=setTimeout((()=>{var _a;(_a=dropProviderRef.current)===null||_a===void 0?void 0:_a.requestPositionUpdate()}),50)}),[]);const contentHeight=data.length*itemHeight;const getItemProps=useCallback(((item,index)=>{const id=itemKeyExtractor(item,index);return{id,positions,lowerBound:scrollY,autoScrollDirection:autoScroll,itemsCount:data.length,itemHeight}}),[data.length,itemHeight,itemKeyExtractor,positions,scrollY,autoScroll]);return{positions,scrollY,autoScroll,scrollViewRef,dropProviderRef,handleScroll,handleScrollEnd,contentHeight,getItemProps}}

package/lib/types/context.js

@@ -1 +1 @@
-import{createContext}from"react";const defaultSlotsContextValue={register:(e,t)=>{process.env.NODE_ENV},unregister:e=>{process.env.NODE_ENV},getSlots:()=>(process.env.NODE_ENV,{}),isRegistered:e=>(process.env.NODE_ENV,!1),setActiveHoverSlot:e=>{process.env.NODE_ENV},activeHoverSlotId:null,registerPositionUpdateListener:(e,t)=>{process.env.NODE_ENV},unregisterPositionUpdateListener:e=>{process.env.NODE_ENV},requestPositionUpdate:()=>{process.env.NODE_ENV},registerDroppedItem:(e,t,s)=>{process.env.NODE_ENV},unregisterDroppedItem:e=>{process.env.NODE_ENV},getDroppedItems:()=>(process.env.NODE_ENV,{}),hasAvailableCapacity:e=>(process.env.NODE_ENV,!1),onDragging:e=>{process.env.NODE_ENV},onDragStart:void 0,onDragEnd:void 0};export const SlotsContext=createContext(defaultSlotsContextValue);
+import{createContext}from"react";const defaultSlotsContextValue={register:(_id,_slot)=>{if(process.env.NODE_ENV!=="production"){console.warn("SlotsContext: register called without a Provider.")}},unregister:_id=>{if(process.env.NODE_ENV!=="production"){console.warn("SlotsContext: unregister called without a Provider.")}},getSlots:()=>{if(process.env.NODE_ENV!=="production"){console.warn("SlotsContext: getSlots called without a Provider.")}return{}},isRegistered:_id=>{if(process.env.NODE_ENV!=="production"){console.warn("SlotsContext: isRegistered called without a Provider.")}return false},setActiveHoverSlot:_id=>{if(process.env.NODE_ENV!=="production"){console.warn("SlotsContext: setActiveHoverSlot called without a Provider.")}},activeHoverSlotId:null,registerPositionUpdateListener:(_id,_listener)=>{if(process.env.NODE_ENV!=="production"){console.warn("SlotsContext: registerPositionUpdateListener called without a Provider.")}},unregisterPositionUpdateListener:_id=>{if(process.env.NODE_ENV!=="production"){console.warn("SlotsContext: unregisterPositionUpdateListener called without a Provider.")}},requestPositionUpdate:()=>{if(process.env.NODE_ENV!=="production"){console.warn("SlotsContext: requestPositionUpdate called without a Provider (internally).")}},registerDroppedItem:(_draggableId,_droppableId,_itemData)=>{if(process.env.NODE_ENV!=="production"){console.warn("SlotsContext: registerDroppedItem called without a Provider.")}},unregisterDroppedItem:_draggableId=>{if(process.env.NODE_ENV!=="production"){console.warn("SlotsContext: unregisterDroppedItem called without a Provider.")}},getDroppedItems:()=>{if(process.env.NODE_ENV!=="production"){console.warn("SlotsContext: getDroppedItems called without a Provider.")}return{}},hasAvailableCapacity:_droppableId=>{if(process.env.NODE_ENV!=="production"){console.warn("SlotsContext: hasAvailableCapacity called without a Provider.")}return false},onDragging:payload=>{if(process.env.NODE_ENV!=="production"){console.warn("SlotsContext: onDragging called without a Provider.")}},onDragStart:undefined,onDragEnd:undefined};export const SlotsContext=createContext(defaultSlotsContextValue);

package/lib/types/draggable.js

@@ -1 +1 @@
-export var DraggableState;!function(D){D.IDLE="IDLE",D.DRAGGING="DRAGGING",D.DROPPED="DROPPED"}(DraggableState||(DraggableState={}));
+export var DraggableState;(function(DraggableState){DraggableState["IDLE"]="IDLE";DraggableState["DRAGGING"]="DRAGGING";DraggableState["DROPPED"]="DROPPED"})(DraggableState||(DraggableState={}));

package/lib/types/sortable.d.ts

@@ -7,6 +7,15 @@ export declare enum ScrollDirection {
     Up = "up",
     Down = "down"
 }
+export declare enum HorizontalScrollDirection {
+    None = "none",
+    Left = "left",
+    Right = "right"
+}
+export declare enum SortableDirection {
+    Vertical = "vertical",
+    Horizontal = "horizontal"
+}
 export interface UseSortableOptions<T> {
     id: string;
     positions: SharedValue<{
@@ -57,11 +66,18 @@ export interface SortableItemProps<T> {
     positions: SharedValue<{
         [id: string]: number;
     }>;
-    lowerBound: SharedValue<number>;
-    autoScrollDirection: SharedValue<ScrollDirection>;
+    lowerBound?: SharedValue<number>;
+    leftBound?: SharedValue<number>;
+    autoScrollDirection?: SharedValue<ScrollDirection>;
+    autoScrollHorizontalDirection?: SharedValue<HorizontalScrollDirection>;
     itemsCount: number;
-    itemHeight: number;
+    direction?: SortableDirection;
+    itemHeight?: number;
+    itemWidth?: number;
+    gap?: number;
+    paddingHorizontal?: number;
     containerHeight?: number;
+    containerWidth?: number;
     children: ReactNode;
     style?: StyleProp<ViewStyle>;
     animatedStyle?: StyleProp<ViewStyle>;
@@ -69,14 +85,20 @@ export interface SortableItemProps<T> {
     onDragStart?: (id: string, position: number) => void;
     onDrop?: (id: string, position: number) => void;
     onDragging?: (id: string, overItemId: string | null, yPosition: number) => void;
+    onDraggingHorizontal?: (id: string, overItemId: string | null, xPosition: number) => void;
 }
 export interface SortableProps<TData> {
     data: TData[];
     renderItem: (props: SortableRenderItemProps<TData>) => ReactNode;
-    itemHeight: number;
+    direction?: SortableDirection;
+    itemHeight?: number;
+    itemWidth?: number;
+    gap?: number;
+    paddingHorizontal?: number;
     style?: StyleProp<ViewStyle>;
     contentContainerStyle?: StyleProp<ViewStyle>;
     itemKeyExtractor?: (item: TData, index: number) => string;
+    useFlatList?: boolean;
 }
 export interface SortableRenderItemProps<TData> {
     item: TData;
@@ -85,10 +107,16 @@ export interface SortableRenderItemProps<TData> {
     positions: SharedValue<{
         [id: string]: number;
     }>;
-    lowerBound: SharedValue<number>;
-    autoScrollDirection: SharedValue<ScrollDirection>;
+    direction?: SortableDirection;
+    lowerBound?: SharedValue<number>;
+    leftBound?: SharedValue<number>;
+    autoScrollDirection?: SharedValue<ScrollDirection>;
+    autoScrollHorizontalDirection?: SharedValue<HorizontalScrollDirection>;
     itemsCount: number;
-    itemHeight: number;
+    itemHeight?: number;
+    itemWidth?: number;
+    gap?: number;
+    paddingHorizontal?: number;
 }
 export interface SortableContextValue {
     panGestureHandler: any;
@@ -97,3 +125,98 @@ export interface SortableHandleProps {
     children: React.ReactNode;
     style?: StyleProp<ViewStyle>;
 }
+export interface UseHorizontalSortableOptions<T> {
+    id: string;
+    positions: SharedValue<{
+        [id: string]: number;
+    }>;
+    leftBound: SharedValue<number>;
+    autoScrollDirection: SharedValue<HorizontalScrollDirection>;
+    itemsCount: number;
+    itemWidth: number;
+    gap?: number;
+    paddingHorizontal?: number;
+    containerWidth?: number;
+    onMove?: (id: string, from: number, to: number) => void;
+    onDragStart?: (id: string, position: number) => void;
+    onDrop?: (id: string, position: number) => void;
+    onDragging?: (id: string, overItemId: string | null, xPosition: number) => void;
+}
+export interface UseHorizontalSortableReturn {
+    animatedStyle: StyleProp<ViewStyle>;
+    panGestureHandler: any;
+    isMoving: boolean;
+    hasHandle: boolean;
+}
+export interface UseHorizontalSortableListOptions<TData> {
+    data: TData[];
+    itemWidth: number;
+    gap?: number;
+    paddingHorizontal?: number;
+    itemKeyExtractor?: (item: TData, index: number) => string;
+}
+export interface UseHorizontalSortableListReturn<TData> {
+    positions: any;
+    scrollX: any;
+    autoScroll: any;
+    scrollViewRef: any;
+    dropProviderRef: React.RefObject<DropProviderRef>;
+    handleScroll: any;
+    handleScrollEnd: () => void;
+    contentWidth: number;
+    getItemProps: (item: TData, index: number) => {
+        id: string;
+        positions: any;
+        leftBound: any;
+        autoScrollDirection: any;
+        itemsCount: number;
+        itemWidth: number;
+        gap: number;
+        paddingHorizontal: number;
+    };
+}
+export interface HorizontalSortableItemProps<T> {
+    id: string;
+    data: T;
+    positions: SharedValue<{
+        [id: string]: number;
+    }>;
+    leftBound: SharedValue<number>;
+    autoScrollDirection: SharedValue<HorizontalScrollDirection>;
+    itemsCount: number;
+    itemWidth: number;
+    gap?: number;
+    paddingHorizontal?: number;
+    containerWidth?: number;
+    children: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    animatedStyle?: StyleProp<ViewStyle>;
+    onMove?: (id: string, from: number, to: number) => void;
+    onDragStart?: (id: string, position: number) => void;
+    onDrop?: (id: string, position: number) => void;
+    onDragging?: (id: string, overItemId: string | null, xPosition: number) => void;
+}
+export interface HorizontalSortableProps<TData> {
+    data: TData[];
+    renderItem: (props: HorizontalSortableRenderItemProps<TData>) => ReactNode;
+    itemWidth: number;
+    gap?: number;
+    paddingHorizontal?: number;
+    style?: StyleProp<ViewStyle>;
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    itemKeyExtractor?: (item: TData, index: number) => string;
+}
+export interface HorizontalSortableRenderItemProps<TData> {
+    item: TData;
+    index: number;
+    id: string;
+    positions: SharedValue<{
+        [id: string]: number;
+    }>;
+    leftBound: SharedValue<number>;
+    autoScrollDirection: SharedValue<HorizontalScrollDirection>;
+    itemsCount: number;
+    itemWidth: number;
+    gap: number;
+    paddingHorizontal: number;
+}

package/lib/types/sortable.js

@@ -1 +1 @@
-export var ScrollDirection;!function(o){o.None="none",o.Up="up",o.Down="down"}(ScrollDirection||(ScrollDirection={}));
+export var ScrollDirection;(function(ScrollDirection){ScrollDirection["None"]="none";ScrollDirection["Up"]="up";ScrollDirection["Down"]="down"})(ScrollDirection||(ScrollDirection={}));export var HorizontalScrollDirection;(function(HorizontalScrollDirection){HorizontalScrollDirection["None"]="none";HorizontalScrollDirection["Left"]="left";HorizontalScrollDirection["Right"]="right"})(HorizontalScrollDirection||(HorizontalScrollDirection={}));export var SortableDirection;(function(SortableDirection){SortableDirection["Vertical"]="vertical";SortableDirection["Horizontal"]="horizontal"})(SortableDirection||(SortableDirection={}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-reanimated-dnd",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "A powerful drag-and-drop library for React Native using Reanimated 3",
   "main": "lib/index.js",
   "module": "lib/index.js",
@@ -16,7 +16,9 @@
   "sideEffects": false,
   "scripts": {
     "build": "tsc && npm run minify",
+    "build:safe": "tsc",
     "build:clean": "rm -rf lib && npm run build",
+    "build:clean:safe": "rm -rf lib && npm run build:safe",
     "minify": "node scripts/build.js",
     "type-check": "tsc --noEmit",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md,yml,yaml}\" --ignore-path .prettierignore",