react-native-tree-multi-select 3.0.0-beta.3 → 3.0.0-beta.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +100 -30
- package/lib/module/TreeView.js +36 -31
- package/lib/module/TreeView.js.map +1 -1
- package/lib/module/components/CheckboxView.js +8 -4
- package/lib/module/components/CheckboxView.js.map +1 -1
- package/lib/module/components/CustomExpandCollapseIcon.js +2 -2
- package/lib/module/components/CustomExpandCollapseIcon.js.map +1 -1
- package/lib/module/components/DragOverlay.js +17 -5
- package/lib/module/components/DragOverlay.js.map +1 -1
- package/lib/module/components/DropIndicator.js +2 -2
- package/lib/module/components/DropIndicator.js.map +1 -1
- package/lib/module/components/NodeList.js +78 -58
- package/lib/module/components/NodeList.js.map +1 -1
- package/lib/module/constants/treeView.constants.js +3 -0
- package/lib/module/constants/treeView.constants.js.map +1 -1
- package/lib/module/helpers/expandCollapse.helper.js.map +1 -1
- package/lib/module/helpers/moveTreeNode.helper.js +30 -0
- package/lib/module/helpers/moveTreeNode.helper.js.map +1 -1
- package/lib/module/helpers/selectAll.helper.js.map +1 -1
- package/lib/module/helpers/toggleCheckbox.helper.js +43 -60
- package/lib/module/helpers/toggleCheckbox.helper.js.map +1 -1
- package/lib/module/hooks/useDragDrop.js +146 -65
- package/lib/module/hooks/useDragDrop.js.map +1 -1
- package/lib/module/{handlers/ScrollToNodeHandler.js → hooks/useScrollToNode.js} +27 -26
- package/lib/module/hooks/useScrollToNode.js.map +1 -0
- package/lib/module/index.js +1 -0
- package/lib/module/index.js.map +1 -1
- package/lib/module/jest.setup.js +14 -1
- package/lib/module/jest.setup.js.map +1 -1
- package/lib/module/store/treeView.store.js +3 -0
- package/lib/module/store/treeView.store.js.map +1 -1
- package/lib/module/utils/typedMemo.js +3 -3
- package/lib/module/utils/typedMemo.js.map +1 -1
- package/lib/module/utils/useDeepCompareEffect.js +5 -5
- package/lib/module/utils/useDeepCompareEffect.js.map +1 -1
- package/lib/typescript/src/TreeView.d.ts +3 -3
- package/lib/typescript/src/TreeView.d.ts.map +1 -1
- package/lib/typescript/src/components/CheckboxView.d.ts +1 -2
- package/lib/typescript/src/components/CheckboxView.d.ts.map +1 -1
- package/lib/typescript/src/components/CustomExpandCollapseIcon.d.ts +1 -2
- package/lib/typescript/src/components/CustomExpandCollapseIcon.d.ts.map +1 -1
- package/lib/typescript/src/components/DragOverlay.d.ts +1 -0
- package/lib/typescript/src/components/DragOverlay.d.ts.map +1 -1
- package/lib/typescript/src/components/DropIndicator.d.ts +1 -2
- package/lib/typescript/src/components/DropIndicator.d.ts.map +1 -1
- package/lib/typescript/src/components/NodeList.d.ts.map +1 -1
- package/lib/typescript/src/constants/treeView.constants.d.ts +2 -0
- package/lib/typescript/src/constants/treeView.constants.d.ts.map +1 -1
- package/lib/typescript/src/helpers/expandCollapse.helper.d.ts +2 -2
- package/lib/typescript/src/helpers/expandCollapse.helper.d.ts.map +1 -1
- package/lib/typescript/src/helpers/moveTreeNode.helper.d.ts.map +1 -1
- package/lib/typescript/src/helpers/selectAll.helper.d.ts +4 -4
- package/lib/typescript/src/helpers/selectAll.helper.d.ts.map +1 -1
- package/lib/typescript/src/helpers/toggleCheckbox.helper.d.ts +3 -0
- package/lib/typescript/src/helpers/toggleCheckbox.helper.d.ts.map +1 -1
- package/lib/typescript/src/hooks/useDragDrop.d.ts +24 -8
- package/lib/typescript/src/hooks/useDragDrop.d.ts.map +1 -1
- package/lib/typescript/src/{handlers/ScrollToNodeHandler.d.ts → hooks/useScrollToNode.d.ts} +13 -15
- package/lib/typescript/src/hooks/useScrollToNode.d.ts.map +1 -0
- package/lib/typescript/src/index.d.ts +4 -3
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/jest.setup.d.ts +1 -1
- package/lib/typescript/src/jest.setup.d.ts.map +1 -1
- package/lib/typescript/src/store/treeView.store.d.ts +2 -1
- package/lib/typescript/src/store/treeView.store.d.ts.map +1 -1
- package/lib/typescript/src/types/dragDrop.types.d.ts +10 -0
- package/lib/typescript/src/types/dragDrop.types.d.ts.map +1 -1
- package/lib/typescript/src/types/treeView.types.d.ts +79 -41
- package/lib/typescript/src/types/treeView.types.d.ts.map +1 -1
- package/lib/typescript/src/utils/typedMemo.d.ts +1 -1
- package/lib/typescript/src/utils/typedMemo.d.ts.map +1 -1
- package/lib/typescript/src/utils/useDeepCompareEffect.d.ts +2 -2
- package/lib/typescript/src/utils/useDeepCompareEffect.d.ts.map +1 -1
- package/package.json +32 -15
- package/src/TreeView.tsx +57 -35
- package/src/components/CheckboxView.tsx +7 -4
- package/src/components/CustomExpandCollapseIcon.tsx +2 -2
- package/src/components/DragOverlay.tsx +19 -6
- package/src/components/DropIndicator.tsx +2 -2
- package/src/components/NodeList.tsx +87 -60
- package/src/constants/treeView.constants.ts +4 -1
- package/src/helpers/expandCollapse.helper.ts +5 -5
- package/src/helpers/moveTreeNode.helper.ts +33 -0
- package/src/helpers/selectAll.helper.ts +10 -10
- package/src/helpers/toggleCheckbox.helper.ts +56 -68
- package/src/hooks/useDragDrop.ts +190 -80
- package/src/{handlers/ScrollToNodeHandler.tsx → hooks/useScrollToNode.ts} +48 -45
- package/src/index.tsx +11 -0
- package/src/jest.setup.ts +14 -1
- package/src/store/treeView.store.ts +6 -1
- package/src/types/dragDrop.types.ts +12 -0
- package/src/types/treeView.types.ts +87 -43
- package/src/utils/typedMemo.ts +3 -3
- package/src/utils/useDeepCompareEffect.ts +13 -7
- package/lib/module/handlers/ScrollToNodeHandler.js.map +0 -1
- package/lib/typescript/src/handlers/ScrollToNodeHandler.d.ts.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACR,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,6BAA6B,EAC7B,oBAAoB,EACpB,sBAAsB,EACtB,qBAAqB,EACrB,yBAAyB,EACzB,uBAAuB,EACvB,2BAA2B,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACR,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,6BAA6B,EAC7B,oBAAoB,EACpB,kBAAkB,EAClB,qBAAqB,EACrB,sBAAsB,EACtB,qBAAqB,EACrB,yBAAyB,EACzB,uBAAuB,EACvB,2BAA2B,EAC3B,eAAe,EAClB,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,EACR,eAAe,EACf,YAAY,EACZ,cAAc,EACd,YAAY,EACf,MAAM,wBAAwB,CAAC;AAEhC,cAAc,YAAY,CAAC;AAC3B,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,YAAY,EACR,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,6BAA6B,EAC7B,oBAAoB,EACpB,kBAAkB,EAClB,qBAAqB,EACrB,eAAe,EACf,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,sBAAsB,EACtB,qBAAqB,EACrB,yBAAyB,EACzB,uBAAuB,EACvB,2BAA2B,EAC3B,eAAe,GAClB,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import "@testing-library/
|
|
1
|
+
import "@testing-library/react-native/extend-expect";
|
|
2
2
|
//# sourceMappingURL=jest.setup.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jest.setup.d.ts","sourceRoot":"","sources":["../../../src/jest.setup.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"jest.setup.d.ts","sourceRoot":"","sources":["../../../src/jest.setup.ts"],"names":[],"mappings":"AAAA,OAAO,6CAA6C,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import { type StoreApi, type UseBoundStore } from "zustand";
|
|
1
2
|
import type { SelectionPropagation, TreeNode } from "../types/treeView.types";
|
|
2
3
|
import type { DropPosition } from "../types/dragDrop.types";
|
|
3
|
-
import { type StoreApi, type UseBoundStore } from "zustand";
|
|
4
4
|
export type TreeViewState<ID> = {
|
|
5
5
|
checked: Set<ID>;
|
|
6
6
|
updateChecked: (checked: Set<ID>) => void;
|
|
@@ -33,5 +33,6 @@ export type TreeViewState<ID> = {
|
|
|
33
33
|
cleanUpTreeViewStore: () => void;
|
|
34
34
|
};
|
|
35
35
|
export declare function getTreeViewStore<ID>(id: string): UseBoundStore<StoreApi<TreeViewState<ID>>>;
|
|
36
|
+
export declare function deleteTreeViewStore(id: string): void;
|
|
36
37
|
export declare function useTreeViewStore<ID = string>(id: string): UseBoundStore<StoreApi<TreeViewState<ID>>>;
|
|
37
38
|
//# sourceMappingURL=treeView.store.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"treeView.store.d.ts","sourceRoot":"","sources":["../../../../src/store/treeView.store.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"treeView.store.d.ts","sourceRoot":"","sources":["../../../../src/store/treeView.store.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,16 @@
|
|
|
1
1
|
import type { TreeNode } from "./treeView.types";
|
|
2
2
|
/** Where a node is dropped relative to the target: as a sibling above/below, or as a child inside */
|
|
3
3
|
export type DropPosition = "above" | "below" | "inside";
|
|
4
|
+
/** Event payload passed to the onDragStart callback when a drag begins */
|
|
5
|
+
export interface DragStartEvent<ID = string> {
|
|
6
|
+
/** The id of the node being dragged */
|
|
7
|
+
draggedNodeId: ID;
|
|
8
|
+
}
|
|
9
|
+
/** Event payload passed to the onDragCancel callback when a drag is cancelled without a drop */
|
|
10
|
+
export interface DragCancelEvent<ID = string> {
|
|
11
|
+
/** The id of the node that was being dragged */
|
|
12
|
+
draggedNodeId: ID;
|
|
13
|
+
}
|
|
4
14
|
/** Event payload passed to the onDragEnd callback after a successful drop */
|
|
5
15
|
export interface DragEndEvent<ID = string> {
|
|
6
16
|
/** The id of the node that was dragged */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dragDrop.types.d.ts","sourceRoot":"","sources":["../../../../src/types/dragDrop.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEjD,qGAAqG;AACrG,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExD,6EAA6E;AAC7E,MAAM,WAAW,YAAY,CAAC,EAAE,GAAG,MAAM;IACrC,0CAA0C;IAC1C,aAAa,EAAE,EAAE,CAAC;IAClB,mEAAmE;IACnE,YAAY,EAAE,EAAE,CAAC;IACjB,0EAA0E;IAC1E,QAAQ,EAAE,YAAY,CAAC;IACvB,6CAA6C;IAC7C,WAAW,EAAE,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC;CAC/B;AAED,iFAAiF;AACjF,MAAM,WAAW,UAAU,CAAC,EAAE,GAAG,MAAM;IACnC,4CAA4C;IAC5C,YAAY,EAAE,EAAE,CAAC;IACjB,qDAAqD;IACrD,WAAW,EAAE,MAAM,CAAC;IACpB,wDAAwD;IACxD,QAAQ,EAAE,YAAY,CAAC;IACvB,sGAAsG;IACtG,OAAO,EAAE,OAAO,CAAC;IACjB,uCAAuC;IACvC,WAAW,EAAE,MAAM,CAAC;IACpB,sDAAsD;IACtD,YAAY,EAAE,MAAM,CAAC;CACxB"}
|
|
1
|
+
{"version":3,"file":"dragDrop.types.d.ts","sourceRoot":"","sources":["../../../../src/types/dragDrop.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEjD,qGAAqG;AACrG,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExD,0EAA0E;AAC1E,MAAM,WAAW,cAAc,CAAC,EAAE,GAAG,MAAM;IACvC,uCAAuC;IACvC,aAAa,EAAE,EAAE,CAAC;CACrB;AAED,gGAAgG;AAChG,MAAM,WAAW,eAAe,CAAC,EAAE,GAAG,MAAM;IACxC,gDAAgD;IAChD,aAAa,EAAE,EAAE,CAAC;CACrB;AAED,6EAA6E;AAC7E,MAAM,WAAW,YAAY,CAAC,EAAE,GAAG,MAAM;IACrC,0CAA0C;IAC1C,aAAa,EAAE,EAAE,CAAC;IAClB,mEAAmE;IACnE,YAAY,EAAE,EAAE,CAAC;IACjB,0EAA0E;IAC1E,QAAQ,EAAE,YAAY,CAAC;IACvB,6CAA6C;IAC7C,WAAW,EAAE,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC;CAC/B;AAED,iFAAiF;AACjF,MAAM,WAAW,UAAU,CAAC,EAAE,GAAG,MAAM;IACnC,4CAA4C;IAC5C,YAAY,EAAE,EAAE,CAAC;IACjB,qDAAqD;IACrD,WAAW,EAAE,MAAM,CAAC;IACpB,wDAAwD;IACxD,QAAQ,EAAE,YAAY,CAAC;IACvB,sGAAsG;IACtG,OAAO,EAAE,OAAO,CAAC;IACjB,uCAAuC;IACvC,WAAW,EAAE,MAAM,CAAC;IACpB,sDAAsD;IACtD,YAAY,EAAE,MAAM,CAAC;CACxB"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
+
import { ComponentType, RefObject } from "react";
|
|
1
2
|
import type { StyleProp, TextProps, TouchableOpacityProps, ViewStyle } from "react-native";
|
|
2
3
|
import type { FlashListProps } from "@shopify/flash-list";
|
|
3
|
-
import type { ScrollToNodeHandlerRef, ScrollToNodeParams } from "../
|
|
4
|
+
import type { ScrollToNodeHandlerRef, ScrollToNodeParams } from "../hooks/useScrollToNode";
|
|
4
5
|
import type { CheckboxProps as _CheckboxProps } from "@futurejj/react-native-checkbox";
|
|
5
|
-
import type { DragEndEvent, DropPosition } from "./dragDrop.types";
|
|
6
|
+
import type { DragCancelEvent, DragEndEvent, DragStartEvent, DropPosition } from "./dragDrop.types";
|
|
6
7
|
/** The tri-state value of a checkbox: checked, unchecked, or indeterminate */
|
|
7
8
|
export type CheckboxValueType = boolean | "indeterminate";
|
|
8
9
|
/** Props passed to a custom expand/collapse icon component */
|
|
@@ -43,11 +44,25 @@ export interface NodeRowProps<ID = string> {
|
|
|
43
44
|
/** Callback to toggle this node's expanded/collapsed state */
|
|
44
45
|
onExpand: () => void;
|
|
45
46
|
/** Whether this node is an invalid drop target during a drag operation */
|
|
46
|
-
|
|
47
|
+
isInvalidDropTarget?: boolean;
|
|
48
|
+
/** Whether this node is the current valid drop target */
|
|
49
|
+
isDropTarget?: boolean;
|
|
50
|
+
/** The drop position if this node is the current drop target */
|
|
51
|
+
dropPosition?: DropPosition;
|
|
47
52
|
/** Whether a drag operation is currently in progress */
|
|
48
53
|
isDragging?: boolean;
|
|
49
54
|
/** Whether this node is the one being dragged */
|
|
50
55
|
isDraggedNode?: boolean;
|
|
56
|
+
/** Props to spread on a drag handle element. Attach to a specific View to
|
|
57
|
+
* make only that area initiate drag, or spread on the root for whole-row drag.
|
|
58
|
+
* Only present when drag-and-drop is enabled. */
|
|
59
|
+
dragHandleProps?: DragHandleProps;
|
|
60
|
+
}
|
|
61
|
+
/** Touch handlers to spread on a drag handle element within a custom node row */
|
|
62
|
+
export interface DragHandleProps {
|
|
63
|
+
onTouchStart: (e: any) => void;
|
|
64
|
+
onTouchEnd: () => void;
|
|
65
|
+
onTouchCancel: () => void;
|
|
51
66
|
}
|
|
52
67
|
/** Customization options for tree item appearance and behavior */
|
|
53
68
|
export interface TreeItemCustomizations<ID> {
|
|
@@ -56,13 +71,13 @@ export interface TreeItemCustomizations<ID> {
|
|
|
56
71
|
/** Pixels of indentation per nesting level. Default: 15 */
|
|
57
72
|
indentationMultiplier?: number;
|
|
58
73
|
/** Custom checkbox component replacing the built-in checkbox */
|
|
59
|
-
CheckboxComponent?:
|
|
74
|
+
CheckboxComponent?: ComponentType<CheckBoxViewProps>;
|
|
60
75
|
/** Custom expand/collapse icon component */
|
|
61
|
-
ExpandCollapseIconComponent?:
|
|
76
|
+
ExpandCollapseIconComponent?: ComponentType<ExpandIconProps>;
|
|
62
77
|
/** Custom touchable component wrapping the expand/collapse icon */
|
|
63
|
-
ExpandCollapseTouchableComponent?:
|
|
78
|
+
ExpandCollapseTouchableComponent?: ComponentType<TouchableOpacityProps>;
|
|
64
79
|
/** Fully custom node row component replacing the entire built-in row */
|
|
65
|
-
CustomNodeRowComponent?:
|
|
80
|
+
CustomNodeRowComponent?: ComponentType<NodeRowProps<ID>>;
|
|
66
81
|
}
|
|
67
82
|
/** Internal props for a single node in the list (extends TreeItemCustomizations) */
|
|
68
83
|
export interface NodeProps<ID> extends TreeItemCustomizations<ID> {
|
|
@@ -82,39 +97,67 @@ export interface NodeProps<ID> extends TreeItemCustomizations<ID> {
|
|
|
82
97
|
onNodeTouchStart?: (nodeId: ID, pageY: number, locationY: number, nodeIndex: number) => void;
|
|
83
98
|
/** Callback when a touch ends on this node */
|
|
84
99
|
onNodeTouchEnd?: () => void;
|
|
85
|
-
/** Long press duration in ms to start drag */
|
|
86
|
-
longPressDuration?: number;
|
|
87
100
|
/** Callback reporting this node's measured height */
|
|
88
101
|
onItemLayout?: (height: number) => void;
|
|
89
102
|
/** Customizations for drag-and-drop visuals */
|
|
90
103
|
dragDropCustomizations?: DragDropCustomizations<ID>;
|
|
91
104
|
}
|
|
92
|
-
/**
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
/**
|
|
101
|
-
|
|
102
|
-
/**
|
|
103
|
-
|
|
104
|
-
/** Callback fired after a node is dropped at a new position */
|
|
105
|
+
/** Options for auto-scrolling to the dropped node after a successful drop.
|
|
106
|
+
* Uses the same scroll parameters as `scrollToNodeID` (minus internally managed fields). */
|
|
107
|
+
export interface DropAutoScrollOptions extends Omit<ScrollToNodeParams<never>, "nodeId" | "expandScrolledNode"> {
|
|
108
|
+
/** Enable auto-scroll to the dropped node. Default: true */
|
|
109
|
+
enabled?: boolean;
|
|
110
|
+
}
|
|
111
|
+
/** Configuration options for drag-and-drop reordering */
|
|
112
|
+
export interface DragAndDropOptions<ID = string> {
|
|
113
|
+
/** Enable drag-and-drop reordering. Default: true (when dragAndDrop is provided) */
|
|
114
|
+
enabled?: boolean;
|
|
115
|
+
/** Callback fired when a drag operation begins */
|
|
116
|
+
onDragStart?: (event: DragStartEvent<ID>) => void;
|
|
117
|
+
/** Callback fired after a node is successfully dropped at a new position */
|
|
105
118
|
onDragEnd?: (event: DragEndEvent<ID>) => void;
|
|
119
|
+
/** Callback fired when a drag is cancelled without a successful drop */
|
|
120
|
+
onDragCancel?: (event: DragCancelEvent<ID>) => void;
|
|
106
121
|
/** Long press duration in ms to start drag. Default: 400 */
|
|
107
122
|
longPressDuration?: number;
|
|
108
123
|
/** Distance from edge (px) to trigger auto-scroll during drag. Default: 60 */
|
|
109
124
|
autoScrollThreshold?: number;
|
|
110
125
|
/** Speed multiplier for auto-scroll during drag. Default: 1.0 */
|
|
111
126
|
autoScrollSpeed?: number;
|
|
112
|
-
/** Offset of the dragged overlay from the finger, in item-height units. Default: -
|
|
127
|
+
/** Offset of the dragged overlay from the finger, in item-height units. Default: -2 (two items above finger) */
|
|
113
128
|
dragOverlayOffset?: number;
|
|
114
129
|
/** Delay in ms before auto-expanding a collapsed node during drag hover. Default: 800 */
|
|
115
130
|
autoExpandDelay?: number;
|
|
116
131
|
/** Customizations for drag-and-drop visuals (overlay, indicator, opacity) */
|
|
117
|
-
|
|
132
|
+
customizations?: DragDropCustomizations<ID>;
|
|
133
|
+
/** Callback to determine if a node can be dropped on a specific target.
|
|
134
|
+
* Return false to grey out the target and suppress the drop indicator. */
|
|
135
|
+
canDrop?: (draggedNode: TreeNode<ID>, targetNode: TreeNode<ID>, position: DropPosition) => boolean;
|
|
136
|
+
/** Maximum nesting depth allowed. Drops that would exceed this depth are suppressed. */
|
|
137
|
+
maxDepth?: number;
|
|
138
|
+
/** Callback to determine if a node can accept children.
|
|
139
|
+
* Return false to suppress the "inside" drop zone for that node. */
|
|
140
|
+
canNodeHaveChildren?: (node: TreeNode<ID>) => boolean;
|
|
141
|
+
/** Callback to determine if a node can be dragged.
|
|
142
|
+
* Return false to prevent dragging this node. Default: all nodes are draggable. */
|
|
143
|
+
canDrag?: (node: TreeNode<ID>) => boolean;
|
|
144
|
+
/** Auto-scroll to the dropped node after a successful drop.
|
|
145
|
+
* Pass `false` to disable, `true` for defaults, or an object to customize.
|
|
146
|
+
* Default: `{ enabled: true, animated: true, viewPosition: 0.5 }` */
|
|
147
|
+
autoScrollToDroppedNode?: boolean | DropAutoScrollOptions;
|
|
148
|
+
}
|
|
149
|
+
/** Props for the NodeList component that renders the flattened tree */
|
|
150
|
+
export interface NodeListProps<ID> extends TreeItemCustomizations<ID> {
|
|
151
|
+
/** Additional props passed to the underlying FlashList */
|
|
152
|
+
treeFlashListProps?: TreeFlatListProps;
|
|
153
|
+
/** Ref for programmatic scroll-to-node functionality */
|
|
154
|
+
scrollToNodeHandlerRef: RefObject<ScrollToNodeHandlerRef<ID>>;
|
|
155
|
+
/** Node ID to scroll to on initial render */
|
|
156
|
+
initialScrollNodeID?: ID;
|
|
157
|
+
/** Internal store identifier */
|
|
158
|
+
storeId: string;
|
|
159
|
+
/** Drag-and-drop configuration */
|
|
160
|
+
dragAndDrop?: DragAndDropOptions<ID>;
|
|
118
161
|
}
|
|
119
162
|
/** Props for the TreeView component */
|
|
120
163
|
export interface TreeViewProps<ID = string> extends Omit<NodeListProps<ID>, "storeId" | "scrollToNodeHandlerRef"> {
|
|
@@ -130,20 +173,8 @@ export interface TreeViewProps<ID = string> extends Omit<NodeListProps<ID>, "sto
|
|
|
130
173
|
preExpandedIds?: ID[];
|
|
131
174
|
/** Controls whether checking a node propagates to its children and/or parents */
|
|
132
175
|
selectionPropagation?: SelectionPropagation;
|
|
133
|
-
/**
|
|
134
|
-
|
|
135
|
-
/** Callback fired after a node is dropped at a new position */
|
|
136
|
-
onDragEnd?: (event: DragEndEvent<ID>) => void;
|
|
137
|
-
/** Long press duration in ms to start drag. Default: 400 */
|
|
138
|
-
longPressDuration?: number;
|
|
139
|
-
/** Distance from edge (px) to trigger auto-scroll during drag. Default: 60 */
|
|
140
|
-
autoScrollThreshold?: number;
|
|
141
|
-
/** Speed multiplier for auto-scroll during drag. Default: 1.0 */
|
|
142
|
-
autoScrollSpeed?: number;
|
|
143
|
-
/** Offset of the dragged overlay from the finger, in item-height units. Default: -1 (one item above finger) */
|
|
144
|
-
dragOverlayOffset?: number;
|
|
145
|
-
/** Delay in ms before auto-expanding a collapsed node during drag hover. Default: 800 */
|
|
146
|
-
autoExpandDelay?: number;
|
|
176
|
+
/** Drag-and-drop configuration */
|
|
177
|
+
dragAndDrop?: DragAndDropOptions<ID>;
|
|
147
178
|
}
|
|
148
179
|
type CheckboxProps = Omit<_CheckboxProps, "onPress" | "status">;
|
|
149
180
|
/** Props for the checkbox view component */
|
|
@@ -200,6 +231,9 @@ export interface TreeViewRef<ID = string> {
|
|
|
200
231
|
scrollToNodeID: (scrollToNodeParams: ScrollToNodeParams<ID>) => void;
|
|
201
232
|
/** Get a map of child node IDs to their parent node IDs */
|
|
202
233
|
getChildToParentMap: () => Map<ID, ID>;
|
|
234
|
+
/** Programmatically move a node to a new position in the tree.
|
|
235
|
+
* Works like a drag-and-drop but without user interaction. */
|
|
236
|
+
moveNode: (nodeId: ID, targetNodeId: ID, position: DropPosition) => void;
|
|
203
237
|
}
|
|
204
238
|
/** Controls how checkbox selection propagates through the tree hierarchy */
|
|
205
239
|
export interface SelectionPropagation {
|
|
@@ -247,16 +281,18 @@ export interface DragOverlayStyleProps {
|
|
|
247
281
|
}
|
|
248
282
|
/** Combined drag-and-drop customization props */
|
|
249
283
|
export interface DragDropCustomizations<ID = string> {
|
|
250
|
-
/** Opacity applied to the
|
|
284
|
+
/** Opacity applied to the node being dragged. Default: 0.3 */
|
|
251
285
|
draggedNodeOpacity?: number;
|
|
286
|
+
/** Opacity applied to invalid drop targets during drag. Default: 0.3 */
|
|
287
|
+
invalidTargetOpacity?: number;
|
|
252
288
|
/** Style props for the built-in drop indicator */
|
|
253
289
|
dropIndicatorStyleProps?: DropIndicatorStyleProps;
|
|
254
290
|
/** Style props for the drag overlay (lifted node ghost) */
|
|
255
291
|
dragOverlayStyleProps?: DragOverlayStyleProps;
|
|
256
292
|
/** Fully custom drop indicator component - replaces the built-in line/highlight */
|
|
257
|
-
CustomDropIndicatorComponent?:
|
|
293
|
+
CustomDropIndicatorComponent?: ComponentType<DropIndicatorComponentProps>;
|
|
258
294
|
/** Fully custom drag overlay component - replaces the built-in ghost node */
|
|
259
|
-
CustomDragOverlayComponent?:
|
|
295
|
+
CustomDragOverlayComponent?: ComponentType<DragOverlayComponentProps<ID>>;
|
|
260
296
|
}
|
|
261
297
|
/** Props passed to a custom drag overlay component */
|
|
262
298
|
export interface DragOverlayComponentProps<ID = string> {
|
|
@@ -264,6 +300,8 @@ export interface DragOverlayComponentProps<ID = string> {
|
|
|
264
300
|
node: __FlattenedTreeNode__<ID>;
|
|
265
301
|
/** The nesting level of the dragged node */
|
|
266
302
|
level: number;
|
|
303
|
+
/** The current checkbox value of the dragged node */
|
|
304
|
+
checkedValue: CheckboxValueType;
|
|
267
305
|
}
|
|
268
306
|
export {};
|
|
269
307
|
//# sourceMappingURL=treeView.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"treeView.types.d.ts","sourceRoot":"","sources":["../../../../src/types/treeView.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACR,SAAS,EACT,SAAS,EACT,qBAAqB,EACrB,SAAS,EACZ,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,KAAK,EACR,sBAAsB,EACtB,kBAAkB,EACrB,MAAM,
|
|
1
|
+
{"version":3,"file":"treeView.types.d.ts","sourceRoot":"","sources":["../../../../src/types/treeView.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"typedMemo.d.ts","sourceRoot":"","sources":["../../../../src/utils/typedMemo.ts"],"names":[],"mappings":"AAEA,
|
|
1
|
+
{"version":3,"file":"typedMemo.d.ts","sourceRoot":"","sources":["../../../../src/utils/typedMemo.ts"],"names":[],"mappings":"AAEA,2DAA2D;AAC3D,eAAO,MAAM,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAQ,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { type DependencyList, type EffectCallback } from "react";
|
|
2
2
|
/**
|
|
3
3
|
* Deep compare effect hook.
|
|
4
4
|
* Ensures the effect runs on the first render and whenever dependencies deeply change.
|
|
@@ -6,5 +6,5 @@ import React from "react";
|
|
|
6
6
|
* @param effect The effect callback function.
|
|
7
7
|
* @param deps The dependencies array to compare deeply.
|
|
8
8
|
*/
|
|
9
|
-
export default function useDeepCompareEffect(effect:
|
|
9
|
+
export default function useDeepCompareEffect(effect: EffectCallback, deps: DependencyList): void;
|
|
10
10
|
//# sourceMappingURL=useDeepCompareEffect.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDeepCompareEffect.d.ts","sourceRoot":"","sources":["../../../../src/utils/useDeepCompareEffect.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"useDeepCompareEffect.d.ts","sourceRoot":"","sources":["../../../../src/utils/useDeepCompareEffect.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAGf;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAC1C,MAAM,EAAE,cAAc,EACtB,IAAI,EAAE,cAAc,QA4BrB"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-tree-multi-select",
|
|
3
|
-
"version": "3.0.0-beta.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "3.0.0-beta.5",
|
|
4
|
+
"description": "Super-fast, customizable tree view component for React Native with drag-and-drop reordering, multi-selection, and search filtering.",
|
|
5
5
|
"main": "./lib/module/index.js",
|
|
6
6
|
"types": "./lib/typescript/src/index.d.ts",
|
|
7
7
|
"react-native": "src/index",
|
|
@@ -37,13 +37,29 @@
|
|
|
37
37
|
},
|
|
38
38
|
"keywords": [
|
|
39
39
|
"react-native",
|
|
40
|
+
"react-native-web",
|
|
40
41
|
"ios",
|
|
41
42
|
"android",
|
|
43
|
+
"web",
|
|
44
|
+
"expo",
|
|
42
45
|
"react-component",
|
|
43
46
|
"treeview",
|
|
44
47
|
"tree-view",
|
|
45
48
|
"tree-select",
|
|
49
|
+
"tree-structure",
|
|
46
50
|
"checkbox",
|
|
51
|
+
"tri-state-checkbox",
|
|
52
|
+
"indeterminate-checkbox",
|
|
53
|
+
"drag-and-drop",
|
|
54
|
+
"drag-drop",
|
|
55
|
+
"reorder",
|
|
56
|
+
"sortable-tree",
|
|
57
|
+
"nested-list",
|
|
58
|
+
"hierarchical-list",
|
|
59
|
+
"collapsible-list",
|
|
60
|
+
"expandable-list",
|
|
61
|
+
"multi-select",
|
|
62
|
+
"multi-selection",
|
|
47
63
|
"react-tree-view",
|
|
48
64
|
"react-tree-select",
|
|
49
65
|
"react-checkbox-tree",
|
|
@@ -51,16 +67,14 @@
|
|
|
51
67
|
"react-native-tree-select",
|
|
52
68
|
"react-native-checkbox-list",
|
|
53
69
|
"react-native-tree-checkbox",
|
|
54
|
-
"
|
|
55
|
-
"
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
"
|
|
60
|
-
"
|
|
61
|
-
"customizable"
|
|
62
|
-
"expo",
|
|
63
|
-
"web"
|
|
70
|
+
"react-native-drag-drop",
|
|
71
|
+
"flashlist",
|
|
72
|
+
"search-filter",
|
|
73
|
+
"category-tree",
|
|
74
|
+
"file-tree",
|
|
75
|
+
"folder-tree",
|
|
76
|
+
"typescript",
|
|
77
|
+
"customizable"
|
|
64
78
|
],
|
|
65
79
|
"repository": {
|
|
66
80
|
"type": "git",
|
|
@@ -90,7 +104,6 @@
|
|
|
90
104
|
"@semantic-release/github": "^12.0.5",
|
|
91
105
|
"@semantic-release/npm": "^13.1.4",
|
|
92
106
|
"@shopify/flash-list": "1.x.x",
|
|
93
|
-
"@testing-library/jest-native": "^5.4.3",
|
|
94
107
|
"@testing-library/react-native": "^12.9.0",
|
|
95
108
|
"@types/color": "^3.0.6",
|
|
96
109
|
"@types/jest": "^29.5.14",
|
|
@@ -222,7 +235,11 @@
|
|
|
222
235
|
],
|
|
223
236
|
"funding": [
|
|
224
237
|
{
|
|
225
|
-
"type": "
|
|
238
|
+
"type": "github",
|
|
239
|
+
"url": "https://github.com/sponsors/JairajJangle"
|
|
240
|
+
},
|
|
241
|
+
{
|
|
242
|
+
"type": "paypal",
|
|
226
243
|
"url": "https://www.paypal.com/paypalme/jairajjangle001/usd"
|
|
227
244
|
},
|
|
228
245
|
{
|
|
@@ -230,7 +247,7 @@
|
|
|
230
247
|
"url": "https://liberapay.com/FutureJJ/donate"
|
|
231
248
|
},
|
|
232
249
|
{
|
|
233
|
-
"type": "
|
|
250
|
+
"type": "ko-fi",
|
|
234
251
|
"url": "https://ko-fi.com/futurejj"
|
|
235
252
|
}
|
|
236
253
|
]
|
package/src/TreeView.tsx
CHANGED
|
@@ -1,4 +1,13 @@
|
|
|
1
|
-
import
|
|
1
|
+
import {
|
|
2
|
+
forwardRef,
|
|
3
|
+
startTransition,
|
|
4
|
+
useCallback,
|
|
5
|
+
useEffect,
|
|
6
|
+
useId,
|
|
7
|
+
useImperativeHandle,
|
|
8
|
+
useRef,
|
|
9
|
+
type ForwardedRef,
|
|
10
|
+
} from "react";
|
|
2
11
|
import type {
|
|
3
12
|
TreeNode,
|
|
4
13
|
TreeViewProps,
|
|
@@ -15,9 +24,11 @@ import {
|
|
|
15
24
|
collapseAll,
|
|
16
25
|
toggleCheckboxes,
|
|
17
26
|
expandNodes,
|
|
18
|
-
collapseNodes
|
|
27
|
+
collapseNodes,
|
|
28
|
+
recalculateCheckedStates,
|
|
29
|
+
moveTreeNode,
|
|
19
30
|
} from "./helpers";
|
|
20
|
-
import { getTreeViewStore, useTreeViewStore } from "./store/treeView.store";
|
|
31
|
+
import { deleteTreeViewStore, getTreeViewStore, useTreeViewStore } from "./store/treeView.store";
|
|
21
32
|
import usePreviousState from "./utils/usePreviousState";
|
|
22
33
|
import { useShallow } from "zustand/react/shallow";
|
|
23
34
|
import useDeepCompareEffect from "./utils/useDeepCompareEffect";
|
|
@@ -25,13 +36,13 @@ import { typedMemo } from "./utils/typedMemo";
|
|
|
25
36
|
import type {
|
|
26
37
|
ScrollToNodeHandlerRef,
|
|
27
38
|
ScrollToNodeParams
|
|
28
|
-
} from "./
|
|
29
|
-
import type { DragEndEvent } from "./types/dragDrop.types";
|
|
39
|
+
} from "./hooks/useScrollToNode";
|
|
40
|
+
import type { DragEndEvent, DropPosition } from "./types/dragDrop.types";
|
|
30
41
|
import { fastIsEqual } from "fast-is-equal";
|
|
31
42
|
|
|
32
43
|
function _innerTreeView<ID>(
|
|
33
44
|
props: TreeViewProps<ID>,
|
|
34
|
-
ref:
|
|
45
|
+
ref: ForwardedRef<TreeViewRef<ID>>
|
|
35
46
|
) {
|
|
36
47
|
const {
|
|
37
48
|
data,
|
|
@@ -57,16 +68,11 @@ function _innerTreeView<ID>(
|
|
|
57
68
|
|
|
58
69
|
CustomNodeRowComponent,
|
|
59
70
|
|
|
60
|
-
|
|
61
|
-
onDragEnd,
|
|
62
|
-
longPressDuration,
|
|
63
|
-
autoScrollThreshold,
|
|
64
|
-
autoScrollSpeed,
|
|
65
|
-
dragOverlayOffset,
|
|
66
|
-
autoExpandDelay,
|
|
67
|
-
dragDropCustomizations,
|
|
71
|
+
dragAndDrop,
|
|
68
72
|
} = props;
|
|
69
73
|
|
|
74
|
+
const onDragEnd = dragAndDrop?.onDragEnd;
|
|
75
|
+
|
|
70
76
|
const storeId = useId();
|
|
71
77
|
|
|
72
78
|
const {
|
|
@@ -109,7 +115,7 @@ function _innerTreeView<ID>(
|
|
|
109
115
|
})
|
|
110
116
|
));
|
|
111
117
|
|
|
112
|
-
|
|
118
|
+
useImperativeHandle(ref, () => ({
|
|
113
119
|
selectAll: () => selectAll(storeId),
|
|
114
120
|
unselectAll: () => unselectAll(storeId),
|
|
115
121
|
|
|
@@ -129,15 +135,17 @@ function _innerTreeView<ID>(
|
|
|
129
135
|
|
|
130
136
|
scrollToNodeID,
|
|
131
137
|
|
|
132
|
-
getChildToParentMap
|
|
138
|
+
getChildToParentMap,
|
|
139
|
+
|
|
140
|
+
moveNode,
|
|
133
141
|
}));
|
|
134
142
|
|
|
135
|
-
const scrollToNodeHandlerRef =
|
|
143
|
+
const scrollToNodeHandlerRef = useRef<ScrollToNodeHandlerRef<ID>>(null);
|
|
136
144
|
const prevSearchText = usePreviousState(searchText);
|
|
137
|
-
const internalDataRef =
|
|
145
|
+
const internalDataRef = useRef<TreeNode<ID>[] | null>(null);
|
|
138
146
|
|
|
139
147
|
// Wrap onDragEnd to set internalDataRef before calling consumer's callback
|
|
140
|
-
const wrappedOnDragEnd =
|
|
148
|
+
const wrappedOnDragEnd = useCallback((event: DragEndEvent<ID>) => {
|
|
141
149
|
internalDataRef.current = event.newTreeData;
|
|
142
150
|
onDragEnd?.(event);
|
|
143
151
|
}, [onDragEnd]);
|
|
@@ -191,7 +199,24 @@ function _innerTreeView<ID>(
|
|
|
191
199
|
return treeViewStore.getState().childToParentMap;
|
|
192
200
|
}
|
|
193
201
|
|
|
194
|
-
|
|
202
|
+
function moveNode(nodeId: ID, targetNodeId: ID, position: DropPosition) {
|
|
203
|
+
const store = getTreeViewStore<ID>(storeId);
|
|
204
|
+
const currentData = store.getState().initialTreeViewData;
|
|
205
|
+
const newData = moveTreeNode(currentData, nodeId, targetNodeId, position);
|
|
206
|
+
|
|
207
|
+
store.getState().updateInitialTreeViewData(newData);
|
|
208
|
+
initializeNodeMaps(storeId, newData);
|
|
209
|
+
recalculateCheckedStates<ID>(storeId);
|
|
210
|
+
|
|
211
|
+
if (position === "inside") {
|
|
212
|
+
expandNodes(storeId, [targetNodeId]);
|
|
213
|
+
}
|
|
214
|
+
expandNodes(storeId, [nodeId], true);
|
|
215
|
+
|
|
216
|
+
internalDataRef.current = newData;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
const getIds = useCallback((node: TreeNode<ID>): ID[] => {
|
|
195
220
|
if (!node.children || node.children.length === 0) {
|
|
196
221
|
return [node.id];
|
|
197
222
|
} else {
|
|
@@ -199,15 +224,15 @@ function _innerTreeView<ID>(
|
|
|
199
224
|
}
|
|
200
225
|
}, []);
|
|
201
226
|
|
|
202
|
-
|
|
227
|
+
useEffect(() => {
|
|
203
228
|
onCheck?.(Array.from(checked), Array.from(indeterminate));
|
|
204
229
|
}, [onCheck, checked, indeterminate]);
|
|
205
230
|
|
|
206
|
-
|
|
231
|
+
useEffect(() => {
|
|
207
232
|
onExpand?.(Array.from(expanded));
|
|
208
233
|
}, [onExpand, expanded]);
|
|
209
234
|
|
|
210
|
-
|
|
235
|
+
useEffect(() => {
|
|
211
236
|
if (searchText) {
|
|
212
237
|
startTransition(() => {
|
|
213
238
|
updateExpanded(new Set(initialTreeViewData.flatMap(
|
|
@@ -230,11 +255,12 @@ function _innerTreeView<ID>(
|
|
|
230
255
|
updateExpanded
|
|
231
256
|
]);
|
|
232
257
|
|
|
233
|
-
|
|
258
|
+
useEffect(() => {
|
|
234
259
|
return () => {
|
|
235
260
|
cleanUpTreeViewStore();
|
|
261
|
+
deleteTreeViewStore(storeId);
|
|
236
262
|
};
|
|
237
|
-
}, [cleanUpTreeViewStore]);
|
|
263
|
+
}, [cleanUpTreeViewStore, storeId]);
|
|
238
264
|
|
|
239
265
|
return (
|
|
240
266
|
<NodeList
|
|
@@ -253,20 +279,16 @@ function _innerTreeView<ID>(
|
|
|
253
279
|
|
|
254
280
|
CustomNodeRowComponent={CustomNodeRowComponent}
|
|
255
281
|
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
autoScrollSpeed={autoScrollSpeed}
|
|
261
|
-
dragOverlayOffset={dragOverlayOffset}
|
|
262
|
-
autoExpandDelay={autoExpandDelay}
|
|
263
|
-
dragDropCustomizations={dragDropCustomizations}
|
|
282
|
+
dragAndDrop={dragAndDrop && {
|
|
283
|
+
...dragAndDrop,
|
|
284
|
+
onDragEnd: wrappedOnDragEnd,
|
|
285
|
+
}}
|
|
264
286
|
/>
|
|
265
287
|
);
|
|
266
288
|
}
|
|
267
289
|
|
|
268
|
-
const _TreeView =
|
|
269
|
-
props: TreeViewProps<ID> & { ref?:
|
|
290
|
+
const _TreeView = forwardRef(_innerTreeView) as <ID>(
|
|
291
|
+
props: TreeViewProps<ID> & { ref?: ForwardedRef<TreeViewRef<ID>>; }
|
|
270
292
|
) => ReturnType<typeof _innerTreeView>;
|
|
271
293
|
|
|
272
294
|
export const TreeView = typedMemo<typeof _TreeView>(_TreeView);
|