react-native-reanimated-dnd 1.0.1

package/lib/components/SortableItem.d.ts

@@ -0,0 +1,158 @@
+import React from "react";
+import { SortableItemProps, SortableHandleProps } from "../types/sortable";
+/**
+ * A component for individual items within a sortable list.
+ *
+ * SortableItem provides the drag-and-drop functionality for individual list items,
+ * handling gesture recognition, position animations, and reordering logic.
+ * It can be used with or without drag handles for different interaction patterns.
+ *
+ * @template T - The type of data associated with this sortable item
+ * @param props - Configuration props for the sortable item
+ *
+ * @example
+ * Basic sortable item (entire item is draggable):
+ * ```typescript
+ * import { SortableItem } from './components/SortableItem';
+ *
+ * function TaskItem({ task, positions, ...sortableProps }) {
+ *   return (
+ *     <SortableItem
+ *       id={task.id}
+ *       data={task}
+ *       positions={positions}
+ *       {...sortableProps}
+ *       onMove={(id, from, to) => {
+ *         console.log(`Task ${id} moved from ${from} to ${to}`);
+ *         reorderTasks(id, from, to);
+ *       }}
+ *     >
+ *       <View style={styles.taskContainer}>
+ *         <Text style={styles.taskTitle}>{task.title}</Text>
+ *         <Text style={styles.taskStatus}>{task.completed ? 'Done' : 'Pending'}</Text>
+ *       </View>
+ *     </SortableItem>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Sortable item with drag handle:
+ * ```typescript
+ * function TaskItemWithHandle({ task, positions, ...sortableProps }) {
+ *   return (
+ *     <SortableItem
+ *       id={task.id}
+ *       data={task}
+ *       positions={positions}
+ *       {...sortableProps}
+ *     >
+ *       <View style={styles.taskContainer}>
+ *         <View style={styles.taskContent}>
+ *           <Text style={styles.taskTitle}>{task.title}</Text>
+ *           <Text style={styles.taskDescription}>{task.description}</Text>
+ *         </View>
+ *
+ *         {/* Only this handle can initiate dragging *\/}
+ *         <SortableItem.Handle style={styles.dragHandle}>
+ *           <View style={styles.handleIcon}>
+ *             <View style={styles.handleLine} />
+ *             <View style={styles.handleLine} />
+ *             <View style={styles.handleLine} />
+ *           </View>
+ *         </SortableItem.Handle>
+ *       </View>
+ *     </SortableItem>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Sortable item with callbacks and state tracking:
+ * ```typescript
+ * function AdvancedTaskItem({ task, positions, ...sortableProps }) {
+ *   const [isDragging, setIsDragging] = useState(false);
+ *
+ *   return (
+ *     <SortableItem
+ *       id={task.id}
+ *       data={task}
+ *       positions={positions}
+ *       {...sortableProps}
+ *       onDragStart={(id, position) => {
+ *         setIsDragging(true);
+ *         hapticFeedback();
+ *         analytics.track('drag_start', { taskId: id, position });
+ *       }}
+ *       onDrop={(id, position) => {
+ *         setIsDragging(false);
+ *         analytics.track('drag_end', { taskId: id, position });
+ *       }}
+ *       onDragging={(id, overItemId, yPosition) => {
+ *         if (overItemId) {
+ *           // Show visual feedback for item being hovered over
+ *           highlightItem(overItemId);
+ *         }
+ *       }}
+ *       style={[
+ *         styles.taskItem,
+ *         isDragging && styles.draggingItem
+ *       ]}
+ *     >
+ *       <View style={styles.taskContent}>
+ *         <Text style={styles.taskTitle}>{task.title}</Text>
+ *         <Text style={styles.taskPriority}>Priority: {task.priority}</Text>
+ *         {isDragging && (
+ *           <Text style={styles.dragIndicator}>Dragging...</Text>
+ *         )}
+ *       </View>
+ *     </SortableItem>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Sortable item with custom animations:
+ * ```typescript
+ * function AnimatedTaskItem({ task, positions, ...sortableProps }) {
+ *   return (
+ *     <SortableItem
+ *       id={task.id}
+ *       data={task}
+ *       positions={positions}
+ *       {...sortableProps}
+ *       animatedStyle={{
+ *         // Custom animated styles can be applied here
+ *         shadowOpacity: 0.3,
+ *         shadowRadius: 10,
+ *         shadowColor: '#000',
+ *         shadowOffset: { width: 0, height: 5 }
+ *       }}
+ *     >
+ *       <Animated.View style={[
+ *         styles.taskContainer,
+ *         {
+ *           backgroundColor: task.priority === 'high' ? '#ffebee' : '#f5f5f5'
+ *         }
+ *       ]}>
+ *         <Text style={styles.taskTitle}>{task.title}</Text>
+ *         <View style={styles.taskMeta}>
+ *           <Text style={styles.taskDue}>{task.dueDate}</Text>
+ *           <Text style={styles.taskAssignee}>{task.assignee}</Text>
+ *         </View>
+ *       </Animated.View>
+ *     </SortableItem>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link SortableItem.Handle} for creating drag handles
+ * @see {@link useSortable} for the underlying hook
+ * @see {@link Sortable} for the parent sortable list component
+ * @see {@link UseSortableOptions} for configuration options
+ * @see {@link UseSortableReturn} for hook return details
+ */
+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 namespace SortableItem {
+    var Handle: ({ children, style }: SortableHandleProps) => React.JSX.Element;
+}

package/lib/components/SortableItem.js

@@ -0,0 +1,251 @@
+import React, { createContext, useContext } from "react";
+import Animated from "react-native-reanimated";
+import { PanGestureHandler } from "react-native-gesture-handler";
+import { useSortable } from "../hooks/useSortable";
+// Create a context to share gesture between SortableItem and SortableHandle
+const SortableContext = createContext(null);
+/**
+ * A handle component that can be used within SortableItem to create a specific
+ * draggable area. When a SortableHandle is present, only the handle area can
+ * initiate dragging, while the rest of the item remains non-draggable.
+ *
+ * @param props - Props for the handle component
+ *
+ * @example
+ * Basic drag handle:
+ * ```typescript
+ * <SortableItem id="item-1" {...sortableProps}>
+ *   <View style={styles.itemContent}>
+ *     <Text>Item content (not draggable)</Text>
+ *
+ *     <SortableItem.Handle style={styles.dragHandle}>
+ *       <Icon name="drag-handle" size={20} />
+ *     </SortableItem.Handle>
+ *   </View>
+ * </SortableItem>
+ * ```
+ *
+ * @example
+ * Custom styled handle:
+ * ```typescript
+ * <SortableItem id="item-2" {...sortableProps}>
+ *   <View style={styles.card}>
+ *     <Text style={styles.title}>Card Title</Text>
+ *     <Text style={styles.content}>Card content...</Text>
+ *
+ *     <SortableItem.Handle style={styles.customHandle}>
+ *       <View style={styles.handleDots}>
+ *         <View style={styles.dot} />
+ *         <View style={styles.dot} />
+ *         <View style={styles.dot} />
+ *       </View>
+ *     </SortableItem.Handle>
+ *   </View>
+ * </SortableItem>
+ * ```
+ */
+const SortableHandle = ({ children, style }) => {
+    const sortableContext = useContext(SortableContext);
+    if (!sortableContext) {
+        console.warn("SortableHandle must be used within a SortableItem component");
+        return <>{children}</>;
+    }
+    return (<PanGestureHandler onGestureEvent={sortableContext.panGestureHandler}>
+      <Animated.View style={style}>{children}</Animated.View>
+    </PanGestureHandler>);
+};
+/**
+ * A component for individual items within a sortable list.
+ *
+ * SortableItem provides the drag-and-drop functionality for individual list items,
+ * handling gesture recognition, position animations, and reordering logic.
+ * It can be used with or without drag handles for different interaction patterns.
+ *
+ * @template T - The type of data associated with this sortable item
+ * @param props - Configuration props for the sortable item
+ *
+ * @example
+ * Basic sortable item (entire item is draggable):
+ * ```typescript
+ * import { SortableItem } from './components/SortableItem';
+ *
+ * function TaskItem({ task, positions, ...sortableProps }) {
+ *   return (
+ *     <SortableItem
+ *       id={task.id}
+ *       data={task}
+ *       positions={positions}
+ *       {...sortableProps}
+ *       onMove={(id, from, to) => {
+ *         console.log(`Task ${id} moved from ${from} to ${to}`);
+ *         reorderTasks(id, from, to);
+ *       }}
+ *     >
+ *       <View style={styles.taskContainer}>
+ *         <Text style={styles.taskTitle}>{task.title}</Text>
+ *         <Text style={styles.taskStatus}>{task.completed ? 'Done' : 'Pending'}</Text>
+ *       </View>
+ *     </SortableItem>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Sortable item with drag handle:
+ * ```typescript
+ * function TaskItemWithHandle({ task, positions, ...sortableProps }) {
+ *   return (
+ *     <SortableItem
+ *       id={task.id}
+ *       data={task}
+ *       positions={positions}
+ *       {...sortableProps}
+ *     >
+ *       <View style={styles.taskContainer}>
+ *         <View style={styles.taskContent}>
+ *           <Text style={styles.taskTitle}>{task.title}</Text>
+ *           <Text style={styles.taskDescription}>{task.description}</Text>
+ *         </View>
+ *
+ *         {/* Only this handle can initiate dragging *\/}
+ *         <SortableItem.Handle style={styles.dragHandle}>
+ *           <View style={styles.handleIcon}>
+ *             <View style={styles.handleLine} />
+ *             <View style={styles.handleLine} />
+ *             <View style={styles.handleLine} />
+ *           </View>
+ *         </SortableItem.Handle>
+ *       </View>
+ *     </SortableItem>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Sortable item with callbacks and state tracking:
+ * ```typescript
+ * function AdvancedTaskItem({ task, positions, ...sortableProps }) {
+ *   const [isDragging, setIsDragging] = useState(false);
+ *
+ *   return (
+ *     <SortableItem
+ *       id={task.id}
+ *       data={task}
+ *       positions={positions}
+ *       {...sortableProps}
+ *       onDragStart={(id, position) => {
+ *         setIsDragging(true);
+ *         hapticFeedback();
+ *         analytics.track('drag_start', { taskId: id, position });
+ *       }}
+ *       onDrop={(id, position) => {
+ *         setIsDragging(false);
+ *         analytics.track('drag_end', { taskId: id, position });
+ *       }}
+ *       onDragging={(id, overItemId, yPosition) => {
+ *         if (overItemId) {
+ *           // Show visual feedback for item being hovered over
+ *           highlightItem(overItemId);
+ *         }
+ *       }}
+ *       style={[
+ *         styles.taskItem,
+ *         isDragging && styles.draggingItem
+ *       ]}
+ *     >
+ *       <View style={styles.taskContent}>
+ *         <Text style={styles.taskTitle}>{task.title}</Text>
+ *         <Text style={styles.taskPriority}>Priority: {task.priority}</Text>
+ *         {isDragging && (
+ *           <Text style={styles.dragIndicator}>Dragging...</Text>
+ *         )}
+ *       </View>
+ *     </SortableItem>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Sortable item with custom animations:
+ * ```typescript
+ * function AnimatedTaskItem({ task, positions, ...sortableProps }) {
+ *   return (
+ *     <SortableItem
+ *       id={task.id}
+ *       data={task}
+ *       positions={positions}
+ *       {...sortableProps}
+ *       animatedStyle={{
+ *         // Custom animated styles can be applied here
+ *         shadowOpacity: 0.3,
+ *         shadowRadius: 10,
+ *         shadowColor: '#000',
+ *         shadowOffset: { width: 0, height: 5 }
+ *       }}
+ *     >
+ *       <Animated.View style={[
+ *         styles.taskContainer,
+ *         {
+ *           backgroundColor: task.priority === 'high' ? '#ffebee' : '#f5f5f5'
+ *         }
+ *       ]}>
+ *         <Text style={styles.taskTitle}>{task.title}</Text>
+ *         <View style={styles.taskMeta}>
+ *           <Text style={styles.taskDue}>{task.dueDate}</Text>
+ *           <Text style={styles.taskAssignee}>{task.assignee}</Text>
+ *         </View>
+ *       </Animated.View>
+ *     </SortableItem>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link SortableItem.Handle} for creating drag handles
+ * @see {@link useSortable} for the underlying hook
+ * @see {@link Sortable} for the parent sortable list component
+ * @see {@link UseSortableOptions} for configuration options
+ * @see {@link UseSortableReturn} for hook return details
+ */
+export function SortableItem({ id, data, positions, lowerBound, autoScrollDirection, itemsCount, itemHeight, containerHeight, children, style, animatedStyle: customAnimatedStyle, onMove, onDragStart, onDrop, onDragging, }) {
+    // Use our custom hook for all the sortable logic
+    const sortableOptions = {
+        id,
+        positions,
+        lowerBound,
+        autoScrollDirection,
+        itemsCount,
+        itemHeight,
+        containerHeight,
+        onMove,
+        onDragStart,
+        onDrop,
+        onDragging,
+        children,
+        handleComponent: SortableHandle,
+    };
+    const { animatedStyle, panGestureHandler, isMoving, hasHandle } = useSortable(sortableOptions);
+    // Combine the default animated style with any custom styles
+    const combinedAnimatedStyle = [animatedStyle, customAnimatedStyle];
+    // Create the context value
+    const contextValue = {
+        panGestureHandler,
+    };
+    // Always provide the context to avoid issues when toggling handle modes
+    const content = (<Animated.View style={combinedAnimatedStyle}>
+      <SortableContext.Provider value={contextValue}>
+        <Animated.View style={style}>{children}</Animated.View>
+      </SortableContext.Provider>
+    </Animated.View>);
+    // If a handle is found, let the handle control the dragging
+    // Otherwise, the entire component is draggable with PanGestureHandler
+    if (hasHandle) {
+        return content;
+    }
+    else {
+        return (<PanGestureHandler onGestureEvent={panGestureHandler} activateAfterLongPress={200} shouldCancelWhenOutside={false}>
+        {content}
+      </PanGestureHandler>);
+    }
+}
+// Attach the SortableHandle as a static property
+SortableItem.Handle = SortableHandle;

package/lib/components/sortableUtils.d.ts

@@ -0,0 +1,21 @@
+import { SharedValue } from "react-native-reanimated";
+export declare enum ScrollDirection {
+    None = "none",
+    Up = "up",
+    Down = "down"
+}
+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;

package/lib/components/sortableUtils.js

@@ -0,0 +1,50 @@
+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);
+    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;
+    }
+}

package/lib/context/DropContext.d.ts

@@ -0,0 +1,118 @@
+import React from "react";
+import { DropProviderProps, DropProviderRef } from "../types/context";
+/**
+ * Provider component that enables drag-and-drop functionality for its children.
+ *
+ * The DropProvider creates the context necessary for draggable and droppable components
+ * to communicate with each other. It manages the registration of drop zones, tracks
+ * active hover states, handles collision detection, and maintains the state of dropped items.
+ *
+ * @example
+ * Basic setup:
+ * ```typescript
+ * import { DropProvider } from './context/DropContext';
+ * import { Draggable, Droppable } from './components';
+ *
+ * function App() {
+ *   return (
+ *     <DropProvider>
+ *       <View style={styles.container}>
+ *         <Draggable data={{ id: '1', name: 'Item 1' }}>
+ *           <Text>Drag me!</Text>
+ *         </Draggable>
+ *
+ *         <Droppable onDrop={(data) => console.log('Dropped:', data)}>
+ *           <Text>Drop zone</Text>
+ *         </Droppable>
+ *       </View>
+ *     </DropProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * With callbacks and ref:
+ * ```typescript
+ * function AdvancedApp() {
+ *   const dropProviderRef = useRef<DropProviderRef>(null);
+ *   const [droppedItems, setDroppedItems] = useState({});
+ *
+ *   const handleLayoutChange = () => {
+ *     // Trigger position update after layout changes
+ *     dropProviderRef.current?.requestPositionUpdate();
+ *   };
+ *
+ *   return (
+ *     <DropProvider
+ *       ref={dropProviderRef}
+ *       onDroppedItemsUpdate={setDroppedItems}
+ *       onDragStart={(data) => console.log('Drag started:', data)}
+ *       onDragEnd={(data) => console.log('Drag ended:', data)}
+ *       onDragging={({ x, y, itemData }) => {
+ *         console.log(`${itemData.name} at (${x}, ${y})`);
+ *       }}
+ *     >
+ *       <ScrollView onLayout={handleLayoutChange}>
+ *         {/* Your draggable and droppable components *\/}
+ *       </ScrollView>
+ *     </DropProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Multiple drop zones with capacity:
+ * ```typescript
+ * function TaskBoard() {
+ *   const [tasks, setTasks] = useState(initialTasks);
+ *
+ *   return (
+ *     <DropProvider
+ *       onDroppedItemsUpdate={(dropped) => {
+ *         // Update task positions based on drops
+ *         updateTaskPositions(dropped);
+ *       }}
+ *     >
+ *       <View style={styles.board}>
+ *         {tasks.map(task => (
+ *           <Draggable key={task.id} data={task}>
+ *             <TaskCard task={task} />
+ *           </Draggable>
+ *         ))}
+ *
+ *         <Droppable
+ *           droppableId="todo"
+ *           capacity={10}
+ *           onDrop={(task) => moveTask(task.id, 'todo')}
+ *         >
+ *           <Column title="To Do" />
+ *         </Droppable>
+ *
+ *         <Droppable
+ *           droppableId="in-progress"
+ *           capacity={5}
+ *           onDrop={(task) => moveTask(task.id, 'in-progress')}
+ *         >
+ *           <Column title="In Progress" />
+ *         </Droppable>
+ *
+ *         <Droppable
+ *           droppableId="done"
+ *           onDrop={(task) => moveTask(task.id, 'done')}
+ *         >
+ *           <Column title="Done" />
+ *         </Droppable>
+ *       </View>
+ *     </DropProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link Draggable} for draggable components
+ * @see {@link Droppable} for droppable components
+ * @see {@link useDraggable} for draggable hook
+ * @see {@link useDroppable} for droppable hook
+ * @see {@link DropProviderRef} for imperative handle interface
+ * @see {@link DroppedItemsMap} for dropped items data structure
+ */
+export declare const DropProvider: React.ForwardRefExoticComponent<DropProviderProps & React.RefAttributes<DropProviderRef>>;