@asup/tree-of-nodes 1.0.7 → 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.
- package/README.md +70 -56
- package/dist/cjs/main.css +10 -0
- package/dist/cjs/main.css.map +1 -0
- package/dist/cjs/main.js +115 -32
- package/dist/cjs/main.js.map +1 -1
- package/dist/main.css +10 -0
- package/dist/main.css.map +1 -0
- package/dist/main.js +100 -31
- package/dist/main.js.map +1 -1
- package/dist/tree-of-nodes.d.ts +12 -6
- package/dist/tree-of-nodes.d.ts.map +1 -1
- package/package.json +2 -1
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
|
-
|
|
38
|
-
|
|
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
|
-
|
|
|
61
|
-
|
|
|
62
|
-
|
|
|
63
|
-
|
|
|
64
|
-
|
|
|
65
|
-
|
|
|
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
|
-
|
|
100
|
+
# Handling clicks
|
|
97
101
|
|
|
98
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
+
```
|
|
@@ -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,3 +1,4 @@
|
|
|
1
|
+
require("./main.css");
|
|
1
2
|
var $gTuX4$swchelperscjs_async_to_generatorcjs = require("@swc/helpers/cjs/_async_to_generator.cjs");
|
|
2
3
|
var $gTuX4$swchelperscjs_sliced_to_arraycjs = require("@swc/helpers/cjs/_sliced_to_array.cjs");
|
|
3
4
|
var $gTuX4$swchelperscjs_to_consumable_arraycjs = require("@swc/helpers/cjs/_to_consumable_array.cjs");
|
|
@@ -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
|
-
|
|
50
|
-
|
|
51
|
-
|
|
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 ===
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
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
|
-
|
|
59
|
-
return
|
|
60
|
-
return
|
|
61
|
-
})).concat(
|
|
62
|
-
|
|
63
|
-
|
|
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
|
|
|
@@ -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
209
|
var _useState = (0, $gTuX4$swchelperscjs_sliced_to_arraycjs._)((0, $gTuX4$react.useState)(false), 2), error = _useState[0], setError = _useState[1];
|
|
175
|
-
var _useState1 = (0, $gTuX4$swchelperscjs_sliced_to_arraycjs._)((0, $gTuX4$react.useState)(
|
|
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
|
-
//
|
|
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
|
|
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.
|
|
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.
|
|
194
|
-
var anc = (0, $580f9b3e262282c9$export$c6fd3ab3f44300d0)(treeContext.
|
|
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
254
|
if ((0, $gTuX4$swchelperscjs_to_consumable_arraycjs._)(anc).concat([
|
|
198
|
-
treeContext.
|
|
255
|
+
treeContext.selected
|
|
199
256
|
]).includes(id)) return treeContext.nodeHighlight;
|
|
200
257
|
}
|
|
201
258
|
return;
|
|
@@ -219,7 +276,7 @@ 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(
|
|
279
|
+
setErrotText("");
|
|
223
280
|
}
|
|
224
281
|
}, []);
|
|
225
282
|
var confirmNewNode = (0, $gTuX4$react.useCallback)(function() {
|
|
@@ -383,31 +440,48 @@ var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
|
|
|
383
440
|
color: "var(--bs-danger)"
|
|
384
441
|
}),
|
|
385
442
|
" ",
|
|
386
|
-
errorText
|
|
443
|
+
errorText
|
|
387
444
|
]
|
|
388
|
-
}) : /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("
|
|
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,
|
|
500
|
-
return (0, $gTuX4$swchelperscjs_to_consumable_arraycjs._)(expandedNodes).concat((0, $gTuX4$swchelperscjs_to_consumable_arraycjs._)((0, $580f9b3e262282c9$export$c6fd3ab3f44300d0)(
|
|
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,
|
|
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;
|
|
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;
|
|
517
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 (
|
|
600
|
+
if (selectedArray.length > 0) {
|
|
520
601
|
// Check all nodes are showing that should be
|
|
521
|
-
var shouldExpand = (0, $f31429c9cc6d3bce$export$40c47a7ac5f85aba)(nodeList,
|
|
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,7 +607,7 @@ var $9becaaec3a803ae7$export$5580fff3e08a8be5 = function(param) {
|
|
|
526
607
|
}, [
|
|
527
608
|
expandedNodes,
|
|
528
609
|
nodeList,
|
|
529
|
-
|
|
610
|
+
selectedArray
|
|
530
611
|
]);
|
|
531
612
|
// Change expansion and update contexts
|
|
532
613
|
var changeExpand = (0, $gTuX4$react.useCallback)(function(eKey, force) {
|
|
@@ -544,7 +625,8 @@ var $9becaaec3a803ae7$export$5580fff3e08a8be5 = function(param) {
|
|
|
544
625
|
value: {
|
|
545
626
|
id: id,
|
|
546
627
|
nodeList: nodeList,
|
|
547
|
-
|
|
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
|
|
package/dist/cjs/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["src/main.ts","src/components/index.ts","src/components/TreeNode.tsx","src/functions/getAncestors.tsx","src/components/TreeOfNodesContext.ts","src/components/WordEntry.tsx","src/components/TreeOfNodes.tsx","src/functions/checkExpandedNodes.ts","src/functions/index.ts"],"sourcesContent":["export * from './components';\nexport * from './functions';\n","import { TreeNode } from './TreeNode';\nimport { TreeOfNodes } from './TreeOfNodes';\nimport { iNodeUpdate, TreeNodeBase, TreeNodeData } from './interface';\nimport { WordEntry } from './WordEntry';\n\nexport { TreeNode, TreeOfNodes, WordEntry };\nexport type { TreeNodeBase, TreeNodeData, iNodeUpdate };\n","import { ContextMenuHandler, iMenuItem } from '@asup/context-menu';\nimport { Key, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport {\n CaretDownFill,\n CaretRight,\n CaretRightFill,\n ExclamationCircleFill,\n} from 'react-bootstrap-icons';\nimport { getAncestors } from '../functions/getAncestors';\nimport { iNodeUpdate } from './interface';\nimport { TreeOfNodesContext } from './TreeOfNodesContext';\nimport { WordEntry } from './WordEntry';\n\ninterface TreeNodeProps {\n id: Key;\n indentLevel?: number;\n canRemove?: boolean;\n canRename?: boolean;\n canAddChildren?: boolean;\n canRemoveChildren?: boolean;\n canRenameChildren?: boolean;\n refresh?: () => void;\n}\n\nexport const TreeNode = ({\n id,\n canRemove,\n canRename,\n canAddChildren,\n canRemoveChildren,\n canRenameChildren,\n}: TreeNodeProps): JSX.Element => {\n // Contexts\n const treeContext = useContext(TreeOfNodesContext);\n\n // Node information\n const thisNode = useMemo(\n () => treeContext?.nodeList.find((n) => n.id === id),\n [id, treeContext?.nodeList],\n );\n const childNodes = useMemo(\n () => treeContext?.nodeList.filter((n) => n.parentId === id),\n [id, treeContext?.nodeList],\n );\n\n // State\n const [error, setError] = useState<boolean>(false);\n const [errorText, setErrotText] = useState<string | null>(null);\n const expanded = useMemo(() => {\n return (treeContext?.expandedNodes.findIndex((e) => e === id) ?? -1) > -1;\n }, [id, treeContext?.expandedNodes]);\n\n // // Apply selected borer\n const currentBorder = useMemo<string>(() => {\n return id === treeContext?.selectedId ? '1px solid black' : '';\n }, [id, treeContext?.selectedId]);\n const nodeColour = useMemo<string | undefined>(() => {\n if (treeContext && treeContext.selectedId) {\n const anc = getAncestors(treeContext.selectedId, [], treeContext?.nodeList).map((n) => n.id);\n if ([...anc, treeContext.selectedId].includes(id)) return treeContext.nodeHighlight;\n }\n return;\n }, [id, treeContext]);\n\n // New node parameters\n const newNameRef = useRef<HTMLInputElement | null>(null);\n const [showNewNode, setShowNewNode] = useState<boolean>(false);\n const [savingNewNode, setSavingNewNode] = useState<boolean>(false);\n\n // Rename parameters\n const currentNameRef = useRef<HTMLInputElement | null>(null);\n const [renaming, setRenaming] = useState<boolean>(false);\n const [updatingNode, setUpdatingNode] = useState<boolean>(false);\n\n // Context functions\n const handleReturn = useCallback((ret: iNodeUpdate) => {\n if (!ret.success) {\n setError(true);\n setErrotText(ret.ErrorText ?? 'An unknown error has occured');\n } else {\n setError(false);\n setErrotText(null);\n }\n }, []);\n\n const confirmNewNode = useCallback(\n async (label: string) => {\n setSavingNewNode(true);\n if (treeContext?.onAddChild) {\n handleReturn(await treeContext.onAddChild(id, label));\n }\n setSavingNewNode(false);\n setShowNewNode(false);\n },\n [handleReturn, id, treeContext],\n );\n\n const renameNode = useCallback(\n async (newLabel: string) => {\n setRenaming(false);\n if (treeContext?.onRename) {\n setUpdatingNode(true);\n handleReturn(await treeContext.onRename(id, newLabel));\n setUpdatingNode(false);\n }\n },\n [handleReturn, id, treeContext],\n );\n\n const deleteThis = useCallback(async () => {\n if (treeContext?.onRemove) {\n setUpdatingNode(true);\n handleReturn(await treeContext.onRemove(id));\n setUpdatingNode(false);\n }\n }, [handleReturn, id, treeContext]);\n\n // Context actions\n const addChild = useCallback(() => {\n setShowNewNode(true);\n treeContext && treeContext.handleExpandClick(id, true);\n }, [id, treeContext]);\n useEffect(() => {\n if (showNewNode === true && newNameRef.current) newNameRef.current.focus();\n }, [showNewNode]);\n const renameThis = useCallback(() => {\n setRenaming(true);\n treeContext?.handleSelect(id);\n }, [id, treeContext]);\n\n // Context menu\n const menuItems = useMemo(() => {\n const menuItems: iMenuItem[] = [];\n if (canAddChildren) {\n menuItems.push({ label: 'Add', action: addChild });\n }\n if (canRename) {\n menuItems.push({ label: 'Rename', action: renameThis });\n }\n if (canRemove && (childNodes === undefined || childNodes.length === 0)) {\n menuItems.push({ label: 'Delete', action: deleteThis });\n }\n return menuItems;\n }, [addChild, canAddChildren, canRemove, canRename, childNodes, deleteThis, renameThis]);\n\n // Return node\n if (!treeContext) return <></>;\n return (\n <ContextMenuHandler menuItems={menuItems}>\n <div\n id={`${treeContext.id}-treenode-${id}`}\n className='treenode'\n >\n {error ? (\n <>\n <ExclamationCircleFill color='var(--bs-danger)' />{' '}\n {errorText && errorText !== '' ? errorText : 'An unknown error has occured'}\n </>\n ) : (\n <span>\n {childNodes !== undefined && childNodes.length > 0 ? (\n !expanded ? (\n <CaretRightFill\n id={`${treeContext.id}-treenode-caret-${id}`}\n role='button'\n color={nodeColour}\n aria-expanded={false}\n onClick={() => treeContext.handleExpandClick(id)}\n />\n ) : (\n <CaretDownFill\n id={`${treeContext.id}-treenode-caret-${id}`}\n role='button'\n aria-expanded={true}\n color={nodeColour}\n onClick={() => {\n treeContext.handleExpandClick(id);\n }}\n />\n )\n ) : (\n <CaretRight\n id={`${treeContext.id}-treenode-caret-${id}`}\n role='button'\n color={nodeColour}\n aria-expanded={false}\n aria-disabled={true}\n />\n )}\n {thisNode && (\n <div\n style={{ display: 'inline-block' }}\n onContextMenuCapture={() => treeContext.handleSelect(id)}\n onClickCapture={() => treeContext.handleSelect(id)}\n onFocusCapture={() => treeContext.handleSelect(id)}\n >\n <WordEntry\n id={`${treeContext.id}-treenode-entry-${id}`}\n ref={currentNameRef}\n value={thisNode.label}\n editing={renaming}\n saving={updatingNode}\n setValue={(ret) => renameNode(ret)}\n sendEscape={() => setRenaming(false)}\n style={{\n border: currentBorder,\n margin: currentBorder === '' ? '1px' : '',\n backgroundColor: currentBorder === '' ? '' : treeContext.textHighlight,\n }}\n />\n </div>\n )}\n </span>\n )}\n {childNodes !== undefined &&\n childNodes.map((h) => (\n <span\n key={h.id}\n id={`${treeContext.id}-treenode-child-${h.id}`}\n style={{\n marginLeft: '16px',\n display: 'block',\n maxHeight: expanded ? '99999px' : '0px',\n height: expanded ? 'auto' : '0px',\n overflowY: 'hidden',\n visibility: expanded ? 'inherit' : 'hidden',\n opacity: expanded ? 1 : 0,\n transition: 'visibility .3s, opacity .3s ease-in-out, max-height 0.3s ease-in-out',\n }}\n >\n <TreeNode\n id={h.id}\n canRemove={canRemoveChildren}\n canRename={canRenameChildren}\n canAddChildren={canAddChildren}\n canRemoveChildren={canRemoveChildren}\n canRenameChildren={canRenameChildren}\n />\n </span>\n ))}\n {showNewNode && (\n <div>\n <WordEntry\n style={{ marginLeft: '14px' }}\n id={`treenode-new-${id}`}\n ref={newNameRef}\n editing={true}\n setValue={(ret) => {\n confirmNewNode(ret);\n }}\n saving={savingNewNode}\n sendEscape={() => {\n setShowNewNode(false);\n }}\n />\n </div>\n )}\n </div>\n </ContextMenuHandler>\n );\n};\n","import { Key } from 'react';\nimport { TreeNodeBase } from '../components/interface';\n\nexport const getAncestors = (\n id: Key,\n included: TreeNodeBase[],\n hierarchyNodes: TreeNodeBase[],\n): TreeNodeBase[] => {\n // Get current node\n const current = hierarchyNodes.find((h) => h.id === id);\n if (current === undefined) return [];\n // Get parent node\n const parent = hierarchyNodes.find((h) => h.id === current.parentId);\n // Stop if no more parents\n return parent === undefined\n ? included\n : getAncestors(\n parent.id,\n [...included.filter((i) => i.id !== parent.id), parent],\n hierarchyNodes,\n );\n};\n","import { createContext, Key } from 'react';\nimport { iNodeUpdate, TreeNodeData } from './interface';\n\nexport interface TreeOfNodesContextProps<T> {\n id: string;\n nodeList: TreeNodeData<T>[];\n selectedId?: Key;\n handleSelect: (ret: Key) => void;\n expandedNodes: Key[];\n handleExpandClick: (ret: Key, force?: boolean) => void;\n onAddChild?: (parentId: Key, newName: string) => Promise<iNodeUpdate>;\n onRename?: (id: Key, newName: string) => Promise<iNodeUpdate>;\n onRemove?: (id: Key) => Promise<iNodeUpdate>;\n nodeHighlight: string;\n textHighlight: string;\n}\n\nexport const TreeOfNodesContext = createContext<TreeOfNodesContextProps<unknown> | undefined>(\n undefined,\n);\n","import React, { Key, useCallback, useEffect, useMemo, useState } from 'react';\nimport { Spinner } from 'react-bootstrap';\n\ninterface WordEntryProps {\n id: Key;\n value?: string;\n editing?: boolean;\n saving?: boolean;\n setValue?: (ret: string) => void;\n sendEscape?: () => void;\n style?: React.CSSProperties;\n}\n\nexport const WordEntry = React.forwardRef<HTMLInputElement, WordEntryProps>(\n ({ id, value, editing, saving, setValue, sendEscape, style }, ref): JSX.Element => {\n WordEntry.displayName = 'WordEntry';\n const currentStyle = useMemo<React.CSSProperties>(() => {\n return {\n display: 'inline-block',\n padding: '1px',\n paddingLeft: '3px',\n paddingRight: '3px',\n border: '1px',\n borderRadius: '3px',\n ...style,\n };\n }, [style]);\n\n const [currentValue, setCurrentValue] = useState<string>(value ?? '');\n useEffect(() => {\n setCurrentValue(value ?? '');\n }, [value]);\n\n const returnData = useCallback(() => {\n setValue && setValue(currentValue);\n }, [currentValue, setValue]);\n\n const keyPress = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.code === 'Escape') {\n setCurrentValue(value ?? '');\n sendEscape && sendEscape();\n } else if (e.code === 'Enter') {\n returnData();\n }\n },\n [returnData, sendEscape, value],\n );\n\n // Simple if not editing\n if (!editing) {\n return (\n <span\n style={currentStyle}\n id={String(id)}\n >\n {value}\n </span>\n );\n }\n\n return (\n <div\n style={currentStyle}\n id={`${id}-holder`}\n >\n {saving && (\n <Spinner\n id={`${id}-spinner`}\n size='sm'\n animation='border'\n />\n )}\n <input\n autoFocus\n id={String(id)}\n ref={ref}\n type='text'\n style={{\n lineHeight: '0.75rem',\n border: '1px dotted black',\n width: 'auto',\n minWidth: '0',\n }}\n value={currentValue}\n disabled={saving}\n onChange={(e) => setCurrentValue(e.currentTarget.value)}\n onBlur={returnData}\n onKeyDownCapture={keyPress}\n />\n </div>\n );\n },\n);\n","import { Key, useCallback, useEffect, useState } from 'react';\nimport { checkExpandedNodes } from '../functions/checkExpandedNodes';\nimport { iNodeUpdate, TreeNodeData } from './interface';\nimport { TreeNode } from './TreeNode';\nimport { TreeOfNodesContext } from './TreeOfNodesContext';\n\ninterface TreeOfNodesProps<T> {\n id: string;\n nodeList: TreeNodeData<T>[];\n roots: Key[];\n selectedId?: Key;\n handleSelect?: (ret: Key) => void;\n onAdd?: (parentId: Key, newName: string) => Promise<iNodeUpdate>;\n onRename?: (childId: Key, newName: string) => Promise<iNodeUpdate>;\n onRemove?: (childId: Key) => Promise<iNodeUpdate>;\n canAddRoot?: boolean;\n canRemoveRoot?: boolean;\n canRenameRoot?: boolean;\n canAddChildren?: boolean;\n canRemoveChildren?: boolean;\n canRenameChildren?: boolean;\n nodeHighlight?: string;\n textHighlight?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\nexport const TreeOfNodes = <T extends unknown>({\n id,\n nodeList,\n roots,\n // canAddRoot = false,\n canRemoveRoot = false,\n canRenameRoot = false,\n canAddChildren = false,\n canRemoveChildren = false,\n canRenameChildren = false,\n selectedId,\n handleSelect = () => {\n return;\n },\n onAdd,\n onRename,\n onRemove,\n nodeHighlight = 'red',\n textHighlight = 'rgba(255, 0, 0, 0.2)',\n}: TreeOfNodesProps<T>) => {\n const [expandedNodes, setExpandedNodes] = useState<Key[]>([]);\n useEffect(() => {\n if (selectedId) {\n // Check all nodes are showing that should be\n const shouldExpand = checkExpandedNodes(nodeList, selectedId, expandedNodes);\n shouldExpand.filter((n) => !expandedNodes.includes(n)).length > 0 &&\n setExpandedNodes(shouldExpand);\n }\n }, [expandedNodes, nodeList, selectedId]);\n\n // Change expansion and update contexts\n const changeExpand = useCallback(\n (eKey: Key, force?: boolean) => {\n const newExpandedNodes = [...expandedNodes];\n const ix = newExpandedNodes.findIndex((nKey) => nKey === eKey);\n if ((ix === -1 && force === undefined) || force === true) newExpandedNodes.push(eKey);\n else newExpandedNodes.splice(ix, 1);\n setExpandedNodes(newExpandedNodes);\n },\n [expandedNodes],\n );\n\n return (\n <TreeOfNodesContext.Provider\n value={{\n id: id,\n nodeList,\n selectedId,\n handleSelect,\n expandedNodes,\n handleExpandClick: (r, f) => changeExpand(r, f),\n onAddChild: onAdd,\n onRename,\n onRemove,\n nodeHighlight,\n textHighlight,\n }}\n >\n {roots.map((r) => (\n <TreeNode\n key={r}\n id={r}\n canRemove={canRemoveRoot}\n canAddChildren={canAddChildren}\n canRename={canRenameRoot}\n canRemoveChildren={canRemoveChildren}\n canRenameChildren={canRenameChildren}\n />\n ))}\n </TreeOfNodesContext.Provider>\n );\n};\n","import { TreeNodeBase } from 'components';\nimport { Key } from 'react';\nimport { getAncestors } from './getAncestors';\n\nexport const checkExpandedNodes = (\n nodeList: TreeNodeBase[],\n selectedId: Key,\n expandedNodes: Key[],\n): Key[] => {\n return [\n ...expandedNodes,\n ...getAncestors(selectedId, [], nodeList)\n .map((n) => n.id)\n .filter((k) => !expandedNodes.includes(k)),\n ].sort((a, b) => `${a}`.localeCompare(`${b}`));\n};\n","import { getAncestors } from './getAncestors';\n\nexport { getAncestors as getParents };\n"],"names":[],"version":3,"file":"main.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["src/main.ts","src/components/index.ts","src/components/TreeNode.tsx","src/functions/getAncestors.tsx","src/components/TreeOfNodesContext.ts","src/components/WordEntry.tsx","src/functions/getDescendentIds.ts","src/components/TreeOfNodes.tsx","src/functions/checkExpandedNodes.ts","src/functions/index.ts"],"sourcesContent":["export * from './components';\nexport * from './functions';\n","import { TreeNode } from './TreeNode';\nimport { TreeOfNodes } from './TreeOfNodes';\nimport { iNodeUpdate, TreeNodeBase, TreeNodeData } from './interface';\nimport { WordEntry } from './WordEntry';\n\nexport { TreeNode, TreeOfNodes, WordEntry };\nexport type { TreeNodeBase, TreeNodeData, iNodeUpdate };\n","import { ContextMenuHandler, iMenuItem } from '@asup/context-menu';\nimport { Key, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport {\n CaretDownFill,\n CaretRight,\n CaretRightFill,\n ExclamationCircleFill,\n} from 'react-bootstrap-icons';\nimport { getAncestors } from '../functions/getAncestors';\nimport { iNodeUpdate } from './interface';\nimport { TreeOfNodesContext } from './TreeOfNodesContext';\nimport { WordEntry } from './WordEntry';\nimport './TreeNode.css';\nimport { getDescendentIds } from '../functions/getDescendentIds';\n\ninterface TreeNodeProps {\n id: Key;\n indentLevel?: number;\n canRemove?: boolean;\n canRename?: boolean;\n canAddChildren?: boolean;\n canRemoveChildren?: boolean;\n canRenameChildren?: boolean;\n refresh?: () => void;\n}\n\nexport const TreeNode = ({\n id,\n canRemove,\n canRename,\n canAddChildren,\n canRemoveChildren,\n canRenameChildren,\n}: TreeNodeProps): JSX.Element => {\n // Contexts\n const treeContext = useContext(TreeOfNodesContext);\n\n // Node information\n const thisNode = useMemo(\n () => treeContext?.nodeList.find((n) => n.id === id),\n [id, treeContext?.nodeList],\n );\n const childNodes = useMemo(\n () => treeContext?.nodeList.filter((n) => n.parentId === id),\n [id, treeContext?.nodeList],\n );\n const descendents = useMemo(\n () => getDescendentIds(id, treeContext?.nodeList ?? []),\n [id, treeContext],\n );\n\n // State\n const [error, setError] = useState<boolean>(false);\n const [errorText, setErrotText] = useState<string>('');\n const expanded = useMemo(() => {\n return (treeContext?.expandedNodes.findIndex((e) => e === id) ?? -1) > -1;\n }, [id, treeContext?.expandedNodes]);\n\n // Checkbox\n const checkRef = useRef<HTMLInputElement | null>(null);\n useEffect(() => {\n if (checkRef.current) {\n if (treeContext?.selected.includes(id)) {\n checkRef.current.checked = true;\n checkRef.current.indeterminate = false;\n } else if (descendents.some((d) => treeContext?.selected.includes(d))) {\n checkRef.current.checked = false;\n checkRef.current.indeterminate = true;\n } else {\n checkRef.current.checked = false;\n checkRef.current.indeterminate = false;\n }\n }\n }, [descendents, id, treeContext?.selected]);\n\n // Apply selected border\n const currentBorder = useMemo<string>(() => {\n return treeContext?.selected.includes(id) ? '1px solid black' : '';\n }, [id, treeContext?.selected]);\n const nodeColour = useMemo<string | undefined>(() => {\n if (treeContext && treeContext.selected) {\n const anc = getAncestors(treeContext.selected, [], treeContext?.nodeList).map((n) => n.id);\n if ([...anc, treeContext.selected].includes(id)) return treeContext.nodeHighlight;\n }\n return;\n }, [id, treeContext]);\n\n // New node parameters\n const newNameRef = useRef<HTMLInputElement | null>(null);\n const [showNewNode, setShowNewNode] = useState<boolean>(false);\n const [savingNewNode, setSavingNewNode] = useState<boolean>(false);\n\n // Rename parameters\n const currentNameRef = useRef<HTMLInputElement | null>(null);\n const [renaming, setRenaming] = useState<boolean>(false);\n const [updatingNode, setUpdatingNode] = useState<boolean>(false);\n\n // Context functions\n const handleReturn = useCallback((ret: iNodeUpdate) => {\n if (!ret.success) {\n setError(true);\n setErrotText(ret.ErrorText ?? 'An unknown error has occured');\n } else {\n setError(false);\n setErrotText('');\n }\n }, []);\n\n const confirmNewNode = useCallback(\n async (label: string) => {\n setSavingNewNode(true);\n if (treeContext?.onAddChild) {\n handleReturn(await treeContext.onAddChild(id, label));\n }\n setSavingNewNode(false);\n setShowNewNode(false);\n },\n [handleReturn, id, treeContext],\n );\n\n const renameNode = useCallback(\n async (newLabel: string) => {\n setRenaming(false);\n if (treeContext?.onRename) {\n setUpdatingNode(true);\n handleReturn(await treeContext.onRename(id, newLabel));\n setUpdatingNode(false);\n }\n },\n [handleReturn, id, treeContext],\n );\n\n const deleteThis = useCallback(async () => {\n if (treeContext?.onRemove) {\n setUpdatingNode(true);\n handleReturn(await treeContext.onRemove(id));\n setUpdatingNode(false);\n }\n }, [handleReturn, id, treeContext]);\n\n // Context actions\n const addChild = useCallback(() => {\n setShowNewNode(true);\n treeContext && treeContext.handleExpandClick(id, true);\n }, [id, treeContext]);\n useEffect(() => {\n if (showNewNode === true && newNameRef.current) newNameRef.current.focus();\n }, [showNewNode]);\n const renameThis = useCallback(() => {\n setRenaming(true);\n treeContext?.handleSelect(id);\n }, [id, treeContext]);\n\n // Context menu\n const menuItems = useMemo(() => {\n const menuItems: iMenuItem[] = [];\n if (canAddChildren) {\n menuItems.push({ label: 'Add', action: addChild });\n }\n if (canRename) {\n menuItems.push({ label: 'Rename', action: renameThis });\n }\n if (canRemove && (childNodes === undefined || childNodes.length === 0)) {\n menuItems.push({ label: 'Delete', action: deleteThis });\n }\n return menuItems;\n }, [addChild, canAddChildren, canRemove, canRename, childNodes, deleteThis, renameThis]);\n\n // Return node\n if (!treeContext) return <></>;\n return (\n <ContextMenuHandler menuItems={menuItems}>\n <div\n id={`${treeContext.id}-treenode-${id}`}\n className='treenode'\n >\n {error ? (\n <>\n <ExclamationCircleFill color='var(--bs-danger)' /> {errorText}\n </>\n ) : (\n <div className='tree-of-nodes-node'>\n {treeContext.showCheckBox && (\n <input\n ref={checkRef}\n type='checkbox'\n role='checkbox'\n className='tree-of-nodes-checkbox'\n id={`${treeContext.id}-treenode-checkbox-${id}}`}\n onClick={() => {\n treeContext.handleSelect(descendents);\n }}\n />\n )}\n {childNodes !== undefined && childNodes.length > 0 ? (\n !expanded ? (\n <CaretRightFill\n id={`${treeContext.id}-treenode-caret-${id}`}\n className='tree-of-nodes-expander'\n role='button'\n color={nodeColour}\n aria-expanded={false}\n aria-label='Expander'\n onClick={() => treeContext.handleExpandClick(id)}\n />\n ) : (\n <CaretDownFill\n id={`${treeContext.id}-treenode-caret-${id}`}\n className='tree-of-nodes-expander'\n role='button'\n aria-expanded={true}\n aria-label='Expander'\n color={nodeColour}\n onClick={() => {\n treeContext.handleExpandClick(id);\n }}\n />\n )\n ) : (\n <CaretRight\n id={`${treeContext.id}-treenode-caret-${id}`}\n className='tree-of-nodes-expander'\n role='button'\n color={nodeColour}\n aria-expanded={false}\n aria-label='Disabled expander'\n aria-disabled={true}\n />\n )}\n {thisNode && (\n <div\n style={{ display: 'inline-block' }}\n onContextMenuCapture={() => treeContext.handleSelect(id)}\n onClickCapture={() => treeContext.handleSelect(id)}\n onFocusCapture={() => treeContext.handleSelect(id)}\n >\n <WordEntry\n id={`${treeContext.id}-treenode-entry-${id}`}\n ref={currentNameRef}\n value={thisNode.label}\n editing={renaming}\n saving={updatingNode}\n setValue={(ret) => renameNode(ret)}\n sendEscape={() => setRenaming(false)}\n style={{\n border: currentBorder,\n margin: currentBorder === '' ? '1px' : '',\n backgroundColor: currentBorder === '' ? '' : treeContext.textHighlight,\n }}\n />\n </div>\n )}\n </div>\n )}\n {childNodes !== undefined &&\n childNodes.map((h) => (\n <span\n key={h.id}\n id={`${treeContext.id}-treenode-child-${h.id}`}\n style={{\n marginLeft: '16px',\n display: 'block',\n maxHeight: expanded ? '99999px' : '0px',\n height: expanded ? 'auto' : '0px',\n overflowY: 'hidden',\n visibility: expanded ? 'inherit' : 'hidden',\n opacity: expanded ? 1 : 0,\n transition: 'visibility .3s, opacity .3s ease-in-out, max-height 0.3s ease-in-out',\n }}\n >\n <TreeNode\n id={h.id}\n canRemove={canRemoveChildren}\n canRename={canRenameChildren}\n canAddChildren={canAddChildren}\n canRemoveChildren={canRemoveChildren}\n canRenameChildren={canRenameChildren}\n />\n </span>\n ))}\n {showNewNode && (\n <div>\n <WordEntry\n style={{ marginLeft: '14px' }}\n id={`treenode-new-${id}`}\n ref={newNameRef}\n editing={true}\n setValue={(ret) => {\n confirmNewNode(ret);\n }}\n saving={savingNewNode}\n sendEscape={() => {\n setShowNewNode(false);\n }}\n />\n </div>\n )}\n </div>\n </ContextMenuHandler>\n );\n};\n\nTreeNode.displayName = 'TreeNode';\n","import { Key } from 'react';\nimport { TreeNodeBase } from '../components/interface';\n\nexport const getAncestors = (\n id: Key | Key[],\n included: TreeNodeBase[],\n hierarchyNodes: TreeNodeBase[],\n): TreeNodeBase[] => {\n const processIds = Array.isArray(id) ? id : [id];\n\n const current = processIds\n .map((i) => hierarchyNodes.find((h) => h.id === i))\n .filter((h) => h !== undefined) as TreeNodeBase[];\n if (current.length === 0) return included;\n\n const parents = (\n current\n .map((h) => h.parentId)\n .map((pid) => hierarchyNodes.find((h) => pid === h.id)) as TreeNodeBase[]\n ).filter((p) => p !== undefined) as TreeNodeBase[];\n if (parents.length === 0) return included;\n else\n return getAncestors(\n parents.map((p) => p.id),\n [...included, ...parents.filter((p) => !included.includes(p))],\n hierarchyNodes,\n );\n};\n","import { createContext, Key } from 'react';\nimport { iNodeUpdate, TreeNodeData } from './interface';\n\nexport interface TreeOfNodesContextProps<T> {\n id: string;\n nodeList: TreeNodeData<T>[];\n selected: Key[];\n showCheckBox: boolean;\n handleSelect: (ret: Key | Key[]) => void;\n expandedNodes: Key[];\n handleExpandClick: (ret: Key, force?: boolean) => void;\n onAddChild?: (parentId: Key, newName: string) => Promise<iNodeUpdate>;\n onRename?: (id: Key, newName: string) => Promise<iNodeUpdate>;\n onRemove?: (id: Key) => Promise<iNodeUpdate>;\n nodeHighlight: string;\n textHighlight: string;\n}\n\nexport const TreeOfNodesContext = createContext<TreeOfNodesContextProps<unknown> | undefined>(\n undefined,\n);\n","import React, { Key, useCallback, useEffect, useMemo, useState } from 'react';\nimport { Spinner } from 'react-bootstrap';\n\ninterface WordEntryProps {\n id: Key;\n value?: string;\n editing?: boolean;\n saving?: boolean;\n setValue?: (ret: string) => void;\n sendEscape?: () => void;\n style?: React.CSSProperties;\n}\n\nexport const WordEntry = React.forwardRef<HTMLInputElement, WordEntryProps>(\n ({ id, value, editing, saving, setValue, sendEscape, style }, ref): JSX.Element => {\n WordEntry.displayName = 'WordEntry';\n const currentStyle = useMemo<React.CSSProperties>(() => {\n return {\n display: 'inline-block',\n padding: '1px',\n paddingLeft: '3px',\n paddingRight: '3px',\n border: '1px',\n borderRadius: '3px',\n ...style,\n };\n }, [style]);\n\n const [currentValue, setCurrentValue] = useState<string>(value ?? '');\n useEffect(() => {\n setCurrentValue(value ?? '');\n }, [value]);\n\n const returnData = useCallback(() => {\n setValue && setValue(currentValue);\n }, [currentValue, setValue]);\n\n const keyPress = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.code === 'Escape') {\n setCurrentValue(value ?? '');\n sendEscape && sendEscape();\n } else if (e.code === 'Enter') {\n returnData();\n }\n },\n [returnData, sendEscape, value],\n );\n\n // Simple if not editing\n if (!editing) {\n return (\n <span\n style={currentStyle}\n id={String(id)}\n >\n {value}\n </span>\n );\n }\n\n return (\n <div\n style={currentStyle}\n id={`${id}-holder`}\n >\n {saving && (\n <Spinner\n id={`${id}-spinner`}\n size='sm'\n animation='border'\n />\n )}\n <input\n autoFocus\n id={String(id)}\n ref={ref}\n type='text'\n style={{\n lineHeight: '0.75rem',\n border: '1px dotted black',\n width: 'auto',\n minWidth: '0',\n }}\n value={currentValue}\n disabled={saving}\n onChange={(e) => setCurrentValue(e.currentTarget.value)}\n onBlur={returnData}\n onKeyDownCapture={keyPress}\n />\n </div>\n );\n },\n);\n\nWordEntry.displayName = 'WordEntry';\n","import { Key } from 'react';\nimport { TreeNodeBase } from '../components/interface';\n\nexport const getDescendentIds = (id: Key | Key[], hierarchyNodes: TreeNodeBase[]): Key[] => {\n const processIds = Array.isArray(id) ? id : [id];\n const newChildren = hierarchyNodes\n .filter(\n (h) =>\n h.parentId !== undefined && processIds.includes(h.parentId) && !processIds.includes(h.id),\n )\n .map((h) => h.id);\n return newChildren.length === 0\n ? processIds\n : getDescendentIds([...processIds, ...newChildren], hierarchyNodes);\n};\n","import { Key, useCallback, useEffect, useMemo, useState } from 'react';\nimport { checkExpandedNodes } from '../functions/checkExpandedNodes';\nimport { iNodeUpdate, TreeNodeData } from './interface';\nimport { TreeNode } from './TreeNode';\nimport { TreeOfNodesContext } from './TreeOfNodesContext';\n\ninterface TreeOfNodesProps<T> {\n id: string;\n nodeList: TreeNodeData<T>[];\n roots: Key[];\n showCheckBox?: boolean;\n selected?: Key | Key[];\n handleSelect?: (ret: Key | Key[]) => void;\n onAdd?: (parentId: Key, newName: string) => Promise<iNodeUpdate>;\n onRename?: (childId: Key, newName: string) => Promise<iNodeUpdate>;\n onRemove?: (childId: Key) => Promise<iNodeUpdate>;\n canRemoveRoot?: boolean;\n canRenameRoot?: boolean;\n canAddChildren?: boolean;\n canRemoveChildren?: boolean;\n canRenameChildren?: boolean;\n nodeHighlight?: string;\n textHighlight?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\nexport const TreeOfNodes = <T extends unknown>({\n id,\n nodeList,\n roots,\n selected = [],\n showCheckBox = false,\n handleSelect = () => {\n return;\n },\n onAdd,\n onRename,\n onRemove,\n canRemoveRoot = false,\n canRenameRoot = false,\n canAddChildren = false,\n canRemoveChildren = false,\n canRenameChildren = false,\n nodeHighlight = 'red',\n textHighlight = 'rgba(255, 0, 0, 0.2)',\n}: TreeOfNodesProps<T>) => {\n const [expandedNodes, setExpandedNodes] = useState<Key[]>([]);\n const selectedArray = useMemo(\n () => (Array.isArray(selected) ? selected : [selected]),\n [selected],\n );\n useEffect(() => {\n if (selectedArray.length > 0) {\n // Check all nodes are showing that should be\n const shouldExpand = checkExpandedNodes(nodeList, selectedArray, expandedNodes);\n shouldExpand.filter((n) => !expandedNodes.includes(n)).length > 0 &&\n setExpandedNodes(shouldExpand);\n }\n }, [expandedNodes, nodeList, selectedArray]);\n\n // Change expansion and update contexts\n const changeExpand = useCallback(\n (eKey: Key, force?: boolean) => {\n const newExpandedNodes = [...expandedNodes];\n const ix = newExpandedNodes.findIndex((nKey) => nKey === eKey);\n if ((ix === -1 && force === undefined) || force === true) newExpandedNodes.push(eKey);\n else newExpandedNodes.splice(ix, 1);\n setExpandedNodes(newExpandedNodes);\n },\n [expandedNodes],\n );\n\n return (\n <TreeOfNodesContext.Provider\n value={{\n id: id,\n nodeList,\n selected: selectedArray,\n showCheckBox,\n handleSelect,\n expandedNodes,\n handleExpandClick: (r, f) => changeExpand(r, f),\n onAddChild: onAdd,\n onRename,\n onRemove,\n nodeHighlight,\n textHighlight,\n }}\n >\n {roots.map((r) => (\n <TreeNode\n key={r}\n id={r}\n canRemove={canRemoveRoot}\n canAddChildren={canAddChildren}\n canRename={canRenameRoot}\n canRemoveChildren={canRemoveChildren}\n canRenameChildren={canRenameChildren}\n />\n ))}\n </TreeOfNodesContext.Provider>\n );\n};\n\nTreeOfNodes.displayName = 'TreeOfNodes';\n","import { TreeNodeBase } from 'components';\nimport { Key } from 'react';\nimport { getAncestors } from './getAncestors';\n\nexport const checkExpandedNodes = (\n nodeList: TreeNodeBase[],\n selected: Key | Key[],\n expandedNodes: Key[],\n): Key[] => {\n return [\n ...expandedNodes,\n ...getAncestors(selected, [], nodeList)\n .map((n) => n.id)\n .filter((k) => !expandedNodes.includes(k)),\n ].sort((a, b) => `${a}`.localeCompare(`${b}`));\n};\n","import { getAncestors } from './getAncestors';\n\nexport { getAncestors as getParents };\n"],"names":[],"version":3,"file":"main.js.map"}
|
package/dist/main.css
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/main.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
import "./main.css";
|
|
1
2
|
import {jsx as $duWW8$jsx, Fragment as $duWW8$Fragment, jsxs as $duWW8$jsxs} from "react/jsx-runtime";
|
|
2
3
|
import {ContextMenuHandler as $duWW8$ContextMenuHandler} from "@asup/context-menu";
|
|
3
|
-
import $duWW8$react, {useContext as $duWW8$useContext, useMemo as $duWW8$useMemo, useState as $duWW8$useState, useRef as $duWW8$useRef,
|
|
4
|
+
import $duWW8$react, {useContext as $duWW8$useContext, useMemo as $duWW8$useMemo, useState as $duWW8$useState, useRef as $duWW8$useRef, useEffect as $duWW8$useEffect, useCallback as $duWW8$useCallback, createContext as $duWW8$createContext} from "react";
|
|
4
5
|
import {ExclamationCircleFill as $duWW8$ExclamationCircleFill, CaretRightFill as $duWW8$CaretRightFill, CaretDownFill as $duWW8$CaretDownFill, CaretRight as $duWW8$CaretRight} from "react-bootstrap-icons";
|
|
5
6
|
import {Spinner as $duWW8$Spinner} from "react-bootstrap";
|
|
6
7
|
|
|
@@ -17,15 +18,16 @@ $parcel$export($b65191f6d0a0a991$exports, "WordEntry", function () { return $847
|
|
|
17
18
|
|
|
18
19
|
|
|
19
20
|
const $6303f0814ed0ce8b$export$c6fd3ab3f44300d0 = (id, included, hierarchyNodes)=>{
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
21
|
+
const processIds = Array.isArray(id) ? id : [
|
|
22
|
+
id
|
|
23
|
+
];
|
|
24
|
+
const current = processIds.map((i)=>hierarchyNodes.find((h)=>h.id === i)).filter((h)=>h !== undefined);
|
|
25
|
+
if (current.length === 0) return included;
|
|
26
|
+
const parents = current.map((h)=>h.parentId).map((pid)=>hierarchyNodes.find((h)=>pid === h.id)).filter((p)=>p !== undefined);
|
|
27
|
+
if (parents.length === 0) return included;
|
|
28
|
+
else return $6303f0814ed0ce8b$export$c6fd3ab3f44300d0(parents.map((p)=>p.id), [
|
|
29
|
+
...included,
|
|
30
|
+
...parents.filter((p)=>!included.includes(p))
|
|
29
31
|
], hierarchyNodes);
|
|
30
32
|
};
|
|
31
33
|
|
|
@@ -37,7 +39,7 @@ const $886f402bccb0fd30$export$29ec378200e05207 = (0, $duWW8$createContext)(unde
|
|
|
37
39
|
|
|
38
40
|
|
|
39
41
|
|
|
40
|
-
const $84765747a8c6bfe2$export$14f190ac910bde69 = /*#__PURE__*/ (0, $duWW8$react).forwardRef(({ id: id
|
|
42
|
+
const $84765747a8c6bfe2$export$14f190ac910bde69 = /*#__PURE__*/ (0, $duWW8$react).forwardRef(({ id: id, value: value, editing: editing, saving: saving, setValue: setValue, sendEscape: sendEscape, style: style }, ref)=>{
|
|
41
43
|
$84765747a8c6bfe2$export$14f190ac910bde69.displayName = "WordEntry";
|
|
42
44
|
const currentStyle = (0, $duWW8$useMemo)(()=>{
|
|
43
45
|
return {
|
|
@@ -109,9 +111,23 @@ const $84765747a8c6bfe2$export$14f190ac910bde69 = /*#__PURE__*/ (0, $duWW8$react
|
|
|
109
111
|
]
|
|
110
112
|
});
|
|
111
113
|
});
|
|
114
|
+
$84765747a8c6bfe2$export$14f190ac910bde69.displayName = "WordEntry";
|
|
112
115
|
|
|
113
116
|
|
|
114
|
-
|
|
117
|
+
|
|
118
|
+
const $33abc00b1ca5c55c$export$bd923365b402cb04 = (id, hierarchyNodes)=>{
|
|
119
|
+
const processIds = Array.isArray(id) ? id : [
|
|
120
|
+
id
|
|
121
|
+
];
|
|
122
|
+
const newChildren = hierarchyNodes.filter((h)=>h.parentId !== undefined && processIds.includes(h.parentId) && !processIds.includes(h.id)).map((h)=>h.id);
|
|
123
|
+
return newChildren.length === 0 ? processIds : $33abc00b1ca5c55c$export$bd923365b402cb04([
|
|
124
|
+
...processIds,
|
|
125
|
+
...newChildren
|
|
126
|
+
], hierarchyNodes);
|
|
127
|
+
};
|
|
128
|
+
|
|
129
|
+
|
|
130
|
+
const $47c36cf4281201f5$export$2eba8ec3a333fdbb = ({ id: id, canRemove: canRemove, canRename: canRename, canAddChildren: canAddChildren, canRemoveChildren: canRemoveChildren, canRenameChildren: canRenameChildren })=>{
|
|
115
131
|
// Contexts
|
|
116
132
|
const treeContext = (0, $duWW8$useContext)((0, $886f402bccb0fd30$export$29ec378200e05207));
|
|
117
133
|
// Node information
|
|
@@ -127,9 +143,16 @@ const $47c36cf4281201f5$export$2eba8ec3a333fdbb = ({ id: id , canRemove: canRemo
|
|
|
127
143
|
id,
|
|
128
144
|
treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList
|
|
129
145
|
]);
|
|
146
|
+
var _treeContext_nodeList;
|
|
147
|
+
const descendents = (0, $duWW8$useMemo)(()=>{
|
|
148
|
+
return (0, $33abc00b1ca5c55c$export$bd923365b402cb04)(id, (_treeContext_nodeList = treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList) !== null && _treeContext_nodeList !== void 0 ? _treeContext_nodeList : []);
|
|
149
|
+
}, [
|
|
150
|
+
id,
|
|
151
|
+
treeContext
|
|
152
|
+
]);
|
|
130
153
|
// State
|
|
131
154
|
const [error, setError] = (0, $duWW8$useState)(false);
|
|
132
|
-
const [errorText, setErrotText] = (0, $duWW8$useState)(
|
|
155
|
+
const [errorText, setErrotText] = (0, $duWW8$useState)("");
|
|
133
156
|
const expanded = (0, $duWW8$useMemo)(()=>{
|
|
134
157
|
var _treeContext_expandedNodes_findIndex;
|
|
135
158
|
return ((_treeContext_expandedNodes_findIndex = treeContext === null || treeContext === void 0 ? void 0 : treeContext.expandedNodes.findIndex((e)=>e === id)) !== null && _treeContext_expandedNodes_findIndex !== void 0 ? _treeContext_expandedNodes_findIndex : -1) > -1;
|
|
@@ -137,19 +160,41 @@ const $47c36cf4281201f5$export$2eba8ec3a333fdbb = ({ id: id , canRemove: canRemo
|
|
|
137
160
|
id,
|
|
138
161
|
treeContext === null || treeContext === void 0 ? void 0 : treeContext.expandedNodes
|
|
139
162
|
]);
|
|
140
|
-
//
|
|
163
|
+
// Checkbox
|
|
164
|
+
const checkRef = (0, $duWW8$useRef)(null);
|
|
165
|
+
(0, $duWW8$useEffect)(()=>{
|
|
166
|
+
if (checkRef.current) {
|
|
167
|
+
if (treeContext === null || treeContext === void 0 ? void 0 : treeContext.selected.includes(id)) {
|
|
168
|
+
checkRef.current.checked = true;
|
|
169
|
+
checkRef.current.indeterminate = false;
|
|
170
|
+
} else if (descendents.some((d)=>{
|
|
171
|
+
return treeContext === null || treeContext === void 0 ? void 0 : treeContext.selected.includes(d);
|
|
172
|
+
})) {
|
|
173
|
+
checkRef.current.checked = false;
|
|
174
|
+
checkRef.current.indeterminate = true;
|
|
175
|
+
} else {
|
|
176
|
+
checkRef.current.checked = false;
|
|
177
|
+
checkRef.current.indeterminate = false;
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
}, [
|
|
181
|
+
descendents,
|
|
182
|
+
id,
|
|
183
|
+
treeContext === null || treeContext === void 0 ? void 0 : treeContext.selected
|
|
184
|
+
]);
|
|
185
|
+
// Apply selected border
|
|
141
186
|
const currentBorder = (0, $duWW8$useMemo)(()=>{
|
|
142
|
-
return
|
|
187
|
+
return (treeContext === null || treeContext === void 0 ? void 0 : treeContext.selected.includes(id)) ? "1px solid black" : "";
|
|
143
188
|
}, [
|
|
144
189
|
id,
|
|
145
|
-
treeContext === null || treeContext === void 0 ? void 0 : treeContext.
|
|
190
|
+
treeContext === null || treeContext === void 0 ? void 0 : treeContext.selected
|
|
146
191
|
]);
|
|
147
192
|
const nodeColour = (0, $duWW8$useMemo)(()=>{
|
|
148
|
-
if (treeContext && treeContext.
|
|
149
|
-
const anc = (0, $6303f0814ed0ce8b$export$c6fd3ab3f44300d0)(treeContext.
|
|
193
|
+
if (treeContext && treeContext.selected) {
|
|
194
|
+
const anc = (0, $6303f0814ed0ce8b$export$c6fd3ab3f44300d0)(treeContext.selected, [], treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList).map((n)=>n.id);
|
|
150
195
|
if ([
|
|
151
196
|
...anc,
|
|
152
|
-
treeContext.
|
|
197
|
+
treeContext.selected
|
|
153
198
|
].includes(id)) return treeContext.nodeHighlight;
|
|
154
199
|
}
|
|
155
200
|
return;
|
|
@@ -173,7 +218,7 @@ const $47c36cf4281201f5$export$2eba8ec3a333fdbb = ({ id: id , canRemove: canRemo
|
|
|
173
218
|
setErrotText((_ret_ErrorText = ret.ErrorText) !== null && _ret_ErrorText !== void 0 ? _ret_ErrorText : "An unknown error has occured");
|
|
174
219
|
} else {
|
|
175
220
|
setError(false);
|
|
176
|
-
setErrotText(
|
|
221
|
+
setErrotText("");
|
|
177
222
|
}
|
|
178
223
|
}, []);
|
|
179
224
|
const confirmNewNode = (0, $duWW8$useCallback)(async (label)=>{
|
|
@@ -268,29 +313,46 @@ const $47c36cf4281201f5$export$2eba8ec3a333fdbb = ({ id: id , canRemove: canRemo
|
|
|
268
313
|
color: "var(--bs-danger)"
|
|
269
314
|
}),
|
|
270
315
|
" ",
|
|
271
|
-
errorText
|
|
316
|
+
errorText
|
|
272
317
|
]
|
|
273
|
-
}) : /*#__PURE__*/ (0, $duWW8$jsxs)("
|
|
318
|
+
}) : /*#__PURE__*/ (0, $duWW8$jsxs)("div", {
|
|
319
|
+
className: "tree-of-nodes-node",
|
|
274
320
|
children: [
|
|
321
|
+
treeContext.showCheckBox && /*#__PURE__*/ (0, $duWW8$jsx)("input", {
|
|
322
|
+
ref: checkRef,
|
|
323
|
+
type: "checkbox",
|
|
324
|
+
role: "checkbox",
|
|
325
|
+
className: "tree-of-nodes-checkbox",
|
|
326
|
+
id: `${treeContext.id}-treenode-checkbox-${id}}`,
|
|
327
|
+
onClick: ()=>{
|
|
328
|
+
treeContext.handleSelect(descendents);
|
|
329
|
+
}
|
|
330
|
+
}),
|
|
275
331
|
childNodes !== undefined && childNodes.length > 0 ? !expanded ? /*#__PURE__*/ (0, $duWW8$jsx)((0, $duWW8$CaretRightFill), {
|
|
276
332
|
id: `${treeContext.id}-treenode-caret-${id}`,
|
|
333
|
+
className: "tree-of-nodes-expander",
|
|
277
334
|
role: "button",
|
|
278
335
|
color: nodeColour,
|
|
279
336
|
"aria-expanded": false,
|
|
337
|
+
"aria-label": "Expander",
|
|
280
338
|
onClick: ()=>treeContext.handleExpandClick(id)
|
|
281
339
|
}) : /*#__PURE__*/ (0, $duWW8$jsx)((0, $duWW8$CaretDownFill), {
|
|
282
340
|
id: `${treeContext.id}-treenode-caret-${id}`,
|
|
341
|
+
className: "tree-of-nodes-expander",
|
|
283
342
|
role: "button",
|
|
284
343
|
"aria-expanded": true,
|
|
344
|
+
"aria-label": "Expander",
|
|
285
345
|
color: nodeColour,
|
|
286
346
|
onClick: ()=>{
|
|
287
347
|
treeContext.handleExpandClick(id);
|
|
288
348
|
}
|
|
289
349
|
}) : /*#__PURE__*/ (0, $duWW8$jsx)((0, $duWW8$CaretRight), {
|
|
290
350
|
id: `${treeContext.id}-treenode-caret-${id}`,
|
|
351
|
+
className: "tree-of-nodes-expander",
|
|
291
352
|
role: "button",
|
|
292
353
|
color: nodeColour,
|
|
293
354
|
"aria-expanded": false,
|
|
355
|
+
"aria-label": "Disabled expander",
|
|
294
356
|
"aria-disabled": true
|
|
295
357
|
}),
|
|
296
358
|
thisNode && /*#__PURE__*/ (0, $duWW8$jsx)("div", {
|
|
@@ -359,36 +421,41 @@ const $47c36cf4281201f5$export$2eba8ec3a333fdbb = ({ id: id , canRemove: canRemo
|
|
|
359
421
|
})
|
|
360
422
|
});
|
|
361
423
|
};
|
|
424
|
+
$47c36cf4281201f5$export$2eba8ec3a333fdbb.displayName = "TreeNode";
|
|
362
425
|
|
|
363
426
|
|
|
364
427
|
|
|
365
428
|
|
|
366
429
|
|
|
367
|
-
const $c7008d808d3e1c7a$export$40c47a7ac5f85aba = (nodeList,
|
|
430
|
+
const $c7008d808d3e1c7a$export$40c47a7ac5f85aba = (nodeList, selected, expandedNodes)=>{
|
|
368
431
|
return [
|
|
369
432
|
...expandedNodes,
|
|
370
|
-
...(0, $6303f0814ed0ce8b$export$c6fd3ab3f44300d0)(
|
|
433
|
+
...(0, $6303f0814ed0ce8b$export$c6fd3ab3f44300d0)(selected, [], nodeList).map((n)=>n.id).filter((k)=>!expandedNodes.includes(k))
|
|
371
434
|
].sort((a, b)=>`${a}`.localeCompare(`${b}`));
|
|
372
435
|
};
|
|
373
436
|
|
|
374
437
|
|
|
375
438
|
|
|
376
439
|
|
|
377
|
-
const $ba47aaf387735a90$export$5580fff3e08a8be5 = ({ id: id
|
|
378
|
-
canRemoveRoot = false , canRenameRoot: canRenameRoot = false , canAddChildren: canAddChildren = false , canRemoveChildren: canRemoveChildren = false , canRenameChildren: canRenameChildren = false , selectedId: selectedId , handleSelect: handleSelect = ()=>{
|
|
440
|
+
const $ba47aaf387735a90$export$5580fff3e08a8be5 = ({ id: id, nodeList: nodeList, roots: roots, selected: selected = [], showCheckBox: showCheckBox = false, handleSelect: handleSelect = ()=>{
|
|
379
441
|
return;
|
|
380
|
-
}
|
|
442
|
+
}, onAdd: onAdd, onRename: onRename, onRemove: onRemove, canRemoveRoot: canRemoveRoot = false, canRenameRoot: canRenameRoot = false, canAddChildren: canAddChildren = false, canRemoveChildren: canRemoveChildren = false, canRenameChildren: canRenameChildren = false, nodeHighlight: nodeHighlight = "red", textHighlight: textHighlight = "rgba(255, 0, 0, 0.2)" })=>{
|
|
381
443
|
const [expandedNodes, setExpandedNodes] = (0, $duWW8$useState)([]);
|
|
444
|
+
const selectedArray = (0, $duWW8$useMemo)(()=>Array.isArray(selected) ? selected : [
|
|
445
|
+
selected
|
|
446
|
+
], [
|
|
447
|
+
selected
|
|
448
|
+
]);
|
|
382
449
|
(0, $duWW8$useEffect)(()=>{
|
|
383
|
-
if (
|
|
450
|
+
if (selectedArray.length > 0) {
|
|
384
451
|
// Check all nodes are showing that should be
|
|
385
|
-
const shouldExpand = (0, $c7008d808d3e1c7a$export$40c47a7ac5f85aba)(nodeList,
|
|
452
|
+
const shouldExpand = (0, $c7008d808d3e1c7a$export$40c47a7ac5f85aba)(nodeList, selectedArray, expandedNodes);
|
|
386
453
|
shouldExpand.filter((n)=>!expandedNodes.includes(n)).length > 0 && setExpandedNodes(shouldExpand);
|
|
387
454
|
}
|
|
388
455
|
}, [
|
|
389
456
|
expandedNodes,
|
|
390
457
|
nodeList,
|
|
391
|
-
|
|
458
|
+
selectedArray
|
|
392
459
|
]);
|
|
393
460
|
// Change expansion and update contexts
|
|
394
461
|
const changeExpand = (0, $duWW8$useCallback)((eKey, force)=>{
|
|
@@ -406,7 +473,8 @@ canRemoveRoot = false , canRenameRoot: canRenameRoot = false , canAddChildren: c
|
|
|
406
473
|
value: {
|
|
407
474
|
id: id,
|
|
408
475
|
nodeList: nodeList,
|
|
409
|
-
|
|
476
|
+
selected: selectedArray,
|
|
477
|
+
showCheckBox: showCheckBox,
|
|
410
478
|
handleSelect: handleSelect,
|
|
411
479
|
expandedNodes: expandedNodes,
|
|
412
480
|
handleExpandClick: (r, f)=>changeExpand(r, f),
|
|
@@ -426,6 +494,7 @@ canRemoveRoot = false , canRenameRoot: canRenameRoot = false , canAddChildren: c
|
|
|
426
494
|
}, r))
|
|
427
495
|
});
|
|
428
496
|
};
|
|
497
|
+
$ba47aaf387735a90$export$5580fff3e08a8be5.displayName = "TreeOfNodes";
|
|
429
498
|
|
|
430
499
|
|
|
431
500
|
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["src/main.ts","src/components/index.ts","src/components/TreeNode.tsx","src/functions/getAncestors.tsx","src/components/TreeOfNodesContext.ts","src/components/WordEntry.tsx","src/components/TreeOfNodes.tsx","src/functions/checkExpandedNodes.ts","src/functions/index.ts"],"sourcesContent":["export * from './components';\nexport * from './functions';\n","import { TreeNode } from './TreeNode';\nimport { TreeOfNodes } from './TreeOfNodes';\nimport { iNodeUpdate, TreeNodeBase, TreeNodeData } from './interface';\nimport { WordEntry } from './WordEntry';\n\nexport { TreeNode, TreeOfNodes, WordEntry };\nexport type { TreeNodeBase, TreeNodeData, iNodeUpdate };\n","import { ContextMenuHandler, iMenuItem } from '@asup/context-menu';\nimport { Key, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport {\n CaretDownFill,\n CaretRight,\n CaretRightFill,\n ExclamationCircleFill,\n} from 'react-bootstrap-icons';\nimport { getAncestors } from '../functions/getAncestors';\nimport { iNodeUpdate } from './interface';\nimport { TreeOfNodesContext } from './TreeOfNodesContext';\nimport { WordEntry } from './WordEntry';\n\ninterface TreeNodeProps {\n id: Key;\n indentLevel?: number;\n canRemove?: boolean;\n canRename?: boolean;\n canAddChildren?: boolean;\n canRemoveChildren?: boolean;\n canRenameChildren?: boolean;\n refresh?: () => void;\n}\n\nexport const TreeNode = ({\n id,\n canRemove,\n canRename,\n canAddChildren,\n canRemoveChildren,\n canRenameChildren,\n}: TreeNodeProps): JSX.Element => {\n // Contexts\n const treeContext = useContext(TreeOfNodesContext);\n\n // Node information\n const thisNode = useMemo(\n () => treeContext?.nodeList.find((n) => n.id === id),\n [id, treeContext?.nodeList],\n );\n const childNodes = useMemo(\n () => treeContext?.nodeList.filter((n) => n.parentId === id),\n [id, treeContext?.nodeList],\n );\n\n // State\n const [error, setError] = useState<boolean>(false);\n const [errorText, setErrotText] = useState<string | null>(null);\n const expanded = useMemo(() => {\n return (treeContext?.expandedNodes.findIndex((e) => e === id) ?? -1) > -1;\n }, [id, treeContext?.expandedNodes]);\n\n // // Apply selected borer\n const currentBorder = useMemo<string>(() => {\n return id === treeContext?.selectedId ? '1px solid black' : '';\n }, [id, treeContext?.selectedId]);\n const nodeColour = useMemo<string | undefined>(() => {\n if (treeContext && treeContext.selectedId) {\n const anc = getAncestors(treeContext.selectedId, [], treeContext?.nodeList).map((n) => n.id);\n if ([...anc, treeContext.selectedId].includes(id)) return treeContext.nodeHighlight;\n }\n return;\n }, [id, treeContext]);\n\n // New node parameters\n const newNameRef = useRef<HTMLInputElement | null>(null);\n const [showNewNode, setShowNewNode] = useState<boolean>(false);\n const [savingNewNode, setSavingNewNode] = useState<boolean>(false);\n\n // Rename parameters\n const currentNameRef = useRef<HTMLInputElement | null>(null);\n const [renaming, setRenaming] = useState<boolean>(false);\n const [updatingNode, setUpdatingNode] = useState<boolean>(false);\n\n // Context functions\n const handleReturn = useCallback((ret: iNodeUpdate) => {\n if (!ret.success) {\n setError(true);\n setErrotText(ret.ErrorText ?? 'An unknown error has occured');\n } else {\n setError(false);\n setErrotText(null);\n }\n }, []);\n\n const confirmNewNode = useCallback(\n async (label: string) => {\n setSavingNewNode(true);\n if (treeContext?.onAddChild) {\n handleReturn(await treeContext.onAddChild(id, label));\n }\n setSavingNewNode(false);\n setShowNewNode(false);\n },\n [handleReturn, id, treeContext],\n );\n\n const renameNode = useCallback(\n async (newLabel: string) => {\n setRenaming(false);\n if (treeContext?.onRename) {\n setUpdatingNode(true);\n handleReturn(await treeContext.onRename(id, newLabel));\n setUpdatingNode(false);\n }\n },\n [handleReturn, id, treeContext],\n );\n\n const deleteThis = useCallback(async () => {\n if (treeContext?.onRemove) {\n setUpdatingNode(true);\n handleReturn(await treeContext.onRemove(id));\n setUpdatingNode(false);\n }\n }, [handleReturn, id, treeContext]);\n\n // Context actions\n const addChild = useCallback(() => {\n setShowNewNode(true);\n treeContext && treeContext.handleExpandClick(id, true);\n }, [id, treeContext]);\n useEffect(() => {\n if (showNewNode === true && newNameRef.current) newNameRef.current.focus();\n }, [showNewNode]);\n const renameThis = useCallback(() => {\n setRenaming(true);\n treeContext?.handleSelect(id);\n }, [id, treeContext]);\n\n // Context menu\n const menuItems = useMemo(() => {\n const menuItems: iMenuItem[] = [];\n if (canAddChildren) {\n menuItems.push({ label: 'Add', action: addChild });\n }\n if (canRename) {\n menuItems.push({ label: 'Rename', action: renameThis });\n }\n if (canRemove && (childNodes === undefined || childNodes.length === 0)) {\n menuItems.push({ label: 'Delete', action: deleteThis });\n }\n return menuItems;\n }, [addChild, canAddChildren, canRemove, canRename, childNodes, deleteThis, renameThis]);\n\n // Return node\n if (!treeContext) return <></>;\n return (\n <ContextMenuHandler menuItems={menuItems}>\n <div\n id={`${treeContext.id}-treenode-${id}`}\n className='treenode'\n >\n {error ? (\n <>\n <ExclamationCircleFill color='var(--bs-danger)' />{' '}\n {errorText && errorText !== '' ? errorText : 'An unknown error has occured'}\n </>\n ) : (\n <span>\n {childNodes !== undefined && childNodes.length > 0 ? (\n !expanded ? (\n <CaretRightFill\n id={`${treeContext.id}-treenode-caret-${id}`}\n role='button'\n color={nodeColour}\n aria-expanded={false}\n onClick={() => treeContext.handleExpandClick(id)}\n />\n ) : (\n <CaretDownFill\n id={`${treeContext.id}-treenode-caret-${id}`}\n role='button'\n aria-expanded={true}\n color={nodeColour}\n onClick={() => {\n treeContext.handleExpandClick(id);\n }}\n />\n )\n ) : (\n <CaretRight\n id={`${treeContext.id}-treenode-caret-${id}`}\n role='button'\n color={nodeColour}\n aria-expanded={false}\n aria-disabled={true}\n />\n )}\n {thisNode && (\n <div\n style={{ display: 'inline-block' }}\n onContextMenuCapture={() => treeContext.handleSelect(id)}\n onClickCapture={() => treeContext.handleSelect(id)}\n onFocusCapture={() => treeContext.handleSelect(id)}\n >\n <WordEntry\n id={`${treeContext.id}-treenode-entry-${id}`}\n ref={currentNameRef}\n value={thisNode.label}\n editing={renaming}\n saving={updatingNode}\n setValue={(ret) => renameNode(ret)}\n sendEscape={() => setRenaming(false)}\n style={{\n border: currentBorder,\n margin: currentBorder === '' ? '1px' : '',\n backgroundColor: currentBorder === '' ? '' : treeContext.textHighlight,\n }}\n />\n </div>\n )}\n </span>\n )}\n {childNodes !== undefined &&\n childNodes.map((h) => (\n <span\n key={h.id}\n id={`${treeContext.id}-treenode-child-${h.id}`}\n style={{\n marginLeft: '16px',\n display: 'block',\n maxHeight: expanded ? '99999px' : '0px',\n height: expanded ? 'auto' : '0px',\n overflowY: 'hidden',\n visibility: expanded ? 'inherit' : 'hidden',\n opacity: expanded ? 1 : 0,\n transition: 'visibility .3s, opacity .3s ease-in-out, max-height 0.3s ease-in-out',\n }}\n >\n <TreeNode\n id={h.id}\n canRemove={canRemoveChildren}\n canRename={canRenameChildren}\n canAddChildren={canAddChildren}\n canRemoveChildren={canRemoveChildren}\n canRenameChildren={canRenameChildren}\n />\n </span>\n ))}\n {showNewNode && (\n <div>\n <WordEntry\n style={{ marginLeft: '14px' }}\n id={`treenode-new-${id}`}\n ref={newNameRef}\n editing={true}\n setValue={(ret) => {\n confirmNewNode(ret);\n }}\n saving={savingNewNode}\n sendEscape={() => {\n setShowNewNode(false);\n }}\n />\n </div>\n )}\n </div>\n </ContextMenuHandler>\n );\n};\n","import { Key } from 'react';\nimport { TreeNodeBase } from '../components/interface';\n\nexport const getAncestors = (\n id: Key,\n included: TreeNodeBase[],\n hierarchyNodes: TreeNodeBase[],\n): TreeNodeBase[] => {\n // Get current node\n const current = hierarchyNodes.find((h) => h.id === id);\n if (current === undefined) return [];\n // Get parent node\n const parent = hierarchyNodes.find((h) => h.id === current.parentId);\n // Stop if no more parents\n return parent === undefined\n ? included\n : getAncestors(\n parent.id,\n [...included.filter((i) => i.id !== parent.id), parent],\n hierarchyNodes,\n );\n};\n","import { createContext, Key } from 'react';\nimport { iNodeUpdate, TreeNodeData } from './interface';\n\nexport interface TreeOfNodesContextProps<T> {\n id: string;\n nodeList: TreeNodeData<T>[];\n selectedId?: Key;\n handleSelect: (ret: Key) => void;\n expandedNodes: Key[];\n handleExpandClick: (ret: Key, force?: boolean) => void;\n onAddChild?: (parentId: Key, newName: string) => Promise<iNodeUpdate>;\n onRename?: (id: Key, newName: string) => Promise<iNodeUpdate>;\n onRemove?: (id: Key) => Promise<iNodeUpdate>;\n nodeHighlight: string;\n textHighlight: string;\n}\n\nexport const TreeOfNodesContext = createContext<TreeOfNodesContextProps<unknown> | undefined>(\n undefined,\n);\n","import React, { Key, useCallback, useEffect, useMemo, useState } from 'react';\nimport { Spinner } from 'react-bootstrap';\n\ninterface WordEntryProps {\n id: Key;\n value?: string;\n editing?: boolean;\n saving?: boolean;\n setValue?: (ret: string) => void;\n sendEscape?: () => void;\n style?: React.CSSProperties;\n}\n\nexport const WordEntry = React.forwardRef<HTMLInputElement, WordEntryProps>(\n ({ id, value, editing, saving, setValue, sendEscape, style }, ref): JSX.Element => {\n WordEntry.displayName = 'WordEntry';\n const currentStyle = useMemo<React.CSSProperties>(() => {\n return {\n display: 'inline-block',\n padding: '1px',\n paddingLeft: '3px',\n paddingRight: '3px',\n border: '1px',\n borderRadius: '3px',\n ...style,\n };\n }, [style]);\n\n const [currentValue, setCurrentValue] = useState<string>(value ?? '');\n useEffect(() => {\n setCurrentValue(value ?? '');\n }, [value]);\n\n const returnData = useCallback(() => {\n setValue && setValue(currentValue);\n }, [currentValue, setValue]);\n\n const keyPress = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.code === 'Escape') {\n setCurrentValue(value ?? '');\n sendEscape && sendEscape();\n } else if (e.code === 'Enter') {\n returnData();\n }\n },\n [returnData, sendEscape, value],\n );\n\n // Simple if not editing\n if (!editing) {\n return (\n <span\n style={currentStyle}\n id={String(id)}\n >\n {value}\n </span>\n );\n }\n\n return (\n <div\n style={currentStyle}\n id={`${id}-holder`}\n >\n {saving && (\n <Spinner\n id={`${id}-spinner`}\n size='sm'\n animation='border'\n />\n )}\n <input\n autoFocus\n id={String(id)}\n ref={ref}\n type='text'\n style={{\n lineHeight: '0.75rem',\n border: '1px dotted black',\n width: 'auto',\n minWidth: '0',\n }}\n value={currentValue}\n disabled={saving}\n onChange={(e) => setCurrentValue(e.currentTarget.value)}\n onBlur={returnData}\n onKeyDownCapture={keyPress}\n />\n </div>\n );\n },\n);\n","import { Key, useCallback, useEffect, useState } from 'react';\nimport { checkExpandedNodes } from '../functions/checkExpandedNodes';\nimport { iNodeUpdate, TreeNodeData } from './interface';\nimport { TreeNode } from './TreeNode';\nimport { TreeOfNodesContext } from './TreeOfNodesContext';\n\ninterface TreeOfNodesProps<T> {\n id: string;\n nodeList: TreeNodeData<T>[];\n roots: Key[];\n selectedId?: Key;\n handleSelect?: (ret: Key) => void;\n onAdd?: (parentId: Key, newName: string) => Promise<iNodeUpdate>;\n onRename?: (childId: Key, newName: string) => Promise<iNodeUpdate>;\n onRemove?: (childId: Key) => Promise<iNodeUpdate>;\n canAddRoot?: boolean;\n canRemoveRoot?: boolean;\n canRenameRoot?: boolean;\n canAddChildren?: boolean;\n canRemoveChildren?: boolean;\n canRenameChildren?: boolean;\n nodeHighlight?: string;\n textHighlight?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\nexport const TreeOfNodes = <T extends unknown>({\n id,\n nodeList,\n roots,\n // canAddRoot = false,\n canRemoveRoot = false,\n canRenameRoot = false,\n canAddChildren = false,\n canRemoveChildren = false,\n canRenameChildren = false,\n selectedId,\n handleSelect = () => {\n return;\n },\n onAdd,\n onRename,\n onRemove,\n nodeHighlight = 'red',\n textHighlight = 'rgba(255, 0, 0, 0.2)',\n}: TreeOfNodesProps<T>) => {\n const [expandedNodes, setExpandedNodes] = useState<Key[]>([]);\n useEffect(() => {\n if (selectedId) {\n // Check all nodes are showing that should be\n const shouldExpand = checkExpandedNodes(nodeList, selectedId, expandedNodes);\n shouldExpand.filter((n) => !expandedNodes.includes(n)).length > 0 &&\n setExpandedNodes(shouldExpand);\n }\n }, [expandedNodes, nodeList, selectedId]);\n\n // Change expansion and update contexts\n const changeExpand = useCallback(\n (eKey: Key, force?: boolean) => {\n const newExpandedNodes = [...expandedNodes];\n const ix = newExpandedNodes.findIndex((nKey) => nKey === eKey);\n if ((ix === -1 && force === undefined) || force === true) newExpandedNodes.push(eKey);\n else newExpandedNodes.splice(ix, 1);\n setExpandedNodes(newExpandedNodes);\n },\n [expandedNodes],\n );\n\n return (\n <TreeOfNodesContext.Provider\n value={{\n id: id,\n nodeList,\n selectedId,\n handleSelect,\n expandedNodes,\n handleExpandClick: (r, f) => changeExpand(r, f),\n onAddChild: onAdd,\n onRename,\n onRemove,\n nodeHighlight,\n textHighlight,\n }}\n >\n {roots.map((r) => (\n <TreeNode\n key={r}\n id={r}\n canRemove={canRemoveRoot}\n canAddChildren={canAddChildren}\n canRename={canRenameRoot}\n canRemoveChildren={canRemoveChildren}\n canRenameChildren={canRenameChildren}\n />\n ))}\n </TreeOfNodesContext.Provider>\n );\n};\n","import { TreeNodeBase } from 'components';\nimport { Key } from 'react';\nimport { getAncestors } from './getAncestors';\n\nexport const checkExpandedNodes = (\n nodeList: TreeNodeBase[],\n selectedId: Key,\n expandedNodes: Key[],\n): Key[] => {\n return [\n ...expandedNodes,\n ...getAncestors(selectedId, [], nodeList)\n .map((n) => n.id)\n .filter((k) => !expandedNodes.includes(k)),\n ].sort((a, b) => `${a}`.localeCompare(`${b}`));\n};\n","import { getAncestors } from './getAncestors';\n\nexport { getAncestors as getParents };\n"],"names":[],"version":3,"file":"main.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["src/main.ts","src/components/index.ts","src/components/TreeNode.tsx","src/functions/getAncestors.tsx","src/components/TreeOfNodesContext.ts","src/components/WordEntry.tsx","src/functions/getDescendentIds.ts","src/components/TreeOfNodes.tsx","src/functions/checkExpandedNodes.ts","src/functions/index.ts"],"sourcesContent":["export * from './components';\nexport * from './functions';\n","import { TreeNode } from './TreeNode';\nimport { TreeOfNodes } from './TreeOfNodes';\nimport { iNodeUpdate, TreeNodeBase, TreeNodeData } from './interface';\nimport { WordEntry } from './WordEntry';\n\nexport { TreeNode, TreeOfNodes, WordEntry };\nexport type { TreeNodeBase, TreeNodeData, iNodeUpdate };\n","import { ContextMenuHandler, iMenuItem } from '@asup/context-menu';\nimport { Key, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport {\n CaretDownFill,\n CaretRight,\n CaretRightFill,\n ExclamationCircleFill,\n} from 'react-bootstrap-icons';\nimport { getAncestors } from '../functions/getAncestors';\nimport { iNodeUpdate } from './interface';\nimport { TreeOfNodesContext } from './TreeOfNodesContext';\nimport { WordEntry } from './WordEntry';\nimport './TreeNode.css';\nimport { getDescendentIds } from '../functions/getDescendentIds';\n\ninterface TreeNodeProps {\n id: Key;\n indentLevel?: number;\n canRemove?: boolean;\n canRename?: boolean;\n canAddChildren?: boolean;\n canRemoveChildren?: boolean;\n canRenameChildren?: boolean;\n refresh?: () => void;\n}\n\nexport const TreeNode = ({\n id,\n canRemove,\n canRename,\n canAddChildren,\n canRemoveChildren,\n canRenameChildren,\n}: TreeNodeProps): JSX.Element => {\n // Contexts\n const treeContext = useContext(TreeOfNodesContext);\n\n // Node information\n const thisNode = useMemo(\n () => treeContext?.nodeList.find((n) => n.id === id),\n [id, treeContext?.nodeList],\n );\n const childNodes = useMemo(\n () => treeContext?.nodeList.filter((n) => n.parentId === id),\n [id, treeContext?.nodeList],\n );\n const descendents = useMemo(\n () => getDescendentIds(id, treeContext?.nodeList ?? []),\n [id, treeContext],\n );\n\n // State\n const [error, setError] = useState<boolean>(false);\n const [errorText, setErrotText] = useState<string>('');\n const expanded = useMemo(() => {\n return (treeContext?.expandedNodes.findIndex((e) => e === id) ?? -1) > -1;\n }, [id, treeContext?.expandedNodes]);\n\n // Checkbox\n const checkRef = useRef<HTMLInputElement | null>(null);\n useEffect(() => {\n if (checkRef.current) {\n if (treeContext?.selected.includes(id)) {\n checkRef.current.checked = true;\n checkRef.current.indeterminate = false;\n } else if (descendents.some((d) => treeContext?.selected.includes(d))) {\n checkRef.current.checked = false;\n checkRef.current.indeterminate = true;\n } else {\n checkRef.current.checked = false;\n checkRef.current.indeterminate = false;\n }\n }\n }, [descendents, id, treeContext?.selected]);\n\n // Apply selected border\n const currentBorder = useMemo<string>(() => {\n return treeContext?.selected.includes(id) ? '1px solid black' : '';\n }, [id, treeContext?.selected]);\n const nodeColour = useMemo<string | undefined>(() => {\n if (treeContext && treeContext.selected) {\n const anc = getAncestors(treeContext.selected, [], treeContext?.nodeList).map((n) => n.id);\n if ([...anc, treeContext.selected].includes(id)) return treeContext.nodeHighlight;\n }\n return;\n }, [id, treeContext]);\n\n // New node parameters\n const newNameRef = useRef<HTMLInputElement | null>(null);\n const [showNewNode, setShowNewNode] = useState<boolean>(false);\n const [savingNewNode, setSavingNewNode] = useState<boolean>(false);\n\n // Rename parameters\n const currentNameRef = useRef<HTMLInputElement | null>(null);\n const [renaming, setRenaming] = useState<boolean>(false);\n const [updatingNode, setUpdatingNode] = useState<boolean>(false);\n\n // Context functions\n const handleReturn = useCallback((ret: iNodeUpdate) => {\n if (!ret.success) {\n setError(true);\n setErrotText(ret.ErrorText ?? 'An unknown error has occured');\n } else {\n setError(false);\n setErrotText('');\n }\n }, []);\n\n const confirmNewNode = useCallback(\n async (label: string) => {\n setSavingNewNode(true);\n if (treeContext?.onAddChild) {\n handleReturn(await treeContext.onAddChild(id, label));\n }\n setSavingNewNode(false);\n setShowNewNode(false);\n },\n [handleReturn, id, treeContext],\n );\n\n const renameNode = useCallback(\n async (newLabel: string) => {\n setRenaming(false);\n if (treeContext?.onRename) {\n setUpdatingNode(true);\n handleReturn(await treeContext.onRename(id, newLabel));\n setUpdatingNode(false);\n }\n },\n [handleReturn, id, treeContext],\n );\n\n const deleteThis = useCallback(async () => {\n if (treeContext?.onRemove) {\n setUpdatingNode(true);\n handleReturn(await treeContext.onRemove(id));\n setUpdatingNode(false);\n }\n }, [handleReturn, id, treeContext]);\n\n // Context actions\n const addChild = useCallback(() => {\n setShowNewNode(true);\n treeContext && treeContext.handleExpandClick(id, true);\n }, [id, treeContext]);\n useEffect(() => {\n if (showNewNode === true && newNameRef.current) newNameRef.current.focus();\n }, [showNewNode]);\n const renameThis = useCallback(() => {\n setRenaming(true);\n treeContext?.handleSelect(id);\n }, [id, treeContext]);\n\n // Context menu\n const menuItems = useMemo(() => {\n const menuItems: iMenuItem[] = [];\n if (canAddChildren) {\n menuItems.push({ label: 'Add', action: addChild });\n }\n if (canRename) {\n menuItems.push({ label: 'Rename', action: renameThis });\n }\n if (canRemove && (childNodes === undefined || childNodes.length === 0)) {\n menuItems.push({ label: 'Delete', action: deleteThis });\n }\n return menuItems;\n }, [addChild, canAddChildren, canRemove, canRename, childNodes, deleteThis, renameThis]);\n\n // Return node\n if (!treeContext) return <></>;\n return (\n <ContextMenuHandler menuItems={menuItems}>\n <div\n id={`${treeContext.id}-treenode-${id}`}\n className='treenode'\n >\n {error ? (\n <>\n <ExclamationCircleFill color='var(--bs-danger)' /> {errorText}\n </>\n ) : (\n <div className='tree-of-nodes-node'>\n {treeContext.showCheckBox && (\n <input\n ref={checkRef}\n type='checkbox'\n role='checkbox'\n className='tree-of-nodes-checkbox'\n id={`${treeContext.id}-treenode-checkbox-${id}}`}\n onClick={() => {\n treeContext.handleSelect(descendents);\n }}\n />\n )}\n {childNodes !== undefined && childNodes.length > 0 ? (\n !expanded ? (\n <CaretRightFill\n id={`${treeContext.id}-treenode-caret-${id}`}\n className='tree-of-nodes-expander'\n role='button'\n color={nodeColour}\n aria-expanded={false}\n aria-label='Expander'\n onClick={() => treeContext.handleExpandClick(id)}\n />\n ) : (\n <CaretDownFill\n id={`${treeContext.id}-treenode-caret-${id}`}\n className='tree-of-nodes-expander'\n role='button'\n aria-expanded={true}\n aria-label='Expander'\n color={nodeColour}\n onClick={() => {\n treeContext.handleExpandClick(id);\n }}\n />\n )\n ) : (\n <CaretRight\n id={`${treeContext.id}-treenode-caret-${id}`}\n className='tree-of-nodes-expander'\n role='button'\n color={nodeColour}\n aria-expanded={false}\n aria-label='Disabled expander'\n aria-disabled={true}\n />\n )}\n {thisNode && (\n <div\n style={{ display: 'inline-block' }}\n onContextMenuCapture={() => treeContext.handleSelect(id)}\n onClickCapture={() => treeContext.handleSelect(id)}\n onFocusCapture={() => treeContext.handleSelect(id)}\n >\n <WordEntry\n id={`${treeContext.id}-treenode-entry-${id}`}\n ref={currentNameRef}\n value={thisNode.label}\n editing={renaming}\n saving={updatingNode}\n setValue={(ret) => renameNode(ret)}\n sendEscape={() => setRenaming(false)}\n style={{\n border: currentBorder,\n margin: currentBorder === '' ? '1px' : '',\n backgroundColor: currentBorder === '' ? '' : treeContext.textHighlight,\n }}\n />\n </div>\n )}\n </div>\n )}\n {childNodes !== undefined &&\n childNodes.map((h) => (\n <span\n key={h.id}\n id={`${treeContext.id}-treenode-child-${h.id}`}\n style={{\n marginLeft: '16px',\n display: 'block',\n maxHeight: expanded ? '99999px' : '0px',\n height: expanded ? 'auto' : '0px',\n overflowY: 'hidden',\n visibility: expanded ? 'inherit' : 'hidden',\n opacity: expanded ? 1 : 0,\n transition: 'visibility .3s, opacity .3s ease-in-out, max-height 0.3s ease-in-out',\n }}\n >\n <TreeNode\n id={h.id}\n canRemove={canRemoveChildren}\n canRename={canRenameChildren}\n canAddChildren={canAddChildren}\n canRemoveChildren={canRemoveChildren}\n canRenameChildren={canRenameChildren}\n />\n </span>\n ))}\n {showNewNode && (\n <div>\n <WordEntry\n style={{ marginLeft: '14px' }}\n id={`treenode-new-${id}`}\n ref={newNameRef}\n editing={true}\n setValue={(ret) => {\n confirmNewNode(ret);\n }}\n saving={savingNewNode}\n sendEscape={() => {\n setShowNewNode(false);\n }}\n />\n </div>\n )}\n </div>\n </ContextMenuHandler>\n );\n};\n\nTreeNode.displayName = 'TreeNode';\n","import { Key } from 'react';\nimport { TreeNodeBase } from '../components/interface';\n\nexport const getAncestors = (\n id: Key | Key[],\n included: TreeNodeBase[],\n hierarchyNodes: TreeNodeBase[],\n): TreeNodeBase[] => {\n const processIds = Array.isArray(id) ? id : [id];\n\n const current = processIds\n .map((i) => hierarchyNodes.find((h) => h.id === i))\n .filter((h) => h !== undefined) as TreeNodeBase[];\n if (current.length === 0) return included;\n\n const parents = (\n current\n .map((h) => h.parentId)\n .map((pid) => hierarchyNodes.find((h) => pid === h.id)) as TreeNodeBase[]\n ).filter((p) => p !== undefined) as TreeNodeBase[];\n if (parents.length === 0) return included;\n else\n return getAncestors(\n parents.map((p) => p.id),\n [...included, ...parents.filter((p) => !included.includes(p))],\n hierarchyNodes,\n );\n};\n","import { createContext, Key } from 'react';\nimport { iNodeUpdate, TreeNodeData } from './interface';\n\nexport interface TreeOfNodesContextProps<T> {\n id: string;\n nodeList: TreeNodeData<T>[];\n selected: Key[];\n showCheckBox: boolean;\n handleSelect: (ret: Key | Key[]) => void;\n expandedNodes: Key[];\n handleExpandClick: (ret: Key, force?: boolean) => void;\n onAddChild?: (parentId: Key, newName: string) => Promise<iNodeUpdate>;\n onRename?: (id: Key, newName: string) => Promise<iNodeUpdate>;\n onRemove?: (id: Key) => Promise<iNodeUpdate>;\n nodeHighlight: string;\n textHighlight: string;\n}\n\nexport const TreeOfNodesContext = createContext<TreeOfNodesContextProps<unknown> | undefined>(\n undefined,\n);\n","import React, { Key, useCallback, useEffect, useMemo, useState } from 'react';\nimport { Spinner } from 'react-bootstrap';\n\ninterface WordEntryProps {\n id: Key;\n value?: string;\n editing?: boolean;\n saving?: boolean;\n setValue?: (ret: string) => void;\n sendEscape?: () => void;\n style?: React.CSSProperties;\n}\n\nexport const WordEntry = React.forwardRef<HTMLInputElement, WordEntryProps>(\n ({ id, value, editing, saving, setValue, sendEscape, style }, ref): JSX.Element => {\n WordEntry.displayName = 'WordEntry';\n const currentStyle = useMemo<React.CSSProperties>(() => {\n return {\n display: 'inline-block',\n padding: '1px',\n paddingLeft: '3px',\n paddingRight: '3px',\n border: '1px',\n borderRadius: '3px',\n ...style,\n };\n }, [style]);\n\n const [currentValue, setCurrentValue] = useState<string>(value ?? '');\n useEffect(() => {\n setCurrentValue(value ?? '');\n }, [value]);\n\n const returnData = useCallback(() => {\n setValue && setValue(currentValue);\n }, [currentValue, setValue]);\n\n const keyPress = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.code === 'Escape') {\n setCurrentValue(value ?? '');\n sendEscape && sendEscape();\n } else if (e.code === 'Enter') {\n returnData();\n }\n },\n [returnData, sendEscape, value],\n );\n\n // Simple if not editing\n if (!editing) {\n return (\n <span\n style={currentStyle}\n id={String(id)}\n >\n {value}\n </span>\n );\n }\n\n return (\n <div\n style={currentStyle}\n id={`${id}-holder`}\n >\n {saving && (\n <Spinner\n id={`${id}-spinner`}\n size='sm'\n animation='border'\n />\n )}\n <input\n autoFocus\n id={String(id)}\n ref={ref}\n type='text'\n style={{\n lineHeight: '0.75rem',\n border: '1px dotted black',\n width: 'auto',\n minWidth: '0',\n }}\n value={currentValue}\n disabled={saving}\n onChange={(e) => setCurrentValue(e.currentTarget.value)}\n onBlur={returnData}\n onKeyDownCapture={keyPress}\n />\n </div>\n );\n },\n);\n\nWordEntry.displayName = 'WordEntry';\n","import { Key } from 'react';\nimport { TreeNodeBase } from '../components/interface';\n\nexport const getDescendentIds = (id: Key | Key[], hierarchyNodes: TreeNodeBase[]): Key[] => {\n const processIds = Array.isArray(id) ? id : [id];\n const newChildren = hierarchyNodes\n .filter(\n (h) =>\n h.parentId !== undefined && processIds.includes(h.parentId) && !processIds.includes(h.id),\n )\n .map((h) => h.id);\n return newChildren.length === 0\n ? processIds\n : getDescendentIds([...processIds, ...newChildren], hierarchyNodes);\n};\n","import { Key, useCallback, useEffect, useMemo, useState } from 'react';\nimport { checkExpandedNodes } from '../functions/checkExpandedNodes';\nimport { iNodeUpdate, TreeNodeData } from './interface';\nimport { TreeNode } from './TreeNode';\nimport { TreeOfNodesContext } from './TreeOfNodesContext';\n\ninterface TreeOfNodesProps<T> {\n id: string;\n nodeList: TreeNodeData<T>[];\n roots: Key[];\n showCheckBox?: boolean;\n selected?: Key | Key[];\n handleSelect?: (ret: Key | Key[]) => void;\n onAdd?: (parentId: Key, newName: string) => Promise<iNodeUpdate>;\n onRename?: (childId: Key, newName: string) => Promise<iNodeUpdate>;\n onRemove?: (childId: Key) => Promise<iNodeUpdate>;\n canRemoveRoot?: boolean;\n canRenameRoot?: boolean;\n canAddChildren?: boolean;\n canRemoveChildren?: boolean;\n canRenameChildren?: boolean;\n nodeHighlight?: string;\n textHighlight?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\nexport const TreeOfNodes = <T extends unknown>({\n id,\n nodeList,\n roots,\n selected = [],\n showCheckBox = false,\n handleSelect = () => {\n return;\n },\n onAdd,\n onRename,\n onRemove,\n canRemoveRoot = false,\n canRenameRoot = false,\n canAddChildren = false,\n canRemoveChildren = false,\n canRenameChildren = false,\n nodeHighlight = 'red',\n textHighlight = 'rgba(255, 0, 0, 0.2)',\n}: TreeOfNodesProps<T>) => {\n const [expandedNodes, setExpandedNodes] = useState<Key[]>([]);\n const selectedArray = useMemo(\n () => (Array.isArray(selected) ? selected : [selected]),\n [selected],\n );\n useEffect(() => {\n if (selectedArray.length > 0) {\n // Check all nodes are showing that should be\n const shouldExpand = checkExpandedNodes(nodeList, selectedArray, expandedNodes);\n shouldExpand.filter((n) => !expandedNodes.includes(n)).length > 0 &&\n setExpandedNodes(shouldExpand);\n }\n }, [expandedNodes, nodeList, selectedArray]);\n\n // Change expansion and update contexts\n const changeExpand = useCallback(\n (eKey: Key, force?: boolean) => {\n const newExpandedNodes = [...expandedNodes];\n const ix = newExpandedNodes.findIndex((nKey) => nKey === eKey);\n if ((ix === -1 && force === undefined) || force === true) newExpandedNodes.push(eKey);\n else newExpandedNodes.splice(ix, 1);\n setExpandedNodes(newExpandedNodes);\n },\n [expandedNodes],\n );\n\n return (\n <TreeOfNodesContext.Provider\n value={{\n id: id,\n nodeList,\n selected: selectedArray,\n showCheckBox,\n handleSelect,\n expandedNodes,\n handleExpandClick: (r, f) => changeExpand(r, f),\n onAddChild: onAdd,\n onRename,\n onRemove,\n nodeHighlight,\n textHighlight,\n }}\n >\n {roots.map((r) => (\n <TreeNode\n key={r}\n id={r}\n canRemove={canRemoveRoot}\n canAddChildren={canAddChildren}\n canRename={canRenameRoot}\n canRemoveChildren={canRemoveChildren}\n canRenameChildren={canRenameChildren}\n />\n ))}\n </TreeOfNodesContext.Provider>\n );\n};\n\nTreeOfNodes.displayName = 'TreeOfNodes';\n","import { TreeNodeBase } from 'components';\nimport { Key } from 'react';\nimport { getAncestors } from './getAncestors';\n\nexport const checkExpandedNodes = (\n nodeList: TreeNodeBase[],\n selected: Key | Key[],\n expandedNodes: Key[],\n): Key[] => {\n return [\n ...expandedNodes,\n ...getAncestors(selected, [], nodeList)\n .map((n) => n.id)\n .filter((k) => !expandedNodes.includes(k)),\n ].sort((a, b) => `${a}`.localeCompare(`${b}`));\n};\n","import { getAncestors } from './getAncestors';\n\nexport { getAncestors as getParents };\n"],"names":[],"version":3,"file":"main.js.map"}
|
package/dist/tree-of-nodes.d.ts
CHANGED
|
@@ -11,7 +11,7 @@ export interface TreeNodeBase {
|
|
|
11
11
|
export interface TreeNodeData<T> extends TreeNodeBase {
|
|
12
12
|
data: T;
|
|
13
13
|
}
|
|
14
|
-
declare const getAncestors: (id: Key, included: TreeNodeBase[], hierarchyNodes: TreeNodeBase[]) => TreeNodeBase[];
|
|
14
|
+
declare const getAncestors: (id: Key | Key[], included: TreeNodeBase[], hierarchyNodes: TreeNodeBase[]) => TreeNodeBase[];
|
|
15
15
|
interface WordEntryProps {
|
|
16
16
|
id: Key;
|
|
17
17
|
value?: string;
|
|
@@ -32,17 +32,20 @@ interface TreeNodeProps {
|
|
|
32
32
|
canRenameChildren?: boolean;
|
|
33
33
|
refresh?: () => void;
|
|
34
34
|
}
|
|
35
|
-
export const TreeNode:
|
|
35
|
+
export const TreeNode: {
|
|
36
|
+
({ id, canRemove, canRename, canAddChildren, canRemoveChildren, canRenameChildren, }: TreeNodeProps): JSX.Element;
|
|
37
|
+
displayName: string;
|
|
38
|
+
};
|
|
36
39
|
interface TreeOfNodesProps<T> {
|
|
37
40
|
id: string;
|
|
38
41
|
nodeList: TreeNodeData<T>[];
|
|
39
42
|
roots: Key[];
|
|
40
|
-
|
|
41
|
-
|
|
43
|
+
showCheckBox?: boolean;
|
|
44
|
+
selected?: Key | Key[];
|
|
45
|
+
handleSelect?: (ret: Key | Key[]) => void;
|
|
42
46
|
onAdd?: (parentId: Key, newName: string) => Promise<iNodeUpdate>;
|
|
43
47
|
onRename?: (childId: Key, newName: string) => Promise<iNodeUpdate>;
|
|
44
48
|
onRemove?: (childId: Key) => Promise<iNodeUpdate>;
|
|
45
|
-
canAddRoot?: boolean;
|
|
46
49
|
canRemoveRoot?: boolean;
|
|
47
50
|
canRenameRoot?: boolean;
|
|
48
51
|
canAddChildren?: boolean;
|
|
@@ -51,6 +54,9 @@ interface TreeOfNodesProps<T> {
|
|
|
51
54
|
nodeHighlight?: string;
|
|
52
55
|
textHighlight?: string;
|
|
53
56
|
}
|
|
54
|
-
export const TreeOfNodes:
|
|
57
|
+
export const TreeOfNodes: {
|
|
58
|
+
<T extends unknown>({ id, nodeList, roots, selected, showCheckBox, handleSelect, onAdd, onRename, onRemove, canRemoveRoot, canRenameRoot, canAddChildren, canRemoveChildren, canRenameChildren, nodeHighlight, textHighlight, }: TreeOfNodesProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
59
|
+
displayName: string;
|
|
60
|
+
};
|
|
55
61
|
|
|
56
62
|
//# sourceMappingURL=tree-of-nodes.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";AAEA;IACE,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;IACE,EAAE,EAAE,GAAG,CAAC;IACR,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,GAAG,CAAC;CAChB;AAED,8BAA8B,CAAC,CAAE,SAAQ,YAAY;IACnD,IAAI,EAAE,CAAC,CAAC;CACT;ACZD,QAAO,MAAM,mBACP,GAAG,
|
|
1
|
+
{"mappings":";AAEA;IACE,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;IACE,EAAE,EAAE,GAAG,CAAC;IACR,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,GAAG,CAAC;CAChB;AAED,8BAA8B,CAAC,CAAE,SAAQ,YAAY;IACnD,IAAI,EAAE,CAAC,CAAC;CACT;ACZD,QAAO,MAAM,mBACP,GAAG,GAAG,GAAG,EAAE,YACL,YAAY,EAAE,kBACR,YAAY,EAAE,KAC7B,YAAY,EAoBd,CAAC;AExBF;IACE,EAAE,EAAE,GAAG,CAAC;IACR,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,aAAa,CAAC;CAC7B;AAED,OAAO,MAAM,kGAgFZ,CAAC;AE9EF;IACE,EAAE,EAAE,GAAG,CAAC;IACR,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,OAAO,MAAM;0FAOV,aAAa,GAAG,WAAW;;CA2Q7B,CAAC;AEtSF,2BAA2B,CAAC;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,aAAa,CAAC,CAAC,EAAE,CAAC;IAC5B,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC;IACvB,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,EAAE,KAAK,IAAI,CAAC;IAC1C,KAAK,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC,WAAW,CAAC,CAAC;IACjE,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC,WAAW,CAAC,CAAC;IACnE,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,OAAO,CAAC,WAAW,CAAC,CAAC;IAClD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAGD,OAAO,MAAM;;;CA4EZ,CAAC","sources":["src/src/components/interface.ts","src/src/functions/getAncestors.tsx","src/src/components/TreeOfNodesContext.ts","src/src/components/WordEntry.tsx","src/src/functions/getDescendentIds.ts","src/src/components/TreeNode.tsx","src/src/functions/checkExpandedNodes.ts","src/src/components/TreeOfNodes.tsx","src/src/components/index.ts","src/src/functions/index.ts","src/src/main.ts","src/main.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,null,"export * from './components';\nexport * from './functions';\n"],"names":[],"version":3,"file":"tree-of-nodes.d.ts.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@asup/tree-of-nodes",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"description": "REACT Typescript Treeview component",
|
|
5
5
|
"author": "Paul Thomas <@PaulDThomas>",
|
|
6
6
|
"private": false,
|
|
@@ -57,6 +57,7 @@
|
|
|
57
57
|
"husky": "^8.0.1",
|
|
58
58
|
"jest": "^29.2.2",
|
|
59
59
|
"jest-environment-jsdom": "^29.3.1",
|
|
60
|
+
"jest-watch-typeahead": "^2.2.2",
|
|
60
61
|
"lint-staged": "^13.0.3",
|
|
61
62
|
"parcel": "^2.7.0",
|
|
62
63
|
"postcss": "^8.4.18",
|