react-native-tree-multi-select 2.0.11 → 3.0.0-beta.1

package/src/components/NodeList.tsx

@@ -2,16 +2,19 @@ import React from "react";
 import {
     View,
     StyleSheet,
-
     TouchableOpacity,
+    type NativeSyntheticEvent,
+    type NativeScrollEvent,
 } from "react-native";
 import { FlashList } from "@shopify/flash-list";
 
 import type {
     CheckboxValueType,
     __FlattenedTreeNode__,
+    DropIndicatorStyleProps,
     NodeListProps,
     NodeProps,
+    TreeNode,
 } from "../types/treeView.types";
 
 import { useTreeViewStore } from "../store/treeView.store";
@@ -24,10 +27,13 @@ import {
 } from "../helpers";
 import { CheckboxView } from "./CheckboxView";
 import { CustomExpandCollapseIcon } from "./CustomExpandCollapseIcon";
+import { DragOverlay } from "./DragOverlay";
+import type { DropPosition } from "../types/dragDrop.types";
 import { defaultIndentationMultiplier } from "../constants/treeView.constants";
 import { useShallow } from "zustand/react/shallow";
 import { typedMemo } from "../utils/typedMemo";
 import { ScrollToNodeHandler } from "../handlers/ScrollToNodeHandler";
+import { useDragDrop } from "../hooks/useDragDrop";
 
 const NodeList = typedMemo(_NodeList);
 export default NodeList;
@@ -46,7 +52,16 @@ function _NodeList<ID>(props: NodeListProps<ID>) {
         CheckboxComponent,
         ExpandCollapseIconComponent,
         ExpandCollapseTouchableComponent,
-        CustomNodeRowComponent
+        CustomNodeRowComponent,
+
+        dragEnabled,
+        onDragEnd,
+        longPressDuration = 400,
+        autoScrollThreshold = 60,
+        autoScrollSpeed = 1.0,
+        dragOverlayOffset = -4,
+        autoExpandDelay = 800,
+        dragDropCustomizations,
     } = props;
 
     const {
@@ -66,6 +81,15 @@ function _NodeList<ID>(props: NodeListProps<ID>) {
     ));
 
     const flashListRef = React.useRef<FlashList<__FlattenedTreeNode__<ID>> | null>(null);
+    const containerRef = React.useRef<View>(null);
+    const internalDataRef = React.useRef<TreeNode<ID>[] | null>(null);
+    const measuredItemHeightRef = React.useRef(0);
+
+    const handleItemLayout = React.useCallback((height: number) => {
+        if (measuredItemHeightRef.current === 0 && height > 0) {
+            measuredItemHeightRef.current = height;
+        }
+    }, []);
 
     const [initialScrollIndex, setInitialScrollIndex] = React.useState<number>(-1);
 
@@ -90,8 +114,46 @@ function _NodeList<ID>(props: NodeListProps<ID>) {
         updateInnerMostChildrenIds(updatedInnerMostChildrenIds);
     }, [filteredTree, updateInnerMostChildrenIds]);
 
+    // --- Drag and drop ---
+    const {
+        panResponder,
+        overlayY,
+        isDragging,
+        draggedNode,
+        handleNodeTouchStart,
+        cancelLongPressTimer,
+        scrollOffsetRef,
+    } = useDragDrop<ID>({
+        storeId,
+        flattenedNodes: flattenedFilteredNodes,
+        flashListRef,
+        containerRef,
+        dragEnabled: dragEnabled ?? false,
+        onDragEnd,
+        longPressDuration,
+        autoScrollThreshold,
+        autoScrollSpeed,
+        internalDataRef,
+        measuredItemHeightRef,
+        dragOverlayOffset,
+        autoExpandDelay,
+    });
+
+    // Combined onScroll handler
+    const handleScroll = React.useCallback((
+        event: NativeSyntheticEvent<NativeScrollEvent>
+    ) => {
+        scrollOffsetRef.current = event.nativeEvent.contentOffset.y;
+        // Cancel long press timer if user is scrolling
+        cancelLongPressTimer();
+        // Forward to user's onScroll
+        treeFlashListProps?.onScroll?.(event as any);
+    }, [scrollOffsetRef, cancelLongPressTimer, treeFlashListProps]);
+
+    const effectiveIndentationMultiplier = indentationMultiplier ?? defaultIndentationMultiplier;
+
     const nodeRenderer = React.useCallback((
-        { item }: { item: __FlattenedTreeNode__<ID>; }
+        { item, index }: { item: __FlattenedTreeNode__<ID>; index: number; }
     ) => {
         return (
             <Node<ID>
@@ -107,6 +169,14 @@ function _NodeList<ID>(props: NodeListProps<ID>) {
                 ExpandCollapseIconComponent={ExpandCollapseIconComponent}
                 ExpandCollapseTouchableComponent={ExpandCollapseTouchableComponent}
                 CustomNodeRowComponent={CustomNodeRowComponent}
+
+                nodeIndex={index}
+                dragEnabled={dragEnabled}
+                isDragging={isDragging}
+                onNodeTouchStart={dragEnabled ? handleNodeTouchStart : undefined}
+                onNodeTouchEnd={dragEnabled ? cancelLongPressTimer : undefined}
+                onItemLayout={dragEnabled ? handleItemLayout : undefined}
+                dragDropCustomizations={dragDropCustomizations}
             />
         );
     }, [
@@ -116,9 +186,37 @@ function _NodeList<ID>(props: NodeListProps<ID>) {
         ExpandCollapseTouchableComponent,
         CustomNodeRowComponent,
         checkBoxViewStyleProps,
-        indentationMultiplier
+        indentationMultiplier,
+        dragEnabled,
+        isDragging,
+        handleNodeTouchStart,
+        dragDropCustomizations,
+        cancelLongPressTimer,
+        handleItemLayout,
     ]);
 
+    // Extract FlashList props but exclude onScroll (we provide our own combined handler)
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { onScroll: _userOnScroll, ...restFlashListProps } = treeFlashListProps ?? {};
+
+    const flashListElement = (
+        <FlashList
+            ref={flashListRef}
+            estimatedItemSize={36}
+            initialScrollIndex={initialScrollIndex}
+            removeClippedSubviews={true}
+            keyboardShouldPersistTaps="handled"
+            drawDistance={50}
+            ListHeaderComponent={<HeaderFooterView />}
+            ListFooterComponent={<HeaderFooterView />}
+            {...restFlashListProps}
+            onScroll={handleScroll}
+            scrollEnabled={isDragging ? false : (restFlashListProps?.scrollEnabled ?? true)}
+            data={flattenedFilteredNodes}
+            renderItem={nodeRenderer}
+        />
+    );
+
     return (
         <>
             <ScrollToNodeHandler
@@ -129,19 +227,30 @@ function _NodeList<ID>(props: NodeListProps<ID>) {
                 setInitialScrollIndex={setInitialScrollIndex}
                 initialScrollNodeID={initialScrollNodeID} />
 
-            <FlashList
-                ref={flashListRef}
-                estimatedItemSize={36}
-                initialScrollIndex={initialScrollIndex}
-                removeClippedSubviews={true}
-                keyboardShouldPersistTaps="handled"
-                drawDistance={50}
-                ListHeaderComponent={<HeaderFooterView />}
-                ListFooterComponent={<HeaderFooterView />}
-                {...treeFlashListProps}
-                data={flattenedFilteredNodes}
-                renderItem={nodeRenderer}
-            />
+            {dragEnabled ? (
+                <View
+                    ref={containerRef}
+                    style={styles.dragContainer}
+                    {...panResponder.panHandlers}
+                >
+                    {flashListElement}
+                    {isDragging && draggedNode && (
+                        <DragOverlay<ID>
+                            overlayY={overlayY}
+                            node={draggedNode}
+                            level={draggedNode.level ?? 0}
+                            indentationMultiplier={effectiveIndentationMultiplier}
+                            CheckboxComponent={CheckboxComponent}
+                            ExpandCollapseIconComponent={ExpandCollapseIconComponent}
+                            CustomNodeRowComponent={CustomNodeRowComponent}
+                            checkBoxViewStyleProps={checkBoxViewStyleProps}
+                            dragDropCustomizations={dragDropCustomizations}
+                        />
+                    )}
+                </View>
+            ) : (
+                flashListElement
+            )}
         </>
     );
 };
@@ -179,19 +288,35 @@ function _Node<ID>(props: NodeProps<ID>) {
         ExpandCollapseIconComponent = CustomExpandCollapseIcon,
         CheckboxComponent = CheckboxView,
         ExpandCollapseTouchableComponent = TouchableOpacity,
-        CustomNodeRowComponent
+        CustomNodeRowComponent,
+
+        nodeIndex = 0,
+        dragEnabled,
+        isDragging: isDraggingGlobal,
+        onNodeTouchStart,
+        onNodeTouchEnd,
+        onItemLayout,
+        dragDropCustomizations,
     } = props;
 
     const {
         isExpanded,
         value,
+        isBeingDragged,
+        isDragInvalid,
+        isDropTarget,
+        nodeDropPosition,
     } = useTreeViewStore<ID>(storeId)(useShallow(
         state => ({
             isExpanded: state.expanded.has(node.id),
             value: getValue(
-                state.checked.has(node.id), // isChecked
-                state.indeterminate.has(node.id) // isIndeterminate
+                state.checked.has(node.id),
+                state.indeterminate.has(node.id)
             ),
+            isBeingDragged: state.draggedNodeId === node.id,
+            isDragInvalid: state.invalidDragTargetIds.has(node.id),
+            isDropTarget: state.dropTargetNodeId === node.id,
+            nodeDropPosition: state.dropTargetNodeId === node.id ? state.dropPosition : null,
         })
     ));
 
@@ -203,14 +328,51 @@ function _Node<ID>(props: NodeProps<ID>) {
         toggleCheckboxes(storeId, [node.id]);
     }, [storeId, node.id]);
 
+    const handleTouchStart = React.useCallback((e: any) => {
+        if (!onNodeTouchStart) return;
+        const { pageY, locationY } = e.nativeEvent;
+        onNodeTouchStart(node.id, pageY, locationY, nodeIndex);
+    }, [node.id, nodeIndex, onNodeTouchStart]);
+
+    const handleTouchEnd = React.useCallback(() => {
+        onNodeTouchEnd?.();
+    }, [onNodeTouchEnd]);
+
+    // Determine opacity for drag state
+    const dragOpacity = dragDropCustomizations?.draggedNodeOpacity ?? 0.3;
+    const nodeOpacity = (isDraggingGlobal && (isBeingDragged || isDragInvalid))
+        ? dragOpacity
+        : 1.0;
+
+    const handleLayout = React.useCallback((e: any) => {
+        onItemLayout?.(e.nativeEvent.layout.height);
+    }, [onItemLayout]);
+
+    const touchHandlers = dragEnabled ? {
+        onTouchStart: handleTouchStart,
+        onTouchEnd: handleTouchEnd,
+        onTouchCancel: handleTouchEnd,
+    } : undefined;
+
+    const CustomDropIndicator = dragDropCustomizations?.CustomDropIndicatorComponent;
+    const dropIndicator = isDropTarget && nodeDropPosition ? (
+        CustomDropIndicator
+            ? <CustomDropIndicator position={nodeDropPosition} />
+            : <NodeDropIndicator position={nodeDropPosition} styleProps={dragDropCustomizations?.dropIndicatorStyleProps} />
+    ) : null;
+
     if (!CustomNodeRowComponent) {
         return (
             <View
                 testID={`node_row_${node.id}`}
+                {...touchHandlers}
+                onLayout={onItemLayout ? handleLayout : undefined}
                 style={[
                     styles.nodeCheckboxAndArrowRow,
-                    { paddingStart: level * indentationMultiplier }
+                    { paddingStart: level * indentationMultiplier },
+                    { opacity: nodeOpacity },
                 ]}>
+                {dropIndicator}
                 <CheckboxComponent
                     text={node.name}
                     onValueChange={_onCheck}
@@ -233,17 +395,84 @@ function _Node<ID>(props: NodeProps<ID>) {
     }
     else {
         return (
-            <CustomNodeRowComponent
-                node={node}
-                level={level}
-                checkedValue={value}
-                isExpanded={isExpanded}
-                onCheck={_onCheck}
-                onExpand={_onToggleExpand} />
+            <View
+                {...touchHandlers}
+                onLayout={onItemLayout ? handleLayout : undefined}
+                style={{ opacity: nodeOpacity }}
+            >
+                {dropIndicator}
+                <CustomNodeRowComponent
+                    node={node}
+                    level={level}
+                    checkedValue={value}
+                    isExpanded={isExpanded}
+                    onCheck={_onCheck}
+                    onExpand={_onToggleExpand}
+                    isDragTarget={isDragInvalid}
+                    isDragging={isDraggingGlobal}
+                    isDraggedNode={isBeingDragged}
+                />
+            </View>
         );
     }
 };
 
+function NodeDropIndicator({ position, styleProps }: {
+    position: DropPosition;
+    styleProps?: DropIndicatorStyleProps;
+}) {
+    const lineColor = styleProps?.lineColor ?? "#0078FF";
+    const lineThickness = styleProps?.lineThickness ?? 3;
+    const circleSize = styleProps?.circleSize ?? 10;
+    const highlightColor = styleProps?.highlightColor ?? "rgba(0, 120, 255, 0.15)";
+    const highlightBorderColor = styleProps?.highlightBorderColor ?? "rgba(0, 120, 255, 0.5)";
+
+    if (position === "inside") {
+        return (
+            <View
+                pointerEvents="none"
+                style={[
+                    styles.dropHighlight,
+                    {
+                        backgroundColor: highlightColor,
+                        borderColor: highlightBorderColor,
+                    },
+                ]}
+            />
+        );
+    }
+
+    return (
+        <View
+            pointerEvents="none"
+            style={[
+                styles.dropLineContainer,
+                { height: lineThickness },
+                position === "above" ? styles.dropLineTop : styles.dropLineBottom,
+            ]}
+        >
+            <View style={[
+                styles.dropLineCircle,
+                {
+                    width: circleSize,
+                    height: circleSize,
+                    borderRadius: circleSize / 2,
+                    backgroundColor: lineColor,
+                    marginLeft: -(circleSize / 2),
+                    marginTop: -(circleSize / 2 - lineThickness / 2),
+                },
+            ]} />
+            <View style={[
+                styles.dropLine,
+                {
+                    height: lineThickness,
+                    backgroundColor: lineColor,
+                },
+            ]} />
+        </View>
+    );
+}
+
 const styles = StyleSheet.create({
     defaultHeaderFooter: {
         padding: 5
@@ -256,6 +485,49 @@ const styles = StyleSheet.create({
         flexDirection: "row",
         alignItems: "center",
         minWidth: "100%"
-    }
+    },
+    dragContainer: {
+        flex: 1,
+    },
+    // Drop indicator styles (rendered by each node)
+    dropHighlight: {
+        position: "absolute",
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        backgroundColor: "rgba(0, 120, 255, 0.15)",
+        borderWidth: 2,
+        borderColor: "rgba(0, 120, 255, 0.5)",
+        borderRadius: 4,
+        zIndex: 10,
+    },
+    dropLineContainer: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        flexDirection: "row",
+        alignItems: "center",
+        height: 3,
+        zIndex: 10,
+    },
+    dropLineTop: {
+        top: 0,
+    },
+    dropLineBottom: {
+        bottom: 0,
+    },
+    dropLineCircle: {
+        width: 10,
+        height: 10,
+        borderRadius: 5,
+        backgroundColor: "#0078FF",
+        marginLeft: -5,
+        marginTop: -4,
+    },
+    dropLine: {
+        flex: 1,
+        height: 3,
+        backgroundColor: "#0078FF",
+    },
 });
-

package/src/helpers/index.ts

@@ -5,4 +5,5 @@ export * from "./treeNode.helper";
 export * from "./selectAll.helper";
 export * from "./toggleCheckbox.helper";
 export * from "./search.helper";
-export * from "./flattenTree.helper";
+export * from "./flattenTree.helper";
+export * from "./moveTreeNode.helper";

package/src/helpers/moveTreeNode.helper.ts

@@ -0,0 +1,105 @@
+import type { TreeNode } from "../types/treeView.types";
+import type { DropPosition } from "../types/dragDrop.types";
+
+/**
+ * Move a node within a tree structure. Returns a new tree (no mutation).
+ *
+ * @param data - The current tree data
+ * @param draggedNodeId - The ID of the node to move
+ * @param targetNodeId - The ID of the target node
+ * @param position - Where to place relative to target: "above", "below", or "inside"
+ * @returns New tree data with the node moved, or the original data if the move is invalid
+ */
+export function moveTreeNode<ID>(
+    data: TreeNode<ID>[],
+    draggedNodeId: ID,
+    targetNodeId: ID,
+    position: DropPosition
+): TreeNode<ID>[] {
+    if (draggedNodeId === targetNodeId) return data;
+
+    // Step 1: Deep clone the tree
+    const cloned = deepCloneTree(data);
+
+    // Step 2: Remove the dragged node
+    const removedNode = removeNodeById(cloned, draggedNodeId);
+    if (!removedNode) return data;
+
+    // Step 3: Insert at the new position
+    const inserted = insertNode(cloned, removedNode, targetNodeId, position);
+    if (!inserted) return data;
+
+    return cloned;
+}
+
+function deepCloneTree<ID>(nodes: TreeNode<ID>[]): TreeNode<ID>[] {
+    return nodes.map(node => ({
+        ...node,
+        children: node.children ? deepCloneTree(node.children) : undefined,
+    }));
+}
+
+/**
+ * Remove a node by ID from the tree. Mutates the cloned tree in-place.
+ * Returns the removed node, or null if not found.
+ */
+function removeNodeById<ID>(
+    nodes: TreeNode<ID>[],
+    nodeId: ID,
+): TreeNode<ID> | null {
+    for (let i = 0; i < nodes.length; i++) {
+        if (nodes[i]!.id === nodeId) {
+            const [removed] = nodes.splice(i, 1);
+            return removed!;
+        }
+        const children = nodes[i]!.children;
+        if (children) {
+            const removed = removeNodeById(children, nodeId);
+            if (removed) {
+                // Clean up empty children arrays
+                if (children.length === 0) {
+                    nodes[i] = { ...nodes[i]!, children: undefined };
+                }
+                return removed;
+            }
+        }
+    }
+    return null;
+}
+
+/**
+ * Insert a node relative to a target node. Mutates the cloned tree in-place.
+ * Returns true if insertion was successful.
+ */
+function insertNode<ID>(
+    nodes: TreeNode<ID>[],
+    nodeToInsert: TreeNode<ID>,
+    targetId: ID,
+    position: DropPosition,
+): boolean {
+    for (let i = 0; i < nodes.length; i++) {
+        if (nodes[i]!.id === targetId) {
+            if (position === "above") {
+                nodes.splice(i, 0, nodeToInsert);
+            } else if (position === "below") {
+                nodes.splice(i + 1, 0, nodeToInsert);
+            } else {
+                // "inside" - add as first child
+                const target = nodes[i]!;
+                if (target.children) {
+                    target.children.unshift(nodeToInsert);
+                } else {
+                    nodes[i] = { ...target, children: [nodeToInsert] };
+                }
+            }
+            return true;
+        }
+        const children = nodes[i]!.children;
+        if (children) {
+            if (insertNode(children, nodeToInsert, targetId, position)) {
+                return true;
+            }
+        }
+    }
+    return false;
+}

package/src/helpers/toggleCheckbox.helper.ts

@@ -200,3 +200,99 @@ export function toggleCheckboxes<ID>(
     updateChecked(tempChecked);
     updateIndeterminate(tempIndeterminate);
 }
+
+/**
+ * Recalculates checked/indeterminate state for all parent nodes bottom-up.
+ * Should be called after tree structure changes (e.g., drag-drop moves) to ensure
+ * parent states correctly reflect their children's checked states.
+ */
+export function recalculateCheckedStates<ID>(storeId: string) {
+    const treeViewStore = getTreeViewStore<ID>(storeId);
+    const {
+        checked,
+        updateChecked,
+        indeterminate,
+        updateIndeterminate,
+        nodeMap,
+        childToParentMap,
+        selectionPropagation,
+    } = treeViewStore.getState();
+
+    // Only recalculate if parent propagation is enabled
+    if (!selectionPropagation.toParents) return;
+
+    const tempChecked = new Set(checked);
+    const tempIndeterminate = new Set(indeterminate);
+
+    // Collect parent nodes and clean up leaf nodes that shouldn't be indeterminate.
+    // A leaf node (no children) can never be indeterminate — this can happen when
+    // all children of a formerly-indeterminate parent are dragged away.
+    const parentNodes: ID[] = [];
+    for (const [id, node] of nodeMap) {
+        if (node.children && node.children.length > 0) {
+            parentNodes.push(id);
+        } else {
+            tempIndeterminate.delete(id);
+        }
+    }
+
+    // Sort by depth descending (deepest first) for correct bottom-up propagation
+    const nodeDepths = new Map<ID, number>();
+    function getDepth(nodeId: ID): number {
+        if (nodeDepths.has(nodeId)) return nodeDepths.get(nodeId)!;
+        let depth = 0;
+        let currentId: ID | undefined = nodeId;
+        while (currentId) {
+            const parentId = childToParentMap.get(currentId);
+            if (parentId) {
+                depth++;
+                currentId = parentId;
+            } else {
+                break;
+            }
+        }
+        nodeDepths.set(nodeId, depth);
+        return depth;
+    }
+
+    parentNodes.sort((a, b) => getDepth(b) - getDepth(a));
+
+    // Update each parent based on its children's current state
+    for (const parentId of parentNodes) {
+        const node = nodeMap.get(parentId);
+        if (!node?.children?.length) continue;
+
+        let allChecked = true;
+        let anyCheckedOrIndeterminate = false;
+
+        for (const child of node.children) {
+            const isChecked = tempChecked.has(child.id);
+            const isIndeterminate = tempIndeterminate.has(child.id);
+
+            if (isChecked) {
+                anyCheckedOrIndeterminate = true;
+            } else if (isIndeterminate) {
+                anyCheckedOrIndeterminate = true;
+                allChecked = false;
+            } else {
+                allChecked = false;
+            }
+
+            if (!allChecked && anyCheckedOrIndeterminate) break;
+        }
+
+        if (allChecked) {
+            tempChecked.add(parentId);
+            tempIndeterminate.delete(parentId);
+        } else if (anyCheckedOrIndeterminate) {
+            tempChecked.delete(parentId);
+            tempIndeterminate.add(parentId);
+        } else {
+            tempChecked.delete(parentId);
+            tempIndeterminate.delete(parentId);
+        }
+    }
+
+    updateChecked(tempChecked);
+    updateIndeterminate(tempIndeterminate);
+}