react-native-tree-multi-select 1.4.1 → 1.5.0-beta.2
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 +12 -1
- package/lib/commonjs/TreeView.js +4 -0
- package/lib/commonjs/TreeView.js.map +1 -1
- package/lib/commonjs/components/NodeList.js +1 -1
- package/lib/commonjs/helpers/flattenTree.helper.js +2 -2
- package/lib/commonjs/helpers/toggleCheckbox.helper.js +80 -71
- package/lib/commonjs/helpers/toggleCheckbox.helper.js.map +1 -1
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/store/treeView.store.js +16 -1
- package/lib/commonjs/store/treeView.store.js.map +1 -1
- package/lib/module/TreeView.js +4 -0
- package/lib/module/TreeView.js.map +1 -1
- package/lib/module/components/NodeList.js +1 -1
- package/lib/module/helpers/flattenTree.helper.js +2 -2
- package/lib/module/helpers/toggleCheckbox.helper.js +80 -71
- package/lib/module/helpers/toggleCheckbox.helper.js.map +1 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/store/treeView.store.js +16 -1
- package/lib/module/store/treeView.store.js.map +1 -1
- package/lib/typescript/TreeView.d.ts.map +1 -1
- package/lib/typescript/helpers/flattenTree.helper.d.ts +1 -1
- package/lib/typescript/helpers/toggleCheckbox.helper.d.ts.map +1 -1
- package/lib/typescript/index.d.ts +2 -2
- package/lib/typescript/index.d.ts.map +1 -1
- package/lib/typescript/store/treeView.store.d.ts +3 -1
- package/lib/typescript/store/treeView.store.d.ts.map +1 -1
- package/lib/typescript/types/treeView.types.d.ts +5 -0
- package/lib/typescript/types/treeView.types.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/TreeView.tsx +9 -0
- package/src/components/NodeList.tsx +1 -1
- package/src/helpers/flattenTree.helper.ts +2 -2
- package/src/helpers/toggleCheckbox.helper.ts +82 -74
- package/src/index.tsx +4 -2
- package/src/store/treeView.store.ts +18 -1
- package/src/types/treeView.types.ts +7 -0
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
⚡️Super-fast Tree view with multi-selection capabilities, using checkboxes and search filtering.
|
|
4
4
|
|
|
5
|
-
[](https://badge.fury.io/js/react-native-tree-multi-select) [](https://github.com/JairajJangle/react-native-tree-multi-select/blob/main/LICENSE) [](https://github.com/JairajJangle/react-native-tree-multi-select/actions/workflows/ci.yml)    [](https://github.com/JairajJangle/react-native-tree-multi-select/issues?q=is%3Aopen+is%3Aissue)
|
|
5
|
+
[](https://badge.fury.io/js/react-native-tree-multi-select) [](https://github.com/JairajJangle/react-native-tree-multi-select/blob/main/LICENSE) [](https://github.com/JairajJangle/react-native-tree-multi-select/actions/workflows/ci.yml) [](https://github.com/JairajJangle/react-native-tree-multi-select/actions/workflows/ci.yml)    [](https://github.com/JairajJangle/react-native-tree-multi-select/issues?q=is%3Aopen+is%3Aissue)  [](https://snack.expo.dev/@futurejj/react-native-tree-multi-select-example)
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
@@ -110,6 +110,7 @@ export function TreeViewUsageExample(){
|
|
|
110
110
|
| `onExpand` | `(expandedIds: string[]) => void` | No | Callback when a node is expanded |
|
|
111
111
|
| `preselectedIds` | `string[]` | No | An array of `id`s that should be pre-selected |
|
|
112
112
|
| `preExpandedIds` | `string[]` | No | An array of `id`s that should be pre-expanded |
|
|
113
|
+
| `selectionPropagation` | [SelectionPropagation](#selectionpropagation) | No | Control Selection Propagation Behavior. Choose whether you want to auto-select children or parents. |
|
|
113
114
|
| `indentationMultiplier` | `number` | No | Indentation (`marginStart`) per level (defaults to 15) |
|
|
114
115
|
| `treeFlashListProps` | [TreeFlatListProps](#treeflatlistprops) | No | Props for the flash list |
|
|
115
116
|
| `checkBoxViewStyleProps` | [BuiltInCheckBoxViewStyleProps](#builtincheckboxviewstyleprops) | No | Props for the checkbox view |
|
|
@@ -161,6 +162,15 @@ export function TreeViewUsageExample(){
|
|
|
161
162
|
|
|
162
163
|
---
|
|
163
164
|
|
|
165
|
+
#### SelectionPropagation
|
|
166
|
+
|
|
167
|
+
| Property | Type | Required | Description |
|
|
168
|
+
| ------------ | --------- | -------- | ------------------------------------------------------------ |
|
|
169
|
+
| `toChildren` | `boolean` | No | Whether to propagate selection to children nodes. Defaults to `true`. |
|
|
170
|
+
| `toParents` | `boolean` | No | Whether to propagate selection to parent nodes. Defaults to `true`. |
|
|
171
|
+
|
|
172
|
+
---
|
|
173
|
+
|
|
164
174
|
#### TreeFlatListProps
|
|
165
175
|
|
|
166
176
|
All properties of `FlashListProps`(from `@shopify/flash-list`) except for `data` and `renderItem`
|
|
@@ -221,6 +231,7 @@ Type: `boolean` OR `"indeterminate"`
|
|
|
221
231
|
### 🙌 Planned features
|
|
222
232
|
|
|
223
233
|
- [x] Row Item full-customization
|
|
234
|
+
- [x] Prop to control auto children and parents selection. Can now be done using `selectionPropagation` prop 🎉
|
|
224
235
|
- [ ] Prop to set the maximum checked item limit
|
|
225
236
|
- [ ] Prop to disable certain nodes from getting checked
|
|
226
237
|
- [x] Ref function to programatically expand/collapse a certain node
|
package/lib/commonjs/TreeView.js
CHANGED
|
@@ -18,6 +18,7 @@ const _TreeView = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
|
|
|
18
18
|
data,
|
|
19
19
|
onCheck,
|
|
20
20
|
onExpand,
|
|
21
|
+
selectionPropagation,
|
|
21
22
|
preselectedIds = [],
|
|
22
23
|
preExpandedIds = [],
|
|
23
24
|
treeFlashListProps,
|
|
@@ -38,6 +39,7 @@ const _TreeView = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
|
|
|
38
39
|
updateSearchKeys,
|
|
39
40
|
checked,
|
|
40
41
|
indeterminate,
|
|
42
|
+
setSelectionPropagation,
|
|
41
43
|
cleanUpTreeViewStore
|
|
42
44
|
} = (0, _treeView.useTreeViewStore)((0, _shallow.useShallow)(state => ({
|
|
43
45
|
expanded: state.expanded,
|
|
@@ -49,6 +51,7 @@ const _TreeView = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
|
|
|
49
51
|
updateSearchKeys: state.updateSearchKeys,
|
|
50
52
|
checked: state.checked,
|
|
51
53
|
indeterminate: state.indeterminate,
|
|
54
|
+
setSelectionPropagation: state.setSelectionPropagation,
|
|
52
55
|
cleanUpTreeViewStore: state.cleanUpTreeViewStore
|
|
53
56
|
})));
|
|
54
57
|
_react.default.useImperativeHandle(ref, () => ({
|
|
@@ -67,6 +70,7 @@ const _TreeView = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
|
|
|
67
70
|
const prevSearchText = (0, _usePreviousState.default)(searchText);
|
|
68
71
|
_react.default.useEffect(() => {
|
|
69
72
|
updateInitialTreeViewData(data);
|
|
73
|
+
if (selectionPropagation) setSelectionPropagation(selectionPropagation);
|
|
70
74
|
(0, _helpers.initializeNodeMaps)(data);
|
|
71
75
|
|
|
72
76
|
// Check any pre-selected nodes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_NodeList","_helpers","_treeView","_usePreviousState","_shallow","_jsxRuntime","e","__esModule","default","_TreeView","React","forwardRef","props","ref","data","onCheck","onExpand","preselectedIds","preExpandedIds","treeFlashListProps","checkBoxViewStyleProps","indentationMultiplier","CheckboxComponent","ExpandCollapseIconComponent","ExpandCollapseTouchableComponent","CustomNodeRowComponent","expanded","updateExpanded","initialTreeViewData","updateInitialTreeViewData","searchText","updateSearchText","updateSearchKeys","checked","indeterminate","cleanUpTreeViewStore","useTreeViewStore","useShallow","state","useImperativeHandle","selectAll","unselectAll","selectAllFiltered","unselectAllFiltered","expandAll","collapseAll","expandNodes","collapseNodes","selectNodes","unselectNodes","setSearchText","prevSearchText","usePreviousState","useEffect","initializeNodeMaps","toggleCheckboxes","ids","text","keys","getIds","useCallback","node","children","length","id","flatMap","item","Array","from","InteractionManager","runAfterInteractions","Set","jsx","TreeView","exports","memo"],"sourceRoot":"../../src","sources":["TreeView.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAMA,IAAAE,SAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AAYA,IAAAI,SAAA,GAAAJ,OAAA;AACA,IAAAK,iBAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,QAAA,GAAAN,OAAA;AAAmD,IAAAO,WAAA,GAAAP,OAAA;AAAA,SAAAD,uBAAAS,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEnD,MAAMG,SAAS,gBAAGC,cAAK,CAACC,UAAU,CAChC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACd,MAAM;IACJC,IAAI;IAEJC,OAAO;IACPC,QAAQ;IAERC,cAAc,GAAG,EAAE;IAEnBC,cAAc,GAAG,EAAE;IAEnBC,kBAAkB;IAClBC,sBAAsB;IACtBC,qBAAqB;IAErBC,iBAAiB;IACjBC,2BAA2B;IAC3BC,gCAAgC;IAEhCC;EACF,CAAC,
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_NodeList","_helpers","_treeView","_usePreviousState","_shallow","_jsxRuntime","e","__esModule","default","_TreeView","React","forwardRef","props","ref","data","onCheck","onExpand","selectionPropagation","preselectedIds","preExpandedIds","treeFlashListProps","checkBoxViewStyleProps","indentationMultiplier","CheckboxComponent","ExpandCollapseIconComponent","ExpandCollapseTouchableComponent","CustomNodeRowComponent","expanded","updateExpanded","initialTreeViewData","updateInitialTreeViewData","searchText","updateSearchText","updateSearchKeys","checked","indeterminate","setSelectionPropagation","cleanUpTreeViewStore","useTreeViewStore","useShallow","state","useImperativeHandle","selectAll","unselectAll","selectAllFiltered","unselectAllFiltered","expandAll","collapseAll","expandNodes","collapseNodes","selectNodes","unselectNodes","setSearchText","prevSearchText","usePreviousState","useEffect","initializeNodeMaps","toggleCheckboxes","ids","text","keys","getIds","useCallback","node","children","length","id","flatMap","item","Array","from","InteractionManager","runAfterInteractions","Set","jsx","TreeView","exports","memo"],"sourceRoot":"../../src","sources":["TreeView.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -44,7 +44,7 @@ function _NodeList(props) {
|
|
|
44
44
|
// First we filter the tree as per the search term and keys
|
|
45
45
|
const filteredTree = _react.default.useMemo(() => (0, _helpers.getFilteredTreeData)(initialTreeViewData, searchText.trim().toLowerCase(), searchKeys), [initialTreeViewData, searchText, searchKeys]);
|
|
46
46
|
|
|
47
|
-
// Then we flatten the
|
|
47
|
+
// Then we flatten the tree to make it "render-compatible" in a "flat" list
|
|
48
48
|
const flattenedFilteredNodes = _react.default.useMemo(() => (0, _helpers.getFlattenedTreeData)(filteredTree, expanded), [filteredTree, expanded]);
|
|
49
49
|
|
|
50
50
|
// And update the innermost children id -> required to un/select filtered tree
|
|
@@ -8,10 +8,10 @@ exports.getFlattenedTreeData = getFlattenedTreeData;
|
|
|
8
8
|
* Flatten the tree and attach a "level" key to object to indicate it's depth. This
|
|
9
9
|
* returns the flattened tree data of expanded ids only. We do not prune the tree off the
|
|
10
10
|
* children after the flattening as it would be unnecessary computation.
|
|
11
|
-
*
|
|
11
|
+
*
|
|
12
12
|
* @param nodes - Input recursive tree
|
|
13
13
|
* @param expandedIds - ids of currently expanded nodes
|
|
14
|
-
* @param
|
|
14
|
+
* @param __level__ - (optional) for internal recursive use only
|
|
15
15
|
* @returns Flattened tree data with expanded ids only
|
|
16
16
|
*/
|
|
17
17
|
function getFlattenedTreeData(nodes, expandedIds, __level__ = 0) {
|
|
@@ -19,8 +19,13 @@ function toggleCheckboxes(ids, forceCheck) {
|
|
|
19
19
|
indeterminate,
|
|
20
20
|
updateIndeterminate,
|
|
21
21
|
nodeMap,
|
|
22
|
-
childToParentMap
|
|
22
|
+
childToParentMap,
|
|
23
|
+
selectionPropagation
|
|
23
24
|
} = _treeView.useTreeViewStore.getState();
|
|
25
|
+
const {
|
|
26
|
+
toChildren,
|
|
27
|
+
toParents
|
|
28
|
+
} = selectionPropagation;
|
|
24
29
|
|
|
25
30
|
// Create new sets for checked and indeterminate state so as not to mutate the original state.
|
|
26
31
|
const tempChecked = new Set(checked);
|
|
@@ -30,28 +35,6 @@ function toggleCheckboxes(ids, forceCheck) {
|
|
|
30
35
|
const memoAllDescendantsChecked = new Map();
|
|
31
36
|
const memoAnyDescendantsChecked = new Map();
|
|
32
37
|
|
|
33
|
-
/**
|
|
34
|
-
* Recursive function to check/uncheck a node and all its children.
|
|
35
|
-
* @param {string} nodeId - The id of the node to be checked or unchecked.
|
|
36
|
-
* @param {boolean} isChecked - Whether the node should be checked or unchecked.
|
|
37
|
-
*/
|
|
38
|
-
const toggleNodeAndChildren = (nodeId, isChecked) => {
|
|
39
|
-
// Set or unset this node in the checked set, and remove it from the indeterminate set.
|
|
40
|
-
if (isChecked) {
|
|
41
|
-
tempChecked.add(nodeId);
|
|
42
|
-
tempIndeterminate.delete(nodeId);
|
|
43
|
-
} else {
|
|
44
|
-
tempChecked.delete(nodeId);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
// Get the node from the node map and recursively apply the same state to all its children.
|
|
48
|
-
const node = nodeMap.get(nodeId);
|
|
49
|
-
node?.children?.forEach(childNode => {
|
|
50
|
-
if (isChecked) tempIndeterminate.delete(childNode.id);
|
|
51
|
-
toggleNodeAndChildren(childNode.id, isChecked);
|
|
52
|
-
});
|
|
53
|
-
};
|
|
54
|
-
|
|
55
38
|
/**
|
|
56
39
|
* Recursive function to check if all descendants of a node are checked.
|
|
57
40
|
* It uses memoization to avoid redundant calculations.
|
|
@@ -81,8 +64,8 @@ function toggleCheckboxes(ids, forceCheck) {
|
|
|
81
64
|
};
|
|
82
65
|
|
|
83
66
|
/**
|
|
84
|
-
*
|
|
85
|
-
* It uses memoization to avoid redundant calculations.
|
|
67
|
+
* Updated function to check if any descendants of a node are checked.
|
|
68
|
+
* It uses memoization to avoid redundant calculations and avoids unnecessarily deep recursion.
|
|
86
69
|
* @param {string} nodeId - The id of the node to be checked.
|
|
87
70
|
* @returns {boolean} - Whether any descendants of the node are checked.
|
|
88
71
|
*/
|
|
@@ -94,9 +77,12 @@ function toggleCheckboxes(ids, forceCheck) {
|
|
|
94
77
|
const node = nodeMap.get(nodeId);
|
|
95
78
|
let anyChecked = false;
|
|
96
79
|
if (node?.children) {
|
|
97
|
-
//
|
|
80
|
+
// Check if any direct child is checked, without requiring all descendants.
|
|
98
81
|
for (const childNode of node.children) {
|
|
99
|
-
|
|
82
|
+
if (tempChecked.has(childNode.id) || areAnyDescendantsChecked(childNode.id)) {
|
|
83
|
+
anyChecked = true;
|
|
84
|
+
break;
|
|
85
|
+
}
|
|
100
86
|
}
|
|
101
87
|
} else {
|
|
102
88
|
// If the node has no children, its state is equal to whether it is in the checked set.
|
|
@@ -108,58 +94,81 @@ function toggleCheckboxes(ids, forceCheck) {
|
|
|
108
94
|
return anyChecked;
|
|
109
95
|
};
|
|
110
96
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
tempChecked.add(nodeId);
|
|
121
|
-
tempIndeterminate.delete(nodeId);
|
|
122
|
-
} else if (areAnyDescendantsChecked(nodeId)) {
|
|
123
|
-
// Condition to check if all direct children and all descendants are checked.
|
|
124
|
-
|
|
125
|
-
/*
|
|
126
|
-
istanbul ignore next
|
|
127
|
-
|
|
128
|
-
NOTE: Below 2 lines in the condition are not covered in unit test
|
|
129
|
-
This condition will only be true if for some reason areAllDescendantsChecked(nodeId)
|
|
130
|
-
is false, while node?.children && node.children.every(childNode => areAllDescendantsChecked(childNode.id))
|
|
131
|
-
is true. Given the current logic of areAllDescendantsChecked,
|
|
132
|
-
this scenario is very unlikely to occur.
|
|
133
|
-
*/
|
|
134
|
-
if (node?.children && node.children.every(childNode => areAllDescendantsChecked(childNode.id))) {
|
|
135
|
-
// If a node's all direct children and all descendants are checked,
|
|
136
|
-
// remove this node from both checked and indeterminate sets.
|
|
137
|
-
tempChecked.delete(nodeId);
|
|
138
|
-
tempIndeterminate.delete(nodeId);
|
|
139
|
-
} else {
|
|
140
|
-
tempChecked.delete(nodeId);
|
|
141
|
-
tempIndeterminate.add(nodeId);
|
|
97
|
+
// Toggle the clicked nodes and their children.
|
|
98
|
+
ids.forEach(id => {
|
|
99
|
+
const isChecked = tempChecked.has(id);
|
|
100
|
+
const newCheckedState = forceCheck === undefined ? !isChecked : forceCheck;
|
|
101
|
+
if (newCheckedState) {
|
|
102
|
+
tempChecked.add(id);
|
|
103
|
+
tempIndeterminate.delete(id);
|
|
104
|
+
if (toChildren) {
|
|
105
|
+
recursivelyUpdateChildren(id, true);
|
|
142
106
|
}
|
|
143
107
|
} else {
|
|
144
|
-
tempChecked.delete(
|
|
145
|
-
tempIndeterminate.delete(
|
|
108
|
+
tempChecked.delete(id);
|
|
109
|
+
tempIndeterminate.delete(id);
|
|
110
|
+
if (toChildren) {
|
|
111
|
+
recursivelyUpdateChildren(id, false);
|
|
112
|
+
}
|
|
146
113
|
}
|
|
147
|
-
};
|
|
148
114
|
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
115
|
+
// Skip updating parent nodes if toParents is false
|
|
116
|
+
if (toParents) {
|
|
117
|
+
updateParentNodes(id);
|
|
118
|
+
}
|
|
153
119
|
});
|
|
154
120
|
|
|
155
|
-
//
|
|
156
|
-
|
|
157
|
-
|
|
121
|
+
// Function to recursively update children nodes as per childrenChecked value
|
|
122
|
+
function recursivelyUpdateChildren(nodeId, childrenChecked) {
|
|
123
|
+
const node = nodeMap.get(nodeId);
|
|
124
|
+
if (node && node.children) {
|
|
125
|
+
node.children.forEach(childNode => {
|
|
126
|
+
if (childrenChecked) {
|
|
127
|
+
tempChecked.add(childNode.id);
|
|
128
|
+
tempIndeterminate.delete(childNode.id);
|
|
129
|
+
} else {
|
|
130
|
+
tempChecked.delete(childNode.id);
|
|
131
|
+
tempIndeterminate.delete(childNode.id);
|
|
132
|
+
}
|
|
133
|
+
recursivelyUpdateChildren(childNode.id, childrenChecked);
|
|
134
|
+
});
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
// Function to update parent nodes
|
|
139
|
+
function updateParentNodes(nodeId) {
|
|
140
|
+
let currentNodeId = nodeId;
|
|
158
141
|
while (currentNodeId) {
|
|
159
|
-
|
|
160
|
-
|
|
142
|
+
const parentNodeId = childToParentMap.get(currentNodeId);
|
|
143
|
+
if (parentNodeId) {
|
|
144
|
+
if (tempChecked.has(parentNodeId)) {
|
|
145
|
+
// If the parent node is currently checked, but not all child nodes are checked,
|
|
146
|
+
// move the parent node to an indeterminate state
|
|
147
|
+
if (!areAllDescendantsChecked(parentNodeId)) {
|
|
148
|
+
tempChecked.delete(parentNodeId);
|
|
149
|
+
tempIndeterminate.add(parentNodeId);
|
|
150
|
+
}
|
|
151
|
+
} else if (tempIndeterminate.has(parentNodeId)) {
|
|
152
|
+
// If the parent node is currently in an indeterminate state,
|
|
153
|
+
// then check if all descendants are checked
|
|
154
|
+
if (areAllDescendantsChecked(parentNodeId)) {
|
|
155
|
+
tempIndeterminate.delete(parentNodeId);
|
|
156
|
+
tempChecked.add(parentNodeId);
|
|
157
|
+
} else if (!areAnyDescendantsChecked(parentNodeId)) {
|
|
158
|
+
// If no descendants are checked, remove from indeterminate set
|
|
159
|
+
tempIndeterminate.delete(parentNodeId);
|
|
160
|
+
}
|
|
161
|
+
} else {
|
|
162
|
+
// If the parent node is not checked or indeterminate,
|
|
163
|
+
// check if any descendants are checked and update appropriately
|
|
164
|
+
if (areAnyDescendantsChecked(parentNodeId)) {
|
|
165
|
+
tempIndeterminate.add(parentNodeId);
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
currentNodeId = parentNodeId;
|
|
161
170
|
}
|
|
162
|
-
}
|
|
171
|
+
}
|
|
163
172
|
|
|
164
173
|
// Update the state object with the new checked and indeterminate sets.
|
|
165
174
|
updateChecked(tempChecked);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_treeView","require","toggleCheckboxes","ids","forceCheck","checked","updateChecked","indeterminate","updateIndeterminate","nodeMap","childToParentMap","useTreeViewStore","getState","tempChecked","Set","tempIndeterminate","memoAllDescendantsChecked","Map","memoAnyDescendantsChecked","
|
|
1
|
+
{"version":3,"names":["_treeView","require","toggleCheckboxes","ids","forceCheck","checked","updateChecked","indeterminate","updateIndeterminate","nodeMap","childToParentMap","selectionPropagation","useTreeViewStore","getState","toChildren","toParents","tempChecked","Set","tempIndeterminate","memoAllDescendantsChecked","Map","memoAnyDescendantsChecked","areAllDescendantsChecked","nodeId","has","get","node","allChecked","children","childNode","id","set","areAnyDescendantsChecked","anyChecked","forEach","isChecked","newCheckedState","undefined","add","delete","recursivelyUpdateChildren","updateParentNodes","childrenChecked","currentNodeId","parentNodeId"],"sourceRoot":"../../../src","sources":["helpers/toggleCheckbox.helper.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_TreeView","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_CheckboxView"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"names":["_TreeView","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_CheckboxView"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;;;;AAaA,IAAAA,SAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,SAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,SAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,SAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAK,aAAA,GAAAT,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAO,aAAA,EAAAN,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAK,aAAA,CAAAL,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAC,aAAA,CAAAL,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
|
|
@@ -42,6 +42,17 @@ const useTreeViewStore = exports.useTreeViewStore = (0, _zustand.create)(set =>
|
|
|
42
42
|
updateInnerMostChildrenIds: innerMostChildrenIds => set({
|
|
43
43
|
innerMostChildrenIds
|
|
44
44
|
}),
|
|
45
|
+
selectionPropagation: {
|
|
46
|
+
toChildren: true,
|
|
47
|
+
toParents: true
|
|
48
|
+
},
|
|
49
|
+
setSelectionPropagation: selectionPropagation => set({
|
|
50
|
+
selectionPropagation: {
|
|
51
|
+
// Default selection propagation for parent and children to true if not mentioned
|
|
52
|
+
toChildren: selectionPropagation.toChildren ?? true,
|
|
53
|
+
toParents: selectionPropagation.toParents ?? true
|
|
54
|
+
}
|
|
55
|
+
}),
|
|
45
56
|
cleanUpTreeViewStore: () => set({
|
|
46
57
|
checked: new Set(),
|
|
47
58
|
indeterminate: new Set(),
|
|
@@ -51,7 +62,11 @@ const useTreeViewStore = exports.useTreeViewStore = (0, _zustand.create)(set =>
|
|
|
51
62
|
childToParentMap: new Map(),
|
|
52
63
|
searchText: "",
|
|
53
64
|
searchKeys: [""],
|
|
54
|
-
innerMostChildrenIds: []
|
|
65
|
+
innerMostChildrenIds: [],
|
|
66
|
+
selectionPropagation: {
|
|
67
|
+
toChildren: true,
|
|
68
|
+
toParents: true
|
|
69
|
+
}
|
|
55
70
|
})
|
|
56
71
|
}));
|
|
57
72
|
//# sourceMappingURL=treeView.store.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_zustand","require","useTreeViewStore","exports","create","set","checked","Set","updateChecked","indeterminate","updateIndeterminate","expanded","updateExpanded","initialTreeViewData","updateInitialTreeViewData","nodeMap","Map","updateNodeMap","childToParentMap","updateChildToParentMap","searchText","updateSearchText","searchKeys","updateSearchKeys","innerMostChildrenIds","updateInnerMostChildrenIds","cleanUpTreeViewStore"],"sourceRoot":"../../../src","sources":["store/treeView.store.ts"],"mappings":";;;;;;AAEA,IAAAA,QAAA,GAAAC,OAAA;
|
|
1
|
+
{"version":3,"names":["_zustand","require","useTreeViewStore","exports","create","set","checked","Set","updateChecked","indeterminate","updateIndeterminate","expanded","updateExpanded","initialTreeViewData","updateInitialTreeViewData","nodeMap","Map","updateNodeMap","childToParentMap","updateChildToParentMap","searchText","updateSearchText","searchKeys","updateSearchKeys","innerMostChildrenIds","updateInnerMostChildrenIds","selectionPropagation","toChildren","toParents","setSelectionPropagation","cleanUpTreeViewStore"],"sourceRoot":"../../../src","sources":["store/treeView.store.ts"],"mappings":";;;;;;AAEA,IAAAA,QAAA,GAAAC,OAAA;AAgDO,MAAMC,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG,IAAAE,eAAM,EAAiBC,GAAG,KAAM;EAC5DC,OAAO,EAAE,IAAIC,GAAG,CAAC,CAAC;EAClBC,aAAa,EAAGF,OAAoB,IAAKD,GAAG,CAAC;IAAEC;EAAQ,CAAC,CAAC;EAEzDG,aAAa,EAAE,IAAIF,GAAG,CAAC,CAAC;EACxBG,mBAAmB,EAAGD,aAA0B,IAAKJ,GAAG,CAAC;IAAEI;EAAc,CAAC,CAAC;EAE3EE,QAAQ,EAAE,IAAIJ,GAAG,CAAS,CAAC;EAC3BK,cAAc,EAAGD,QAAqB,IAAKN,GAAG,CAAC;IAAEM;EAAS,CAAC,CAAC;EAE5DE,mBAAmB,EAAE,EAAE;EACvBC,yBAAyB,EAAGD,mBAA+B,IAAKR,GAAG,CAAC;IAChEQ;EACJ,CAAC,CAAC;EAEFE,OAAO,EAAE,IAAIC,GAAG,CAAmB,CAAC;EACpCC,aAAa,EAAGF,OAA8B,IAAKV,GAAG,CAAC;IAAEU;EAAQ,CAAC,CAAC;EAEnEG,gBAAgB,EAAE,IAAIF,GAAG,CAAiB,CAAC;EAC3CG,sBAAsB,EAAGD,gBAAqC,IAAKb,GAAG,CAAC;IAAEa;EAAiB,CAAC,CAAC;EAE5FE,UAAU,EAAE,EAAE;EACdC,gBAAgB,EAAGD,UAAkB,IAAKf,GAAG,CAAC;IAAEe;EAAW,CAAC,CAAC;EAE7DE,UAAU,EAAE,CAAC,EAAE,CAAC;EAChBC,gBAAgB,EAAGD,UAAoB,IAAKjB,GAAG,CAAC;IAAEiB;EAAW,CAAC,CAAC;EAE/DE,oBAAoB,EAAE,EAAE;EACxBC,0BAA0B,EAAGD,oBAA8B,IAAKnB,GAAG,CAAC;IAAEmB;EAAqB,CAAC,CAAC;EAE7FE,oBAAoB,EAAE;IAAEC,UAAU,EAAE,IAAI;IAAEC,SAAS,EAAE;EAAK,CAAC;EAC3DC,uBAAuB,EAAGH,oBAAoB,IAAKrB,GAAG,CAClD;IACIqB,oBAAoB,EAAE;MAClB;MACAC,UAAU,EAAED,oBAAoB,CAACC,UAAU,IAAI,IAAI;MACnDC,SAAS,EAAEF,oBAAoB,CAACE,SAAS,IAAI;IACjD;EACJ,CACJ,CAAC;EAEDE,oBAAoB,EAAEA,CAAA,KAClBzB,GAAG,CAAC;IACAC,OAAO,EAAE,IAAIC,GAAG,CAAC,CAAC;IAClBE,aAAa,EAAE,IAAIF,GAAG,CAAC,CAAC;IACxBI,QAAQ,EAAE,IAAIJ,GAAG,CAAS,CAAC;IAC3BM,mBAAmB,EAAE,EAAE;IACvBE,OAAO,EAAE,IAAIC,GAAG,CAAmB,CAAC;IACpCE,gBAAgB,EAAE,IAAIF,GAAG,CAAiB,CAAC;IAC3CI,UAAU,EAAE,EAAE;IACdE,UAAU,EAAE,CAAC,EAAE,CAAC;IAChBE,oBAAoB,EAAE,EAAE;IACxBE,oBAAoB,EAAE;MAAEC,UAAU,EAAE,IAAI;MAAEC,SAAS,EAAE;IAAK;EAC9D,CAAC;AACT,CAAC,CAAC,CAAC","ignoreList":[]}
|
package/lib/module/TreeView.js
CHANGED
|
@@ -13,6 +13,7 @@ const _TreeView = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
13
13
|
data,
|
|
14
14
|
onCheck,
|
|
15
15
|
onExpand,
|
|
16
|
+
selectionPropagation,
|
|
16
17
|
preselectedIds = [],
|
|
17
18
|
preExpandedIds = [],
|
|
18
19
|
treeFlashListProps,
|
|
@@ -33,6 +34,7 @@ const _TreeView = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
33
34
|
updateSearchKeys,
|
|
34
35
|
checked,
|
|
35
36
|
indeterminate,
|
|
37
|
+
setSelectionPropagation,
|
|
36
38
|
cleanUpTreeViewStore
|
|
37
39
|
} = useTreeViewStore(useShallow(state => ({
|
|
38
40
|
expanded: state.expanded,
|
|
@@ -44,6 +46,7 @@ const _TreeView = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
44
46
|
updateSearchKeys: state.updateSearchKeys,
|
|
45
47
|
checked: state.checked,
|
|
46
48
|
indeterminate: state.indeterminate,
|
|
49
|
+
setSelectionPropagation: state.setSelectionPropagation,
|
|
47
50
|
cleanUpTreeViewStore: state.cleanUpTreeViewStore
|
|
48
51
|
})));
|
|
49
52
|
React.useImperativeHandle(ref, () => ({
|
|
@@ -62,6 +65,7 @@ const _TreeView = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
62
65
|
const prevSearchText = usePreviousState(searchText);
|
|
63
66
|
React.useEffect(() => {
|
|
64
67
|
updateInitialTreeViewData(data);
|
|
68
|
+
if (selectionPropagation) setSelectionPropagation(selectionPropagation);
|
|
65
69
|
initializeNodeMaps(data);
|
|
66
70
|
|
|
67
71
|
// Check any pre-selected nodes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","InteractionManager","NodeList","selectAll","selectAllFiltered","unselectAll","unselectAllFiltered","initializeNodeMaps","expandAll","collapseAll","toggleCheckboxes","expandNodes","collapseNodes","useTreeViewStore","usePreviousState","useShallow","jsx","_jsx","_TreeView","forwardRef","props","ref","data","onCheck","onExpand","preselectedIds","preExpandedIds","treeFlashListProps","checkBoxViewStyleProps","indentationMultiplier","CheckboxComponent","ExpandCollapseIconComponent","ExpandCollapseTouchableComponent","CustomNodeRowComponent","expanded","updateExpanded","initialTreeViewData","updateInitialTreeViewData","searchText","updateSearchText","updateSearchKeys","checked","indeterminate","cleanUpTreeViewStore","state","useImperativeHandle","selectNodes","unselectNodes","setSearchText","prevSearchText","useEffect","ids","text","keys","getIds","useCallback","node","children","length","id","flatMap","item","Array","from","runAfterInteractions","Set","TreeView","memo"],"sourceRoot":"../../src","sources":["TreeView.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,kBAAkB,QAAQ,cAAc;AAMjD,OAAOC,QAAQ,MAAM,uBAAuB;AAC5C,SACEC,SAAS,EACTC,iBAAiB,EACjBC,WAAW,EACXC,mBAAmB,EACnBC,kBAAkB,EAClBC,SAAS,EACTC,WAAW,EACXC,gBAAgB,EAChBC,WAAW,EACXC,aAAa,QACR,WAAW;AAClB,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,OAAOC,gBAAgB,MAAM,0BAA0B;AACvD,SAASC,UAAU,QAAQ,uBAAuB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEnD,MAAMC,SAAS,gBAAGlB,KAAK,CAACmB,UAAU,CAChC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACd,MAAM;IACJC,IAAI;IAEJC,OAAO;IACPC,QAAQ;IAERC,cAAc,GAAG,EAAE;IAEnBC,cAAc,GAAG,EAAE;IAEnBC,kBAAkB;IAClBC,sBAAsB;IACtBC,qBAAqB;IAErBC,iBAAiB;IACjBC,2BAA2B;IAC3BC,gCAAgC;IAEhCC;EACF,CAAC,
|
|
1
|
+
{"version":3,"names":["React","InteractionManager","NodeList","selectAll","selectAllFiltered","unselectAll","unselectAllFiltered","initializeNodeMaps","expandAll","collapseAll","toggleCheckboxes","expandNodes","collapseNodes","useTreeViewStore","usePreviousState","useShallow","jsx","_jsx","_TreeView","forwardRef","props","ref","data","onCheck","onExpand","selectionPropagation","preselectedIds","preExpandedIds","treeFlashListProps","checkBoxViewStyleProps","indentationMultiplier","CheckboxComponent","ExpandCollapseIconComponent","ExpandCollapseTouchableComponent","CustomNodeRowComponent","expanded","updateExpanded","initialTreeViewData","updateInitialTreeViewData","searchText","updateSearchText","updateSearchKeys","checked","indeterminate","setSelectionPropagation","cleanUpTreeViewStore","state","useImperativeHandle","selectNodes","unselectNodes","setSearchText","prevSearchText","useEffect","ids","text","keys","getIds","useCallback","node","children","length","id","flatMap","item","Array","from","runAfterInteractions","Set","TreeView","memo"],"sourceRoot":"../../src","sources":["TreeView.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -39,7 +39,7 @@ function _NodeList(props) {
|
|
|
39
39
|
// First we filter the tree as per the search term and keys
|
|
40
40
|
const filteredTree = React.useMemo(() => getFilteredTreeData(initialTreeViewData, searchText.trim().toLowerCase(), searchKeys), [initialTreeViewData, searchText, searchKeys]);
|
|
41
41
|
|
|
42
|
-
// Then we flatten the
|
|
42
|
+
// Then we flatten the tree to make it "render-compatible" in a "flat" list
|
|
43
43
|
const flattenedFilteredNodes = React.useMemo(() => getFlattenedTreeData(filteredTree, expanded), [filteredTree, expanded]);
|
|
44
44
|
|
|
45
45
|
// And update the innermost children id -> required to un/select filtered tree
|
|
@@ -4,10 +4,10 @@
|
|
|
4
4
|
* Flatten the tree and attach a "level" key to object to indicate it's depth. This
|
|
5
5
|
* returns the flattened tree data of expanded ids only. We do not prune the tree off the
|
|
6
6
|
* children after the flattening as it would be unnecessary computation.
|
|
7
|
-
*
|
|
7
|
+
*
|
|
8
8
|
* @param nodes - Input recursive tree
|
|
9
9
|
* @param expandedIds - ids of currently expanded nodes
|
|
10
|
-
* @param
|
|
10
|
+
* @param __level__ - (optional) for internal recursive use only
|
|
11
11
|
* @returns Flattened tree data with expanded ids only
|
|
12
12
|
*/
|
|
13
13
|
export function getFlattenedTreeData(nodes, expandedIds, __level__ = 0) {
|