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

package/src/components/DragOverlay.tsx

@@ -0,0 +1,114 @@
+import React from "react";
+import { Animated, StyleSheet, View } from "react-native";
+
+import type {
+    __FlattenedTreeNode__,
+    CheckBoxViewProps,
+    DragDropCustomizations,
+    TreeItemCustomizations,
+} from "../types/treeView.types";
+import { CheckboxView } from "./CheckboxView";
+import { CustomExpandCollapseIcon } from "./CustomExpandCollapseIcon";
+import { defaultIndentationMultiplier } from "../constants/treeView.constants";
+
+interface DragOverlayProps<ID> extends TreeItemCustomizations<ID> {
+    overlayY: Animated.Value;
+    overlayX: Animated.Value;
+    node: __FlattenedTreeNode__<ID>;
+    level: number;
+    dragDropCustomizations?: DragDropCustomizations<ID>;
+}
+
+function _DragOverlay<ID>(props: DragOverlayProps<ID>) {
+    const {
+        overlayY,
+        overlayX,
+        node,
+        level,
+        indentationMultiplier = defaultIndentationMultiplier,
+        CheckboxComponent = CheckboxView as React.ComponentType<CheckBoxViewProps>,
+        ExpandCollapseIconComponent = CustomExpandCollapseIcon,
+        CustomNodeRowComponent,
+        checkBoxViewStyleProps,
+        dragDropCustomizations,
+    } = props;
+
+    const overlayStyleProps = dragDropCustomizations?.dragOverlayStyleProps;
+    const CustomOverlay = dragDropCustomizations?.CustomDragOverlayComponent;
+
+    return (
+        <Animated.View
+            pointerEvents="none"
+            style={[
+                styles.overlay,
+                overlayStyleProps && {
+                    ...(overlayStyleProps.backgroundColor != null && { backgroundColor: overlayStyleProps.backgroundColor }),
+                    ...(overlayStyleProps.shadowColor != null && { shadowColor: overlayStyleProps.shadowColor }),
+                    ...(overlayStyleProps.shadowOpacity != null && { shadowOpacity: overlayStyleProps.shadowOpacity }),
+                    ...(overlayStyleProps.shadowRadius != null && { shadowRadius: overlayStyleProps.shadowRadius }),
+                    ...(overlayStyleProps.elevation != null && { elevation: overlayStyleProps.elevation }),
+                },
+                overlayStyleProps?.style,
+                { transform: [{ translateX: overlayX }, { translateY: overlayY }] },
+            ]}
+        >
+            {CustomOverlay ? (
+                <CustomOverlay node={node} level={level} />
+            ) : CustomNodeRowComponent ? (
+                <CustomNodeRowComponent
+                    node={node}
+                    level={level}
+                    checkedValue={false}
+                    isExpanded={false}
+                    onCheck={() => {}}
+                    onExpand={() => {}}
+                />
+            ) : (
+                <View
+                    style={[
+                        styles.nodeRow,
+                        { paddingStart: level * indentationMultiplier },
+                    ]}
+                >
+                    <CheckboxComponent
+                        text={node.name}
+                        onValueChange={() => {}}
+                        value={false}
+                        {...checkBoxViewStyleProps}
+                    />
+                    {node.children?.length ? (
+                        <View style={styles.expandArrow}>
+                            <ExpandCollapseIconComponent isExpanded={false} />
+                        </View>
+                    ) : null}
+                </View>
+            )}
+        </Animated.View>
+    );
+}
+
+export const DragOverlay = React.memo(_DragOverlay) as typeof _DragOverlay;
+
+const styles = StyleSheet.create({
+    overlay: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        zIndex: 9999,
+        elevation: 10,
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.25,
+        shadowRadius: 4,
+        backgroundColor: "rgba(255, 255, 255, 0.95)",
+    },
+    nodeRow: {
+        flex: 1,
+        flexDirection: "row",
+        alignItems: "center",
+        minWidth: "100%",
+    },
+    expandArrow: {
+        flex: 1,
+    },
+});

package/src/components/DropIndicator.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import { Animated, View, StyleSheet } from "react-native";
+import type { DropPosition } from "../types/dragDrop.types";
+
+interface DropIndicatorProps {
+    position: DropPosition;
+    overlayY: Animated.Value;
+    itemHeight: number;
+    targetLevel: number;
+    indentationMultiplier: number;
+}
+
+export const DropIndicator = React.memo(function DropIndicator(
+    props: DropIndicatorProps
+) {
+    const {
+        position,
+        overlayY,
+        itemHeight,
+        targetLevel,
+        indentationMultiplier,
+    } = props;
+
+    const indent = targetLevel * indentationMultiplier;
+
+    if (position === "inside") {
+        return (
+            <Animated.View
+                pointerEvents="none"
+                style={[
+                    styles.highlightIndicator,
+                    {
+                        transform: [{ translateY: overlayY }],
+                        height: itemHeight,
+                        left: indent,
+                    },
+                ]}
+            />
+        );
+    }
+
+    // For "above", the line is at the overlay's top edge (offset 0)
+    // For "below", the line is at the overlay's bottom edge (offset +itemHeight)
+    const lineOffset = position === "above" ? 0 : itemHeight;
+
+    return (
+        <Animated.View
+            pointerEvents="none"
+            style={[
+                styles.lineContainer,
+                {
+                    transform: [{ translateY: Animated.add(overlayY, lineOffset - 1) }],
+                    left: indent,
+                },
+            ]}
+        >
+            <View style={styles.lineCircle} />
+            <View style={styles.line} />
+        </Animated.View>
+    );
+});
+
+const styles = StyleSheet.create({
+    highlightIndicator: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        backgroundColor: "rgba(0, 200, 0, 0.2)",
+        borderWidth: 2,
+        borderColor: "rgba(0, 200, 0, 0.6)",
+        borderRadius: 4,
+        zIndex: 9998,
+    },
+    lineContainer: {
+        position: "absolute",
+        right: 0,
+        flexDirection: "row",
+        alignItems: "center",
+        height: 3,
+        zIndex: 9998,
+    },
+    lineCircle: {
+        width: 10,
+        height: 10,
+        borderRadius: 5,
+        backgroundColor: "#00CC00",
+        marginLeft: -5,
+        marginTop: -4,
+    },
+    line: {
+        flex: 1,
+        height: 3,
+        backgroundColor: "#00CC00",
+    },
+});

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,50 @@ function _NodeList<ID>(props: NodeListProps<ID>) {
         updateInnerMostChildrenIds(updatedInnerMostChildrenIds);
     }, [filteredTree, updateInnerMostChildrenIds]);
 
+    const effectiveIndentationMultiplier = indentationMultiplier ?? defaultIndentationMultiplier;
+
+    // --- Drag and drop ---
+    const {
+        panResponder,
+        overlayY,
+        overlayX,
+        isDragging,
+        draggedNode,
+        effectiveDropLevel,
+        handleNodeTouchStart,
+        handleNodeTouchEnd,
+        cancelLongPressTimer,
+        scrollOffsetRef,
+    } = useDragDrop<ID>({
+        storeId,
+        flattenedNodes: flattenedFilteredNodes,
+        flashListRef,
+        containerRef,
+        dragEnabled: dragEnabled ?? false,
+        onDragEnd,
+        longPressDuration,
+        autoScrollThreshold,
+        autoScrollSpeed,
+        internalDataRef,
+        measuredItemHeightRef,
+        dragOverlayOffset,
+        autoExpandDelay,
+        indentationMultiplier: effectiveIndentationMultiplier,
+    });
+
+    // 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 nodeRenderer = React.useCallback((
-        { item }: { item: __FlattenedTreeNode__<ID>; }
+        { item, index }: { item: __FlattenedTreeNode__<ID>; index: number; }
     ) => {
         return (
             <Node<ID>
@@ -107,6 +173,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 ? handleNodeTouchEnd : undefined}
+                onItemLayout={dragEnabled ? handleItemLayout : undefined}
+                dragDropCustomizations={dragDropCustomizations}
             />
         );
     }, [
@@ -116,9 +190,37 @@ function _NodeList<ID>(props: NodeListProps<ID>) {
         ExpandCollapseTouchableComponent,
         CustomNodeRowComponent,
         checkBoxViewStyleProps,
-        indentationMultiplier
+        indentationMultiplier,
+        dragEnabled,
+        isDragging,
+        handleNodeTouchStart,
+        handleNodeTouchEnd,
+        dragDropCustomizations,
+        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 +231,31 @@ 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}
+                            overlayX={overlayX}
+                            node={draggedNode}
+                            level={effectiveDropLevel}
+                            indentationMultiplier={effectiveIndentationMultiplier}
+                            CheckboxComponent={CheckboxComponent}
+                            ExpandCollapseIconComponent={ExpandCollapseIconComponent}
+                            CustomNodeRowComponent={CustomNodeRowComponent}
+                            checkBoxViewStyleProps={checkBoxViewStyleProps}
+                            dragDropCustomizations={dragDropCustomizations}
+                        />
+                    )}
+                </View>
+            ) : (
+                flashListElement
+            )}
         </>
     );
 };
@@ -179,38 +293,106 @@ 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,
+        nodeDropLevel,
     } = 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,
+            nodeDropLevel: state.dropTargetNodeId === node.id ? state.dropLevel : null,
         })
     ));
 
+    // Track when this node was dragged so we can swallow the onPress/onCheck
+    // that fires when the user lifts their finger after a long-press-initiated drag.
+    // The flag is set during render (synchronous) and cleared on the next touch start.
+    const wasDraggedRef = React.useRef(false);
+    if (isDraggingGlobal && isBeingDragged) {
+        wasDraggedRef.current = true;
+    }
+
     const _onToggleExpand = React.useCallback(() => {
+        if (wasDraggedRef.current) return;
         handleToggleExpand(storeId, node.id);
     }, [storeId, node.id]);
 
     const _onCheck = React.useCallback(() => {
+        if (wasDraggedRef.current) return;
         toggleCheckboxes(storeId, [node.id]);
     }, [storeId, node.id]);
 
+    const handleTouchStart = React.useCallback((e: any) => {
+        wasDraggedRef.current = false;
+        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 indicatorLevel = nodeDropLevel ?? level;
+    const dropIndicator = isDropTarget && nodeDropPosition ? (
+        CustomDropIndicator
+            ? <CustomDropIndicator position={nodeDropPosition} level={indicatorLevel} indentationMultiplier={indentationMultiplier} />
+            : <NodeDropIndicator position={nodeDropPosition} level={indicatorLevel} indentationMultiplier={indentationMultiplier} 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 ? styles.nodeOverflowVisible : undefined,
                 ]}>
+                {dropIndicator}
                 <CheckboxComponent
                     text={node.name}
                     onValueChange={_onCheck}
@@ -233,17 +415,93 @@ 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 ? styles.nodeOverflowVisible : undefined,
+                ]}
+            >
+                {dropIndicator}
+                <CustomNodeRowComponent
+                    node={node}
+                    level={level}
+                    checkedValue={value}
+                    isExpanded={isExpanded}
+                    onCheck={_onCheck}
+                    onExpand={_onToggleExpand}
+                    isDragTarget={isDragInvalid}
+                    isDragging={isDraggingGlobal}
+                    isDraggedNode={isBeingDragged}
+                />
+            </View>
         );
     }
 };
 
+function NodeDropIndicator({ position, level, indentationMultiplier, styleProps }: {
+    position: DropPosition;
+    level: number;
+    indentationMultiplier: number;
+    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)";
+
+    // Indent the line to match the node's nesting level so users can
+    // visually distinguish drops at different tree depths.
+    const leftOffset = level * indentationMultiplier;
+
+    if (position === "inside") {
+        return (
+            <View
+                pointerEvents="none"
+                style={[
+                    styles.dropHighlight,
+                    {
+                        left: leftOffset,
+                        backgroundColor: highlightColor,
+                        borderColor: highlightBorderColor,
+                    },
+                ]}
+            />
+        );
+    }
+
+    // Ensure the circle isn't clipped at shallow indent levels
+    const safeLeftOffset = Math.max(leftOffset, circleSize / 2);
+
+    return (
+        <View
+            pointerEvents="none"
+            style={[
+                styles.dropLineContainer,
+                { height: lineThickness, left: safeLeftOffset },
+                position === "above" ? styles.dropLineTop : styles.dropLineBottom,
+            ]}
+        >
+            <View style={{
+                width: circleSize,
+                height: circleSize,
+                borderRadius: circleSize / 2,
+                backgroundColor: lineColor,
+                marginLeft: -(circleSize / 2),
+            }} />
+            <View style={[
+                styles.dropLine,
+                {
+                    height: lineThickness,
+                    backgroundColor: lineColor,
+                },
+            ]} />
+        </View>
+    );
+}
+
 const styles = StyleSheet.create({
     defaultHeaderFooter: {
         padding: 5
@@ -256,6 +514,45 @@ 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,
+        overflow: "visible",
+    },
+    dropLineTop: {
+        top: 0,
+    },
+    dropLineBottom: {
+        bottom: 0,
+    },
+    dropLine: {
+        flex: 1,
+        height: 3,
+        backgroundColor: "#0078FF",
+    },
+    nodeOverflowVisible: {
+        overflow: "visible",
+    },
 });
-

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";