react-native-tree-multi-select 2.0.13 → 3.0.0-beta.2

package/src/index.tsx

@@ -8,11 +8,21 @@ import type {
     CheckBoxViewProps,
     CheckboxValueType,
     BuiltInCheckBoxViewStyleProps,
-    SelectionPropagation
+    SelectionPropagation,
+    DragDropCustomizations,
+    DragOverlayStyleProps,
+    DragOverlayComponentProps,
+    DropIndicatorStyleProps,
+    DropIndicatorComponentProps,
 } from "./types/treeView.types";
+import type {
+    DragEndEvent,
+    DropPosition
+} from "./types/dragDrop.types";
 
 export * from "./TreeView";
 export * from "./components/CheckboxView";
+export { moveTreeNode } from "./helpers/moveTreeNode.helper";
 
 export type {
     TreeNode,
@@ -24,5 +34,12 @@ export type {
     CheckBoxViewProps,
     CheckboxValueType,
     BuiltInCheckBoxViewStyleProps,
-    SelectionPropagation
+    SelectionPropagation,
+    DragEndEvent,
+    DropPosition,
+    DragDropCustomizations,
+    DragOverlayStyleProps,
+    DragOverlayComponentProps,
+    DropIndicatorStyleProps,
+    DropIndicatorComponentProps,
 };

package/src/store/treeView.store.ts

@@ -1,4 +1,5 @@
 import type { SelectionPropagation, TreeNode } from "../types/treeView.types";
+import type { DropPosition } from "../types/dragDrop.types";
 import { create, type StoreApi, type UseBoundStore } from "zustand";
 
 export type TreeViewState<ID> = {
@@ -43,6 +44,19 @@ export type TreeViewState<ID> = {
         selectionPropagation: SelectionPropagation
     ) => void;
 
+    // Drag-and-drop state
+    draggedNodeId: ID | null;
+    updateDraggedNodeId: (draggedNodeId: ID | null) => void;
+
+    invalidDragTargetIds: Set<ID>;
+    updateInvalidDragTargetIds: (invalidDragTargetIds: Set<ID>) => void;
+
+    // Drop target state (used by nodes to render their own indicator)
+    dropTargetNodeId: ID | null;
+    dropPosition: DropPosition | null;
+    dropLevel: number | null;
+    updateDropTarget: (nodeId: ID | null, position: DropPosition | null, level?: number | null) => void;
+
     // Cleanup all states in this store
     cleanUpTreeViewStore: () => void;
 };
@@ -97,6 +111,23 @@ export function getTreeViewStore<ID>(id: string): UseBoundStore<StoreApi<TreeVie
                 }
             }),
 
+            draggedNodeId: null,
+            updateDraggedNodeId: (draggedNodeId) => set({ draggedNodeId }),
+
+            invalidDragTargetIds: new Set<ID>(),
+            updateInvalidDragTargetIds: (invalidDragTargetIds) => set({
+                invalidDragTargetIds
+            }),
+
+            dropTargetNodeId: null,
+            dropPosition: null,
+            dropLevel: null,
+            updateDropTarget: (nodeId, position, level) => set({
+                dropTargetNodeId: nodeId,
+                dropPosition: position,
+                dropLevel: level ?? null,
+            }),
+
             cleanUpTreeViewStore: () =>
                 set({
                     checked: new Set(),
@@ -109,6 +140,11 @@ export function getTreeViewStore<ID>(id: string): UseBoundStore<StoreApi<TreeVie
                     searchKeys: [""],
                     innerMostChildrenIds: [],
                     selectionPropagation: { toChildren: true, toParents: true },
+                    draggedNodeId: null,
+                    invalidDragTargetIds: new Set<ID>(),
+                    dropTargetNodeId: null,
+                    dropPosition: null,
+                    dropLevel: null,
                 }),
         }));
 

package/src/types/dragDrop.types.ts

@@ -0,0 +1,23 @@
+import type { TreeNode } from "./treeView.types";
+
+export type DropPosition = "above" | "below" | "inside";
+
+export interface DragEndEvent<ID = string> {
+    /** The id of the node that was dragged */
+    draggedNodeId: ID;
+    /** The id of the target node where the dragged node was dropped */
+    targetNodeId: ID;
+    /** Where relative to the target: above/below = sibling, inside = child */
+    position: DropPosition;
+    /** The reordered tree data after the move */
+    newTreeData: TreeNode<ID>[];
+}
+
+export interface DropTarget<ID = string> {
+    targetNodeId: ID;
+    targetIndex: number;
+    position: DropPosition;
+    isValid: boolean;
+    targetLevel: number;
+    indicatorTop: number;
+}

package/src/types/treeView.types.ts

@@ -12,6 +12,7 @@ import type {
 import type {
     CheckboxProps as _CheckboxProps
 } from "@futurejj/react-native-checkbox";
+import type { DragEndEvent, DropPosition } from "./dragDrop.types";
 
 export type CheckboxValueType = boolean | "indeterminate";
 
@@ -46,6 +47,10 @@ export interface NodeRowProps<ID = string> {
 
     onCheck: () => void;
     onExpand: () => void;
+
+    isDragTarget?: boolean;
+    isDragging?: boolean;
+    isDraggedNode?: boolean;
 }
 
 export interface TreeItemCustomizations<ID> {
@@ -64,6 +69,20 @@ export interface NodeProps<ID> extends TreeItemCustomizations<ID> {
     node: __FlattenedTreeNode__<ID>;
     level: number;
     storeId: string;
+
+    nodeIndex?: number;
+    dragEnabled?: boolean;
+    isDragging?: boolean;
+    onNodeTouchStart?: (
+        nodeId: ID,
+        pageY: number,
+        locationY: number,
+        nodeIndex: number
+    ) => void;
+    onNodeTouchEnd?: () => void;
+    longPressDuration?: number;
+    onItemLayout?: (height: number) => void;
+    dragDropCustomizations?: DragDropCustomizations<ID>;
 }
 
 export interface NodeListProps<ID> extends TreeItemCustomizations<ID> {
@@ -73,6 +92,18 @@ export interface NodeListProps<ID> extends TreeItemCustomizations<ID> {
     initialScrollNodeID?: ID;
 
     storeId: string;
+
+    dragEnabled?: boolean;
+    onDragEnd?: (event: DragEndEvent<ID>) => void;
+    longPressDuration?: number;
+    autoScrollThreshold?: number;
+    autoScrollSpeed?: number;
+    /** Offset of the dragged overlay from the finger, in item-height units. Default: -1 (one item above finger) */
+    dragOverlayOffset?: number;
+    /** Delay in ms before auto-expanding a collapsed node during drag hover. Default: 800 */
+    autoExpandDelay?: number;
+    /** Customizations for drag-and-drop visuals (overlay, indicator, opacity) */
+    dragDropCustomizations?: DragDropCustomizations<ID>;
 }
 
 export interface TreeViewProps<ID = string> extends Omit<
@@ -88,6 +119,21 @@ export interface TreeViewProps<ID = string> extends Omit<
     preExpandedIds?: ID[];
 
     selectionPropagation?: SelectionPropagation;
+
+    /** Enable drag-and-drop reordering */
+    dragEnabled?: boolean;
+    /** Callback fired after a node is dropped at a new position */
+    onDragEnd?: (event: DragEndEvent<ID>) => void;
+    /** Long press duration in ms to start drag. Default: 400 */
+    longPressDuration?: number;
+    /** Distance from edge (px) to trigger auto-scroll. Default: 60 */
+    autoScrollThreshold?: number;
+    /** Speed multiplier for auto-scroll. Default: 1.0 */
+    autoScrollSpeed?: number;
+    /** Offset of the dragged overlay from the finger, in item-height units. Default: -1 (one item above finger) */
+    dragOverlayOffset?: number;
+    /** Delay in ms before auto-expanding a collapsed node during drag hover. Default: 800 */
+    autoExpandDelay?: number;
 }
 
 type CheckboxProps = Omit<_CheckboxProps, "onPress" | "status">;
@@ -141,3 +187,67 @@ export interface SelectionPropagation {
     toChildren?: boolean;
     toParents?: boolean;
 }
+
+// --- Drag-and-drop customization types ---
+
+/** Props for the drop indicator rendered on the target node during drag */
+export interface DropIndicatorComponentProps {
+    /** Whether the indicator is above, below, or inside the target node */
+    position: DropPosition;
+    /** The nesting level of the target node (useful for indenting the indicator) */
+    level: number;
+    /** The indentation multiplier used for each level (pixels per level) */
+    indentationMultiplier: number;
+}
+
+/** Style props for customizing the built-in drop indicator appearance */
+export interface DropIndicatorStyleProps {
+    /** Color of the line indicator (above/below). Default: "#0078FF" */
+    lineColor?: string;
+    /** Thickness of the line indicator. Default: 3 */
+    lineThickness?: number;
+    /** Diameter of the circle at the line's start. Default: 10 */
+    circleSize?: number;
+    /** Background color of the "inside" highlight. Default: "rgba(0, 120, 255, 0.15)" */
+    highlightColor?: string;
+    /** Border color of the "inside" highlight. Default: "rgba(0, 120, 255, 0.5)" */
+    highlightBorderColor?: string;
+}
+
+/** Style props for customizing the drag overlay (the "lifted" node ghost) */
+export interface DragOverlayStyleProps {
+    /** Background color of the overlay. Default: "rgba(255, 255, 255, 0.95)" */
+    backgroundColor?: string;
+    /** Shadow color. Default: "#000" */
+    shadowColor?: string;
+    /** Shadow opacity. Default: 0.25 */
+    shadowOpacity?: number;
+    /** Shadow radius. Default: 4 */
+    shadowRadius?: number;
+    /** Android elevation. Default: 10 */
+    elevation?: number;
+    /** Custom style applied to the overlay container */
+    style?: StyleProp<ViewStyle>;
+}
+
+/** Combined drag-and-drop customization props */
+export interface DragDropCustomizations<ID = string> {
+    /** Opacity applied to the dragged node and its invalid drop targets. Default: 0.3 */
+    draggedNodeOpacity?: number;
+    /** Style props for the built-in drop indicator */
+    dropIndicatorStyleProps?: DropIndicatorStyleProps;
+    /** Style props for the drag overlay (lifted node ghost) */
+    dragOverlayStyleProps?: DragOverlayStyleProps;
+    /** Fully custom drop indicator component — replaces the built-in line/highlight */
+    CustomDropIndicatorComponent?: React.ComponentType<DropIndicatorComponentProps>;
+    /** Fully custom drag overlay component — replaces the built-in ghost node */
+    CustomDragOverlayComponent?: React.ComponentType<DragOverlayComponentProps<ID>>;
+}
+
+/** Props passed to a custom drag overlay component */
+export interface DragOverlayComponentProps<ID = string> {
+    /** The node being dragged */
+    node: __FlattenedTreeNode__<ID>;
+    /** The nesting level of the dragged node */
+    level: number;
+}