react-native-tree-multi-select 3.0.0-beta.3 → 3.0.0-beta.4
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 +84 -24
- 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 +74 -57
- 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 +114 -19
- 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 +18 -7
- 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 +69 -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 +83 -59
- 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 +152 -30
- package/src/{handlers/ScrollToNodeHandler.tsx → hooks/useScrollToNode.ts} +48 -45
- package/src/index.tsx +9 -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 +76 -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,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,57 @@ 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
|
-
export interface
|
|
94
|
-
/**
|
|
95
|
-
|
|
96
|
-
/**
|
|
97
|
-
|
|
98
|
-
/**
|
|
99
|
-
initialScrollNodeID?: ID;
|
|
100
|
-
/** Internal store identifier */
|
|
101
|
-
storeId: string;
|
|
102
|
-
/** Enable drag-and-drop reordering */
|
|
103
|
-
dragEnabled?: boolean;
|
|
104
|
-
/** Callback fired after a node is dropped at a new position */
|
|
105
|
+
/** Configuration options for drag-and-drop reordering */
|
|
106
|
+
export interface DragAndDropOptions<ID = string> {
|
|
107
|
+
/** Enable drag-and-drop reordering. Default: true (when dragAndDrop is provided) */
|
|
108
|
+
enabled?: boolean;
|
|
109
|
+
/** Callback fired when a drag operation begins */
|
|
110
|
+
onDragStart?: (event: DragStartEvent<ID>) => void;
|
|
111
|
+
/** Callback fired after a node is successfully dropped at a new position */
|
|
105
112
|
onDragEnd?: (event: DragEndEvent<ID>) => void;
|
|
113
|
+
/** Callback fired when a drag is cancelled without a successful drop */
|
|
114
|
+
onDragCancel?: (event: DragCancelEvent<ID>) => void;
|
|
106
115
|
/** Long press duration in ms to start drag. Default: 400 */
|
|
107
116
|
longPressDuration?: number;
|
|
108
117
|
/** Distance from edge (px) to trigger auto-scroll during drag. Default: 60 */
|
|
109
118
|
autoScrollThreshold?: number;
|
|
110
119
|
/** Speed multiplier for auto-scroll during drag. Default: 1.0 */
|
|
111
120
|
autoScrollSpeed?: number;
|
|
112
|
-
/** Offset of the dragged overlay from the finger, in item-height units. Default: -
|
|
121
|
+
/** Offset of the dragged overlay from the finger, in item-height units. Default: -4 (four items above finger) */
|
|
113
122
|
dragOverlayOffset?: number;
|
|
114
123
|
/** Delay in ms before auto-expanding a collapsed node during drag hover. Default: 800 */
|
|
115
124
|
autoExpandDelay?: number;
|
|
116
125
|
/** Customizations for drag-and-drop visuals (overlay, indicator, opacity) */
|
|
117
|
-
|
|
126
|
+
customizations?: DragDropCustomizations<ID>;
|
|
127
|
+
/** Callback to determine if a node can be dropped on a specific target.
|
|
128
|
+
* Return false to grey out the target and suppress the drop indicator. */
|
|
129
|
+
canDrop?: (draggedNode: TreeNode<ID>, targetNode: TreeNode<ID>, position: DropPosition) => boolean;
|
|
130
|
+
/** Maximum nesting depth allowed. Drops that would exceed this depth are suppressed. */
|
|
131
|
+
maxDepth?: number;
|
|
132
|
+
/** Callback to determine if a node can accept children.
|
|
133
|
+
* Return false to suppress the "inside" drop zone for that node. */
|
|
134
|
+
canNodeHaveChildren?: (node: TreeNode<ID>) => boolean;
|
|
135
|
+
/** Callback to determine if a node can be dragged.
|
|
136
|
+
* Return false to prevent dragging this node. Default: all nodes are draggable. */
|
|
137
|
+
canDrag?: (node: TreeNode<ID>) => boolean;
|
|
138
|
+
}
|
|
139
|
+
/** Props for the NodeList component that renders the flattened tree */
|
|
140
|
+
export interface NodeListProps<ID> extends TreeItemCustomizations<ID> {
|
|
141
|
+
/** Additional props passed to the underlying FlashList */
|
|
142
|
+
treeFlashListProps?: TreeFlatListProps;
|
|
143
|
+
/** Ref for programmatic scroll-to-node functionality */
|
|
144
|
+
scrollToNodeHandlerRef: RefObject<ScrollToNodeHandlerRef<ID>>;
|
|
145
|
+
/** Node ID to scroll to on initial render */
|
|
146
|
+
initialScrollNodeID?: ID;
|
|
147
|
+
/** Internal store identifier */
|
|
148
|
+
storeId: string;
|
|
149
|
+
/** Drag-and-drop configuration */
|
|
150
|
+
dragAndDrop?: DragAndDropOptions<ID>;
|
|
118
151
|
}
|
|
119
152
|
/** Props for the TreeView component */
|
|
120
153
|
export interface TreeViewProps<ID = string> extends Omit<NodeListProps<ID>, "storeId" | "scrollToNodeHandlerRef"> {
|
|
@@ -130,20 +163,8 @@ export interface TreeViewProps<ID = string> extends Omit<NodeListProps<ID>, "sto
|
|
|
130
163
|
preExpandedIds?: ID[];
|
|
131
164
|
/** Controls whether checking a node propagates to its children and/or parents */
|
|
132
165
|
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;
|
|
166
|
+
/** Drag-and-drop configuration */
|
|
167
|
+
dragAndDrop?: DragAndDropOptions<ID>;
|
|
147
168
|
}
|
|
148
169
|
type CheckboxProps = Omit<_CheckboxProps, "onPress" | "status">;
|
|
149
170
|
/** Props for the checkbox view component */
|
|
@@ -200,6 +221,9 @@ export interface TreeViewRef<ID = string> {
|
|
|
200
221
|
scrollToNodeID: (scrollToNodeParams: ScrollToNodeParams<ID>) => void;
|
|
201
222
|
/** Get a map of child node IDs to their parent node IDs */
|
|
202
223
|
getChildToParentMap: () => Map<ID, ID>;
|
|
224
|
+
/** Programmatically move a node to a new position in the tree.
|
|
225
|
+
* Works like a drag-and-drop but without user interaction. */
|
|
226
|
+
moveNode: (nodeId: ID, targetNodeId: ID, position: DropPosition) => void;
|
|
203
227
|
}
|
|
204
228
|
/** Controls how checkbox selection propagates through the tree hierarchy */
|
|
205
229
|
export interface SelectionPropagation {
|
|
@@ -247,16 +271,18 @@ export interface DragOverlayStyleProps {
|
|
|
247
271
|
}
|
|
248
272
|
/** Combined drag-and-drop customization props */
|
|
249
273
|
export interface DragDropCustomizations<ID = string> {
|
|
250
|
-
/** Opacity applied to the
|
|
274
|
+
/** Opacity applied to the node being dragged. Default: 0.3 */
|
|
251
275
|
draggedNodeOpacity?: number;
|
|
276
|
+
/** Opacity applied to invalid drop targets during drag. Default: 0.3 */
|
|
277
|
+
invalidTargetOpacity?: number;
|
|
252
278
|
/** Style props for the built-in drop indicator */
|
|
253
279
|
dropIndicatorStyleProps?: DropIndicatorStyleProps;
|
|
254
280
|
/** Style props for the drag overlay (lifted node ghost) */
|
|
255
281
|
dragOverlayStyleProps?: DragOverlayStyleProps;
|
|
256
282
|
/** Fully custom drop indicator component - replaces the built-in line/highlight */
|
|
257
|
-
CustomDropIndicatorComponent?:
|
|
283
|
+
CustomDropIndicatorComponent?: ComponentType<DropIndicatorComponentProps>;
|
|
258
284
|
/** Fully custom drag overlay component - replaces the built-in ghost node */
|
|
259
|
-
CustomDragOverlayComponent?:
|
|
285
|
+
CustomDragOverlayComponent?: ComponentType<DragOverlayComponentProps<ID>>;
|
|
260
286
|
}
|
|
261
287
|
/** Props passed to a custom drag overlay component */
|
|
262
288
|
export interface DragOverlayComponentProps<ID = string> {
|
|
@@ -264,6 +290,8 @@ export interface DragOverlayComponentProps<ID = string> {
|
|
|
264
290
|
node: __FlattenedTreeNode__<ID>;
|
|
265
291
|
/** The nesting level of the dragged node */
|
|
266
292
|
level: number;
|
|
293
|
+
/** The current checkbox value of the dragged node */
|
|
294
|
+
checkedValue: CheckboxValueType;
|
|
267
295
|
}
|
|
268
296
|
export {};
|
|
269
297
|
//# 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.4",
|
|
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);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { memo, useCallback } from "react";
|
|
2
2
|
import {
|
|
3
3
|
Platform,
|
|
4
4
|
StyleSheet,
|
|
@@ -13,6 +13,8 @@ import type {
|
|
|
13
13
|
} from "../types/treeView.types";
|
|
14
14
|
import { Checkbox } from "@futurejj/react-native-checkbox";
|
|
15
15
|
|
|
16
|
+
// Intentionally narrow: only re-render when the checkbox value or label text changes.
|
|
17
|
+
// Other props (callbacks, styles) are stable references from parent memoization.
|
|
16
18
|
function arePropsEqual(
|
|
17
19
|
prevProps: BuiltInCheckBoxViewProps,
|
|
18
20
|
nextProps: BuiltInCheckBoxViewProps
|
|
@@ -23,7 +25,7 @@ function arePropsEqual(
|
|
|
23
25
|
);
|
|
24
26
|
}
|
|
25
27
|
|
|
26
|
-
export const CheckboxView =
|
|
28
|
+
export const CheckboxView = memo(_CheckboxView, arePropsEqual);
|
|
27
29
|
|
|
28
30
|
function _CheckboxView(props: BuiltInCheckBoxViewProps) {
|
|
29
31
|
const {
|
|
@@ -43,7 +45,7 @@ function _CheckboxView(props: BuiltInCheckBoxViewProps) {
|
|
|
43
45
|
},
|
|
44
46
|
} = props;
|
|
45
47
|
|
|
46
|
-
const customCheckboxValToCheckboxValType =
|
|
48
|
+
const customCheckboxValToCheckboxValType = useCallback((
|
|
47
49
|
customCheckboxValueType: CheckboxValueType
|
|
48
50
|
) => {
|
|
49
51
|
return customCheckboxValueType === "indeterminate"
|
|
@@ -59,7 +61,7 @@ function _CheckboxView(props: BuiltInCheckBoxViewProps) {
|
|
|
59
61
|
*
|
|
60
62
|
* @param newValue This represents the updated CheckBox value after it's clicked.
|
|
61
63
|
*/
|
|
62
|
-
const onValueChangeModifier =
|
|
64
|
+
const onValueChangeModifier = useCallback(() => {
|
|
63
65
|
// If the previous state was 'indeterminate', set checked to true
|
|
64
66
|
if (value === "indeterminate") onValueChange(true);
|
|
65
67
|
else onValueChange(!value);
|
|
@@ -106,6 +108,7 @@ export const defaultCheckboxViewStyles = StyleSheet.create({
|
|
|
106
108
|
},
|
|
107
109
|
checkboxTextStyle: {
|
|
108
110
|
color: "black",
|
|
111
|
+
/* istanbul ignore next -- Platform.OS is never "android" in jest */
|
|
109
112
|
marginTop: Platform.OS === "android" ? 2 : undefined,
|
|
110
113
|
},
|
|
111
114
|
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { memo } from "react";
|
|
2
2
|
import { type ExpandIconProps } from "../types/treeView.types";
|
|
3
3
|
|
|
4
4
|
// Function to dynamically load FontAwesomeIcon from either Expo or React Native
|
|
@@ -20,7 +20,7 @@ function loadFontAwesomeIcon() {
|
|
|
20
20
|
// Load the FontAwesomeIcon component
|
|
21
21
|
const FontAwesomeIcon = loadFontAwesomeIcon();
|
|
22
22
|
|
|
23
|
-
export const CustomExpandCollapseIcon =
|
|
23
|
+
export const CustomExpandCollapseIcon = memo(
|
|
24
24
|
_CustomExpandCollapseIcon
|
|
25
25
|
);
|
|
26
26
|
|