@btfash/react-native-reanimated-dnd 1.1.0

package/documentation/web-docs/README.md

@@ -0,0 +1,41 @@
+# Documentation Website
+
+This is the documentation website for React Native Reanimated DnD.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

package/example-app/.expo/README.md

@@ -0,0 +1,8 @@
+> Why do I have a folder named ".expo" in my project?
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+> What do the files contain?
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+> Should I commit the ".expo" folder?
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

package/example-app/README.md

@@ -0,0 +1,515 @@
+# React Native Reanimated DnD - Example App 📱
+
+<div align="center">
+
+**Interactive Examples Showcase**
+
+A comprehensive collection of 15 interactive examples demonstrating every feature of the React Native Reanimated DnD library.
+
+[![React Native](https://img.shields.io/badge/React%20Native-0.72+-blue.svg)](https://reactnative.dev/)
+[![Expo](https://img.shields.io/badge/Expo-SDK%2049+-black.svg)](https://expo.dev/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
+
+</div>
+
+## 🎯 Overview
+
+This example app provides a hands-on demonstration of all the features available in the `react-native-reanimated-dnd` library. Each example is carefully crafted to showcase specific functionality, from basic drag-and-drop to advanced collision detection and custom animations.
+
+## 🚀 Quick Start
+
+### Prerequisites
+
+- Node.js 16+
+- React Native development environment
+- iOS Simulator or Android Emulator (or physical device)
+
+### Installation & Setup
+
+1. **Clone the repository:**
+
+```bash
+git clone https://github.com/entropyconquers/react-native-reanimated-dnd.git
+cd react-native-reanimated-dnd/example-app
+```
+
+2. **Install dependencies:**
+
+```bash
+npm install
+```
+
+3. **Run the app:**
+
+```bash
+# iOS
+npx expo run:ios
+
+# Android
+npx expo run:android
+
+# Development build
+npx expo start
+```
+
+## 📚 Examples Catalog
+
+### 🎵 Core Examples
+
+#### **Sortable Music Queue** ♫
+
+_Perfect introduction to sortable lists_
+
+**Features Demonstrated:**
+
+- Reorderable vertical list with smooth animations
+- Drag handles for precise control
+- Auto-scrolling when dragging near edges
+- Real-time position updates and data synchronization
+- Long-press activation with haptic feedback
+
+**Key Components:** `Sortable`, `SortableItem`, `SortableItem.Handle`
+
+**Use Cases:** Music playlists, task lists, priority queues, menu reordering
+
+---
+
+#### **Basic Drag & Drop** 👆
+
+_Your first step into drag-and-drop_
+
+**Features Demonstrated:**
+
+- Simple draggable items with multiple drop zones
+- Visual feedback when hovering over drop zones
+- Basic data transfer between components
+- Clean, minimal implementation pattern
+
+**Key Components:** `Draggable`, `Droppable`, `DropProvider`
+
+**Use Cases:** File organization, category sorting, simple workflows
+
+---
+
+### 🔧 Interaction Examples
+
+#### **Drag Handles** 🔧
+
+_Precise control over drag initiation_
+
+**Features Demonstrated:**
+
+- Handle-only dragging (rest of item non-draggable)
+- Mixed interaction patterns within single items
+- Custom handle styling and positioning
+- Accessibility considerations for touch targets
+
+**Key Components:** `Draggable.Handle`
+
+**Use Cases:** Complex UI cards, mixed-interaction lists, accessibility-focused designs
+
+---
+
+#### **Drag State Management** ⚡
+
+_Complete lifecycle state tracking_
+
+**Features Demonstrated:**
+
+- `DraggableState` enum usage (`IDLE`, `DRAGGING`, `ANIMATING`)
+- `onStateChange` callback implementation
+- Visual state indicators and conditional styling
+- State-based UI updates and animations
+
+**Key Components:** State management hooks and callbacks
+
+**Use Cases:** Complex UI feedback, analytics tracking, conditional behaviors
+
+---
+
+#### **Dropped Items Map** 📍
+
+_Real-time tracking of drop relationships_
+
+**Features Demonstrated:**
+
+- Track which draggables are on which droppables
+- Real-time mapping updates
+- Multi-zone state management
+- Persistent state across interactions
+
+**Key Components:** Context state management
+
+**Use Cases:** Kanban boards, inventory management, workspace organization
+
+---
+
+### 🎨 Visual & Animation Examples
+
+#### **Custom Animations** 🎬
+
+_Bring your drag interactions to life_
+
+**Features Demonstrated:**
+
+- Custom timing functions with `withTiming`
+- Spring animations with `withSpring`
+- Easing variations (bezier, bounce, elastic)
+- Duration and damping controls
+- Chained and sequential animations
+
+**Key Components:** Animation functions, `animationFunction` prop
+
+**Use Cases:** Premium app experiences, game-like interactions, brand-specific animations
+
+---
+
+#### **Active Drop Styles** ✨
+
+_Beautiful visual feedback_
+
+**Features Demonstrated:**
+
+- Hover state styling with smooth transitions
+- Color changes and border effects
+- Scale transformations and shadow effects
+- Conditional styling based on drop state
+- CSS-like transition animations
+
+**Key Components:** `activeStyle` prop, conditional styling
+
+**Use Cases:** File upload zones, shopping carts, interactive dashboards
+
+---
+
+#### **Alignment & Offset** 📐
+
+_Pixel-perfect drop positioning_
+
+**Features Demonstrated:**
+
+- 9-point alignment system (top-left, center, bottom-right, etc.)
+- Custom offset values for fine-tuning
+- Visual alignment guides and indicators
+- Precise positioning control
+
+**Key Components:** `dropAlignment`, `dropOffset` props
+
+**Use Cases:** Layout builders, design tools, precise positioning requirements
+
+---
+
+### 🎯 Advanced Collision Examples
+
+#### **Collision Detection** 🎯
+
+_Different strategies for drop detection_
+
+**Features Demonstrated:**
+
+- **Center Algorithm**: Precise center-point collision detection
+- **Intersect Algorithm**: Forgiving overlap detection (default)
+- **Contain Algorithm**: Strict containment requirement
+- Visual collision indicators and feedback
+- Performance implications of each algorithm
+
+**Key Components:** `collisionAlgorithm` prop
+
+**Use Cases:** Games, precise interactions, different UX requirements
+
+---
+
+#### **Drop Zone Capacity** 🗂️
+
+_Smart capacity management_
+
+**Features Demonstrated:**
+
+- Maximum item limits per drop zone
+- Visual capacity indicators (3/5 items)
+- Overflow handling and rejection
+- Dynamic capacity updates
+- Full/available state styling
+
+**Key Components:** `capacity` prop, conditional logic
+
+**Use Cases:** Limited slots, inventory systems, resource management
+
+---
+
+### 📦 Constraint Examples
+
+#### **Bounded Dragging** 📦
+
+_Keep items within boundaries_
+
+**Features Demonstrated:**
+
+- Container-based boundary constraints
+- Visual boundary indicators
+- Smooth edge collision handling
+- Responsive boundary updates
+- Ref-based boundary definition
+
+**Key Components:** `dragBoundsRef` prop
+
+**Use Cases:** Canvas editors, constrained workspaces, mobile-friendly interactions
+
+---
+
+#### **X-Axis Constraints** ↔️
+
+_Horizontal-only movement_
+
+**Features Demonstrated:**
+
+- Horizontal slider implementations
+- Axis-locked dragging behavior
+- Custom constraint handling
+- Smooth horizontal motion
+- Value-based positioning
+
+**Key Components:** `dragAxis="x"` prop
+
+**Use Cases:** Sliders, horizontal timelines, progress controls
+
+---
+
+#### **Y-Axis Constraints** ↕️
+
+_Vertical-only movement_
+
+**Features Demonstrated:**
+
+- Vertical slider controls
+- Column-based movement patterns
+- Vertical constraint handling
+- Smooth vertical motion
+- List reordering patterns
+
+**Key Components:** `dragAxis="y"` prop
+
+**Use Cases:** Volume controls, vertical lists, priority ordering
+
+---
+
+#### **Bounded Y-Axis** 📏
+
+_Vertical movement with limits_
+
+**Features Demonstrated:**
+
+- Vertical movement within specific boundaries
+- Combined axis and boundary constraints
+- Boundary visualization
+- Smooth constraint handling
+- Range-based interactions
+
+**Key Components:** `dragAxis="y"` + `dragBoundsRef`
+
+**Use Cases:** Range selectors, bounded lists, constrained vertical controls
+
+---
+
+### ⚙️ Custom Implementation
+
+#### **Custom Draggable** ⚙️
+
+_Advanced implementation patterns_
+
+**Features Demonstrated:**
+
+- Direct hook usage (`useDraggable`, `useDroppable`)
+- Advanced gesture handling patterns
+- Custom animation systems
+- Performance optimization techniques
+- Low-level API usage
+
+**Key Components:** Core hooks and custom implementations
+
+**Use Cases:** Highly customized interactions, performance-critical apps, unique UX patterns
+
+---
+
+## 🏗️ App Architecture
+
+### Navigation Structure
+
+```
+📱 App
+├── 🏠 Home (Examples Navigation)
+├── 🎵 Sortable Music Queue
+├── 👆 Basic Drag & Drop
+├── 🔧 Drag Handles
+├── ⚡ Drag State Management
+├── 📍 Dropped Items Map
+├── 🎬 Custom Animations
+├── ✨ Active Drop Styles
+├── 📐 Alignment & Offset
+├── 🎯 Collision Detection
+├── 🗂️ Drop Zone Capacity
+├── 📦 Bounded Dragging
+├── ↔️ X-Axis Constraints
+├── ↕️ Y-Axis Constraints
+├── 📏 Bounded Y-Axis
+└── ⚙️ Custom Draggable
+```
+
+### Key Components
+
+#### **ExamplesNavigationPage**
+
+- Beautiful home screen with example cards
+- Categorized example organization
+- Smooth navigation transitions
+- Custom fonts and styling
+
+#### **Example Components**
+
+- Consistent header with back navigation
+- Interactive demonstrations
+- Real-time feedback and state display
+- Clean, educational code patterns
+
+#### **Shared Components**
+
+- `ExampleHeader` - Consistent navigation
+- `Footer` - App information and links
+- `BottomSheet` - Settings and options
+
+## 🎨 Design System
+
+### Typography
+
+- **Primary Font**: Major Mono Display (headers)
+- **Body Font**: Kumbh Sans (content)
+- **Weights**: Regular, Medium, SemiBold, Bold
+
+### Color Palette
+
+- **Background**: Deep black (#000000)
+- **Cards**: Dark gray with subtle borders
+- **Accent**: Red highlights for branding
+- **Text**: High contrast white/gray
+- **Interactive**: Blue and green for actions
+
+### Animations
+
+- **Duration**: 300ms standard, 200ms quick
+- **Easing**: Smooth bezier curves
+- **Spring**: Natural physics-based motion
+- **Feedback**: Haptic feedback on interactions
+
+## 🔧 Technical Implementation
+
+### Dependencies
+
+```json
+{
+  "react-native-reanimated": "^3.5.0",
+  "react-native-gesture-handler": "^2.13.0",
+  "@react-navigation/native": "^6.1.0",
+  "@react-navigation/stack": "^6.3.0",
+  "expo": "~49.0.0"
+}
+```
+
+### Performance Optimizations
+
+- **Worklet Functions**: All animations run on UI thread
+- **Gesture Handler**: Native gesture recognition
+- **Reanimated 3**: Latest performance improvements
+- **Memoization**: Optimized re-renders
+- **Lazy Loading**: Efficient navigation
+
+### Code Organization
+
+```
+📁 example-app/
+├── 📁 components/
+│   ├── 📁 examples/          # All example implementations
+│   ├── ExamplesNavigationPage.tsx
+│   ├── ExampleHeader.tsx
+│   └── Footer.tsx
+├── 📁 navigation/
+│   └── AppNavigator.tsx      # React Navigation setup
+├── 📁 assets/               # Images and fonts
+└── App.tsx                  # Root component
+```
+
+## 🎯 Learning Path
+
+### Beginner
+
+1. **Basic Drag & Drop** - Understand core concepts
+2. **Sortable Music Queue** - Learn list reordering
+3. **Active Drop Styles** - Add visual feedback
+
+### Intermediate
+
+4. **Drag Handles** - Implement precise controls
+5. **Collision Detection** - Understand algorithms
+6. **Bounded Dragging** - Add constraints
+7. **Custom Animations** - Enhance user experience
+
+### Advanced
+
+8. **Drag State Management** - Master state tracking
+9. **Dropped Items Map** - Complex state management
+10. **Alignment & Offset** - Precise positioning
+11. **Capacity Management** - Smart limitations
+12. **Axis Constraints** - Specialized interactions
+13. **Custom Implementation** - Build from scratch
+
+## 🤝 Contributing to Examples
+
+We welcome contributions to improve and expand the example collection!
+
+### Adding New Examples
+
+1. Create new component in `components/examples/`
+2. Add to navigation in `AppNavigator.tsx`
+3. Update `ExamplesNavigationPage.tsx`
+4. Follow existing patterns and styling
+
+### Improving Existing Examples
+
+1. Enhance visual design
+2. Add more interactive features
+3. Improve code comments and documentation
+4. Optimize performance
+
+## 📱 Device Testing
+
+### Recommended Testing
+
+- **iOS**: iPhone 12+ (iOS 14+)
+- **Android**: API 21+ (Android 5.0+)
+- **Tablets**: iPad, Android tablets
+- **Physical Devices**: Best performance testing
+
+### Performance Notes
+
+- Animations run at 60fps on modern devices
+- Gesture recognition is native and responsive
+- Memory usage is optimized for mobile
+- Works well on both platforms
+
+## 🔗 Related Resources
+
+- **Main Library**: [react-native-reanimated-dnd](https://github.com/entropyconquers/react-native-reanimated-dnd)
+- **Documentation**: [API Reference](https://github.com/entropyconquers/react-native-reanimated-dnd#readme)
+- **React Native Reanimated**: [Official Docs](https://docs.swmansion.com/react-native-reanimated/)
+- **Gesture Handler**: [Official Docs](https://docs.swmansion.com/react-native-gesture-handler/)
+
+---
+
+<div align="center">
+
+**🎯 Ready to explore drag-and-drop interactions?**
+
+Run the app and start with the **Basic Drag & Drop** example!
+
+[📱 Run the App](#quick-start) • [📖 View Source](https://github.com/entropyconquers/react-native-reanimated-dnd) • [⭐ Star on GitHub](https://github.com/entropyconquers/react-native-reanimated-dnd)
+
+</div>

package/lib/components/Draggable.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { DraggableHandleProps, DraggableProps } from "../types/draggable";
+export declare const Draggable: (<TData = unknown>({ style: componentStyle, children, ...useDraggableHookOptions }: DraggableProps<TData>) => React.JSX.Element) & {
+    Handle: ({ children, style }: DraggableHandleProps) => React.JSX.Element;
+};

package/lib/components/Draggable.js

@@ -0,0 +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);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.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { DroppableProps } from "../types/droppable";
+export declare const Droppable: <TData = unknown>({ onDrop, dropDisabled, onActiveChange, dropAlignment, dropOffset, activeStyle, droppableId, capacity, style, children, }: DroppableProps<TData>) => React.ReactElement;

package/lib/components/Droppable.js

@@ -0,0 +1 @@
+import React from"react";import Animated from"react-native-reanimated";import{useDroppable}from"../hooks/useDroppable";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

@@ -0,0 +1,3 @@
+import React from "react";
+import { SortableProps } from "../types/sortable";
+export declare const Sortable: React.MemoExoticComponent<({ data, renderItem, ...props }: SortableProps<any>) => React.JSX.Element>;

package/lib/components/Sortable.js

@@ -0,0 +1 @@
+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

@@ -0,0 +1,6 @@
+import React from "react";
+import { SortableItemProps, SortableHandleProps } from "../types/sortable";
+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

@@ -0,0 +1 @@
+import React,{createContext,useContext}from"react";import Animated from"react-native-reanimated";import{GestureDetector}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(GestureDetector,{gesture: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(GestureDetector,{gesture:horizontalPanGestureHandler},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(GestureDetector,{gesture:verticalPanGestureHandler},content)}}SortableItem.Handle=SortableHandle;

package/lib/components/sortableUtils.d.ts

@@ -0,0 +1,33 @@
+import { SharedValue } from "react-native-reanimated";
+export declare enum ScrollDirection {
+    None = "none",
+    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;
+}, from: number, to: number): {
+    [id: string]: number;
+};
+export declare function listToObject<T extends {
+    id: string;
+}>(list: T[]): {
+    [id: string]: number;
+};
+export declare function setPosition(positionY: number, itemsCount: number, positions: SharedValue<{
+    [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

@@ -0,0 +1 @@
+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.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { DropProviderProps, DropProviderRef } from "../types/context";
+export declare const DropProvider: React.ForwardRefExoticComponent<DropProviderProps & React.RefAttributes<DropProviderRef>>;

package/lib/context/DropContext.js

@@ -0,0 +1 @@
+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/index.d.ts

@@ -0,0 +1,6 @@
+export { useSortable } from "./useSortable";
+export { useSortableList } from "./useSortableList";
+export { useHorizontalSortable } from "./useHorizontalSortable";
+export { useHorizontalSortableList } from "./useHorizontalSortableList";
+export { useDraggable } from "./useDraggable";
+export { useDroppable } from "./useDroppable";