@asup/tree-of-nodes 3.0.0 → 3.1.1
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/dist/cjs/main.css +5 -2
- package/dist/cjs/main.css.map +1 -1
- package/dist/cjs/main.js +30 -48
- package/dist/cjs/main.js.map +1 -1
- package/dist/main.css +5 -2
- package/dist/main.css.map +1 -1
- package/dist/main.js +30 -48
- package/dist/main.js.map +1 -1
- package/dist/tree-of-nodes.d.ts +3 -3
- package/dist/tree-of-nodes.d.ts.map +1 -1
- package/package.json +16 -17
package/dist/cjs/main.css
CHANGED
|
@@ -88,7 +88,8 @@
|
|
|
88
88
|
.ton-collapsible-wrapper:after {
|
|
89
89
|
content: "";
|
|
90
90
|
height: 1px;
|
|
91
|
-
transition: height var(--ton-transition-time) linear,
|
|
91
|
+
transition: height var(--ton-transition-time) linear,
|
|
92
|
+
max-height 0s var(--ton-transition-time) linear;
|
|
92
93
|
max-height: 0;
|
|
93
94
|
}
|
|
94
95
|
|
|
@@ -104,7 +105,9 @@
|
|
|
104
105
|
}
|
|
105
106
|
|
|
106
107
|
.ton-collapsible-wrapper.collapsed > .ton-collapsible {
|
|
107
|
-
transition: margin-bottom var(--ton-transition-time) cubic-bezier(1, 0, 1, 1),
|
|
108
|
+
transition: margin-bottom var(--ton-transition-time) cubic-bezier(1, 0, 1, 1),
|
|
109
|
+
visibility 0s var(--ton-transition-time),
|
|
110
|
+
max-height 0s var(--ton-transition-time);
|
|
108
111
|
visibility: hidden;
|
|
109
112
|
max-height: 0;
|
|
110
113
|
margin-bottom: -2000px;
|
package/dist/cjs/main.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AAAA;;;;;AAKA;;;;;;;;AAQA;;;;;AAKA;;;;AAIA;;;;;;;;;AASA;;;;AAIA;;;;;;;;;;;;;;;;AAgBA;;;;AAIA;;;;;;;;;;;;;AAaA;;;;;AAKA;;;;;;;AAOA;;;;;;;AAMA
|
|
1
|
+
{"mappings":"AAAA;;;;;AAKA;;;;;;;;AAQA;;;;;AAKA;;;;AAIA;;;;;;;;;AASA;;;;AAIA;;;;;;;;;;;;;;;;AAgBA;;;;AAIA;;;;;;;;;;;;;AAaA;;;;;AAKA;;;;;;;AAOA;;;;;;;AAMA","sources":["src/components/TreeNode.css"],"sourcesContent":[":root {\n --ton-transition-time: 0.3s;\n --ton-long-transition-time: 0.6s;\n}\n\n.tree-of-nodes {\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: 100%;\n gap: 1px;\n}\n\n.ton-checkbox {\n margin-right: 3px;\n margin-top: 3px;\n}\n\n.ton-expander {\n margin: 0;\n}\n\n.ton-node {\n display: flex;\n align-items: center;\n cursor: pointer;\n width: 100%;\n max-width: 100%;\n height: 30px;\n}\n\n.ton-label {\n height: 26px;\n}\n\n.ton-label-span {\n border-radius: 3px;\n border: 1px solid transparent;\n box-sizing: border-box;\n display: inline-block;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: 24px;\n overflow: hidden;\n padding: 1px 3px;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 100%;\n}\n\n.ton-rename-holder {\n width: 100%;\n}\n\n.ton-rename {\n border-radius: 3px;\n border: 1px dotted black;\n box-sizing: border-box;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: 24px;\n min-width: 0;\n padding: 1px 3px;\n width: 100%;\n}\n\n.ton-rename:focus {\n outline: none;\n box-shadow: none;\n}\n\n.ton-child {\n margin-left: 16px;\n display: block;\n opacity: 1;\n transition: opacity var(--ton-long-transition-time) linear;\n}\n\n.ton-collapsible-wrapper {\n display: flex;\n overflow: hidden;\n width: 100%;\n max-width: 100%;\n}\n.ton-collapsible-wrapper:after {\n content: \"\";\n height: 1px;\n transition:\n height var(--ton-transition-time) linear,\n max-height 0s var(--ton-transition-time) linear;\n max-height: 0px;\n}\n.ton-collapsible {\n display: flex;\n flex-direction: column;\n gap: 1px;\n transition: margin-bottom var(--ton-transition-time) cubic-bezier(0, 0, 0, 1);\n margin-top: 1px;\n margin-bottom: 1px;\n max-height: 10000px;\n width: 100%;\n}\n.ton-collapsible-wrapper.collapsed > .ton-collapsible {\n margin-bottom: -2000px;\n transition:\n margin-bottom var(--ton-transition-time) cubic-bezier(1, 0, 1, 1),\n visibility 0s var(--ton-transition-time),\n max-height 0s var(--ton-transition-time);\n visibility: hidden;\n max-height: 0;\n}\n.ton-collapsible-wrapper.collapsed:after {\n height: 0;\n transition: height var(--ton-transition-time) linear;\n max-height: 20px;\n}\n.ton-collapsible-wrapper.collapsed {\n visibility: hidden;\n}\n.ton-collapsible-wrapper.collapsed .ton-child {\n opacity: 0;\n transition: opacity var(--ton-long-transition-time) linear;\n}\n"],"names":[],"version":3,"file":"main.css.map"}
|
package/dist/cjs/main.js
CHANGED
|
@@ -71,17 +71,17 @@ const $ff9cca1fe8f6b24e$export$29ec378200e05207 = (0, $gTuX4$react.createContext
|
|
|
71
71
|
|
|
72
72
|
|
|
73
73
|
const $176d21a51def1fce$export$14f190ac910bde69 = /*#__PURE__*/ (0, $gTuX4$react.forwardRef)(({ id: id, className: className, value: value, editing: editing, saving: saving, setValue: setValue, sendEscape: sendEscape, style: style, spellCheck: spellCheck = "true" }, ref)=>{
|
|
74
|
-
const [currentValue, setCurrentValue] = (0, $gTuX4$react.useState)(value
|
|
74
|
+
const [currentValue, setCurrentValue] = (0, $gTuX4$react.useState)(value ?? "");
|
|
75
75
|
(0, $gTuX4$react.useEffect)(()=>{
|
|
76
|
-
setCurrentValue(value
|
|
76
|
+
setCurrentValue(value ?? "");
|
|
77
77
|
}, [
|
|
78
78
|
value
|
|
79
79
|
]);
|
|
80
80
|
const keyPress = (e)=>{
|
|
81
81
|
if (e.code === "Escape") {
|
|
82
|
-
setCurrentValue(value
|
|
83
|
-
sendEscape
|
|
84
|
-
} else if (e.code === "Enter") setValue
|
|
82
|
+
setCurrentValue(value ?? "");
|
|
83
|
+
sendEscape?.();
|
|
84
|
+
} else if (e.code === "Enter") setValue?.(currentValue);
|
|
85
85
|
};
|
|
86
86
|
// Add window onMouseDown event to stop events when editing
|
|
87
87
|
(0, $gTuX4$react.useEffect)(()=>{
|
|
@@ -90,7 +90,7 @@ const $176d21a51def1fce$export$14f190ac910bde69 = /*#__PURE__*/ (0, $gTuX4$react
|
|
|
90
90
|
if (editing && target.id !== `${id}` && target.id !== `${id}-holder` && target.id !== `${id}-spinner` && target.className !== "ton-rename") {
|
|
91
91
|
e.preventDefault();
|
|
92
92
|
e.stopPropagation();
|
|
93
|
-
setValue
|
|
93
|
+
setValue?.(currentValue);
|
|
94
94
|
}
|
|
95
95
|
};
|
|
96
96
|
window.addEventListener("mousedown", handleMouseDown);
|
|
@@ -133,7 +133,7 @@ const $176d21a51def1fce$export$14f190ac910bde69 = /*#__PURE__*/ (0, $gTuX4$react
|
|
|
133
133
|
value: currentValue,
|
|
134
134
|
disabled: saving,
|
|
135
135
|
onChange: (e)=>setCurrentValue(e.currentTarget.value),
|
|
136
|
-
onBlur: (e)=>setValue
|
|
136
|
+
onBlur: (e)=>setValue?.(e.currentTarget.value),
|
|
137
137
|
onKeyDownCapture: keyPress
|
|
138
138
|
})
|
|
139
139
|
]
|
|
@@ -146,23 +146,21 @@ const $a56aac35d4408806$export$2eba8ec3a333fdbb = ({ id: id, canRemove: canRemov
|
|
|
146
146
|
// Contexts
|
|
147
147
|
const treeContext = (0, $gTuX4$react.useContext)((0, $ff9cca1fe8f6b24e$export$29ec378200e05207));
|
|
148
148
|
// Node information
|
|
149
|
-
const thisNode = treeContext
|
|
150
|
-
const childNodes = treeContext
|
|
151
|
-
|
|
152
|
-
const descendents = (0, $a19ef65643ae39e0$export$bd923365b402cb04)(id, (_treeContext_nodeList = treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList) !== null && _treeContext_nodeList !== void 0 ? _treeContext_nodeList : []);
|
|
149
|
+
const thisNode = treeContext?.nodeList.find((n)=>n.id === id);
|
|
150
|
+
const childNodes = treeContext?.nodeList.filter((n)=>n.parentId === id);
|
|
151
|
+
const descendents = (0, $a19ef65643ae39e0$export$bd923365b402cb04)(id, treeContext?.nodeList ?? []);
|
|
153
152
|
// State
|
|
154
153
|
const [error, setError] = (0, $gTuX4$react.useState)(false);
|
|
155
154
|
const [errorText, setErrorText] = (0, $gTuX4$react.useState)("");
|
|
156
|
-
|
|
157
|
-
const expanded = ((_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;
|
|
155
|
+
const expanded = (treeContext?.expandedNodes.findIndex((e)=>e === id) ?? -1) > -1;
|
|
158
156
|
// Checkbox
|
|
159
157
|
const checkRef = (0, $gTuX4$react.useRef)(null);
|
|
160
158
|
(0, $gTuX4$react.useEffect)(()=>{
|
|
161
159
|
if (checkRef.current) {
|
|
162
|
-
if (treeContext
|
|
160
|
+
if (treeContext?.selected.includes(id)) {
|
|
163
161
|
checkRef.current.checked = true;
|
|
164
162
|
checkRef.current.indeterminate = false;
|
|
165
|
-
} else if (descendents.some((d)=>treeContext
|
|
163
|
+
} else if (descendents.some((d)=>treeContext?.selected.includes(d))) {
|
|
166
164
|
checkRef.current.checked = false;
|
|
167
165
|
checkRef.current.indeterminate = true;
|
|
168
166
|
} else {
|
|
@@ -173,13 +171,13 @@ const $a56aac35d4408806$export$2eba8ec3a333fdbb = ({ id: id, canRemove: canRemov
|
|
|
173
171
|
}, [
|
|
174
172
|
descendents,
|
|
175
173
|
id,
|
|
176
|
-
treeContext
|
|
174
|
+
treeContext?.selected
|
|
177
175
|
]);
|
|
178
176
|
// Apply selected border
|
|
179
|
-
const currentBorder =
|
|
177
|
+
const currentBorder = treeContext?.selected.includes(id) ? "1px solid black" : "";
|
|
180
178
|
const nodeColour = (()=>{
|
|
181
179
|
if (treeContext && treeContext.selected) {
|
|
182
|
-
const anc = (0, $580f9b3e262282c9$export$c6fd3ab3f44300d0)(treeContext.selected, [], treeContext
|
|
180
|
+
const anc = (0, $580f9b3e262282c9$export$c6fd3ab3f44300d0)(treeContext.selected, [], treeContext?.nodeList).map((n)=>n.id);
|
|
183
181
|
if ([
|
|
184
182
|
...anc,
|
|
185
183
|
treeContext.selected
|
|
@@ -199,8 +197,7 @@ const $a56aac35d4408806$export$2eba8ec3a333fdbb = ({ id: id, canRemove: canRemov
|
|
|
199
197
|
const handleReturn = (ret)=>{
|
|
200
198
|
if (!ret.success) {
|
|
201
199
|
setError(true);
|
|
202
|
-
|
|
203
|
-
setErrorText((_ret_ErrorText = ret.ErrorText) !== null && _ret_ErrorText !== void 0 ? _ret_ErrorText : "An unknown error has occured");
|
|
200
|
+
setErrorText(ret.ErrorText ?? "An unknown error has occured");
|
|
204
201
|
} else {
|
|
205
202
|
setError(false);
|
|
206
203
|
setErrorText("");
|
|
@@ -208,20 +205,20 @@ const $a56aac35d4408806$export$2eba8ec3a333fdbb = ({ id: id, canRemove: canRemov
|
|
|
208
205
|
};
|
|
209
206
|
const confirmNewNode = async (label)=>{
|
|
210
207
|
setSavingNewNode(true);
|
|
211
|
-
if (treeContext
|
|
208
|
+
if (treeContext?.onAddChild) handleReturn(await treeContext.onAddChild(id, label));
|
|
212
209
|
setSavingNewNode(false);
|
|
213
210
|
setShowNewNode(false);
|
|
214
211
|
};
|
|
215
212
|
const renameNode = async (newLabel)=>{
|
|
216
213
|
setRenaming(false);
|
|
217
|
-
if (treeContext
|
|
214
|
+
if (treeContext?.onRename) {
|
|
218
215
|
setUpdatingNode(true);
|
|
219
216
|
handleReturn(await treeContext.onRename(id, newLabel));
|
|
220
217
|
setUpdatingNode(false);
|
|
221
218
|
}
|
|
222
219
|
};
|
|
223
220
|
const deleteThis = async ()=>{
|
|
224
|
-
if (treeContext
|
|
221
|
+
if (treeContext?.onRemove) {
|
|
225
222
|
setUpdatingNode(true);
|
|
226
223
|
handleReturn(await treeContext.onRemove(id));
|
|
227
224
|
setUpdatingNode(false);
|
|
@@ -229,14 +226,12 @@ const $a56aac35d4408806$export$2eba8ec3a333fdbb = ({ id: id, canRemove: canRemov
|
|
|
229
226
|
};
|
|
230
227
|
// Context actions
|
|
231
228
|
const addChild = ()=>{
|
|
232
|
-
var _treeContext_handleExpandClick;
|
|
233
229
|
setShowNewNode(true);
|
|
234
|
-
treeContext
|
|
230
|
+
treeContext?.handleExpandClick?.(id, true);
|
|
235
231
|
};
|
|
236
232
|
const renameThis = ()=>{
|
|
237
|
-
var _treeContext_handleSelect;
|
|
238
233
|
setRenaming(true);
|
|
239
|
-
treeContext
|
|
234
|
+
treeContext?.handleSelect?.(id);
|
|
240
235
|
};
|
|
241
236
|
// Context menu
|
|
242
237
|
const menuItems = [];
|
|
@@ -286,10 +281,7 @@ const $a56aac35d4408806$export$2eba8ec3a333fdbb = ({ id: id, canRemove: canRemov
|
|
|
286
281
|
role: "checkbox",
|
|
287
282
|
className: "ton-checkbox",
|
|
288
283
|
id: `${treeContext.id}-treenode-checkbox-${id}`,
|
|
289
|
-
onClick: ()=>
|
|
290
|
-
var _treeContext_handleSelect;
|
|
291
|
-
return (_treeContext_handleSelect = treeContext.handleSelect) === null || _treeContext_handleSelect === void 0 ? void 0 : _treeContext_handleSelect.call(treeContext, descendents);
|
|
292
|
-
}
|
|
284
|
+
onClick: ()=>treeContext.handleSelect?.(descendents)
|
|
293
285
|
}),
|
|
294
286
|
childNodes && childNodes.length > 0 ? !expanded ? /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactbootstrapicons.CaretRightFill), {
|
|
295
287
|
id: `${treeContext.id}-treenode-caret-${id}`,
|
|
@@ -318,29 +310,19 @@ const $a56aac35d4408806$export$2eba8ec3a333fdbb = ({ id: id, canRemove: canRemov
|
|
|
318
310
|
color: nodeColour,
|
|
319
311
|
"aria-expanded": false,
|
|
320
312
|
"aria-label": "Disabled expander",
|
|
321
|
-
onClick: ()=>
|
|
322
|
-
var _treeContext_handleSelect;
|
|
323
|
-
return (_treeContext_handleSelect = treeContext.handleSelect) === null || _treeContext_handleSelect === void 0 ? void 0 : _treeContext_handleSelect.call(treeContext, id);
|
|
324
|
-
}
|
|
313
|
+
onClick: ()=>treeContext.handleSelect?.(id)
|
|
325
314
|
}),
|
|
326
315
|
thisNode && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
327
316
|
className: "ton-label",
|
|
328
317
|
style: {
|
|
329
318
|
width: `calc(100% - ${treeContext.showCheckBox ? "32px" : "16px"})`
|
|
330
319
|
},
|
|
331
|
-
onContextMenuCapture: ()=>
|
|
332
|
-
var _treeContext_handleSelect;
|
|
333
|
-
return (_treeContext_handleSelect = treeContext.handleSelect) === null || _treeContext_handleSelect === void 0 ? void 0 : _treeContext_handleSelect.call(treeContext, id);
|
|
334
|
-
},
|
|
320
|
+
onContextMenuCapture: ()=>treeContext.handleSelect?.(id),
|
|
335
321
|
onClickCapture: ()=>{
|
|
336
|
-
var _treeContext_handleSelect;
|
|
337
322
|
if (!treeContext.expandedNodes.includes(id)) treeContext.handleExpandClick(id);
|
|
338
|
-
|
|
339
|
-
},
|
|
340
|
-
onFocusCapture: ()=>{
|
|
341
|
-
var _treeContext_handleSelect;
|
|
342
|
-
return (_treeContext_handleSelect = treeContext.handleSelect) === null || _treeContext_handleSelect === void 0 ? void 0 : _treeContext_handleSelect.call(treeContext, id);
|
|
323
|
+
treeContext.handleSelect?.(id);
|
|
343
324
|
},
|
|
325
|
+
onFocusCapture: ()=>treeContext.handleSelect?.(id),
|
|
344
326
|
children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $176d21a51def1fce$export$14f190ac910bde69), {
|
|
345
327
|
id: `${treeContext.id}-treenode-entry-${id}`,
|
|
346
328
|
className: currentBorder ? "selected" : "",
|
|
@@ -411,9 +393,9 @@ const $f31429c9cc6d3bce$export$40c47a7ac5f85aba = (nodeList, selected, expandedN
|
|
|
411
393
|
|
|
412
394
|
|
|
413
395
|
|
|
414
|
-
const $9becaaec3a803ae7$export$5580fff3e08a8be5 = ({ alwaysShowSelected: alwaysShowSelected = "first", canAddChildren: canAddChildren = false, canRemoveChildren: canRemoveChildren = false, canRemoveRoot: canRemoveRoot = false, canRenameChildren: canRenameChildren = false, canRenameRoot: canRenameRoot = false, handleSelect: handleSelect, id: id, nodeHighlight: nodeHighlight = "red", nodeList: nodeList, onAdd: onAdd, onRemove: onRemove, onRename: onRename, roots: roots, selected: selected = [], showCheckBox: showCheckBox = false, spellCheck: spellCheck = "true", textHighlight: textHighlight = "rgba(255, 0, 0, 0.2)" })=>{
|
|
396
|
+
const $9becaaec3a803ae7$export$5580fff3e08a8be5 = ({ alwaysShowSelected: alwaysShowSelected = "first", canAddChildren: canAddChildren = false, canRemoveChildren: canRemoveChildren = false, canRemoveRoot: canRemoveRoot = false, canRenameChildren: canRenameChildren = false, canRenameRoot: canRenameRoot = false, handleSelect: handleSelect, id: id, initiallyExpandedNodes: initiallyExpandedNodes = [], nodeHighlight: nodeHighlight = "red", nodeList: nodeList, onAdd: onAdd, onRemove: onRemove, onRename: onRename, roots: roots, selected: selected = [], showCheckBox: showCheckBox = false, spellCheck: spellCheck = "true", textHighlight: textHighlight = "rgba(255, 0, 0, 0.2)" })=>{
|
|
415
397
|
const [firstRender, setFirstRender] = (0, $gTuX4$react.useState)(alwaysShowSelected === "first");
|
|
416
|
-
const [expandedNodes, setExpandedNodes] = (0, $gTuX4$react.useState)(
|
|
398
|
+
const [expandedNodes, setExpandedNodes] = (0, $gTuX4$react.useState)(initiallyExpandedNodes);
|
|
417
399
|
(0, $gTuX4$react.useEffect)(()=>{
|
|
418
400
|
const selectedArray = Array.isArray(selected) ? selected : [
|
|
419
401
|
selected
|
|
@@ -444,7 +426,7 @@ const $9becaaec3a803ae7$export$5580fff3e08a8be5 = ({ alwaysShowSelected: alwaysS
|
|
|
444
426
|
return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
445
427
|
id: id,
|
|
446
428
|
className: "tree-of-nodes",
|
|
447
|
-
children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $ff9cca1fe8f6b24e$export$29ec378200e05207)
|
|
429
|
+
children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $ff9cca1fe8f6b24e$export$29ec378200e05207), {
|
|
448
430
|
value: {
|
|
449
431
|
id: id,
|
|
450
432
|
expandedNodes: expandedNodes,
|
package/dist/cjs/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AGGO,MAAM,4CAAe,CAC1B,IACA,UACA;IAEA,MAAM,aAAa,MAAM,OAAO,CAAC,MAAM,KAAK;QAAC;KAAG;IAEhD,MAAM,UAAU,WACb,GAAG,CAAC,CAAC,IAAM,eAAe,IAAI,CAAC,CAAC,IAAM,EAAE,EAAE,KAAK,IAC/C,MAAM,CAAC,CAAC,IAAM,MAAM;IACvB,IAAI,QAAQ,MAAM,KAAK,GAAG,OAAO;IAEjC,MAAM,UAAU,AACd,QACG,GAAG,CAAC,CAAC,IAAM,EAAE,QAAQ,EACrB,GAAG,CAAC,CAAC,MAAQ,eAAe,IAAI,CAAC,CAAC,IAAM,QAAQ,EAAE,EAAE,GACvD,MAAM,CAAC,CAAC,IAAM,MAAM;IACtB,IAAI,QAAQ,MAAM,KAAK,GAAG,OAAO;SAE/B,OAAO,0CACL,QAAQ,GAAG,CAAC,CAAC,IAAM,EAAE,EAAE,GACvB;WAAI;WAAa,QAAQ,MAAM,CAAC,CAAC,IAAM,CAAC,SAAS,QAAQ,CAAC;KAAI,EAC9D;AAEN;;;ACxBO,MAAM,4CAAmB,CAAC,IAAiB;IAChD,MAAM,aAAa,MAAM,OAAO,CAAC,MAAM,KAAK;QAAC;KAAG;IAChD,MAAM,cAAc,eACjB,MAAM,CACL,CAAC,IACC,EAAE,QAAQ,KAAK,aAAa,WAAW,QAAQ,CAAC,EAAE,QAAQ,KAAK,CAAC,WAAW,QAAQ,CAAC,EAAE,EAAE,GAE3F,GAAG,CAAC,CAAC,IAAM,EAAE,EAAE;IAClB,OAAO,YAAY,MAAM,KAAK,IAC1B,aACA,0CAAiB;WAAI;WAAe;KAAY,EAAE;AACxD;;;;;ACKO,MAAM,4CAAqB,CAAA,GAAA,0BAAY,EAC5C;;;;;;ACLK,MAAM,0DAAY,CAAA,GAAA,uBAAS,EAChC,CACE,MAAE,EAAE,aAAE,SAAS,SAAE,KAAK,WAAE,OAAO,UAAE,MAAM,YAAE,QAAQ,cAAE,UAAU,SAAE,KAAK,cAAE,aAAa,QAAQ,EAC3F;IAEA,MAAM,CAAC,cAAc,gBAAgB,GAAG,CAAA,GAAA,qBAAO,EAAU,kBAAA,mBAAA,QAAS;IAClE,CAAA,GAAA,sBAAQ,EAAE;QACR,gBAAgB,kBAAA,mBAAA,QAAS;IAC3B,GAAG;QAAC;KAAM;IAEV,MAAM,WAAW,CAAC;QAChB,IAAI,EAAE,IAAI,KAAK,UAAU;YACvB,gBAAgB,kBAAA,mBAAA,QAAS;YACzB,uBAAA,iCAAA;QACF,OAAO,IAAI,EAAE,IAAI,KAAK,SACpB,qBAAA,+BAAA,SAAW;IAEf;IAEA,2DAA2D;IAC3D,CAAA,GAAA,sBAAQ,EAAE;QACR,MAAM,kBAAkB,CAAC;YACvB,MAAM,SAAS,EAAE,MAAM;YACvB,IACE,WACA,OAAO,EAAE,KAAK,GAAG,IAAI,IACrB,OAAO,EAAE,KAAK,GAAG,GAAG,OAAO,CAAC,IAC5B,OAAO,EAAE,KAAK,GAAG,GAAG,QAAQ,CAAC,IAC7B,OAAO,SAAS,KAAK,cACrB;gBACA,EAAE,cAAc;gBAChB,EAAE,eAAe;gBACjB,qBAAA,+BAAA,SAAW;YACb;QACF;QACA,OAAO,gBAAgB,CAAC,aAAa;QACrC,OAAO;YACL,OAAO,mBAAmB,CAAC,aAAa;QAC1C;IACF,GAAG;QAAC;QAAc;QAAS;QAAI;KAAS;IAExC,OAAO,CAAC,wBACN,gCAAC;QACC,WAAU;QACV,OAAO;QACP,IAAI,GAAG,IAAI;kBAEV,QAAQ,sBAAQ;sBAAE;;uBAGrB,iCAAC;QACC,OAAO;QACP,IAAI,GAAG,GAAG,OAAO,CAAC;QAClB,WAAU;;YAET,wBACC,gCAAC,CAAA,GAAA,6BAAM;gBACL,IAAI,GAAG,GAAG,QAAQ,CAAC;gBACnB,MAAK;gBACL,WAAU;;0BAGd,gCAAC;gBACC,SAAS;gBACT,YAAY;gBACZ,IAAI,OAAO;gBACX,KAAK;gBACL,MAAK;gBACL,WAAW;oBAAC;oBAAc;iBAAU,CAAC,MAAM,CAAC,SAAS,IAAI,CAAC;gBAC1D,OAAO;gBACP,UAAU;gBACV,UAAU,CAAC,IAAM,gBAAgB,EAAE,aAAa,CAAC,KAAK;gBACtD,QAAQ,CAAC,IAAM,qBAAA,+BAAA,SAAW,EAAE,aAAa,CAAC,KAAK;gBAC/C,kBAAkB;;;;AAI1B;AAGF,0CAAU,WAAW,GAAG;;;AJrEjB,MAAM,4CAAW,CAAC,MACvB,EAAE,aACF,SAAS,aACT,SAAS,kBACT,cAAc,qBACd,iBAAiB,qBACjB,iBAAiB,EACH;IACd,WAAW;IACX,MAAM,cAAc,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,yCAAiB;IAEhD,mBAAmB;IACnB,MAAM,WAAW,wBAAA,kCAAA,YAAa,QAAQ,CAAC,IAAI,CAAC,CAAC,IAAM,EAAE,EAAE,KAAK;IAC5D,MAAM,aAAa,wBAAA,kCAAA,YAAa,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAM,EAAE,QAAQ,KAAK;QAC7B;IAAzC,MAAM,cAAc,CAAA,GAAA,yCAAe,EAAE,IAAI,CAAA,wBAAA,wBAAA,kCAAA,YAAa,QAAQ,cAArB,mCAAA,wBAAyB,EAAE;IAEpE,QAAQ;IACR,MAAM,CAAC,OAAO,SAAS,GAAG,CAAA,GAAA,qBAAO,EAAW;IAC5C,MAAM,CAAC,WAAW,aAAa,GAAG,CAAA,GAAA,qBAAO,EAAU;QACjC;IAAlB,MAAM,WAAW,AAAC,CAAA,CAAA,uCAAA,wBAAA,kCAAA,YAAa,aAAa,CAAC,SAAS,CAAC,CAAC,IAAM,MAAM,iBAAlD,kDAAA,uCAAyD,EAAC,IAAK;IAEjF,WAAW;IACX,MAAM,WAAW,CAAA,GAAA,mBAAK,EAA2B;IACjD,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,SAAS,OAAO,EAAE;YACpB,IAAI,wBAAA,kCAAA,YAAa,QAAQ,CAAC,QAAQ,CAAC,KAAK;gBACtC,SAAS,OAAO,CAAC,OAAO,GAAG;gBAC3B,SAAS,OAAO,CAAC,aAAa,GAAG;YACnC,OAAO,IAAI,YAAY,IAAI,CAAC,CAAC,IAAM,wBAAA,kCAAA,YAAa,QAAQ,CAAC,QAAQ,CAAC,KAAK;gBACrE,SAAS,OAAO,CAAC,OAAO,GAAG;gBAC3B,SAAS,OAAO,CAAC,aAAa,GAAG;YACnC,OAAO;gBACL,SAAS,OAAO,CAAC,OAAO,GAAG;gBAC3B,SAAS,OAAO,CAAC,aAAa,GAAG;YACnC;QACF;IACF,GAAG;QAAC;QAAa;QAAI,wBAAA,kCAAA,YAAa,QAAQ;KAAC;IAE3C,wBAAwB;IACxB,MAAM,gBAAwB,CAAA,wBAAA,kCAAA,YAAa,QAAQ,CAAC,QAAQ,CAAC,OAAM,oBAAoB;IACvF,MAAM,aAAiC,AAAC,CAAA;QACtC,IAAI,eAAe,YAAY,QAAQ,EAAE;YACvC,MAAM,MAAM,CAAA,GAAA,yCAAW,EAAE,YAAY,QAAQ,EAAE,EAAE,EAAE,wBAAA,kCAAA,YAAa,QAAQ,EAAE,GAAG,CAAC,CAAC,IAAM,EAAE,EAAE;YACzF,IAAI;mBAAI;gBAAK,YAAY,QAAQ;aAAC,CAAC,QAAQ,CAAC,KAAK,OAAO,YAAY,aAAa;QACnF;QACA;IACF,CAAA;IAEA,sBAAsB;IACtB,MAAM,aAAa,CAAA,GAAA,mBAAK,EAA2B;IACnD,MAAM,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,qBAAO,EAAW;IACxD,MAAM,CAAC,eAAe,iBAAiB,GAAG,CAAA,GAAA,qBAAO,EAAW;IAE5D,oBAAoB;IACpB,MAAM,iBAAiB,CAAA,GAAA,mBAAK,EAA2B;IACvD,MAAM,CAAC,UAAU,YAAY,GAAG,CAAA,GAAA,qBAAO,EAAW;IAClD,MAAM,CAAC,cAAc,gBAAgB,GAAG,CAAA,GAAA,qBAAO,EAAW;IAE1D,oBAAoB;IACpB,MAAM,eAAe,CAAC;QACpB,IAAI,CAAC,IAAI,OAAO,EAAE;YAChB,SAAS;gBACI;YAAb,aAAa,CAAA,iBAAA,IAAI,SAAS,cAAb,4BAAA,iBAAiB;QAChC,OAAO;YACL,SAAS;YACT,aAAa;QACf;IACF;IAEA,MAAM,iBAAiB,OAAO;QAC5B,iBAAiB;QACjB,IAAI,wBAAA,kCAAA,YAAa,UAAU,EACzB,aAAa,MAAM,YAAY,UAAU,CAAC,IAAI;QAEhD,iBAAiB;QACjB,eAAe;IACjB;IAEA,MAAM,aAAa,OAAO;QACxB,YAAY;QACZ,IAAI,wBAAA,kCAAA,YAAa,QAAQ,EAAE;YACzB,gBAAgB;YAChB,aAAa,MAAM,YAAY,QAAQ,CAAC,IAAI;YAC5C,gBAAgB;QAClB;IACF;IAEA,MAAM,aAAa;QACjB,IAAI,wBAAA,kCAAA,YAAa,QAAQ,EAAE;YACzB,gBAAgB;YAChB,aAAa,MAAM,YAAY,QAAQ,CAAC;YACxC,gBAAgB;QAClB;IACF;IAEA,kBAAkB;IAClB,MAAM,WAAW;YAEf;QADA,eAAe;QACf,wBAAA,mCAAA,iCAAA,YAAa,iBAAiB,cAA9B,qDAAA,oCAAA,aAAiC,IAAI;IACvC;IACA,MAAM,aAAa;YAEjB;QADA,YAAY;QACZ,wBAAA,mCAAA,4BAAA,YAAa,YAAY,cAAzB,gDAAA,+BAAA,aAA4B;IAC9B;IAEA,eAAe;IACf,MAAM,YAAyB,EAAE;IACjC,IAAI,gBACF,UAAU,IAAI,CAAC;QAAE,OAAO;QAAO,QAAQ;IAAS;IAElD,IAAI,WACF,UAAU,IAAI,CAAC;QAAE,OAAO;QAAU,QAAQ;IAAW;IAEvD,IAAI,aAAc,CAAA,eAAe,aAAa,WAAW,MAAM,KAAK,CAAA,GAClE,UAAU,IAAI,CAAC;QAAE,OAAO;QAAU,QAAQ;IAAW;IAGvD,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,gBAAgB,QAAQ,WAAW,OAAO,EAAE,WAAW,OAAO,CAAC,KAAK;IAC1E,GAAG;QAAC;KAAY;IAEhB,cAAc;IACd,OAAO,CAAC,cAAc,qBACpB;;0BACE,gCAAC,CAAA,GAAA,yCAAiB;gBAChB,WAAW;gBACX,OAAO;oBAAE,SAAS;oBAAgB,OAAO;gBAAO;0BAEhD,cAAA,gCAAC;oBACC,IAAI,GAAG,YAAY,EAAE,CAAC,UAAU,EAAE,IAAI;oBACtC,WAAU;8BAET,sBACC;;0CACE,gCAAC,CAAA,GAAA,gDAAoB;gCAAE,OAAM;;4BAAqB;4BAAE;;uCAGtD,iCAAC;wBAAI,WAAU;;4BACZ,YAAY,YAAY,kBACvB,gCAAC;gCACC,KAAK;gCACL,MAAK;gCACL,MAAK;gCACL,WAAU;gCACV,IAAI,GAAG,YAAY,EAAE,CAAC,mBAAmB,EAAE,IAAI;gCAC/C,SAAS;wCAAM;4CAAA,4BAAA,YAAY,YAAY,cAAxB,gDAAA,+BAAA,aAA2B;;;4BAG7C,cAAc,WAAW,MAAM,GAAG,IACjC,CAAC,yBACC,gCAAC,CAAA,GAAA,yCAAa;gCACZ,IAAI,GAAG,YAAY,EAAE,CAAC,gBAAgB,EAAE,IAAI;gCAC5C,OAAO;oCAAE,OAAO;oCAAQ,QAAQ;gCAAO;gCACvC,WAAU;gCACV,MAAK;gCACL,OAAO;gCACP,iBAAe;gCACf,cAAW;gCACX,SAAS,IAAM,YAAY,iBAAiB,CAAC;+CAG/C,gCAAC,CAAA,GAAA,wCAAY;gCACX,IAAI,GAAG,YAAY,EAAE,CAAC,gBAAgB,EAAE,IAAI;gCAC5C,WAAU;gCACV,MAAK;gCACL,iBAAe;gCACf,cAAW;gCACX,OAAO;gCACP,SAAS,IAAM,YAAY,iBAAiB,CAAC;+CAIjD,gCAAC,CAAA,GAAA,qCAAS;gCACR,IAAI,GAAG,YAAY,EAAE,CAAC,gBAAgB,EAAE,IAAI;gCAC5C,WAAU;gCACV,MAAK;gCACL,OAAO;gCACP,iBAAe;gCACf,cAAW;gCACX,SAAS;wCAAM;4CAAA,4BAAA,YAAY,YAAY,cAAxB,gDAAA,+BAAA,aAA2B;;;4BAG7C,0BACC,gCAAC;gCACC,WAAU;gCACV,OAAO;oCAAE,OAAO,CAAC,YAAY,EAAE,YAAY,YAAY,GAAG,SAAS,OAAO,CAAC,CAAC;gCAAC;gCAC7E,sBAAsB;wCAAM;4CAAA,4BAAA,YAAY,YAAY,cAAxB,gDAAA,+BAAA,aAA2B;;gCACvD,gBAAgB;wCAEd;oCADA,IAAI,CAAC,YAAY,aAAa,CAAC,QAAQ,CAAC,KAAK,YAAY,iBAAiB,CAAC;qCAC3E,4BAAA,YAAY,YAAY,cAAxB,gDAAA,+BAAA,aAA2B;gCAC7B;gCACA,gBAAgB;wCAAM;4CAAA,4BAAA,YAAY,YAAY,cAAxB,gDAAA,+BAAA,aAA2B;;0CAEjD,cAAA,gCAAC,CAAA,GAAA,yCAAQ;oCACP,IAAI,GAAG,YAAY,EAAE,CAAC,gBAAgB,EAAE,IAAI;oCAC5C,WAAW,gBAAgB,aAAa;oCACxC,KAAK;oCACL,OAAO,SAAS,KAAK;oCACrB,SAAS;oCACT,QAAQ;oCACR,UAAU,CAAC,MAAQ,WAAW;oCAC9B,YAAY,IAAM,YAAY;oCAC9B,OAAO;wCACL,QAAQ;wCACR,QAAQ,kBAAkB,KAAK,QAAQ;wCACvC,iBAAiB,kBAAkB,KAAK,KAAK,YAAY,aAAa;oCACxE;oCACA,YAAY,YAAY,UAAU;;;;;;;YAQ/C,4BACC,gCAAC;gBACC,WAAW,CAAC,wBAAwB,EAAE,YAAY,WAAW,MAAM,GAAG,IAAI,KAAK,aAAa;0BAE3F,WAAW,MAAM,GAAG,mBACnB,gCAAC;oBAAI,WAAU;8BACZ,WAAW,GAAG,CAAC,CAAC,kBACf,gCAAC;4BAEC,IAAI,GAAG,YAAY,EAAE,CAAC,gBAAgB,EAAE,EAAE,EAAE,EAAE;4BAC9C,WAAU;sCAEV,cAAA,gCAAC;gCACC,IAAI,EAAE,EAAE;gCACR,WAAW;gCACX,WAAW;gCACX,gBAAgB;gCAChB,mBAAmB;gCACnB,mBAAmB;;2BAVhB,EAAE,EAAE;;;YAkBpB,6BACC,gCAAC,CAAA,GAAA,yCAAQ;gBACP,OAAO;oBAAE,YAAY;gBAAO;gBAC5B,IAAI,CAAC,aAAa,EAAE,IAAI;gBACxB,KAAK;gBACL,SAAS;gBACT,UAAU,CAAC,MAAQ,eAAe;gBAClC,QAAQ;gBACR,YAAY,IAAM,eAAe;gBACjC,YAAY,YAAY,UAAU;;;;AAK5C;AAEA,0CAAS,WAAW,GAAG;;;;;;AMvRhB,MAAM,4CAAqB,CAChC,UACA,UACA;IAEA,OAAO;WACF;WACA,CAAA,GAAA,yCAAW,EAAE,UAAU,EAAE,EAAE,UAC3B,GAAG,CAAC,CAAC,IAAM,EAAE,EAAE,EACf,MAAM,CAAC,CAAC,IAAM,CAAC,cAAc,QAAQ,CAAC;KAC1C,CAAC,IAAI,CAAC,CAAC,GAAG,IAAM,GAAG,GAAG,CAAC,aAAa,CAAC,GAAG,GAAG;AAC9C;;;;;ADYO,MAAM,4CAAc,CAAK,sBAC9B,qBAAqB,yBACrB,iBAAiB,0BACjB,oBAAoB,sBACpB,gBAAgB,0BAChB,oBAAoB,sBACpB,gBAAgB,qBAChB,YAAY,MACZ,EAAE,iBACF,gBAAgB,iBAChB,QAAQ,SACR,KAAK,YACL,QAAQ,YACR,QAAQ,SACR,KAAK,YACL,WAAW,EAAE,gBACb,eAAe,mBACf,aAAa,uBACb,gBAAgB,wBACI;IACpB,MAAM,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,qBAAO,EAAW,uBAAuB;IAC/E,MAAM,CAAC,eAAe,iBAAiB,GAAG,CAAA,GAAA,qBAAO,EAAS,EAAE;IAC5D,CAAA,GAAA,sBAAQ,EAAE;QACR,MAAM,gBAAgB,MAAM,OAAO,CAAC,YAAY,WAAW;YAAC;SAAS;QACrE,IAAI,AAAC,CAAA,uBAAuB,YAAY,WAAU,KAAM,cAAc,MAAM,GAAG,GAAG;YAChF,6CAA6C;YAC7C,MAAM,eAAe,CAAA,GAAA,yCAAiB,EAAE,UAAU,eAAe;YACjE,IAAI,aAAa,MAAM,CAAC,CAAC,IAAM,CAAC,cAAc,QAAQ,CAAC,IAAI,MAAM,GAAG,GAClE,iBAAiB;YAEnB,eAAe;QACjB;IACF,GAAG;QAAC;QAAoB;QAAa;QAAe;QAAU;KAAS;IAEvE,uCAAuC;IACvC,MAAM,eAAe,CAAC,MAAW;QAC/B,MAAM,mBAAmB;eAAI;SAAc;QAC3C,MAAM,KAAK,iBAAiB,SAAS,CAAC,CAAC,OAAS,SAAS;QACzD,IAAI,AAAC,OAAO,MAAM,UAAU,aAAc,UAAU,MAAM,iBAAiB,IAAI,CAAC;aAC3E,iBAAiB,MAAM,CAAC,IAAI;QACjC,iBAAiB;IACnB;IAEA,qBACE,gCAAC;QACC,IAAI;QACJ,WAAU;kBAEV,cAAA,gCAAC,CAAA,GAAA,yCAAiB,EAAE,QAAQ;YAC1B,OAAO;gBACL,IAAI;+BACJ;gBACA,mBAAmB,CAAC,GAAG,IAAM,aAAa,GAAG;8BAC7C;+BACA;0BACA;gBACA,YAAY;0BACZ;0BACA;gBACA,UAAU,MAAM,OAAO,CAAC,YAAY,WAAW;oBAAC;iBAAS;8BACzD;4BACA;+BACA;YACF;sBAEC,MAAM,GAAG,CAAC,CAAC,kBACV,gCAAC,CAAA,GAAA,yCAAO;oBAEN,IAAI;oBACJ,WAAW;oBACX,gBAAgB;oBAChB,WAAW;oBACX,mBAAmB;oBACnB,mBAAmB;mBANd;;;AAYjB;AAEA,0CAAY,WAAW,GAAG;;;;;;;;;;;","sources":["src/main.ts","src/components/index.ts","src/components/TreeNode.tsx","src/functions/getAncestors.tsx","src/functions/getDescendentIds.ts","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 { INodeUpdate, TreeNodeBase, TreeNodeData } from \"./interface\";\nimport { TreeNode } from \"./TreeNode\";\nimport { TreeOfNodes } from \"./TreeOfNodes\";\nimport { WordEntry } from \"./WordEntry\";\n\nexport { TreeNode, TreeOfNodes, WordEntry };\nexport type { INodeUpdate, TreeNodeBase, TreeNodeData };\n","import { ContextMenuHandler, IMenuItem } from \"@asup/context-menu\";\nimport { Key, ReactNode, useContext, useEffect, useRef, useState } from \"react\";\nimport {\n CaretDownFill,\n CaretRight,\n CaretRightFill,\n ExclamationCircleFill,\n} from \"react-bootstrap-icons\";\nimport { getAncestors } from \"../functions/getAncestors\";\nimport { getDescendentIds } from \"../functions/getDescendentIds\";\nimport \"./TreeNode.css\";\nimport { TreeOfNodesContext } from \"./TreeOfNodesContext\";\nimport { WordEntry } from \"./WordEntry\";\nimport { INodeUpdate } from \"./interface\";\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): ReactNode => {\n // Contexts\n const treeContext = useContext(TreeOfNodesContext);\n\n // Node information\n const thisNode = treeContext?.nodeList.find((n) => n.id === id);\n const childNodes = treeContext?.nodeList.filter((n) => n.parentId === id);\n const descendents = getDescendentIds(id, treeContext?.nodeList ?? []);\n\n // State\n const [error, setError] = useState<boolean>(false);\n const [errorText, setErrorText] = useState<string>(\"\");\n const expanded = (treeContext?.expandedNodes.findIndex((e) => e === id) ?? -1) > -1;\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: string = treeContext?.selected.includes(id) ? \"1px solid black\" : \"\";\n const nodeColour: 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 })();\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 = (ret: INodeUpdate) => {\n if (!ret.success) {\n setError(true);\n setErrorText(ret.ErrorText ?? \"An unknown error has occured\");\n } else {\n setError(false);\n setErrorText(\"\");\n }\n };\n\n const confirmNewNode = 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\n const renameNode = 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\n const deleteThis = async () => {\n if (treeContext?.onRemove) {\n setUpdatingNode(true);\n handleReturn(await treeContext.onRemove(id));\n setUpdatingNode(false);\n }\n };\n\n // Context actions\n const addChild = () => {\n setShowNewNode(true);\n treeContext?.handleExpandClick?.(id, true);\n };\n const renameThis = () => {\n setRenaming(true);\n treeContext?.handleSelect?.(id);\n };\n\n // Context menu\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\n useEffect(() => {\n if (showNewNode === true && newNameRef.current) newNameRef.current.focus();\n }, [showNewNode]);\n\n // Return node\n return !treeContext ? null : (\n <>\n <ContextMenuHandler\n menuItems={menuItems}\n style={{ display: \"inline-block\", width: \"100%\" }}\n >\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=\"ton-node\">\n {treeContext.showCheckBox && (\n <input\n ref={checkRef}\n type=\"checkbox\"\n role=\"checkbox\"\n className=\"ton-checkbox\"\n id={`${treeContext.id}-treenode-checkbox-${id}`}\n onClick={() => treeContext.handleSelect?.(descendents)}\n />\n )}\n {childNodes && childNodes.length > 0 ? (\n !expanded ? (\n <CaretRightFill\n id={`${treeContext.id}-treenode-caret-${id}`}\n style={{ width: \"16px\", height: \"16px\" }}\n className=\"ton-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=\"ton-expander\"\n role=\"button\"\n aria-expanded={true}\n aria-label=\"Expander\"\n color={nodeColour}\n onClick={() => treeContext.handleExpandClick(id)}\n />\n )\n ) : (\n <CaretRight\n id={`${treeContext.id}-treenode-caret-${id}`}\n className=\"ton-expander\"\n role=\"button\"\n color={nodeColour}\n aria-expanded={false}\n aria-label=\"Disabled expander\"\n onClick={() => treeContext.handleSelect?.(id)}\n />\n )}\n {thisNode && (\n <div\n className=\"ton-label\"\n style={{ width: `calc(100% - ${treeContext.showCheckBox ? \"32px\" : \"16px\"})` }}\n onContextMenuCapture={() => treeContext.handleSelect?.(id)}\n onClickCapture={() => {\n if (!treeContext.expandedNodes.includes(id)) treeContext.handleExpandClick(id);\n treeContext.handleSelect?.(id);\n }}\n onFocusCapture={() => treeContext.handleSelect?.(id)}\n >\n <WordEntry\n id={`${treeContext.id}-treenode-entry-${id}`}\n className={currentBorder ? \"selected\" : \"\"}\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 spellCheck={treeContext.spellCheck}\n />\n </div>\n )}\n </div>\n )}\n </div>\n </ContextMenuHandler>\n {childNodes && (\n <div\n className={`ton-collapsible-wrapper ${expanded && childNodes.length > 0 ? \"\" : \"collapsed\"}`}\n >\n {childNodes.length > 0 && (\n <div className=\"ton-collapsible\">\n {childNodes.map((h) => (\n <span\n key={h.id}\n id={`${treeContext.id}-treenode-child-${h.id}`}\n className=\"ton-child\"\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 </div>\n )}\n </div>\n )}\n {showNewNode && (\n <WordEntry\n style={{ marginLeft: \"14px\" }}\n id={`treenode-new-${id}`}\n ref={newNameRef}\n editing={true}\n setValue={(ret) => confirmNewNode(ret)}\n saving={savingNewNode}\n sendEscape={() => setShowNewNode(false)}\n spellCheck={treeContext.spellCheck}\n />\n )}\n </>\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 { 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 { 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 spellCheck?: \"true\" | \"false\";\n}\n\nexport const TreeOfNodesContext = createContext<TreeOfNodesContextProps<unknown> | undefined>(\n undefined,\n);\n","import { CSSProperties, forwardRef, JSX, Key, KeyboardEvent, useEffect, useState } from \"react\";\nimport { Spinner } from \"react-bootstrap\";\n\ninterface WordEntryProps {\n id: Key;\n className?: string;\n editing?: boolean;\n saving?: boolean;\n sendEscape?: () => void;\n setValue?: (ret: string) => void;\n spellCheck?: \"true\" | \"false\";\n style?: CSSProperties;\n value?: string;\n}\n\nexport const WordEntry = forwardRef<HTMLInputElement, WordEntryProps>(\n (\n { id, className, value, editing, saving, setValue, sendEscape, style, spellCheck = \"true\" },\n ref,\n ): JSX.Element => {\n const [currentValue, setCurrentValue] = useState<string>(value ?? \"\");\n useEffect(() => {\n setCurrentValue(value ?? \"\");\n }, [value]);\n\n const keyPress = (e: KeyboardEvent) => {\n if (e.code === \"Escape\") {\n setCurrentValue(value ?? \"\");\n sendEscape?.();\n } else if (e.code === \"Enter\") {\n setValue?.(currentValue);\n }\n };\n\n // Add window onMouseDown event to stop events when editing\n useEffect(() => {\n const handleMouseDown = (e: MouseEvent) => {\n const target = e.target as HTMLElement;\n if (\n editing &&\n target.id !== `${id}` &&\n target.id !== `${id}-holder` &&\n target.id !== `${id}-spinner` &&\n target.className !== \"ton-rename\"\n ) {\n e.preventDefault();\n e.stopPropagation();\n setValue?.(currentValue);\n }\n };\n window.addEventListener(\"mousedown\", handleMouseDown);\n return () => {\n window.removeEventListener(\"mousedown\", handleMouseDown);\n };\n }, [currentValue, editing, id, setValue]);\n\n return !editing ? (\n <span\n className=\"ton-label-span\"\n style={style}\n id={`${id}`}\n >\n {value ? value : <> </>}\n </span>\n ) : (\n <div\n style={style}\n id={`${id}-holder`}\n className=\"ton-rename-holder\"\n >\n {saving && (\n <Spinner\n id={`${id}-spinner`}\n size=\"sm\"\n animation=\"border\"\n />\n )}\n <input\n autoFocus\n spellCheck={spellCheck}\n id={String(id)}\n ref={ref}\n type=\"text\"\n className={[\"ton-rename\", className].filter(Boolean).join(\" \")}\n value={currentValue}\n disabled={saving}\n onChange={(e) => setCurrentValue(e.currentTarget.value)}\n onBlur={(e) => setValue?.(e.currentTarget.value)}\n onKeyDownCapture={keyPress}\n />\n </div>\n );\n },\n);\n\nWordEntry.displayName = \"WordEntry\";\n","import { Key, useEffect, useState } from \"react\";\nimport { checkExpandedNodes } from \"../functions/checkExpandedNodes\";\nimport { INodeUpdate, TreeNodeData } from \"./interface\";\nimport { TreeNode } from \"./TreeNode\";\nimport { TreeOfNodesContext } from \"./TreeOfNodesContext\";\n\nexport interface TreeOfNodesProps<T> {\n alwaysShowSelected?: \"always\" | \"first\";\n canAddChildren?: boolean;\n canRemoveChildren?: boolean;\n canRemoveRoot?: boolean;\n canRenameChildren?: boolean;\n canRenameRoot?: boolean;\n handleSelect?: (ret: Key | Key[]) => void;\n id: string;\n nodeHighlight?: string;\n nodeList: TreeNodeData<T>[];\n onAdd?: (parentId: Key, newName: string) => Promise<INodeUpdate>;\n onRemove?: (childId: Key) => Promise<INodeUpdate>;\n onRename?: (childId: Key, newName: string) => Promise<INodeUpdate>;\n roots: Key[];\n selected?: Key | Key[];\n showCheckBox?: boolean;\n spellCheck?: \"true\" | \"false\";\n textHighlight?: string;\n}\n\nexport const TreeOfNodes = <T,>({\n alwaysShowSelected = \"first\",\n canAddChildren = false,\n canRemoveChildren = false,\n canRemoveRoot = false,\n canRenameChildren = false,\n canRenameRoot = false,\n handleSelect,\n id,\n nodeHighlight = \"red\",\n nodeList,\n onAdd,\n onRemove,\n onRename,\n roots,\n selected = [],\n showCheckBox = false,\n spellCheck = \"true\",\n textHighlight = \"rgba(255, 0, 0, 0.2)\",\n}: TreeOfNodesProps<T>) => {\n const [firstRender, setFirstRender] = useState<boolean>(alwaysShowSelected === \"first\");\n const [expandedNodes, setExpandedNodes] = useState<Key[]>([]);\n useEffect(() => {\n const selectedArray = Array.isArray(selected) ? selected : [selected];\n if ((alwaysShowSelected === \"always\" || firstRender) && selectedArray.length > 0) {\n // Check all nodes are showing that should be\n const shouldExpand = checkExpandedNodes(nodeList, selectedArray, expandedNodes);\n if (shouldExpand.filter((n) => !expandedNodes.includes(n)).length > 0) {\n setExpandedNodes(shouldExpand);\n }\n setFirstRender(false);\n }\n }, [alwaysShowSelected, firstRender, expandedNodes, nodeList, selected]);\n\n // Change expansion and update contexts\n const changeExpand = (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\n return (\n <div\n id={id}\n className=\"tree-of-nodes\"\n >\n <TreeOfNodesContext.Provider\n value={{\n id: id,\n expandedNodes,\n handleExpandClick: (r, f) => changeExpand(r, f),\n handleSelect,\n nodeHighlight,\n nodeList,\n onAddChild: onAdd,\n onRemove,\n onRename,\n selected: Array.isArray(selected) ? selected : [selected],\n showCheckBox,\n spellCheck,\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 </div>\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"}
|
|
1
|
+
{"mappings":"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","sources":["src/main.ts","src/components/index.ts","src/components/TreeNode.tsx","src/functions/getAncestors.tsx","src/functions/getDescendentIds.ts","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 { INodeUpdate, TreeNodeBase, TreeNodeData } from \"./interface\";\nimport { TreeNode } from \"./TreeNode\";\nimport { TreeOfNodes } from \"./TreeOfNodes\";\nimport { WordEntry } from \"./WordEntry\";\n\nexport { TreeNode, TreeOfNodes, WordEntry };\nexport type { INodeUpdate, TreeNodeBase, TreeNodeData };\n","import { ContextMenuHandler, IMenuItem } from \"@asup/context-menu\";\nimport { Key, ReactNode, useContext, useEffect, useRef, useState } from \"react\";\nimport {\n CaretDownFill,\n CaretRight,\n CaretRightFill,\n ExclamationCircleFill,\n} from \"react-bootstrap-icons\";\nimport { getAncestors } from \"../functions/getAncestors\";\nimport { getDescendentIds } from \"../functions/getDescendentIds\";\nimport \"./TreeNode.css\";\nimport { TreeOfNodesContext } from \"./TreeOfNodesContext\";\nimport { WordEntry } from \"./WordEntry\";\nimport { INodeUpdate } from \"./interface\";\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): ReactNode => {\n // Contexts\n const treeContext = useContext(TreeOfNodesContext);\n\n // Node information\n const thisNode = treeContext?.nodeList.find((n) => n.id === id);\n const childNodes = treeContext?.nodeList.filter((n) => n.parentId === id);\n const descendents = getDescendentIds(id, treeContext?.nodeList ?? []);\n\n // State\n const [error, setError] = useState<boolean>(false);\n const [errorText, setErrorText] = useState<string>(\"\");\n const expanded = (treeContext?.expandedNodes.findIndex((e) => e === id) ?? -1) > -1;\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: string = treeContext?.selected.includes(id) ? \"1px solid black\" : \"\";\n const nodeColour: 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 })();\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 = (ret: INodeUpdate) => {\n if (!ret.success) {\n setError(true);\n setErrorText(ret.ErrorText ?? \"An unknown error has occured\");\n } else {\n setError(false);\n setErrorText(\"\");\n }\n };\n\n const confirmNewNode = 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\n const renameNode = 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\n const deleteThis = async () => {\n if (treeContext?.onRemove) {\n setUpdatingNode(true);\n handleReturn(await treeContext.onRemove(id));\n setUpdatingNode(false);\n }\n };\n\n // Context actions\n const addChild = () => {\n setShowNewNode(true);\n treeContext?.handleExpandClick?.(id, true);\n };\n const renameThis = () => {\n setRenaming(true);\n treeContext?.handleSelect?.(id);\n };\n\n // Context menu\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\n useEffect(() => {\n if (showNewNode === true && newNameRef.current) newNameRef.current.focus();\n }, [showNewNode]);\n\n // Return node\n return !treeContext ? null : (\n <>\n <ContextMenuHandler\n menuItems={menuItems}\n style={{ display: \"inline-block\", width: \"100%\" }}\n >\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=\"ton-node\">\n {treeContext.showCheckBox && (\n <input\n ref={checkRef}\n type=\"checkbox\"\n role=\"checkbox\"\n className=\"ton-checkbox\"\n id={`${treeContext.id}-treenode-checkbox-${id}`}\n onClick={() => treeContext.handleSelect?.(descendents)}\n />\n )}\n {childNodes && childNodes.length > 0 ? (\n !expanded ? (\n <CaretRightFill\n id={`${treeContext.id}-treenode-caret-${id}`}\n style={{ width: \"16px\", height: \"16px\" }}\n className=\"ton-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=\"ton-expander\"\n role=\"button\"\n aria-expanded={true}\n aria-label=\"Expander\"\n color={nodeColour}\n onClick={() => treeContext.handleExpandClick(id)}\n />\n )\n ) : (\n <CaretRight\n id={`${treeContext.id}-treenode-caret-${id}`}\n className=\"ton-expander\"\n role=\"button\"\n color={nodeColour}\n aria-expanded={false}\n aria-label=\"Disabled expander\"\n onClick={() => treeContext.handleSelect?.(id)}\n />\n )}\n {thisNode && (\n <div\n className=\"ton-label\"\n style={{ width: `calc(100% - ${treeContext.showCheckBox ? \"32px\" : \"16px\"})` }}\n onContextMenuCapture={() => treeContext.handleSelect?.(id)}\n onClickCapture={() => {\n if (!treeContext.expandedNodes.includes(id)) treeContext.handleExpandClick(id);\n treeContext.handleSelect?.(id);\n }}\n onFocusCapture={() => treeContext.handleSelect?.(id)}\n >\n <WordEntry\n id={`${treeContext.id}-treenode-entry-${id}`}\n className={currentBorder ? \"selected\" : \"\"}\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 spellCheck={treeContext.spellCheck}\n />\n </div>\n )}\n </div>\n )}\n </div>\n </ContextMenuHandler>\n {childNodes && (\n <div\n className={`ton-collapsible-wrapper ${expanded && childNodes.length > 0 ? \"\" : \"collapsed\"}`}\n >\n {childNodes.length > 0 && (\n <div className=\"ton-collapsible\">\n {childNodes.map((h) => (\n <span\n key={h.id}\n id={`${treeContext.id}-treenode-child-${h.id}`}\n className=\"ton-child\"\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 </div>\n )}\n </div>\n )}\n {showNewNode && (\n <WordEntry\n style={{ marginLeft: \"14px\" }}\n id={`treenode-new-${id}`}\n ref={newNameRef}\n editing={true}\n setValue={(ret) => confirmNewNode(ret)}\n saving={savingNewNode}\n sendEscape={() => setShowNewNode(false)}\n spellCheck={treeContext.spellCheck}\n />\n )}\n </>\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 { 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 { 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 spellCheck?: \"true\" | \"false\";\n}\n\nexport const TreeOfNodesContext = createContext<TreeOfNodesContextProps<unknown> | undefined>(\n undefined,\n);\n","import { CSSProperties, forwardRef, JSX, Key, KeyboardEvent, useEffect, useState } from \"react\";\nimport { Spinner } from \"react-bootstrap\";\n\ninterface WordEntryProps {\n id: Key;\n className?: string;\n editing?: boolean;\n saving?: boolean;\n sendEscape?: () => void;\n setValue?: (ret: string) => void;\n spellCheck?: \"true\" | \"false\";\n style?: CSSProperties;\n value?: string;\n}\n\nexport const WordEntry = forwardRef<HTMLInputElement, WordEntryProps>(\n (\n { id, className, value, editing, saving, setValue, sendEscape, style, spellCheck = \"true\" },\n ref,\n ): JSX.Element => {\n const [currentValue, setCurrentValue] = useState<string>(value ?? \"\");\n useEffect(() => {\n setCurrentValue(value ?? \"\");\n }, [value]);\n\n const keyPress = (e: KeyboardEvent) => {\n if (e.code === \"Escape\") {\n setCurrentValue(value ?? \"\");\n sendEscape?.();\n } else if (e.code === \"Enter\") {\n setValue?.(currentValue);\n }\n };\n\n // Add window onMouseDown event to stop events when editing\n useEffect(() => {\n const handleMouseDown = (e: MouseEvent) => {\n const target = e.target as HTMLElement;\n if (\n editing &&\n target.id !== `${id}` &&\n target.id !== `${id}-holder` &&\n target.id !== `${id}-spinner` &&\n target.className !== \"ton-rename\"\n ) {\n e.preventDefault();\n e.stopPropagation();\n setValue?.(currentValue);\n }\n };\n window.addEventListener(\"mousedown\", handleMouseDown);\n return () => {\n window.removeEventListener(\"mousedown\", handleMouseDown);\n };\n }, [currentValue, editing, id, setValue]);\n\n return !editing ? (\n <span\n className=\"ton-label-span\"\n style={style}\n id={`${id}`}\n >\n {value ? value : <> </>}\n </span>\n ) : (\n <div\n style={style}\n id={`${id}-holder`}\n className=\"ton-rename-holder\"\n >\n {saving && (\n <Spinner\n id={`${id}-spinner`}\n size=\"sm\"\n animation=\"border\"\n />\n )}\n <input\n autoFocus\n spellCheck={spellCheck}\n id={String(id)}\n ref={ref}\n type=\"text\"\n className={[\"ton-rename\", className].filter(Boolean).join(\" \")}\n value={currentValue}\n disabled={saving}\n onChange={(e) => setCurrentValue(e.currentTarget.value)}\n onBlur={(e) => setValue?.(e.currentTarget.value)}\n onKeyDownCapture={keyPress}\n />\n </div>\n );\n },\n);\n\nWordEntry.displayName = \"WordEntry\";\n","import { Key, useEffect, useState } from \"react\";\nimport { checkExpandedNodes } from \"../functions/checkExpandedNodes\";\nimport { INodeUpdate, TreeNodeData } from \"./interface\";\nimport { TreeNode } from \"./TreeNode\";\nimport { TreeOfNodesContext } from \"./TreeOfNodesContext\";\n\nexport interface TreeOfNodesProps<T> {\n alwaysShowSelected?: \"always\" | \"first\";\n canAddChildren?: boolean;\n canRemoveChildren?: boolean;\n canRemoveRoot?: boolean;\n canRenameChildren?: boolean;\n canRenameRoot?: boolean;\n handleSelect?: (ret: Key | Key[]) => void;\n id: string;\n initiallyExpandedNodes?: Key[];\n nodeHighlight?: string;\n nodeList: TreeNodeData<T>[];\n onAdd?: (parentId: Key, newName: string) => Promise<INodeUpdate>;\n onRemove?: (childId: Key) => Promise<INodeUpdate>;\n onRename?: (childId: Key, newName: string) => Promise<INodeUpdate>;\n roots: Key[];\n selected?: Key | Key[];\n showCheckBox?: boolean;\n spellCheck?: \"true\" | \"false\";\n textHighlight?: string;\n}\n\nexport const TreeOfNodes = <T,>({\n alwaysShowSelected = \"first\",\n canAddChildren = false,\n canRemoveChildren = false,\n canRemoveRoot = false,\n canRenameChildren = false,\n canRenameRoot = false,\n handleSelect,\n id,\n initiallyExpandedNodes = [],\n nodeHighlight = \"red\",\n nodeList,\n onAdd,\n onRemove,\n onRename,\n roots,\n selected = [],\n showCheckBox = false,\n spellCheck = \"true\",\n textHighlight = \"rgba(255, 0, 0, 0.2)\",\n}: TreeOfNodesProps<T>) => {\n const [firstRender, setFirstRender] = useState<boolean>(alwaysShowSelected === \"first\");\n const [expandedNodes, setExpandedNodes] = useState<Key[]>(initiallyExpandedNodes);\n useEffect(() => {\n const selectedArray = Array.isArray(selected) ? selected : [selected];\n if ((alwaysShowSelected === \"always\" || firstRender) && selectedArray.length > 0) {\n // Check all nodes are showing that should be\n const shouldExpand = checkExpandedNodes(nodeList, selectedArray, expandedNodes);\n if (shouldExpand.filter((n) => !expandedNodes.includes(n)).length > 0) {\n setExpandedNodes(shouldExpand);\n }\n setFirstRender(false);\n }\n }, [alwaysShowSelected, firstRender, expandedNodes, nodeList, selected]);\n\n // Change expansion and update contexts\n const changeExpand = (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\n return (\n <div\n id={id}\n className=\"tree-of-nodes\"\n >\n <TreeOfNodesContext\n value={{\n id: id,\n expandedNodes,\n handleExpandClick: (r, f) => changeExpand(r, f),\n handleSelect,\n nodeHighlight,\n nodeList,\n onAddChild: onAdd,\n onRemove,\n onRename,\n selected: Array.isArray(selected) ? selected : [selected],\n showCheckBox,\n spellCheck,\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>\n </div>\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
CHANGED
|
@@ -88,7 +88,8 @@
|
|
|
88
88
|
.ton-collapsible-wrapper:after {
|
|
89
89
|
content: "";
|
|
90
90
|
height: 1px;
|
|
91
|
-
transition: height var(--ton-transition-time) linear,
|
|
91
|
+
transition: height var(--ton-transition-time) linear,
|
|
92
|
+
max-height 0s var(--ton-transition-time) linear;
|
|
92
93
|
max-height: 0;
|
|
93
94
|
}
|
|
94
95
|
|
|
@@ -104,7 +105,9 @@
|
|
|
104
105
|
}
|
|
105
106
|
|
|
106
107
|
.ton-collapsible-wrapper.collapsed > .ton-collapsible {
|
|
107
|
-
transition: margin-bottom var(--ton-transition-time) cubic-bezier(1, 0, 1, 1),
|
|
108
|
+
transition: margin-bottom var(--ton-transition-time) cubic-bezier(1, 0, 1, 1),
|
|
109
|
+
visibility 0s var(--ton-transition-time),
|
|
110
|
+
max-height 0s var(--ton-transition-time);
|
|
108
111
|
visibility: hidden;
|
|
109
112
|
max-height: 0;
|
|
110
113
|
margin-bottom: -2000px;
|
package/dist/main.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AAAA;;;;;AAKA;;;;;;;;AAQA;;;;;AAKA;;;;AAIA;;;;;;;;;AASA;;;;AAIA;;;;;;;;;;;;;;;;AAgBA;;;;AAIA;;;;;;;;;;;;;AAaA;;;;;AAKA;;;;;;;AAOA;;;;;;;AAMA
|
|
1
|
+
{"mappings":"AAAA;;;;;AAKA;;;;;;;;AAQA;;;;;AAKA;;;;AAIA;;;;;;;;;AASA;;;;AAIA;;;;;;;;;;;;;;;;AAgBA;;;;AAIA;;;;;;;;;;;;;AAaA;;;;;AAKA;;;;;;;AAOA;;;;;;;AAMA","sources":["src/components/TreeNode.css"],"sourcesContent":[":root {\n --ton-transition-time: 0.3s;\n --ton-long-transition-time: 0.6s;\n}\n\n.tree-of-nodes {\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: 100%;\n gap: 1px;\n}\n\n.ton-checkbox {\n margin-right: 3px;\n margin-top: 3px;\n}\n\n.ton-expander {\n margin: 0;\n}\n\n.ton-node {\n display: flex;\n align-items: center;\n cursor: pointer;\n width: 100%;\n max-width: 100%;\n height: 30px;\n}\n\n.ton-label {\n height: 26px;\n}\n\n.ton-label-span {\n border-radius: 3px;\n border: 1px solid transparent;\n box-sizing: border-box;\n display: inline-block;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: 24px;\n overflow: hidden;\n padding: 1px 3px;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 100%;\n}\n\n.ton-rename-holder {\n width: 100%;\n}\n\n.ton-rename {\n border-radius: 3px;\n border: 1px dotted black;\n box-sizing: border-box;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: 24px;\n min-width: 0;\n padding: 1px 3px;\n width: 100%;\n}\n\n.ton-rename:focus {\n outline: none;\n box-shadow: none;\n}\n\n.ton-child {\n margin-left: 16px;\n display: block;\n opacity: 1;\n transition: opacity var(--ton-long-transition-time) linear;\n}\n\n.ton-collapsible-wrapper {\n display: flex;\n overflow: hidden;\n width: 100%;\n max-width: 100%;\n}\n.ton-collapsible-wrapper:after {\n content: \"\";\n height: 1px;\n transition:\n height var(--ton-transition-time) linear,\n max-height 0s var(--ton-transition-time) linear;\n max-height: 0px;\n}\n.ton-collapsible {\n display: flex;\n flex-direction: column;\n gap: 1px;\n transition: margin-bottom var(--ton-transition-time) cubic-bezier(0, 0, 0, 1);\n margin-top: 1px;\n margin-bottom: 1px;\n max-height: 10000px;\n width: 100%;\n}\n.ton-collapsible-wrapper.collapsed > .ton-collapsible {\n margin-bottom: -2000px;\n transition:\n margin-bottom var(--ton-transition-time) cubic-bezier(1, 0, 1, 1),\n visibility 0s var(--ton-transition-time),\n max-height 0s var(--ton-transition-time);\n visibility: hidden;\n max-height: 0;\n}\n.ton-collapsible-wrapper.collapsed:after {\n height: 0;\n transition: height var(--ton-transition-time) linear;\n max-height: 20px;\n}\n.ton-collapsible-wrapper.collapsed {\n visibility: hidden;\n}\n.ton-collapsible-wrapper.collapsed .ton-child {\n opacity: 0;\n transition: opacity var(--ton-long-transition-time) linear;\n}\n"],"names":[],"version":3,"file":"main.css.map"}
|
package/dist/main.js
CHANGED
|
@@ -54,17 +54,17 @@ const $886f402bccb0fd30$export$29ec378200e05207 = (0, $duWW8$createContext)(unde
|
|
|
54
54
|
|
|
55
55
|
|
|
56
56
|
const $84765747a8c6bfe2$export$14f190ac910bde69 = /*#__PURE__*/ (0, $duWW8$forwardRef)(({ id: id, className: className, value: value, editing: editing, saving: saving, setValue: setValue, sendEscape: sendEscape, style: style, spellCheck: spellCheck = "true" }, ref)=>{
|
|
57
|
-
const [currentValue, setCurrentValue] = (0, $duWW8$useState)(value
|
|
57
|
+
const [currentValue, setCurrentValue] = (0, $duWW8$useState)(value ?? "");
|
|
58
58
|
(0, $duWW8$useEffect)(()=>{
|
|
59
|
-
setCurrentValue(value
|
|
59
|
+
setCurrentValue(value ?? "");
|
|
60
60
|
}, [
|
|
61
61
|
value
|
|
62
62
|
]);
|
|
63
63
|
const keyPress = (e)=>{
|
|
64
64
|
if (e.code === "Escape") {
|
|
65
|
-
setCurrentValue(value
|
|
66
|
-
sendEscape
|
|
67
|
-
} else if (e.code === "Enter") setValue
|
|
65
|
+
setCurrentValue(value ?? "");
|
|
66
|
+
sendEscape?.();
|
|
67
|
+
} else if (e.code === "Enter") setValue?.(currentValue);
|
|
68
68
|
};
|
|
69
69
|
// Add window onMouseDown event to stop events when editing
|
|
70
70
|
(0, $duWW8$useEffect)(()=>{
|
|
@@ -73,7 +73,7 @@ const $84765747a8c6bfe2$export$14f190ac910bde69 = /*#__PURE__*/ (0, $duWW8$forwa
|
|
|
73
73
|
if (editing && target.id !== `${id}` && target.id !== `${id}-holder` && target.id !== `${id}-spinner` && target.className !== "ton-rename") {
|
|
74
74
|
e.preventDefault();
|
|
75
75
|
e.stopPropagation();
|
|
76
|
-
setValue
|
|
76
|
+
setValue?.(currentValue);
|
|
77
77
|
}
|
|
78
78
|
};
|
|
79
79
|
window.addEventListener("mousedown", handleMouseDown);
|
|
@@ -116,7 +116,7 @@ const $84765747a8c6bfe2$export$14f190ac910bde69 = /*#__PURE__*/ (0, $duWW8$forwa
|
|
|
116
116
|
value: currentValue,
|
|
117
117
|
disabled: saving,
|
|
118
118
|
onChange: (e)=>setCurrentValue(e.currentTarget.value),
|
|
119
|
-
onBlur: (e)=>setValue
|
|
119
|
+
onBlur: (e)=>setValue?.(e.currentTarget.value),
|
|
120
120
|
onKeyDownCapture: keyPress
|
|
121
121
|
})
|
|
122
122
|
]
|
|
@@ -129,23 +129,21 @@ const $47c36cf4281201f5$export$2eba8ec3a333fdbb = ({ id: id, canRemove: canRemov
|
|
|
129
129
|
// Contexts
|
|
130
130
|
const treeContext = (0, $duWW8$useContext)((0, $886f402bccb0fd30$export$29ec378200e05207));
|
|
131
131
|
// Node information
|
|
132
|
-
const thisNode = treeContext
|
|
133
|
-
const childNodes = treeContext
|
|
134
|
-
|
|
135
|
-
const descendents = (0, $33abc00b1ca5c55c$export$bd923365b402cb04)(id, (_treeContext_nodeList = treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList) !== null && _treeContext_nodeList !== void 0 ? _treeContext_nodeList : []);
|
|
132
|
+
const thisNode = treeContext?.nodeList.find((n)=>n.id === id);
|
|
133
|
+
const childNodes = treeContext?.nodeList.filter((n)=>n.parentId === id);
|
|
134
|
+
const descendents = (0, $33abc00b1ca5c55c$export$bd923365b402cb04)(id, treeContext?.nodeList ?? []);
|
|
136
135
|
// State
|
|
137
136
|
const [error, setError] = (0, $duWW8$useState)(false);
|
|
138
137
|
const [errorText, setErrorText] = (0, $duWW8$useState)("");
|
|
139
|
-
|
|
140
|
-
const expanded = ((_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;
|
|
138
|
+
const expanded = (treeContext?.expandedNodes.findIndex((e)=>e === id) ?? -1) > -1;
|
|
141
139
|
// Checkbox
|
|
142
140
|
const checkRef = (0, $duWW8$useRef)(null);
|
|
143
141
|
(0, $duWW8$useEffect)(()=>{
|
|
144
142
|
if (checkRef.current) {
|
|
145
|
-
if (treeContext
|
|
143
|
+
if (treeContext?.selected.includes(id)) {
|
|
146
144
|
checkRef.current.checked = true;
|
|
147
145
|
checkRef.current.indeterminate = false;
|
|
148
|
-
} else if (descendents.some((d)=>treeContext
|
|
146
|
+
} else if (descendents.some((d)=>treeContext?.selected.includes(d))) {
|
|
149
147
|
checkRef.current.checked = false;
|
|
150
148
|
checkRef.current.indeterminate = true;
|
|
151
149
|
} else {
|
|
@@ -156,13 +154,13 @@ const $47c36cf4281201f5$export$2eba8ec3a333fdbb = ({ id: id, canRemove: canRemov
|
|
|
156
154
|
}, [
|
|
157
155
|
descendents,
|
|
158
156
|
id,
|
|
159
|
-
treeContext
|
|
157
|
+
treeContext?.selected
|
|
160
158
|
]);
|
|
161
159
|
// Apply selected border
|
|
162
|
-
const currentBorder =
|
|
160
|
+
const currentBorder = treeContext?.selected.includes(id) ? "1px solid black" : "";
|
|
163
161
|
const nodeColour = (()=>{
|
|
164
162
|
if (treeContext && treeContext.selected) {
|
|
165
|
-
const anc = (0, $6303f0814ed0ce8b$export$c6fd3ab3f44300d0)(treeContext.selected, [], treeContext
|
|
163
|
+
const anc = (0, $6303f0814ed0ce8b$export$c6fd3ab3f44300d0)(treeContext.selected, [], treeContext?.nodeList).map((n)=>n.id);
|
|
166
164
|
if ([
|
|
167
165
|
...anc,
|
|
168
166
|
treeContext.selected
|
|
@@ -182,8 +180,7 @@ const $47c36cf4281201f5$export$2eba8ec3a333fdbb = ({ id: id, canRemove: canRemov
|
|
|
182
180
|
const handleReturn = (ret)=>{
|
|
183
181
|
if (!ret.success) {
|
|
184
182
|
setError(true);
|
|
185
|
-
|
|
186
|
-
setErrorText((_ret_ErrorText = ret.ErrorText) !== null && _ret_ErrorText !== void 0 ? _ret_ErrorText : "An unknown error has occured");
|
|
183
|
+
setErrorText(ret.ErrorText ?? "An unknown error has occured");
|
|
187
184
|
} else {
|
|
188
185
|
setError(false);
|
|
189
186
|
setErrorText("");
|
|
@@ -191,20 +188,20 @@ const $47c36cf4281201f5$export$2eba8ec3a333fdbb = ({ id: id, canRemove: canRemov
|
|
|
191
188
|
};
|
|
192
189
|
const confirmNewNode = async (label)=>{
|
|
193
190
|
setSavingNewNode(true);
|
|
194
|
-
if (treeContext
|
|
191
|
+
if (treeContext?.onAddChild) handleReturn(await treeContext.onAddChild(id, label));
|
|
195
192
|
setSavingNewNode(false);
|
|
196
193
|
setShowNewNode(false);
|
|
197
194
|
};
|
|
198
195
|
const renameNode = async (newLabel)=>{
|
|
199
196
|
setRenaming(false);
|
|
200
|
-
if (treeContext
|
|
197
|
+
if (treeContext?.onRename) {
|
|
201
198
|
setUpdatingNode(true);
|
|
202
199
|
handleReturn(await treeContext.onRename(id, newLabel));
|
|
203
200
|
setUpdatingNode(false);
|
|
204
201
|
}
|
|
205
202
|
};
|
|
206
203
|
const deleteThis = async ()=>{
|
|
207
|
-
if (treeContext
|
|
204
|
+
if (treeContext?.onRemove) {
|
|
208
205
|
setUpdatingNode(true);
|
|
209
206
|
handleReturn(await treeContext.onRemove(id));
|
|
210
207
|
setUpdatingNode(false);
|
|
@@ -212,14 +209,12 @@ const $47c36cf4281201f5$export$2eba8ec3a333fdbb = ({ id: id, canRemove: canRemov
|
|
|
212
209
|
};
|
|
213
210
|
// Context actions
|
|
214
211
|
const addChild = ()=>{
|
|
215
|
-
var _treeContext_handleExpandClick;
|
|
216
212
|
setShowNewNode(true);
|
|
217
|
-
treeContext
|
|
213
|
+
treeContext?.handleExpandClick?.(id, true);
|
|
218
214
|
};
|
|
219
215
|
const renameThis = ()=>{
|
|
220
|
-
var _treeContext_handleSelect;
|
|
221
216
|
setRenaming(true);
|
|
222
|
-
treeContext
|
|
217
|
+
treeContext?.handleSelect?.(id);
|
|
223
218
|
};
|
|
224
219
|
// Context menu
|
|
225
220
|
const menuItems = [];
|
|
@@ -269,10 +264,7 @@ const $47c36cf4281201f5$export$2eba8ec3a333fdbb = ({ id: id, canRemove: canRemov
|
|
|
269
264
|
role: "checkbox",
|
|
270
265
|
className: "ton-checkbox",
|
|
271
266
|
id: `${treeContext.id}-treenode-checkbox-${id}`,
|
|
272
|
-
onClick: ()=>
|
|
273
|
-
var _treeContext_handleSelect;
|
|
274
|
-
return (_treeContext_handleSelect = treeContext.handleSelect) === null || _treeContext_handleSelect === void 0 ? void 0 : _treeContext_handleSelect.call(treeContext, descendents);
|
|
275
|
-
}
|
|
267
|
+
onClick: ()=>treeContext.handleSelect?.(descendents)
|
|
276
268
|
}),
|
|
277
269
|
childNodes && childNodes.length > 0 ? !expanded ? /*#__PURE__*/ (0, $duWW8$jsx)((0, $duWW8$CaretRightFill), {
|
|
278
270
|
id: `${treeContext.id}-treenode-caret-${id}`,
|
|
@@ -301,29 +293,19 @@ const $47c36cf4281201f5$export$2eba8ec3a333fdbb = ({ id: id, canRemove: canRemov
|
|
|
301
293
|
color: nodeColour,
|
|
302
294
|
"aria-expanded": false,
|
|
303
295
|
"aria-label": "Disabled expander",
|
|
304
|
-
onClick: ()=>
|
|
305
|
-
var _treeContext_handleSelect;
|
|
306
|
-
return (_treeContext_handleSelect = treeContext.handleSelect) === null || _treeContext_handleSelect === void 0 ? void 0 : _treeContext_handleSelect.call(treeContext, id);
|
|
307
|
-
}
|
|
296
|
+
onClick: ()=>treeContext.handleSelect?.(id)
|
|
308
297
|
}),
|
|
309
298
|
thisNode && /*#__PURE__*/ (0, $duWW8$jsx)("div", {
|
|
310
299
|
className: "ton-label",
|
|
311
300
|
style: {
|
|
312
301
|
width: `calc(100% - ${treeContext.showCheckBox ? "32px" : "16px"})`
|
|
313
302
|
},
|
|
314
|
-
onContextMenuCapture: ()=>
|
|
315
|
-
var _treeContext_handleSelect;
|
|
316
|
-
return (_treeContext_handleSelect = treeContext.handleSelect) === null || _treeContext_handleSelect === void 0 ? void 0 : _treeContext_handleSelect.call(treeContext, id);
|
|
317
|
-
},
|
|
303
|
+
onContextMenuCapture: ()=>treeContext.handleSelect?.(id),
|
|
318
304
|
onClickCapture: ()=>{
|
|
319
|
-
var _treeContext_handleSelect;
|
|
320
305
|
if (!treeContext.expandedNodes.includes(id)) treeContext.handleExpandClick(id);
|
|
321
|
-
|
|
322
|
-
},
|
|
323
|
-
onFocusCapture: ()=>{
|
|
324
|
-
var _treeContext_handleSelect;
|
|
325
|
-
return (_treeContext_handleSelect = treeContext.handleSelect) === null || _treeContext_handleSelect === void 0 ? void 0 : _treeContext_handleSelect.call(treeContext, id);
|
|
306
|
+
treeContext.handleSelect?.(id);
|
|
326
307
|
},
|
|
308
|
+
onFocusCapture: ()=>treeContext.handleSelect?.(id),
|
|
327
309
|
children: /*#__PURE__*/ (0, $duWW8$jsx)((0, $84765747a8c6bfe2$export$14f190ac910bde69), {
|
|
328
310
|
id: `${treeContext.id}-treenode-entry-${id}`,
|
|
329
311
|
className: currentBorder ? "selected" : "",
|
|
@@ -394,9 +376,9 @@ const $c7008d808d3e1c7a$export$40c47a7ac5f85aba = (nodeList, selected, expandedN
|
|
|
394
376
|
|
|
395
377
|
|
|
396
378
|
|
|
397
|
-
const $ba47aaf387735a90$export$5580fff3e08a8be5 = ({ alwaysShowSelected: alwaysShowSelected = "first", canAddChildren: canAddChildren = false, canRemoveChildren: canRemoveChildren = false, canRemoveRoot: canRemoveRoot = false, canRenameChildren: canRenameChildren = false, canRenameRoot: canRenameRoot = false, handleSelect: handleSelect, id: id, nodeHighlight: nodeHighlight = "red", nodeList: nodeList, onAdd: onAdd, onRemove: onRemove, onRename: onRename, roots: roots, selected: selected = [], showCheckBox: showCheckBox = false, spellCheck: spellCheck = "true", textHighlight: textHighlight = "rgba(255, 0, 0, 0.2)" })=>{
|
|
379
|
+
const $ba47aaf387735a90$export$5580fff3e08a8be5 = ({ alwaysShowSelected: alwaysShowSelected = "first", canAddChildren: canAddChildren = false, canRemoveChildren: canRemoveChildren = false, canRemoveRoot: canRemoveRoot = false, canRenameChildren: canRenameChildren = false, canRenameRoot: canRenameRoot = false, handleSelect: handleSelect, id: id, initiallyExpandedNodes: initiallyExpandedNodes = [], nodeHighlight: nodeHighlight = "red", nodeList: nodeList, onAdd: onAdd, onRemove: onRemove, onRename: onRename, roots: roots, selected: selected = [], showCheckBox: showCheckBox = false, spellCheck: spellCheck = "true", textHighlight: textHighlight = "rgba(255, 0, 0, 0.2)" })=>{
|
|
398
380
|
const [firstRender, setFirstRender] = (0, $duWW8$useState)(alwaysShowSelected === "first");
|
|
399
|
-
const [expandedNodes, setExpandedNodes] = (0, $duWW8$useState)(
|
|
381
|
+
const [expandedNodes, setExpandedNodes] = (0, $duWW8$useState)(initiallyExpandedNodes);
|
|
400
382
|
(0, $duWW8$useEffect)(()=>{
|
|
401
383
|
const selectedArray = Array.isArray(selected) ? selected : [
|
|
402
384
|
selected
|
|
@@ -427,7 +409,7 @@ const $ba47aaf387735a90$export$5580fff3e08a8be5 = ({ alwaysShowSelected: alwaysS
|
|
|
427
409
|
return /*#__PURE__*/ (0, $duWW8$jsx)("div", {
|
|
428
410
|
id: id,
|
|
429
411
|
className: "tree-of-nodes",
|
|
430
|
-
children: /*#__PURE__*/ (0, $duWW8$jsx)((0, $886f402bccb0fd30$export$29ec378200e05207)
|
|
412
|
+
children: /*#__PURE__*/ (0, $duWW8$jsx)((0, $886f402bccb0fd30$export$29ec378200e05207), {
|
|
431
413
|
value: {
|
|
432
414
|
id: id,
|
|
433
415
|
expandedNodes: expandedNodes,
|
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/functions/getDescendentIds.ts","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 { INodeUpdate, TreeNodeBase, TreeNodeData } from \"./interface\";\nimport { TreeNode } from \"./TreeNode\";\nimport { TreeOfNodes } from \"./TreeOfNodes\";\nimport { WordEntry } from \"./WordEntry\";\n\nexport { TreeNode, TreeOfNodes, WordEntry };\nexport type { INodeUpdate, TreeNodeBase, TreeNodeData };\n","import { ContextMenuHandler, IMenuItem } from \"@asup/context-menu\";\nimport { Key, ReactNode, useContext, useEffect, useRef, useState } from \"react\";\nimport {\n CaretDownFill,\n CaretRight,\n CaretRightFill,\n ExclamationCircleFill,\n} from \"react-bootstrap-icons\";\nimport { getAncestors } from \"../functions/getAncestors\";\nimport { getDescendentIds } from \"../functions/getDescendentIds\";\nimport \"./TreeNode.css\";\nimport { TreeOfNodesContext } from \"./TreeOfNodesContext\";\nimport { WordEntry } from \"./WordEntry\";\nimport { INodeUpdate } from \"./interface\";\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): ReactNode => {\n // Contexts\n const treeContext = useContext(TreeOfNodesContext);\n\n // Node information\n const thisNode = treeContext?.nodeList.find((n) => n.id === id);\n const childNodes = treeContext?.nodeList.filter((n) => n.parentId === id);\n const descendents = getDescendentIds(id, treeContext?.nodeList ?? []);\n\n // State\n const [error, setError] = useState<boolean>(false);\n const [errorText, setErrorText] = useState<string>(\"\");\n const expanded = (treeContext?.expandedNodes.findIndex((e) => e === id) ?? -1) > -1;\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: string = treeContext?.selected.includes(id) ? \"1px solid black\" : \"\";\n const nodeColour: 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 })();\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 = (ret: INodeUpdate) => {\n if (!ret.success) {\n setError(true);\n setErrorText(ret.ErrorText ?? \"An unknown error has occured\");\n } else {\n setError(false);\n setErrorText(\"\");\n }\n };\n\n const confirmNewNode = 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\n const renameNode = 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\n const deleteThis = async () => {\n if (treeContext?.onRemove) {\n setUpdatingNode(true);\n handleReturn(await treeContext.onRemove(id));\n setUpdatingNode(false);\n }\n };\n\n // Context actions\n const addChild = () => {\n setShowNewNode(true);\n treeContext?.handleExpandClick?.(id, true);\n };\n const renameThis = () => {\n setRenaming(true);\n treeContext?.handleSelect?.(id);\n };\n\n // Context menu\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\n useEffect(() => {\n if (showNewNode === true && newNameRef.current) newNameRef.current.focus();\n }, [showNewNode]);\n\n // Return node\n return !treeContext ? null : (\n <>\n <ContextMenuHandler\n menuItems={menuItems}\n style={{ display: \"inline-block\", width: \"100%\" }}\n >\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=\"ton-node\">\n {treeContext.showCheckBox && (\n <input\n ref={checkRef}\n type=\"checkbox\"\n role=\"checkbox\"\n className=\"ton-checkbox\"\n id={`${treeContext.id}-treenode-checkbox-${id}`}\n onClick={() => treeContext.handleSelect?.(descendents)}\n />\n )}\n {childNodes && childNodes.length > 0 ? (\n !expanded ? (\n <CaretRightFill\n id={`${treeContext.id}-treenode-caret-${id}`}\n style={{ width: \"16px\", height: \"16px\" }}\n className=\"ton-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=\"ton-expander\"\n role=\"button\"\n aria-expanded={true}\n aria-label=\"Expander\"\n color={nodeColour}\n onClick={() => treeContext.handleExpandClick(id)}\n />\n )\n ) : (\n <CaretRight\n id={`${treeContext.id}-treenode-caret-${id}`}\n className=\"ton-expander\"\n role=\"button\"\n color={nodeColour}\n aria-expanded={false}\n aria-label=\"Disabled expander\"\n onClick={() => treeContext.handleSelect?.(id)}\n />\n )}\n {thisNode && (\n <div\n className=\"ton-label\"\n style={{ width: `calc(100% - ${treeContext.showCheckBox ? \"32px\" : \"16px\"})` }}\n onContextMenuCapture={() => treeContext.handleSelect?.(id)}\n onClickCapture={() => {\n if (!treeContext.expandedNodes.includes(id)) treeContext.handleExpandClick(id);\n treeContext.handleSelect?.(id);\n }}\n onFocusCapture={() => treeContext.handleSelect?.(id)}\n >\n <WordEntry\n id={`${treeContext.id}-treenode-entry-${id}`}\n className={currentBorder ? \"selected\" : \"\"}\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 spellCheck={treeContext.spellCheck}\n />\n </div>\n )}\n </div>\n )}\n </div>\n </ContextMenuHandler>\n {childNodes && (\n <div\n className={`ton-collapsible-wrapper ${expanded && childNodes.length > 0 ? \"\" : \"collapsed\"}`}\n >\n {childNodes.length > 0 && (\n <div className=\"ton-collapsible\">\n {childNodes.map((h) => (\n <span\n key={h.id}\n id={`${treeContext.id}-treenode-child-${h.id}`}\n className=\"ton-child\"\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 </div>\n )}\n </div>\n )}\n {showNewNode && (\n <WordEntry\n style={{ marginLeft: \"14px\" }}\n id={`treenode-new-${id}`}\n ref={newNameRef}\n editing={true}\n setValue={(ret) => confirmNewNode(ret)}\n saving={savingNewNode}\n sendEscape={() => setShowNewNode(false)}\n spellCheck={treeContext.spellCheck}\n />\n )}\n </>\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 { 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 { 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 spellCheck?: \"true\" | \"false\";\n}\n\nexport const TreeOfNodesContext = createContext<TreeOfNodesContextProps<unknown> | undefined>(\n undefined,\n);\n","import { CSSProperties, forwardRef, JSX, Key, KeyboardEvent, useEffect, useState } from \"react\";\nimport { Spinner } from \"react-bootstrap\";\n\ninterface WordEntryProps {\n id: Key;\n className?: string;\n editing?: boolean;\n saving?: boolean;\n sendEscape?: () => void;\n setValue?: (ret: string) => void;\n spellCheck?: \"true\" | \"false\";\n style?: CSSProperties;\n value?: string;\n}\n\nexport const WordEntry = forwardRef<HTMLInputElement, WordEntryProps>(\n (\n { id, className, value, editing, saving, setValue, sendEscape, style, spellCheck = \"true\" },\n ref,\n ): JSX.Element => {\n const [currentValue, setCurrentValue] = useState<string>(value ?? \"\");\n useEffect(() => {\n setCurrentValue(value ?? \"\");\n }, [value]);\n\n const keyPress = (e: KeyboardEvent) => {\n if (e.code === \"Escape\") {\n setCurrentValue(value ?? \"\");\n sendEscape?.();\n } else if (e.code === \"Enter\") {\n setValue?.(currentValue);\n }\n };\n\n // Add window onMouseDown event to stop events when editing\n useEffect(() => {\n const handleMouseDown = (e: MouseEvent) => {\n const target = e.target as HTMLElement;\n if (\n editing &&\n target.id !== `${id}` &&\n target.id !== `${id}-holder` &&\n target.id !== `${id}-spinner` &&\n target.className !== \"ton-rename\"\n ) {\n e.preventDefault();\n e.stopPropagation();\n setValue?.(currentValue);\n }\n };\n window.addEventListener(\"mousedown\", handleMouseDown);\n return () => {\n window.removeEventListener(\"mousedown\", handleMouseDown);\n };\n }, [currentValue, editing, id, setValue]);\n\n return !editing ? (\n <span\n className=\"ton-label-span\"\n style={style}\n id={`${id}`}\n >\n {value ? value : <> </>}\n </span>\n ) : (\n <div\n style={style}\n id={`${id}-holder`}\n className=\"ton-rename-holder\"\n >\n {saving && (\n <Spinner\n id={`${id}-spinner`}\n size=\"sm\"\n animation=\"border\"\n />\n )}\n <input\n autoFocus\n spellCheck={spellCheck}\n id={String(id)}\n ref={ref}\n type=\"text\"\n className={[\"ton-rename\", className].filter(Boolean).join(\" \")}\n value={currentValue}\n disabled={saving}\n onChange={(e) => setCurrentValue(e.currentTarget.value)}\n onBlur={(e) => setValue?.(e.currentTarget.value)}\n onKeyDownCapture={keyPress}\n />\n </div>\n );\n },\n);\n\nWordEntry.displayName = \"WordEntry\";\n","import { Key, useEffect, useState } from \"react\";\nimport { checkExpandedNodes } from \"../functions/checkExpandedNodes\";\nimport { INodeUpdate, TreeNodeData } from \"./interface\";\nimport { TreeNode } from \"./TreeNode\";\nimport { TreeOfNodesContext } from \"./TreeOfNodesContext\";\n\nexport interface TreeOfNodesProps<T> {\n alwaysShowSelected?: \"always\" | \"first\";\n canAddChildren?: boolean;\n canRemoveChildren?: boolean;\n canRemoveRoot?: boolean;\n canRenameChildren?: boolean;\n canRenameRoot?: boolean;\n handleSelect?: (ret: Key | Key[]) => void;\n id: string;\n nodeHighlight?: string;\n nodeList: TreeNodeData<T>[];\n onAdd?: (parentId: Key, newName: string) => Promise<INodeUpdate>;\n onRemove?: (childId: Key) => Promise<INodeUpdate>;\n onRename?: (childId: Key, newName: string) => Promise<INodeUpdate>;\n roots: Key[];\n selected?: Key | Key[];\n showCheckBox?: boolean;\n spellCheck?: \"true\" | \"false\";\n textHighlight?: string;\n}\n\nexport const TreeOfNodes = <T,>({\n alwaysShowSelected = \"first\",\n canAddChildren = false,\n canRemoveChildren = false,\n canRemoveRoot = false,\n canRenameChildren = false,\n canRenameRoot = false,\n handleSelect,\n id,\n nodeHighlight = \"red\",\n nodeList,\n onAdd,\n onRemove,\n onRename,\n roots,\n selected = [],\n showCheckBox = false,\n spellCheck = \"true\",\n textHighlight = \"rgba(255, 0, 0, 0.2)\",\n}: TreeOfNodesProps<T>) => {\n const [firstRender, setFirstRender] = useState<boolean>(alwaysShowSelected === \"first\");\n const [expandedNodes, setExpandedNodes] = useState<Key[]>([]);\n useEffect(() => {\n const selectedArray = Array.isArray(selected) ? selected : [selected];\n if ((alwaysShowSelected === \"always\" || firstRender) && selectedArray.length > 0) {\n // Check all nodes are showing that should be\n const shouldExpand = checkExpandedNodes(nodeList, selectedArray, expandedNodes);\n if (shouldExpand.filter((n) => !expandedNodes.includes(n)).length > 0) {\n setExpandedNodes(shouldExpand);\n }\n setFirstRender(false);\n }\n }, [alwaysShowSelected, firstRender, expandedNodes, nodeList, selected]);\n\n // Change expansion and update contexts\n const changeExpand = (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\n return (\n <div\n id={id}\n className=\"tree-of-nodes\"\n >\n <TreeOfNodesContext.Provider\n value={{\n id: id,\n expandedNodes,\n handleExpandClick: (r, f) => changeExpand(r, f),\n handleSelect,\n nodeHighlight,\n nodeList,\n onAddChild: onAdd,\n onRemove,\n onRename,\n selected: Array.isArray(selected) ? selected : [selected],\n showCheckBox,\n spellCheck,\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 </div>\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"}
|
|
1
|
+
{"mappings":"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","sources":["src/main.ts","src/components/index.ts","src/components/TreeNode.tsx","src/functions/getAncestors.tsx","src/functions/getDescendentIds.ts","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 { INodeUpdate, TreeNodeBase, TreeNodeData } from \"./interface\";\nimport { TreeNode } from \"./TreeNode\";\nimport { TreeOfNodes } from \"./TreeOfNodes\";\nimport { WordEntry } from \"./WordEntry\";\n\nexport { TreeNode, TreeOfNodes, WordEntry };\nexport type { INodeUpdate, TreeNodeBase, TreeNodeData };\n","import { ContextMenuHandler, IMenuItem } from \"@asup/context-menu\";\nimport { Key, ReactNode, useContext, useEffect, useRef, useState } from \"react\";\nimport {\n CaretDownFill,\n CaretRight,\n CaretRightFill,\n ExclamationCircleFill,\n} from \"react-bootstrap-icons\";\nimport { getAncestors } from \"../functions/getAncestors\";\nimport { getDescendentIds } from \"../functions/getDescendentIds\";\nimport \"./TreeNode.css\";\nimport { TreeOfNodesContext } from \"./TreeOfNodesContext\";\nimport { WordEntry } from \"./WordEntry\";\nimport { INodeUpdate } from \"./interface\";\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): ReactNode => {\n // Contexts\n const treeContext = useContext(TreeOfNodesContext);\n\n // Node information\n const thisNode = treeContext?.nodeList.find((n) => n.id === id);\n const childNodes = treeContext?.nodeList.filter((n) => n.parentId === id);\n const descendents = getDescendentIds(id, treeContext?.nodeList ?? []);\n\n // State\n const [error, setError] = useState<boolean>(false);\n const [errorText, setErrorText] = useState<string>(\"\");\n const expanded = (treeContext?.expandedNodes.findIndex((e) => e === id) ?? -1) > -1;\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: string = treeContext?.selected.includes(id) ? \"1px solid black\" : \"\";\n const nodeColour: 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 })();\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 = (ret: INodeUpdate) => {\n if (!ret.success) {\n setError(true);\n setErrorText(ret.ErrorText ?? \"An unknown error has occured\");\n } else {\n setError(false);\n setErrorText(\"\");\n }\n };\n\n const confirmNewNode = 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\n const renameNode = 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\n const deleteThis = async () => {\n if (treeContext?.onRemove) {\n setUpdatingNode(true);\n handleReturn(await treeContext.onRemove(id));\n setUpdatingNode(false);\n }\n };\n\n // Context actions\n const addChild = () => {\n setShowNewNode(true);\n treeContext?.handleExpandClick?.(id, true);\n };\n const renameThis = () => {\n setRenaming(true);\n treeContext?.handleSelect?.(id);\n };\n\n // Context menu\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\n useEffect(() => {\n if (showNewNode === true && newNameRef.current) newNameRef.current.focus();\n }, [showNewNode]);\n\n // Return node\n return !treeContext ? null : (\n <>\n <ContextMenuHandler\n menuItems={menuItems}\n style={{ display: \"inline-block\", width: \"100%\" }}\n >\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=\"ton-node\">\n {treeContext.showCheckBox && (\n <input\n ref={checkRef}\n type=\"checkbox\"\n role=\"checkbox\"\n className=\"ton-checkbox\"\n id={`${treeContext.id}-treenode-checkbox-${id}`}\n onClick={() => treeContext.handleSelect?.(descendents)}\n />\n )}\n {childNodes && childNodes.length > 0 ? (\n !expanded ? (\n <CaretRightFill\n id={`${treeContext.id}-treenode-caret-${id}`}\n style={{ width: \"16px\", height: \"16px\" }}\n className=\"ton-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=\"ton-expander\"\n role=\"button\"\n aria-expanded={true}\n aria-label=\"Expander\"\n color={nodeColour}\n onClick={() => treeContext.handleExpandClick(id)}\n />\n )\n ) : (\n <CaretRight\n id={`${treeContext.id}-treenode-caret-${id}`}\n className=\"ton-expander\"\n role=\"button\"\n color={nodeColour}\n aria-expanded={false}\n aria-label=\"Disabled expander\"\n onClick={() => treeContext.handleSelect?.(id)}\n />\n )}\n {thisNode && (\n <div\n className=\"ton-label\"\n style={{ width: `calc(100% - ${treeContext.showCheckBox ? \"32px\" : \"16px\"})` }}\n onContextMenuCapture={() => treeContext.handleSelect?.(id)}\n onClickCapture={() => {\n if (!treeContext.expandedNodes.includes(id)) treeContext.handleExpandClick(id);\n treeContext.handleSelect?.(id);\n }}\n onFocusCapture={() => treeContext.handleSelect?.(id)}\n >\n <WordEntry\n id={`${treeContext.id}-treenode-entry-${id}`}\n className={currentBorder ? \"selected\" : \"\"}\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 spellCheck={treeContext.spellCheck}\n />\n </div>\n )}\n </div>\n )}\n </div>\n </ContextMenuHandler>\n {childNodes && (\n <div\n className={`ton-collapsible-wrapper ${expanded && childNodes.length > 0 ? \"\" : \"collapsed\"}`}\n >\n {childNodes.length > 0 && (\n <div className=\"ton-collapsible\">\n {childNodes.map((h) => (\n <span\n key={h.id}\n id={`${treeContext.id}-treenode-child-${h.id}`}\n className=\"ton-child\"\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 </div>\n )}\n </div>\n )}\n {showNewNode && (\n <WordEntry\n style={{ marginLeft: \"14px\" }}\n id={`treenode-new-${id}`}\n ref={newNameRef}\n editing={true}\n setValue={(ret) => confirmNewNode(ret)}\n saving={savingNewNode}\n sendEscape={() => setShowNewNode(false)}\n spellCheck={treeContext.spellCheck}\n />\n )}\n </>\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 { 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 { 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 spellCheck?: \"true\" | \"false\";\n}\n\nexport const TreeOfNodesContext = createContext<TreeOfNodesContextProps<unknown> | undefined>(\n undefined,\n);\n","import { CSSProperties, forwardRef, JSX, Key, KeyboardEvent, useEffect, useState } from \"react\";\nimport { Spinner } from \"react-bootstrap\";\n\ninterface WordEntryProps {\n id: Key;\n className?: string;\n editing?: boolean;\n saving?: boolean;\n sendEscape?: () => void;\n setValue?: (ret: string) => void;\n spellCheck?: \"true\" | \"false\";\n style?: CSSProperties;\n value?: string;\n}\n\nexport const WordEntry = forwardRef<HTMLInputElement, WordEntryProps>(\n (\n { id, className, value, editing, saving, setValue, sendEscape, style, spellCheck = \"true\" },\n ref,\n ): JSX.Element => {\n const [currentValue, setCurrentValue] = useState<string>(value ?? \"\");\n useEffect(() => {\n setCurrentValue(value ?? \"\");\n }, [value]);\n\n const keyPress = (e: KeyboardEvent) => {\n if (e.code === \"Escape\") {\n setCurrentValue(value ?? \"\");\n sendEscape?.();\n } else if (e.code === \"Enter\") {\n setValue?.(currentValue);\n }\n };\n\n // Add window onMouseDown event to stop events when editing\n useEffect(() => {\n const handleMouseDown = (e: MouseEvent) => {\n const target = e.target as HTMLElement;\n if (\n editing &&\n target.id !== `${id}` &&\n target.id !== `${id}-holder` &&\n target.id !== `${id}-spinner` &&\n target.className !== \"ton-rename\"\n ) {\n e.preventDefault();\n e.stopPropagation();\n setValue?.(currentValue);\n }\n };\n window.addEventListener(\"mousedown\", handleMouseDown);\n return () => {\n window.removeEventListener(\"mousedown\", handleMouseDown);\n };\n }, [currentValue, editing, id, setValue]);\n\n return !editing ? (\n <span\n className=\"ton-label-span\"\n style={style}\n id={`${id}`}\n >\n {value ? value : <> </>}\n </span>\n ) : (\n <div\n style={style}\n id={`${id}-holder`}\n className=\"ton-rename-holder\"\n >\n {saving && (\n <Spinner\n id={`${id}-spinner`}\n size=\"sm\"\n animation=\"border\"\n />\n )}\n <input\n autoFocus\n spellCheck={spellCheck}\n id={String(id)}\n ref={ref}\n type=\"text\"\n className={[\"ton-rename\", className].filter(Boolean).join(\" \")}\n value={currentValue}\n disabled={saving}\n onChange={(e) => setCurrentValue(e.currentTarget.value)}\n onBlur={(e) => setValue?.(e.currentTarget.value)}\n onKeyDownCapture={keyPress}\n />\n </div>\n );\n },\n);\n\nWordEntry.displayName = \"WordEntry\";\n","import { Key, useEffect, useState } from \"react\";\nimport { checkExpandedNodes } from \"../functions/checkExpandedNodes\";\nimport { INodeUpdate, TreeNodeData } from \"./interface\";\nimport { TreeNode } from \"./TreeNode\";\nimport { TreeOfNodesContext } from \"./TreeOfNodesContext\";\n\nexport interface TreeOfNodesProps<T> {\n alwaysShowSelected?: \"always\" | \"first\";\n canAddChildren?: boolean;\n canRemoveChildren?: boolean;\n canRemoveRoot?: boolean;\n canRenameChildren?: boolean;\n canRenameRoot?: boolean;\n handleSelect?: (ret: Key | Key[]) => void;\n id: string;\n initiallyExpandedNodes?: Key[];\n nodeHighlight?: string;\n nodeList: TreeNodeData<T>[];\n onAdd?: (parentId: Key, newName: string) => Promise<INodeUpdate>;\n onRemove?: (childId: Key) => Promise<INodeUpdate>;\n onRename?: (childId: Key, newName: string) => Promise<INodeUpdate>;\n roots: Key[];\n selected?: Key | Key[];\n showCheckBox?: boolean;\n spellCheck?: \"true\" | \"false\";\n textHighlight?: string;\n}\n\nexport const TreeOfNodes = <T,>({\n alwaysShowSelected = \"first\",\n canAddChildren = false,\n canRemoveChildren = false,\n canRemoveRoot = false,\n canRenameChildren = false,\n canRenameRoot = false,\n handleSelect,\n id,\n initiallyExpandedNodes = [],\n nodeHighlight = \"red\",\n nodeList,\n onAdd,\n onRemove,\n onRename,\n roots,\n selected = [],\n showCheckBox = false,\n spellCheck = \"true\",\n textHighlight = \"rgba(255, 0, 0, 0.2)\",\n}: TreeOfNodesProps<T>) => {\n const [firstRender, setFirstRender] = useState<boolean>(alwaysShowSelected === \"first\");\n const [expandedNodes, setExpandedNodes] = useState<Key[]>(initiallyExpandedNodes);\n useEffect(() => {\n const selectedArray = Array.isArray(selected) ? selected : [selected];\n if ((alwaysShowSelected === \"always\" || firstRender) && selectedArray.length > 0) {\n // Check all nodes are showing that should be\n const shouldExpand = checkExpandedNodes(nodeList, selectedArray, expandedNodes);\n if (shouldExpand.filter((n) => !expandedNodes.includes(n)).length > 0) {\n setExpandedNodes(shouldExpand);\n }\n setFirstRender(false);\n }\n }, [alwaysShowSelected, firstRender, expandedNodes, nodeList, selected]);\n\n // Change expansion and update contexts\n const changeExpand = (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\n return (\n <div\n id={id}\n className=\"tree-of-nodes\"\n >\n <TreeOfNodesContext\n value={{\n id: id,\n expandedNodes,\n handleExpandClick: (r, f) => changeExpand(r, f),\n handleSelect,\n nodeHighlight,\n nodeList,\n onAddChild: onAdd,\n onRemove,\n onRename,\n selected: Array.isArray(selected) ? selected : [selected],\n showCheckBox,\n spellCheck,\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>\n </div>\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
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import { Key, CSSProperties, RefAttributes, ForwardRefExoticComponent, ReactNode } from "react";
|
|
2
|
-
import { JSX } from "react/jsx-runtime";
|
|
1
|
+
import { Key, CSSProperties, RefAttributes, ForwardRefExoticComponent, ReactNode, JSX } from "react";
|
|
3
2
|
export interface INodeUpdate {
|
|
4
3
|
success: boolean;
|
|
5
4
|
ErrorText?: string;
|
|
@@ -48,6 +47,7 @@ interface TreeOfNodesProps<T> {
|
|
|
48
47
|
canRenameRoot?: boolean;
|
|
49
48
|
handleSelect?: (ret: Key | Key[]) => void;
|
|
50
49
|
id: string;
|
|
50
|
+
initiallyExpandedNodes?: Key[];
|
|
51
51
|
nodeHighlight?: string;
|
|
52
52
|
nodeList: TreeNodeData<T>[];
|
|
53
53
|
onAdd?: (parentId: Key, newName: string) => Promise<INodeUpdate>;
|
|
@@ -60,7 +60,7 @@ interface TreeOfNodesProps<T> {
|
|
|
60
60
|
textHighlight?: string;
|
|
61
61
|
}
|
|
62
62
|
export const TreeOfNodes: {
|
|
63
|
-
<T>({ alwaysShowSelected, canAddChildren, canRemoveChildren, canRemoveRoot, canRenameChildren, canRenameRoot, handleSelect, id, nodeHighlight, nodeList, onAdd, onRemove, onRename, roots, selected, showCheckBox, spellCheck, textHighlight, }: TreeOfNodesProps<T>): JSX.Element;
|
|
63
|
+
<T>({ alwaysShowSelected, canAddChildren, canRemoveChildren, canRemoveRoot, canRenameChildren, canRenameRoot, handleSelect, id, initiallyExpandedNodes, nodeHighlight, nodeList, onAdd, onRemove, onRename, roots, selected, showCheckBox, spellCheck, textHighlight, }: TreeOfNodesProps<T>): JSX.Element;
|
|
64
64
|
displayName: string;
|
|
65
65
|
};
|
|
66
66
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
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,eACX,IAAI,GAAG,GAAG,GAAG,EAAE,EACf,UAAU,YAAY,EAAE,EACxB,gBAAgB,YAAY,EAAE,KAC7B,YAAY,EAoBd,CAAC;AGxBF;IACE,EAAE,EAAE,GAAG,CAAC;IACR,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC9B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,OAAO,MAAM,sFA8EZ,CAAC;AC9EF;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,SAAS;;CAwP3B,CAAC;AEnRF,2BAAkC,CAAC;IACjC,kBAAkB,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,EAAE,KAAK,IAAI,CAAC;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,sBAAsB,CAAC,EAAE,GAAG,EAAE,CAAC;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,aAAa,CAAC,CAAC,EAAE,CAAC;IAC5B,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,KAAK,OAAO,CAAC,WAAW,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC,WAAW,CAAC,CAAC;IACnE,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,QAAQ,CAAC,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,OAAO,MAAM;KAAe,CAAC,uQAoB1B,iBAAiB,CAAC,CAAC;;CA4DrB,CAAC","sources":["src/src/components/interface.ts","src/src/functions/getAncestors.tsx","src/src/functions/getDescendentIds.ts","src/src/components/TreeOfNodesContext.ts","src/src/components/WordEntry.tsx","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.
|
|
3
|
+
"version": "3.1.1",
|
|
4
4
|
"description": "REACT Typescript Treeview component",
|
|
5
5
|
"author": "Paul Thomas <@PaulDThomas>",
|
|
6
6
|
"private": false,
|
|
@@ -29,20 +29,19 @@
|
|
|
29
29
|
"build-storybook": "storybook build"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@asup/context-menu": "^
|
|
33
|
-
"@swc/helpers": "^0.5.1",
|
|
32
|
+
"@asup/context-menu": "^3.0.2",
|
|
34
33
|
"bootstrap": "^5.2.2",
|
|
35
|
-
"react": "^19.
|
|
34
|
+
"react": "^19.0.0",
|
|
36
35
|
"react-bootstrap": "^2.5.0",
|
|
37
36
|
"react-bootstrap-icons": "^1.9.1",
|
|
38
|
-
"react-dom": "^19.
|
|
37
|
+
"react-dom": "^19.0.0"
|
|
39
38
|
},
|
|
40
39
|
"peerDependencies": {
|
|
41
|
-
"@swc/helpers": "^0.5.1",
|
|
42
40
|
"react": "^19.0.0",
|
|
43
41
|
"react-dom": "^19.0.0"
|
|
44
42
|
},
|
|
45
43
|
"devDependencies": {
|
|
44
|
+
"@chromatic-com/storybook": "^4.1.3",
|
|
46
45
|
"@eslint/compat": "^2.0.0",
|
|
47
46
|
"@eslint/eslintrc": "^3.3.1",
|
|
48
47
|
"@eslint/js": "^9.29.0",
|
|
@@ -51,6 +50,11 @@
|
|
|
51
50
|
"@parcel/transformer-sass": "^2.7.0",
|
|
52
51
|
"@parcel/transformer-typescript-types": "^2.8.0",
|
|
53
52
|
"@parcel/transformer-webmanifest": "^2.7.0",
|
|
53
|
+
"@storybook/addon-a11y": "^10.1.4",
|
|
54
|
+
"@storybook/addon-docs": "^10.1.4",
|
|
55
|
+
"@storybook/addon-onboarding": "^10.1.4",
|
|
56
|
+
"@storybook/addon-vitest": "^10.1.4",
|
|
57
|
+
"@storybook/react-vite": "^10.1.4",
|
|
54
58
|
"@testing-library/jest-dom": "^6.1.4",
|
|
55
59
|
"@testing-library/react": "^16.3.0",
|
|
56
60
|
"@testing-library/user-event": "^14.4.3",
|
|
@@ -60,12 +64,15 @@
|
|
|
60
64
|
"@types/react-dom": "^19.2.3",
|
|
61
65
|
"@typescript-eslint/eslint-plugin": "^8.34.0",
|
|
62
66
|
"@typescript-eslint/parser": "^8.34.0",
|
|
67
|
+
"@vitest/browser-playwright": "^4.0.14",
|
|
68
|
+
"@vitest/coverage-v8": "^4.0.14",
|
|
63
69
|
"eslint": "^9.29.0",
|
|
64
70
|
"eslint-config-prettier": "^10.1.5",
|
|
65
71
|
"eslint-plugin-jest": "^29.2.1",
|
|
66
72
|
"eslint-plugin-prettier": "^5.0.1",
|
|
67
73
|
"eslint-plugin-react": "^7.31.10",
|
|
68
74
|
"eslint-plugin-react-hooks": "^7.0.1",
|
|
75
|
+
"eslint-plugin-storybook": "10.1.4",
|
|
69
76
|
"eslint-plugin-unused-imports": "^4.1.4",
|
|
70
77
|
"husky": "^9.1.7",
|
|
71
78
|
"jest": "^30.2.0",
|
|
@@ -73,24 +80,16 @@
|
|
|
73
80
|
"jest-watch-typeahead": "^3.0.1",
|
|
74
81
|
"lint-staged": "^16.1.0",
|
|
75
82
|
"parcel": "^2.7.0",
|
|
83
|
+
"playwright": "^1.57.0",
|
|
76
84
|
"postcss": "^8.4.18",
|
|
77
85
|
"prettier": "^3.1.0",
|
|
78
86
|
"prettier-plugin-organize-imports": "^4.1.0",
|
|
79
87
|
"process": "^0.11.10",
|
|
88
|
+
"storybook": "^10.1.4",
|
|
80
89
|
"ts-jest": "^29.0.3",
|
|
81
90
|
"ts-node": "^10.9.1",
|
|
82
91
|
"typescript": "^5.0.4",
|
|
83
|
-
"
|
|
84
|
-
"@storybook/react-vite": "^10.1.2",
|
|
85
|
-
"@chromatic-com/storybook": "^4.1.3",
|
|
86
|
-
"@storybook/addon-vitest": "^10.1.2",
|
|
87
|
-
"@storybook/addon-a11y": "^10.1.2",
|
|
88
|
-
"@storybook/addon-docs": "^10.1.2",
|
|
89
|
-
"@storybook/addon-onboarding": "^10.1.2",
|
|
90
|
-
"vitest": "^4.0.14",
|
|
91
|
-
"playwright": "^1.57.0",
|
|
92
|
-
"@vitest/browser-playwright": "^4.0.14",
|
|
93
|
-
"@vitest/coverage-v8": "^4.0.14"
|
|
92
|
+
"vitest": "^4.0.14"
|
|
94
93
|
},
|
|
95
94
|
"lint-staged": {
|
|
96
95
|
"**/*": "prettier --write --ignore-unknown"
|