react-native-reanimated-dnd 1.0.1

package/lib/context/DropContext.js

@@ -0,0 +1,233 @@
+// context/DropContext.tsx
+import React, { useRef, useState, useMemo, useCallback, forwardRef, useImperativeHandle, useEffect, } from "react";
+import { SlotsContext, } 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
+ */
+// The DropProvider component, now forwardRef
+export const DropProvider = forwardRef(({ children, onLayoutUpdateComplete, onDroppedItemsUpdate, onDragging, onDragStart, onDragEnd, }, ref) => {
+    const slotsRef = useRef({});
+    const [activeHoverSlotId, setActiveHoverSlotIdState] = useState(null);
+    // New state for tracking dropped items
+    const [droppedItems, setDroppedItems] = useState({});
+    const positionUpdateListenersRef = useRef({});
+    const registerPositionUpdateListener = useCallback((id, listener) => {
+        positionUpdateListenersRef.current[id] = listener;
+    }, []);
+    const unregisterPositionUpdateListener = useCallback((id) => {
+        delete positionUpdateListenersRef.current[id];
+    }, []);
+    // Call the update callback whenever droppedItems changes
+    useEffect(() => {
+        if (onDroppedItemsUpdate) {
+            onDroppedItemsUpdate(droppedItems);
+        }
+    }, [droppedItems, onDroppedItemsUpdate]);
+    // Update method to use string IDs
+    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(() => {
+        return droppedItems;
+    }, [droppedItems]);
+    // This is the actual function that does the work
+    const internalRequestPositionUpdate = useCallback(() => {
+        const listeners = positionUpdateListenersRef.current;
+        Object.values(listeners).forEach((listener) => {
+            listener();
+        });
+        onLayoutUpdateComplete === null || onLayoutUpdateComplete === void 0 ? void 0 : onLayoutUpdateComplete();
+    }, [onLayoutUpdateComplete]);
+    // Expose requestPositionUpdate and getDroppedItems via ref
+    useImperativeHandle(ref, () => ({
+        requestPositionUpdate: internalRequestPositionUpdate,
+        getDroppedItems,
+    }));
+    // Add a method to check if a droppable has capacity available
+    const hasAvailableCapacity = useCallback((droppableId) => {
+        // Find all draggables currently dropped on this droppable
+        const droppedCount = Object.values(droppedItems).filter((item) => item.droppableId === droppableId).length;
+        // Find the droppable's registered capacity
+        const droppableSlot = Object.values(slotsRef.current).find((slot) => slot.id === droppableId);
+        if (!droppableSlot)
+            return false; // Not found or not registered
+        // Use the slot's capacity if specified, default to 1
+        const capacity = droppableSlot.capacity !== undefined ? droppableSlot.capacity : 1;
+        // Check if more capacity is available
+        return droppedCount < capacity;
+    }, [droppedItems]);
+    // Create a wrapper for onDragStart that also triggers position update
+    const handleDragStart = useCallback((data) => {
+        if (onDragStart) {
+            onDragStart(data);
+        }
+        internalRequestPositionUpdate();
+    }, [onDragStart, internalRequestPositionUpdate]);
+    // Update the context value with the new method
+    const contextValue = useMemo(() => ({
+        register: (id, slot) => {
+            slotsRef.current[id] = slot;
+        },
+        unregister: (id) => {
+            delete slotsRef.current[id];
+        },
+        isRegistered: (id) => {
+            return 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 (<SlotsContext.Provider value={contextValue}>
+        {children}
+      </SlotsContext.Provider>);
+});
+// Adding a display name for better debugging in React DevTools
+DropProvider.displayName = "DropProvider";

package/lib/hooks/index.d.ts

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

package/lib/hooks/index.js

@@ -0,0 +1,5 @@
+// Export hooks
+export { useSortable } from "./useSortable";
+export { useSortableList } from "./useSortableList";
+export { useDraggable } from "./useDraggable";
+export { useDroppable } from "./useDroppable";

package/lib/hooks/useDraggable.d.ts

@@ -0,0 +1,101 @@
+import { UseDraggableOptions, UseDraggableReturn } from "../types/draggable";
+/**
+ * A powerful hook for creating draggable components with advanced features like
+ * collision detection, bounded dragging, axis constraints, and custom animations.
+ *
+ * This hook provides the core functionality for drag-and-drop interactions,
+ * handling gesture recognition, position tracking, collision detection with drop zones,
+ * and smooth animations.
+ *
+ * @template TData - The type of data associated with the draggable item
+ * @param options - Configuration options for the draggable behavior
+ * @returns Object containing props, gesture handlers, and state for the draggable component
+ *
+ * @example
+ * Basic draggable component:
+ * ```typescript
+ * import { useDraggable } from './hooks/useDraggable';
+ *
+ * function MyDraggable() {
+ *   const { animatedViewProps, gesture, state } = useDraggable({
+ *     data: { id: '1', name: 'Draggable Item' },
+ *     onDragStart: (data) => console.log('Started dragging:', data.name),
+ *     onDragEnd: (data) => console.log('Finished dragging:', data.name),
+ *   });
+ *
+ *   return (
+ *     <GestureDetector gesture={gesture}>
+ *       <Animated.View {...animatedViewProps}>
+ *         <Text>Drag me!</Text>
+ *       </Animated.View>
+ *     </GestureDetector>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Draggable with custom animation and bounds:
+ * ```typescript
+ * function BoundedDraggable() {
+ *   const boundsRef = useRef<View>(null);
+ *
+ *   const { animatedViewProps, gesture } = useDraggable({
+ *     data: { id: '2', type: 'bounded' },
+ *     dragBoundsRef: boundsRef,
+ *     dragAxis: 'x', // Only horizontal movement
+ *     animationFunction: (toValue) => {
+ *       'worklet';
+ *       return withTiming(toValue, { duration: 300 });
+ *     },
+ *     collisionAlgorithm: 'center',
+ *   });
+ *
+ *   return (
+ *     <View ref={boundsRef} style={styles.container}>
+ *       <GestureDetector gesture={gesture}>
+ *         <Animated.View {...animatedViewProps}>
+ *           <Text>Bounded horizontal draggable</Text>
+ *         </Animated.View>
+ *       </GestureDetector>
+ *     </View>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Draggable with state tracking:
+ * ```typescript
+ * function StatefulDraggable() {
+ *   const [dragState, setDragState] = useState(DraggableState.IDLE);
+ *
+ *   const { animatedViewProps, gesture } = useDraggable({
+ *     data: { id: '3', status: 'active' },
+ *     onStateChange: setDragState,
+ *     onDragging: ({ x, y, tx, ty }) => {
+ *       console.log(`Position: (${x + tx}, ${y + ty})`);
+ *     },
+ *   });
+ *
+ *   return (
+ *     <GestureDetector gesture={gesture}>
+ *       <Animated.View
+ *         {...animatedViewProps}
+ *         style={[
+ *           animatedViewProps.style,
+ *           { opacity: dragState === DraggableState.DRAGGING ? 0.7 : 1 }
+ *         ]}
+ *       >
+ *         <Text>State: {dragState}</Text>
+ *       </Animated.View>
+ *     </GestureDetector>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link DraggableState} for state management
+ * @see {@link CollisionAlgorithm} for collision detection options
+ * @see {@link AnimationFunction} for custom animations
+ * @see {@link UseDraggableOptions} for configuration options
+ * @see {@link UseDraggableReturn} for return value details
+ */
+export declare const useDraggable: <TData = unknown>(options: UseDraggableOptions<TData>) => UseDraggableReturn;