@asup/tree-of-nodes 1.0.6 → 2.0.0

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.
Files changed (12) hide show
  1. package/README.md +70 -56
  2. package/dist/cjs/main.css +10 -0
  3. package/dist/cjs/main.css.map +1 -0
  4. package/dist/cjs/main.js +136 -53
  5. package/dist/cjs/main.js.map +1 -1
  6. package/dist/main.css +10 -0
  7. package/dist/main.css.map +1 -0
  8. package/dist/main.js +100 -31
  9. package/dist/main.js.map +1 -1
  10. package/dist/tree-of-nodes.d.ts +60 -54
  11. package/dist/tree-of-nodes.d.ts.map +1 -1
  12. package/package.json +6 -4
package/README.md CHANGED
@@ -34,40 +34,44 @@ import '@asup/tree-of-nodes/dist/style.css';
34
34
  id: string;
35
35
  nodeList: TreeNodeData<T>[];
36
36
  roots: Key[];
37
- selectedId?: Key;
38
- handleSelect?: (ret: Key) => void;
37
+ multiSelect?: boolean;
38
+ selectedIds?: Key | Key[];
39
+ handleSelect?: (ret: Key | Key []) => void;
39
40
  onAdd?: (parentId: Key, newName: string) => Promise<iNodeUpdate>;
40
41
  onRemove?: (childId: Key) => Promise<iNodeUpdate>;
41
42
  onRename?: (childId: Key, newName: string) => Promise<iNodeUpdate>;
42
- canAddRoot?: boolean;
43
43
  canRemoveRoot?: boolean;
44
44
  canRenameRoot?: boolean;
45
45
  canAddChildren?: boolean;
46
46
  canRemoveChildren?: boolean;
47
47
  canRenameChildren?: boolean;
48
+ nodeHighlight?: string;
49
+ textHighlight?: string;
48
50
  />
49
51
  ```
50
52
 
51
- The component expects a list of nodes of type `TreeNodeData<T>` with unique `Key`s.
53
+ The component expects a list of nodes of type `TreeNodeData<T>` with unique `React.Key`s.
52
54
 
53
55
  ## Properties
54
56
 
55
- | Prop | Description | Default |
56
- | :---------------- | :---------------------------------------------------------------------------------------------- | :---------------: |
57
- | id | HTML id attribute | |
58
- | nodeList | Array of node data | |
59
- | roots | One or more node Keys to use as the root of the tree |
60
- | selectedId | Currently selectedId | |
61
- | handleSelect | Function called when a node is clicked (selected), this should be used to update the selectedId | `() => {return;}` |
62
- | onAdd | Function called when a new node is added, this should be used to update the nodeList | |
63
- | onRemove | Function called when a node is removed, this should be used to update the nodeList | |
64
- | onRename | Function called when a node is renamed, this should be used to update the nodeList | |
65
- | ~~canAddRoot~~ | Not currently implemented | |
66
- | canRemoveRoot | Allows removal of a root node in combination with specification of onRemove function | `false` |
67
- | canRenameRoot | Allows renaming of a root node in combination with specification of onRename function | `false` |
68
- | canAddChildren | Allows addition of children in combination with specification of onAdd function | `false` |
69
- | canRemoveChildren | Allows renaming of non-root nodes in combination with specification of onRemove function | `false` |
70
- | canRenameChildren | Allows renaming of non-root nodes in combination with specification of onRename function | `false` |
57
+ | Prop | Description | Default |
58
+ | :---------------- | :---------------------------------------------------------------------------------------------- | :----------------: |
59
+ | id | HTML id attribute | |
60
+ | nodeList | Array of node data | |
61
+ | roots | One or more node Keys to use as the root of the tree | |
62
+ | multiSelect | Allow selection of more than 1 id | `false` |
63
+ | selectedIds | Currently selected list | |
64
+ | handleSelect | Function called when a node is clicked (selected), this should be used to update the selectedId | `() => {return;}` |
65
+ | onAdd | Function called when a new node is added, this should be used to update the nodeList | |
66
+ | onRemove | Function called when a node is removed, this should be used to update the nodeList | |
67
+ | onRename | Function called when a node is renamed, this should be used to update the nodeList | |
68
+ | canRemoveRoot | Allows removal of a root node in combination with specification of onRemove function | `false` |
69
+ | canRenameRoot | Allows renaming of a root node in combination with specification of onRename function | `false` |
70
+ | canAddChildren | Allows addition of children in combination with specification of onAdd function | `false` |
71
+ | canRemoveChildren | Allows renaming of non-root nodes in combination with specification of onRemove function | `false` |
72
+ | canRenameChildren | Allows renaming of non-root nodes in combination with specification of onRename function | `false` |
73
+ | nodeHighlight | Selected node highlight colour | `red` |
74
+ | textHighlight | Selected text highlight colour | `rgba(255,0,0,0.2` |
71
75
 
72
76
  ### TreeNodeData
73
77
 
@@ -93,45 +97,55 @@ export interface iNodeUpdate {
93
97
  }
94
98
  ```
95
99
 
96
- ## Context Menu Usage
100
+ # Handling clicks
97
101
 
98
- Inbuilt context menu provider, takes a list of available actions and renders a context menu on appropriate click.
102
+ Context menu clicks on a node will result in a context menu being displayed with "Add", "Rename" and "Delete" options being displayed.
99
103
 
100
- ```
101
- import { ContextMenuProvider, iMenuItem, MenuContext } from '@asup/tree-of-nodes';
102
- import '@asup/tree-of-nodes/dist/style.css';
104
+ Clicks on an expander will either expand or close the node's clidren
103
105
 
104
- ... inside REACT component
106
+ Clicks on a name will select that item
107
+
108
+ Clicks on a checkbox will select that item and all its descendents.
109
+
110
+ ## Single item selection
111
+
112
+ To handle one (and only one) item being selected, it is suggested to use these base options
105
113
 
106
- <ContextMenuProvider>
107
-
108
- <SomeChild
109
-
110
- const menuContext = useContext(MenuContext);
111
- const showMenu = useCallback((e) => {
112
- e.preventDefault();
113
- e.stopPropagation();
114
- const menuItems: iMenuItem[] = [
115
- { label: 'Item 1', action: item1Function },
116
- { label: 'Item 2', action: item2Function },
117
- ...
118
- ];
119
- menuContext.set && menuContext.set({
120
- visible: true,
121
- y: e.pageY,
122
- x: e.pageX,
123
- menuItems: menuItems,
124
- });
125
- },
126
- [...]);
127
-
128
- return (
129
- <div onContextMenu={showMenu}>
130
- </div>
131
- );
132
- >
133
-
134
- </ContextMenuProvider>
135
114
  ```
115
+ <TreeOfNodes<T>
116
+ id={'...'}
117
+ nodeList={[...]}
118
+ roots={[...]}
119
+ selected={selected}
120
+ handleSelect={async (i) => {
121
+ setSelected([i]);
122
+ }}
123
+ />
124
+ ```
125
+
126
+ ## Multiple item selection
127
+
128
+ To handle multiple selections, it is suggested to use these base options
136
129
 
137
- Add an `onContextMenu` action to an element inside the `ContextMenuProvider`, and create a corresponding function that loads the menuItems array and then sets it to visible.
130
+ ```
131
+ <TreeOfNodes<T>
132
+ id={'...'}
133
+ nodeList={[...]}
134
+ roots={[...]}
135
+ showCheckBox
136
+ selected={selected}
137
+ handleSelect={async (i) => {
138
+ if (Array.isArray(i)) {
139
+ setSelected(
140
+ selected.includes(i[0])
141
+ ? selected.filter((s) => !i.includes(s))
142
+ : [...selected, ...i.filter((n) => !selected.includes(n))],
143
+ );
144
+ } else {
145
+ setSelected(
146
+ selected.includes(i) ? selected.filter((s) => s !== i) : [...selected, i],
147
+ );
148
+ }
149
+ }}
150
+ />
151
+ ```
package/dist/cjs/main.css ADDED
@@ -0,0 +1,10 @@
1
+ .tree-of-nodes-checkbox {
2
+ margin-top: 3px;
3
+ margin-right: 3px;
4
+ }
5
+
6
+ .tree-of-nodes-expander {
7
+ margin-bottom: 4px;
8
+ }
9
+
10
+ /*# sourceMappingURL=main.css.map */
package/dist/cjs/main.css.map ADDED
@@ -0,0 +1 @@
1
+ {"mappings":"AAAA;;;;;AAKA","sources":["src/components/TreeNode.css"],"sourcesContent":[".tree-of-nodes-checkbox {\n margin-right: 3px;\n margin-top: 3px;\n}\n\n.tree-of-nodes-expander {\n margin-bottom: 4px;\n}\n"],"names":[],"version":3,"file":"main.css.map"}
package/dist/cjs/main.js CHANGED
@@ -1,12 +1,13 @@
1
- var $gTuX4$swchelperslib_async_to_generatorjs = require("@swc/helpers/lib/_async_to_generator.js");
2
- var $gTuX4$swchelperslib_sliced_to_arrayjs = require("@swc/helpers/lib/_sliced_to_array.js");
3
- var $gTuX4$swchelperslib_ts_generatorjs = require("@swc/helpers/lib/_ts_generator.js");
1
+ require("./main.css");
2
+ var $gTuX4$swchelperscjs_async_to_generatorcjs = require("@swc/helpers/cjs/_async_to_generator.cjs");
3
+ var $gTuX4$swchelperscjs_sliced_to_arraycjs = require("@swc/helpers/cjs/_sliced_to_array.cjs");
4
+ var $gTuX4$swchelperscjs_to_consumable_arraycjs = require("@swc/helpers/cjs/_to_consumable_array.cjs");
5
+ var $gTuX4$swchelperscjs_ts_generatorcjs = require("@swc/helpers/cjs/_ts_generator.cjs");
4
6
  var $gTuX4$reactjsxruntime = require("react/jsx-runtime");
5
7
  var $gTuX4$asupcontextmenu = require("@asup/context-menu");
6
8
  var $gTuX4$react = require("react");
7
9
  var $gTuX4$reactbootstrapicons = require("react-bootstrap-icons");
8
- var $gTuX4$swchelperslib_to_consumable_arrayjs = require("@swc/helpers/lib/_to_consumable_array.js");
9
- var $gTuX4$swchelperslib_object_spreadjs = require("@swc/helpers/lib/_object_spread.js");
10
+ var $gTuX4$swchelperscjs_object_spreadcjs = require("@swc/helpers/cjs/_object_spread.cjs");
10
11
  var $gTuX4$reactbootstrap = require("react-bootstrap");
11
12
 
12
13
  function $parcel$exportWildcard(dest, source) {
@@ -46,21 +47,32 @@ $parcel$export($a68bd8a6c0fd98c2$exports, "WordEntry", function () { return $176
46
47
 
47
48
 
48
49
  var $580f9b3e262282c9$export$c6fd3ab3f44300d0 = function(id, included, hierarchyNodes) {
49
- // Get current node
50
- var current = hierarchyNodes.find(function(h) {
51
- return h.id === id;
50
+ var processIds = Array.isArray(id) ? id : [
51
+ id
52
+ ];
53
+ var current = processIds.map(function(i) {
54
+ return hierarchyNodes.find(function(h) {
55
+ return h.id === i;
56
+ });
57
+ }).filter(function(h) {
58
+ return h !== undefined;
52
59
  });
53
- if (current === undefined) return [];
54
- // Get parent node
55
- var parent = hierarchyNodes.find(function(h) {
56
- return h.id === current.parentId;
60
+ if (current.length === 0) return included;
61
+ var parents = current.map(function(h) {
62
+ return h.parentId;
63
+ }).map(function(pid) {
64
+ return hierarchyNodes.find(function(h) {
65
+ return pid === h.id;
66
+ });
67
+ }).filter(function(p) {
68
+ return p !== undefined;
57
69
  });
58
- // Stop if no more parents
59
- return parent === undefined ? included : $580f9b3e262282c9$export$c6fd3ab3f44300d0(parent.id, (0, ($parcel$interopDefault($gTuX4$swchelperslib_to_consumable_arrayjs)))(included.filter(function(i) {
60
- return i.id !== parent.id;
61
- })).concat([
62
- parent
63
- ]), hierarchyNodes);
70
+ if (parents.length === 0) return included;
71
+ else return $580f9b3e262282c9$export$c6fd3ab3f44300d0(parents.map(function(p) {
72
+ return p.id;
73
+ }), (0, $gTuX4$swchelperscjs_to_consumable_arraycjs._)(included).concat((0, $gTuX4$swchelperscjs_to_consumable_arraycjs._)(parents.filter(function(p) {
74
+ return !included.includes(p);
75
+ }))), hierarchyNodes);
64
76
  };
65
77
 
66
78
 
@@ -77,7 +89,7 @@ var $176d21a51def1fce$export$14f190ac910bde69 = /*#__PURE__*/ (0, ($parcel$inter
77
89
  var id = param.id, value = param.value, editing = param.editing, saving = param.saving, setValue = param.setValue, sendEscape = param.sendEscape, style = param.style;
78
90
  $176d21a51def1fce$export$14f190ac910bde69.displayName = "WordEntry";
79
91
  var currentStyle = (0, $gTuX4$react.useMemo)(function() {
80
- return (0, ($parcel$interopDefault($gTuX4$swchelperslib_object_spreadjs)))({
92
+ return (0, $gTuX4$swchelperscjs_object_spreadcjs._)({
81
93
  display: "inline-block",
82
94
  padding: "1px",
83
95
  paddingLeft: "3px",
@@ -88,7 +100,7 @@ var $176d21a51def1fce$export$14f190ac910bde69 = /*#__PURE__*/ (0, ($parcel$inter
88
100
  }, [
89
101
  style
90
102
  ]);
91
- var _useState = (0, ($parcel$interopDefault($gTuX4$swchelperslib_sliced_to_arrayjs)))((0, $gTuX4$react.useState)(value !== null && value !== void 0 ? value : ""), 2), currentValue = _useState[0], setCurrentValue = _useState[1];
103
+ var _useState = (0, $gTuX4$swchelperscjs_sliced_to_arraycjs._)((0, $gTuX4$react.useState)(value !== null && value !== void 0 ? value : ""), 2), currentValue = _useState[0], setCurrentValue = _useState[1];
92
104
  (0, $gTuX4$react.useEffect)(function() {
93
105
  setCurrentValue(value !== null && value !== void 0 ? value : "");
94
106
  }, [
@@ -147,6 +159,22 @@ var $176d21a51def1fce$export$14f190ac910bde69 = /*#__PURE__*/ (0, ($parcel$inter
147
159
  ]
148
160
  });
149
161
  });
162
+ $176d21a51def1fce$export$14f190ac910bde69.displayName = "WordEntry";
163
+
164
+
165
+
166
+
167
+ var $a19ef65643ae39e0$export$bd923365b402cb04 = function(id, hierarchyNodes) {
168
+ var processIds = Array.isArray(id) ? id : [
169
+ id
170
+ ];
171
+ var newChildren = hierarchyNodes.filter(function(h) {
172
+ return h.parentId !== undefined && processIds.includes(h.parentId) && !processIds.includes(h.id);
173
+ }).map(function(h) {
174
+ return h.id;
175
+ });
176
+ return newChildren.length === 0 ? processIds : $a19ef65643ae39e0$export$bd923365b402cb04((0, $gTuX4$swchelperscjs_to_consumable_arraycjs._)(processIds).concat((0, $gTuX4$swchelperscjs_to_consumable_arraycjs._)(newChildren)), hierarchyNodes);
177
+ };
150
178
 
151
179
 
152
180
  var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
@@ -170,9 +198,16 @@ var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
170
198
  id,
171
199
  treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList
172
200
  ]);
201
+ var _treeContext_nodeList;
202
+ var descendents = (0, $gTuX4$react.useMemo)(function() {
203
+ return (0, $a19ef65643ae39e0$export$bd923365b402cb04)(id, (_treeContext_nodeList = treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList) !== null && _treeContext_nodeList !== void 0 ? _treeContext_nodeList : []);
204
+ }, [
205
+ id,
206
+ treeContext
207
+ ]);
173
208
  // State
174
- var _useState = (0, ($parcel$interopDefault($gTuX4$swchelperslib_sliced_to_arrayjs)))((0, $gTuX4$react.useState)(false), 2), error = _useState[0], setError = _useState[1];
175
- var _useState1 = (0, ($parcel$interopDefault($gTuX4$swchelperslib_sliced_to_arrayjs)))((0, $gTuX4$react.useState)(null), 2), errorText = _useState1[0], setErrotText = _useState1[1];
209
+ var _useState = (0, $gTuX4$swchelperscjs_sliced_to_arraycjs._)((0, $gTuX4$react.useState)(false), 2), error = _useState[0], setError = _useState[1];
210
+ var _useState1 = (0, $gTuX4$swchelperscjs_sliced_to_arraycjs._)((0, $gTuX4$react.useState)(""), 2), errorText = _useState1[0], setErrotText = _useState1[1];
176
211
  var expanded = (0, $gTuX4$react.useMemo)(function() {
177
212
  var _treeContext_expandedNodes_findIndex;
178
213
  return ((_treeContext_expandedNodes_findIndex = treeContext === null || treeContext === void 0 ? void 0 : treeContext.expandedNodes.findIndex(function(e) {
@@ -182,20 +217,42 @@ var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
182
217
  id,
183
218
  treeContext === null || treeContext === void 0 ? void 0 : treeContext.expandedNodes
184
219
  ]);
185
- // // Apply selected borer
220
+ // Checkbox
221
+ var checkRef = (0, $gTuX4$react.useRef)(null);
222
+ (0, $gTuX4$react.useEffect)(function() {
223
+ if (checkRef.current) {
224
+ if (treeContext === null || treeContext === void 0 ? void 0 : treeContext.selected.includes(id)) {
225
+ checkRef.current.checked = true;
226
+ checkRef.current.indeterminate = false;
227
+ } else if (descendents.some(function(d) {
228
+ return treeContext === null || treeContext === void 0 ? void 0 : treeContext.selected.includes(d);
229
+ })) {
230
+ checkRef.current.checked = false;
231
+ checkRef.current.indeterminate = true;
232
+ } else {
233
+ checkRef.current.checked = false;
234
+ checkRef.current.indeterminate = false;
235
+ }
236
+ }
237
+ }, [
238
+ descendents,
239
+ id,
240
+ treeContext === null || treeContext === void 0 ? void 0 : treeContext.selected
241
+ ]);
242
+ // Apply selected border
186
243
  var currentBorder = (0, $gTuX4$react.useMemo)(function() {
187
- return id === (treeContext === null || treeContext === void 0 ? void 0 : treeContext.selectedId) ? "1px solid black" : "";
244
+ return (treeContext === null || treeContext === void 0 ? void 0 : treeContext.selected.includes(id)) ? "1px solid black" : "";
188
245
  }, [
189
246
  id,
190
- treeContext === null || treeContext === void 0 ? void 0 : treeContext.selectedId
247
+ treeContext === null || treeContext === void 0 ? void 0 : treeContext.selected
191
248
  ]);
192
249
  var nodeColour = (0, $gTuX4$react.useMemo)(function() {
193
- if (treeContext && treeContext.selectedId) {
194
- var anc = (0, $580f9b3e262282c9$export$c6fd3ab3f44300d0)(treeContext.selectedId, [], treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList).map(function(n) {
250
+ if (treeContext && treeContext.selected) {
251
+ var anc = (0, $580f9b3e262282c9$export$c6fd3ab3f44300d0)(treeContext.selected, [], treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList).map(function(n) {
195
252
  return n.id;
196
253
  });
197
- if ((0, ($parcel$interopDefault($gTuX4$swchelperslib_to_consumable_arrayjs)))(anc).concat([
198
- treeContext.selectedId
254
+ if ((0, $gTuX4$swchelperscjs_to_consumable_arraycjs._)(anc).concat([
255
+ treeContext.selected
199
256
  ]).includes(id)) return treeContext.nodeHighlight;
200
257
  }
201
258
  return;
@@ -205,12 +262,12 @@ var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
205
262
  ]);
206
263
  // New node parameters
207
264
  var newNameRef = (0, $gTuX4$react.useRef)(null);
208
- var _useState2 = (0, ($parcel$interopDefault($gTuX4$swchelperslib_sliced_to_arrayjs)))((0, $gTuX4$react.useState)(false), 2), showNewNode = _useState2[0], setShowNewNode = _useState2[1];
209
- var _useState3 = (0, ($parcel$interopDefault($gTuX4$swchelperslib_sliced_to_arrayjs)))((0, $gTuX4$react.useState)(false), 2), savingNewNode = _useState3[0], setSavingNewNode = _useState3[1];
265
+ var _useState2 = (0, $gTuX4$swchelperscjs_sliced_to_arraycjs._)((0, $gTuX4$react.useState)(false), 2), showNewNode = _useState2[0], setShowNewNode = _useState2[1];
266
+ var _useState3 = (0, $gTuX4$swchelperscjs_sliced_to_arraycjs._)((0, $gTuX4$react.useState)(false), 2), savingNewNode = _useState3[0], setSavingNewNode = _useState3[1];
210
267
  // Rename parameters
211
268
  var currentNameRef = (0, $gTuX4$react.useRef)(null);
212
- var _useState4 = (0, ($parcel$interopDefault($gTuX4$swchelperslib_sliced_to_arrayjs)))((0, $gTuX4$react.useState)(false), 2), renaming = _useState4[0], setRenaming = _useState4[1];
213
- var _useState5 = (0, ($parcel$interopDefault($gTuX4$swchelperslib_sliced_to_arrayjs)))((0, $gTuX4$react.useState)(false), 2), updatingNode = _useState5[0], setUpdatingNode = _useState5[1];
269
+ var _useState4 = (0, $gTuX4$swchelperscjs_sliced_to_arraycjs._)((0, $gTuX4$react.useState)(false), 2), renaming = _useState4[0], setRenaming = _useState4[1];
270
+ var _useState5 = (0, $gTuX4$swchelperscjs_sliced_to_arraycjs._)((0, $gTuX4$react.useState)(false), 2), updatingNode = _useState5[0], setUpdatingNode = _useState5[1];
214
271
  // Context functions
215
272
  var handleReturn = (0, $gTuX4$react.useCallback)(function(ret) {
216
273
  if (!ret.success) {
@@ -219,12 +276,12 @@ var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
219
276
  setErrotText((_ret_ErrorText = ret.ErrorText) !== null && _ret_ErrorText !== void 0 ? _ret_ErrorText : "An unknown error has occured");
220
277
  } else {
221
278
  setError(false);
222
- setErrotText(null);
279
+ setErrotText("");
223
280
  }
224
281
  }, []);
225
282
  var confirmNewNode = (0, $gTuX4$react.useCallback)(function() {
226
- var _ref = (0, ($parcel$interopDefault($gTuX4$swchelperslib_async_to_generatorjs)))(function(label) {
227
- return (0, ($parcel$interopDefault($gTuX4$swchelperslib_ts_generatorjs)))(this, function(_state) {
283
+ var _ref = (0, $gTuX4$swchelperscjs_async_to_generatorcjs._)(function(label) {
284
+ return (0, $gTuX4$swchelperscjs_ts_generatorcjs._)(this, function(_state) {
228
285
  switch(_state.label){
229
286
  case 0:
230
287
  setSavingNewNode(true);
@@ -259,8 +316,8 @@ var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
259
316
  treeContext
260
317
  ]);
261
318
  var renameNode = (0, $gTuX4$react.useCallback)(function() {
262
- var _ref = (0, ($parcel$interopDefault($gTuX4$swchelperslib_async_to_generatorjs)))(function(newLabel) {
263
- return (0, ($parcel$interopDefault($gTuX4$swchelperslib_ts_generatorjs)))(this, function(_state) {
319
+ var _ref = (0, $gTuX4$swchelperscjs_async_to_generatorcjs._)(function(newLabel) {
320
+ return (0, $gTuX4$swchelperscjs_ts_generatorcjs._)(this, function(_state) {
264
321
  switch(_state.label){
265
322
  case 0:
266
323
  setRenaming(false);
@@ -294,8 +351,8 @@ var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
294
351
  id,
295
352
  treeContext
296
353
  ]);
297
- var deleteThis = (0, $gTuX4$react.useCallback)(/*#__PURE__*/ (0, ($parcel$interopDefault($gTuX4$swchelperslib_async_to_generatorjs)))(function() {
298
- return (0, ($parcel$interopDefault($gTuX4$swchelperslib_ts_generatorjs)))(this, function(_state) {
354
+ var deleteThis = (0, $gTuX4$react.useCallback)(/*#__PURE__*/ (0, $gTuX4$swchelperscjs_async_to_generatorcjs._)(function() {
355
+ return (0, $gTuX4$swchelperscjs_ts_generatorcjs._)(this, function(_state) {
299
356
  switch(_state.label){
300
357
  case 0:
301
358
  if (!(treeContext === null || treeContext === void 0 ? void 0 : treeContext.onRemove)) return [
@@ -383,31 +440,48 @@ var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
383
440
  color: "var(--bs-danger)"
384
441
  }),
385
442
  " ",
386
- errorText && errorText !== "" ? errorText : "An unknown error has occured"
443
+ errorText
387
444
  ]
388
- }) : /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("span", {
445
+ }) : /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", {
446
+ className: "tree-of-nodes-node",
389
447
  children: [
448
+ treeContext.showCheckBox && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("input", {
449
+ ref: checkRef,
450
+ type: "checkbox",
451
+ role: "checkbox",
452
+ className: "tree-of-nodes-checkbox",
453
+ id: "".concat(treeContext.id, "-treenode-checkbox-").concat(id, "}"),
454
+ onClick: function() {
455
+ treeContext.handleSelect(descendents);
456
+ }
457
+ }),
390
458
  childNodes !== undefined && childNodes.length > 0 ? !expanded ? /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactbootstrapicons.CaretRightFill), {
391
459
  id: "".concat(treeContext.id, "-treenode-caret-").concat(id),
460
+ className: "tree-of-nodes-expander",
392
461
  role: "button",
393
462
  color: nodeColour,
394
463
  "aria-expanded": false,
464
+ "aria-label": "Expander",
395
465
  onClick: function() {
396
466
  return treeContext.handleExpandClick(id);
397
467
  }
398
468
  }) : /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactbootstrapicons.CaretDownFill), {
399
469
  id: "".concat(treeContext.id, "-treenode-caret-").concat(id),
470
+ className: "tree-of-nodes-expander",
400
471
  role: "button",
401
472
  "aria-expanded": true,
473
+ "aria-label": "Expander",
402
474
  color: nodeColour,
403
475
  onClick: function() {
404
476
  treeContext.handleExpandClick(id);
405
477
  }
406
478
  }) : /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactbootstrapicons.CaretRight), {
407
479
  id: "".concat(treeContext.id, "-treenode-caret-").concat(id),
480
+ className: "tree-of-nodes-expander",
408
481
  role: "button",
409
482
  color: nodeColour,
410
483
  "aria-expanded": false,
484
+ "aria-label": "Disabled expander",
411
485
  "aria-disabled": true
412
486
  }),
413
487
  thisNode && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
@@ -488,6 +562,7 @@ var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
488
562
  })
489
563
  });
490
564
  };
565
+ $a56aac35d4408806$export$2eba8ec3a333fdbb.displayName = "TreeNode";
491
566
 
492
567
 
493
568
 
@@ -496,8 +571,8 @@ var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
496
571
 
497
572
 
498
573
 
499
- var $f31429c9cc6d3bce$export$40c47a7ac5f85aba = function(nodeList, selectedId, expandedNodes) {
500
- return (0, ($parcel$interopDefault($gTuX4$swchelperslib_to_consumable_arrayjs)))(expandedNodes).concat((0, ($parcel$interopDefault($gTuX4$swchelperslib_to_consumable_arrayjs)))((0, $580f9b3e262282c9$export$c6fd3ab3f44300d0)(selectedId, [], nodeList).map(function(n) {
574
+ var $f31429c9cc6d3bce$export$40c47a7ac5f85aba = function(nodeList, selected, expandedNodes) {
575
+ return (0, $gTuX4$swchelperscjs_to_consumable_arraycjs._)(expandedNodes).concat((0, $gTuX4$swchelperscjs_to_consumable_arraycjs._)((0, $580f9b3e262282c9$export$c6fd3ab3f44300d0)(selected, [], nodeList).map(function(n) {
501
576
  return n.id;
502
577
  }).filter(function(k) {
503
578
  return !expandedNodes.includes(k);
@@ -510,15 +585,21 @@ var $f31429c9cc6d3bce$export$40c47a7ac5f85aba = function(nodeList, selectedId, e
510
585
 
511
586
 
512
587
  var $9becaaec3a803ae7$export$5580fff3e08a8be5 = function(param) {
513
- var id = param.id, nodeList = param.nodeList, roots = param.roots, _param_canRemoveRoot = param.// canAddRoot = false,
514
- canRemoveRoot, canRemoveRoot = _param_canRemoveRoot === void 0 ? false : _param_canRemoveRoot, _param_canRenameRoot = param.canRenameRoot, canRenameRoot = _param_canRenameRoot === void 0 ? false : _param_canRenameRoot, _param_canAddChildren = param.canAddChildren, canAddChildren = _param_canAddChildren === void 0 ? false : _param_canAddChildren, _param_canRemoveChildren = param.canRemoveChildren, canRemoveChildren = _param_canRemoveChildren === void 0 ? false : _param_canRemoveChildren, _param_canRenameChildren = param.canRenameChildren, canRenameChildren = _param_canRenameChildren === void 0 ? false : _param_canRenameChildren, selectedId = param.selectedId, _param_handleSelect = param.handleSelect, handleSelect = _param_handleSelect === void 0 ? function() {
588
+ var id = param.id, nodeList = param.nodeList, roots = param.roots, _param_selected = param.selected, selected = _param_selected === void 0 ? [] : _param_selected, _param_showCheckBox = param.showCheckBox, showCheckBox = _param_showCheckBox === void 0 ? false : _param_showCheckBox, _param_handleSelect = param.handleSelect, handleSelect = _param_handleSelect === void 0 ? function() {
515
589
  return;
516
- } : _param_handleSelect, onAdd = param.onAdd, onRename = param.onRename, onRemove = param.onRemove, _param_nodeHighlight = param.nodeHighlight, nodeHighlight = _param_nodeHighlight === void 0 ? "red" : _param_nodeHighlight, _param_textHighlight = param.textHighlight, textHighlight = _param_textHighlight === void 0 ? "rgba(255, 0, 0, 0.2)" : _param_textHighlight;
517
- var _useState = (0, ($parcel$interopDefault($gTuX4$swchelperslib_sliced_to_arrayjs)))((0, $gTuX4$react.useState)([]), 2), expandedNodes = _useState[0], setExpandedNodes = _useState[1];
590
+ } : _param_handleSelect, onAdd = param.onAdd, onRename = param.onRename, onRemove = param.onRemove, _param_canRemoveRoot = param.canRemoveRoot, canRemoveRoot = _param_canRemoveRoot === void 0 ? false : _param_canRemoveRoot, _param_canRenameRoot = param.canRenameRoot, canRenameRoot = _param_canRenameRoot === void 0 ? false : _param_canRenameRoot, _param_canAddChildren = param.canAddChildren, canAddChildren = _param_canAddChildren === void 0 ? false : _param_canAddChildren, _param_canRemoveChildren = param.canRemoveChildren, canRemoveChildren = _param_canRemoveChildren === void 0 ? false : _param_canRemoveChildren, _param_canRenameChildren = param.canRenameChildren, canRenameChildren = _param_canRenameChildren === void 0 ? false : _param_canRenameChildren, _param_nodeHighlight = param.nodeHighlight, nodeHighlight = _param_nodeHighlight === void 0 ? "red" : _param_nodeHighlight, _param_textHighlight = param.textHighlight, textHighlight = _param_textHighlight === void 0 ? "rgba(255, 0, 0, 0.2)" : _param_textHighlight;
591
+ var _useState = (0, $gTuX4$swchelperscjs_sliced_to_arraycjs._)((0, $gTuX4$react.useState)([]), 2), expandedNodes = _useState[0], setExpandedNodes = _useState[1];
592
+ var selectedArray = (0, $gTuX4$react.useMemo)(function() {
593
+ return Array.isArray(selected) ? selected : [
594
+ selected
595
+ ];
596
+ }, [
597
+ selected
598
+ ]);
518
599
  (0, $gTuX4$react.useEffect)(function() {
519
- if (selectedId) {
600
+ if (selectedArray.length > 0) {
520
601
  // Check all nodes are showing that should be
521
- var shouldExpand = (0, $f31429c9cc6d3bce$export$40c47a7ac5f85aba)(nodeList, selectedId, expandedNodes);
602
+ var shouldExpand = (0, $f31429c9cc6d3bce$export$40c47a7ac5f85aba)(nodeList, selectedArray, expandedNodes);
522
603
  shouldExpand.filter(function(n) {
523
604
  return !expandedNodes.includes(n);
524
605
  }).length > 0 && setExpandedNodes(shouldExpand);
@@ -526,11 +607,11 @@ var $9becaaec3a803ae7$export$5580fff3e08a8be5 = function(param) {
526
607
  }, [
527
608
  expandedNodes,
528
609
  nodeList,
529
- selectedId
610
+ selectedArray
530
611
  ]);
531
612
  // Change expansion and update contexts
532
613
  var changeExpand = (0, $gTuX4$react.useCallback)(function(eKey, force) {
533
- var newExpandedNodes = (0, ($parcel$interopDefault($gTuX4$swchelperslib_to_consumable_arrayjs)))(expandedNodes);
614
+ var newExpandedNodes = (0, $gTuX4$swchelperscjs_to_consumable_arraycjs._)(expandedNodes);
534
615
  var ix = newExpandedNodes.findIndex(function(nKey) {
535
616
  return nKey === eKey;
536
617
  });
@@ -544,7 +625,8 @@ var $9becaaec3a803ae7$export$5580fff3e08a8be5 = function(param) {
544
625
  value: {
545
626
  id: id,
546
627
  nodeList: nodeList,
547
- selectedId: selectedId,
628
+ selected: selectedArray,
629
+ showCheckBox: showCheckBox,
548
630
  handleSelect: handleSelect,
549
631
  expandedNodes: expandedNodes,
550
632
  handleExpandClick: function(r, f) {
@@ -568,6 +650,7 @@ var $9becaaec3a803ae7$export$5580fff3e08a8be5 = function(param) {
568
650
  })
569
651
  });
570
652
  };
653
+ $9becaaec3a803ae7$export$5580fff3e08a8be5.displayName = "TreeOfNodes";
571
654
 
572
655
 
573
656