react-native-reanimated-dnd 1.0.2 → 1.0.4

package/lib/components/Draggable.js

@@ -1,265 +1 @@
-// Node Modules
-import React, { createContext, useContext } from "react";
-import Animated from "react-native-reanimated";
-import { GestureDetector } from "react-native-gesture-handler";
-import { useDraggable } from "../hooks/useDraggable";
-// Create a context to share gesture and state between Draggable and Handle
-const DraggableContext = createContext(null);
-/**
- * A handle component that can be used within Draggable to create a specific
- * draggable area. When a Handle is present, only the handle area can initiate
- * dragging, while the rest of the draggable remains non-interactive for dragging.
- *
- * @param props - Props for the handle component
- *
- * @example
- * Basic drag handle:
- * ```typescript
- * <Draggable data={{ id: '1', name: 'Item 1' }}>
- *   <View style={styles.itemContent}>
- *     <Text>Item content (not draggable)</Text>
- *
- *     <Draggable.Handle style={styles.dragHandle}>
- *       <Icon name="drag-handle" size={20} />
- *     </Draggable.Handle>
- *   </View>
- * </Draggable>
- * ```
- *
- * @example
- * Custom styled handle:
- * ```typescript
- * <Draggable data={{ id: '2', type: 'card' }}>
- *   <View style={styles.card}>
- *     <Text style={styles.title}>Card Title</Text>
- *     <Text style={styles.content}>Card content...</Text>
- *
- *     <Draggable.Handle style={styles.customHandle}>
- *       <View style={styles.handleDots}>
- *         <View style={styles.dot} />
- *         <View style={styles.dot} />
- *         <View style={styles.dot} />
- *       </View>
- *     </Draggable.Handle>
- *   </View>
- * </Draggable>
- * ```
- */
-const Handle = ({ children, style }) => {
-    const draggableContext = useContext(DraggableContext);
-    if (!draggableContext) {
-        console.warn("Draggable.Handle must be used within a Draggable component");
-        return <>{children}</>;
-    }
-    return (<GestureDetector gesture={draggableContext.gesture}>
-      <Animated.View style={style}>{children}</Animated.View>
-    </GestureDetector>);
-};
-/**
- * A versatile draggable component with advanced features like collision detection,
- * bounded dragging, axis constraints, and custom animations.
- *
- * The Draggable component provides a complete drag-and-drop solution that can be
- * used standalone or within a DropProvider context for drop zone interactions.
- * It supports both full-item dragging and handle-based dragging patterns.
- *
- * @template TData - The type of data associated with the draggable item
- * @param props - Configuration props for the draggable component
- *
- * @example
- * Basic draggable item:
- * ```typescript
- * import { Draggable } from './components/Draggable';
- *
- * function BasicDraggable() {
- *   return (
- *     <Draggable
- *       data={{ id: '1', name: 'Draggable Item', type: 'task' }}
- *       onDragStart={(data) => console.log('Started dragging:', data.name)}
- *       onDragEnd={(data) => console.log('Finished dragging:', data.name)}
- *     >
- *       <View style={styles.item}>
- *         <Text>Drag me anywhere!</Text>
- *       </View>
- *     </Draggable>
- *   );
- * }
- * ```
- *
- * @example
- * Draggable with custom animation and constraints:
- * ```typescript
- * function ConstrainedDraggable() {
- *   const boundsRef = useRef<View>(null);
- *
- *   return (
- *     <View ref={boundsRef} style={styles.container}>
- *       <Draggable
- *         data={{ id: '2', category: 'bounded' }}
- *         dragBoundsRef={boundsRef}
- *         dragAxis="x" // Only horizontal movement
- *         animationFunction={(toValue) => {
- *           'worklet';
- *           return withTiming(toValue, { duration: 300 });
- *         }}
- *         collisionAlgorithm="center"
- *         style={styles.draggableItem}
- *       >
- *         <View style={styles.slider}>
- *           <Text>Horizontal Slider</Text>
- *         </View>
- *       </Draggable>
- *     </View>
- *   );
- * }
- * ```
- *
- * @example
- * Draggable with handle and state tracking:
- * ```typescript
- * function HandleDraggable() {
- *   const [dragState, setDragState] = useState(DraggableState.IDLE);
- *
- *   return (
- *     <Draggable
- *       data={{ id: '3', title: 'Card with Handle' }}
- *       onStateChange={setDragState}
- *       onDragging={({ x, y, tx, ty }) => {
- *         console.log(`Position: (${x + tx}, ${y + ty})`);
- *       }}
- *       style={[
- *         styles.card,
- *         dragState === DraggableState.DRAGGING && styles.dragging
- *       ]}
- *     >
- *       <View style={styles.cardContent}>
- *         <Text style={styles.cardTitle}>Card Title</Text>
- *         <Text style={styles.cardBody}>
- *           This card can only be dragged by its handle.
- *         </Text>
- *
- *         <Draggable.Handle style={styles.dragHandle}>
- *           <View style={styles.handleIcon}>
- *             <Text>⋮⋮</Text>
- *           </View>
- *         </Draggable.Handle>
- *       </View>
- *     </Draggable>
- *   );
- * }
- * ```
- *
- * @example
- * Draggable with collision detection and drop zones:
- * ```typescript
- * function DragDropExample() {
- *   return (
- *     <DropProvider>
- *       <View style={styles.container}>
- *         <Draggable
- *           data={{ id: '4', type: 'file', name: 'document.pdf' }}
- *           collisionAlgorithm="intersect"
- *           onDragStart={(data) => {
- *             hapticFeedback();
- *             setDraggedItem(data);
- *           }}
- *           onDragEnd={(data) => {
- *             setDraggedItem(null);
- *           }}
- *         >
- *           <View style={styles.fileItem}>
- *             <Icon name="file-pdf" size={24} />
- *             <Text>{data.name}</Text>
- *           </View>
- *         </Draggable>
- *
- *         <Droppable
- *           onDrop={(data) => {
- *             console.log('File dropped:', data.name);
- *             moveToTrash(data.id);
- *           }}
- *         >
- *           <View style={styles.trashZone}>
- *             <Icon name="trash" size={32} />
- *             <Text>Drop files here to delete</Text>
- *           </View>
- *         </Droppable>
- *       </View>
- *     </DropProvider>
- *   );
- * }
- * ```
- *
- * @example
- * Draggable with disabled state and conditional behavior:
- * ```typescript
- * function ConditionalDraggable({ item, canDrag }) {
- *   return (
- *     <Draggable
- *       data={item}
- *       dragDisabled={!canDrag}
- *       onDragStart={(data) => {
- *         if (data.locked) {
- *           showError('This item is locked');
- *           return;
- *         }
- *         analytics.track('drag_start', { itemId: data.id });
- *       }}
- *       style={[
- *         styles.item,
- *         !canDrag && styles.disabled
- *       ]}
- *     >
- *       <View style={styles.itemContent}>
- *         <Text style={styles.itemTitle}>{item.title}</Text>
- *         {item.locked && <Icon name="lock" size={16} />}
- *         {!canDrag && <Text style={styles.disabledText}>Drag disabled</Text>}
- *       </View>
- *     </Draggable>
- *   );
- * }
- * ```
- *
- * @see {@link Draggable.Handle} for creating drag handles
- * @see {@link useDraggable} for the underlying hook
- * @see {@link Droppable} for drop zone components
- * @see {@link DraggableState} for state management
- * @see {@link CollisionAlgorithm} for collision detection options
- * @see {@link UseDraggableOptions} for configuration options
- * @see {@link UseDraggableReturn} for hook return details
- * @see {@link DropProvider} for drag-and-drop context setup
- */
-const DraggableComponent = ({ 
-// Destructure component-specific props first
-style: componentStyle, children, 
-// Collect all other props (which are now the modified UseDraggableOptions)
-...useDraggableHookOptions }) => {
-    // Pass the collected useDraggableHookOptions object directly to the hook
-    // Also pass children and Handle component reference for handle detection
-    const { animatedViewProps, gesture, state, hasHandle, animatedViewRef } = useDraggable({
-        ...useDraggableHookOptions,
-        children,
-        handleComponent: Handle,
-    });
-    // Create the context value
-    const contextValue = {
-        gesture,
-        state,
-    };
-    // Render the component
-    const content = (<Animated.View ref={animatedViewRef} {...animatedViewProps} style={[componentStyle, animatedViewProps.style]} collapsable={false}>
-      <DraggableContext.Provider value={contextValue}>
-        {children}
-      </DraggableContext.Provider>
-    </Animated.View>);
-    // If a handle is found, let the handle control the dragging
-    // Otherwise, the entire component is draggable
-    if (hasHandle) {
-        return content;
-    }
-    else {
-        return <GestureDetector gesture={gesture}>{content}</GestureDetector>;
-    }
-};
-// Attach the Handle as a static property
-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),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});

package/lib/components/Droppable.d.ts

@@ -1,264 +1,4 @@
 import React from "react";
 import { DroppableProps } from "../types/droppable";
 export declare const _getUniqueDroppableId: () => number;
-/**
- * A component that creates drop zones for receiving draggable items.
- *
- * The Droppable component provides visual feedback when draggable items hover over it
- * and handles the drop logic when items are released. It integrates seamlessly with
- * the drag-and-drop context to provide collision detection and proper positioning
- * of dropped items.
- *
- * @template TData - The type of data that can be dropped on this droppable
- * @param props - Configuration props for the droppable component
- *
- * @example
- * Basic drop zone:
- * ```typescript
- * import { Droppable } from './components/Droppable';
- *
- * function BasicDropZone() {
- *   const handleDrop = (data) => {
- *     console.log('Item dropped:', data);
- *     // Handle the dropped item
- *     addItemToList(data);
- *   };
- *
- *   return (
- *     <Droppable onDrop={handleDrop}>
- *       <View style={styles.dropZone}>
- *         <Text>Drop items here</Text>
- *       </View>
- *     </Droppable>
- *   );
- * }
- * ```
- *
- * @example
- * Drop zone with visual feedback:
- * ```typescript
- * function VisualDropZone() {
- *   const [isHovered, setIsHovered] = useState(false);
- *
- *   return (
- *     <Droppable
- *       onDrop={(data) => {
- *         console.log('Dropped:', data.name);
- *         processDroppedItem(data);
- *       }}
- *       onActiveChange={setIsHovered}
- *       activeStyle={{
- *         backgroundColor: 'rgba(0, 255, 0, 0.2)',
- *         borderColor: '#00ff00',
- *         borderWidth: 2,
- *         transform: [{ scale: 1.05 }]
- *       }}
- *       style={styles.dropZone}
- *     >
- *       <View style={[
- *         styles.dropContent,
- *         isHovered && styles.hoveredContent
- *       ]}>
- *         <Icon
- *           name="cloud-upload"
- *           size={32}
- *           color={isHovered ? '#00ff00' : '#666'}
- *         />
- *         <Text style={styles.dropText}>
- *           {isHovered ? 'Release to drop' : 'Drag files here'}
- *         </Text>
- *       </View>
- *     </Droppable>
- *   );
- * }
- * ```
- *
- * @example
- * Drop zone with custom alignment and capacity:
- * ```typescript
- * function TaskColumn() {
- *   const [tasks, setTasks] = useState([]);
- *   const maxTasks = 5;
- *
- *   return (
- *     <Droppable
- *       droppableId="todo-column"
- *       onDrop={(task) => {
- *         if (tasks.length < maxTasks) {
- *           setTasks(prev => [...prev, task]);
- *           updateTaskStatus(task.id, 'todo');
- *         }
- *       }}
- *       dropAlignment="top-center"
- *       dropOffset={{ x: 0, y: 10 }}
- *       capacity={maxTasks}
- *       activeStyle={{
- *         backgroundColor: 'rgba(59, 130, 246, 0.1)',
- *         borderColor: '#3b82f6',
- *         borderWidth: 2,
- *         borderStyle: 'dashed'
- *       }}
- *       style={styles.column}
- *     >
- *       <Text style={styles.columnTitle}>
- *         To Do ({tasks.length}/{maxTasks})
- *       </Text>
- *
- *       {tasks.map(task => (
- *         <TaskCard key={task.id} task={task} />
- *       ))}
- *
- *       {tasks.length === 0 && (
- *         <Text style={styles.emptyText}>
- *           Drop tasks here
- *         </Text>
- *       )}
- *     </Droppable>
- *   );
- * }
- * ```
- *
- * @example
- * Conditional drop zone with validation:
- * ```typescript
- * function RestrictedDropZone() {
- *   const [canAcceptFiles, setCanAcceptFiles] = useState(true);
- *   const [uploadProgress, setUploadProgress] = useState(0);
- *
- *   const handleDrop = (fileData) => {
- *     // Validate file type and size
- *     if (fileData.type !== 'image') {
- *       showError('Only image files are allowed');
- *       return;
- *     }
- *
- *     if (fileData.size > 5000000) { // 5MB limit
- *       showError('File size must be under 5MB');
- *       return;
- *     }
- *
- *     // Start upload
- *     setCanAcceptFiles(false);
- *     uploadFile(fileData, setUploadProgress)
- *       .then(() => {
- *         showSuccess('File uploaded successfully');
- *         setCanAcceptFiles(true);
- *         setUploadProgress(0);
- *       })
- *       .catch(() => {
- *         showError('Upload failed');
- *         setCanAcceptFiles(true);
- *         setUploadProgress(0);
- *       });
- *   };
- *
- *   return (
- *     <Droppable
- *       onDrop={handleDrop}
- *       dropDisabled={!canAcceptFiles}
- *       onActiveChange={(active) => {
- *         if (active && !canAcceptFiles) {
- *           showTooltip('Upload in progress...');
- *         }
- *       }}
- *       activeStyle={{
- *         backgroundColor: canAcceptFiles
- *           ? 'rgba(34, 197, 94, 0.1)'
- *           : 'rgba(239, 68, 68, 0.1)',
- *         borderColor: canAcceptFiles ? '#22c55e' : '#ef4444'
- *       }}
- *       style={[
- *         styles.uploadZone,
- *         !canAcceptFiles && styles.disabled
- *       ]}
- *     >
- *       <View style={styles.uploadContent}>
- *         {uploadProgress > 0 ? (
- *           <>
- *             <ProgressBar progress={uploadProgress} />
- *             <Text>Uploading... {Math.round(uploadProgress * 100)}%</Text>
- *           </>
- *         ) : (
- *           <>
- *             <Icon
- *               name="image"
- *               size={48}
- *               color={canAcceptFiles ? '#22c55e' : '#ef4444'}
- *             />
- *             <Text style={styles.uploadText}>
- *               {canAcceptFiles
- *                 ? 'Drop images here (max 5MB)'
- *                 : 'Upload in progress...'}
- *             </Text>
- *           </>
- *         )}
- *       </View>
- *     </Droppable>
- *   );
- * }
- * ```
- *
- * @example
- * Multiple drop zones with different behaviors:
- * ```typescript
- * function MultiDropZoneExample() {
- *   const [items, setItems] = useState([]);
- *   const [trash, setTrash] = useState([]);
- *
- *   return (
- *     <DropProvider>
- *       <View style={styles.container}>
- *         {/* Source items *\/}
- *         {items.map(item => (
- *           <Draggable key={item.id} data={item}>
- *             <ItemCard item={item} />
- *           </Draggable>
- *         ))}
- *
- *         {/* Archive drop zone *\/}
- *         <Droppable
- *           droppableId="archive"
- *           onDrop={(item) => {
- *             archiveItem(item.id);
- *             setItems(prev => prev.filter(i => i.id !== item.id));
- *           }}
- *           dropAlignment="center"
- *           activeStyle={styles.archiveActive}
- *         >
- *           <View style={styles.archiveZone}>
- *             <Icon name="archive" size={24} />
- *             <Text>Archive</Text>
- *           </View>
- *         </Droppable>
- *
- *         {/* Trash drop zone *\/}
- *         <Droppable
- *           droppableId="trash"
- *           onDrop={(item) => {
- *             setTrash(prev => [...prev, item]);
- *             setItems(prev => prev.filter(i => i.id !== item.id));
- *           }}
- *           dropAlignment="center"
- *           activeStyle={styles.trashActive}
- *           capacity={10} // Max 10 items in trash
- *         >
- *           <View style={styles.trashZone}>
- *             <Icon name="trash" size={24} />
- *             <Text>Trash ({trash.length}/10)</Text>
- *           </View>
- *         </Droppable>
- *       </View>
- *     </DropProvider>
- *   );
- * }
- * ```
- *
- * @see {@link useDroppable} for the underlying hook
- * @see {@link Draggable} for draggable components
- * @see {@link DropAlignment} for alignment options
- * @see {@link DropOffset} for offset configuration
- * @see {@link UseDroppableOptions} for configuration options
- * @see {@link UseDroppableReturn} for hook return details
- * @see {@link DropProvider} for drag-and-drop context setup
- */
 export declare const Droppable: <TData = unknown>({ onDrop, dropDisabled, onActiveChange, dropAlignment, dropOffset, activeStyle, droppableId, capacity, style, children, }: DroppableProps<TData>) => React.ReactElement;