@asup/tree-of-nodes 2.0.2 → 2.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/main.css +0 -1
- package/dist/cjs/main.css.map +1 -1
- package/dist/cjs/main.js +133 -270
- package/dist/cjs/main.js.map +1 -1
- package/dist/main.css +0 -1
- package/dist/main.css.map +1 -1
- package/dist/main.js +22 -24
- package/dist/main.js.map +1 -1
- package/dist/tree-of-nodes.d.ts +6 -5
- package/dist/tree-of-nodes.d.ts.map +1 -1
- package/package.json +27 -26
package/dist/cjs/main.js
CHANGED
|
@@ -1,8 +1,4 @@
|
|
|
1
1
|
require("./main.css");
|
|
2
|
-
var $gTuX4$swchelperscjs_async_to_generatorcjs = require("@swc/helpers/cjs/_async_to_generator.cjs");
|
|
3
|
-
var $gTuX4$swchelperscjs_sliced_to_arraycjs = require("@swc/helpers/cjs/_sliced_to_array.cjs");
|
|
4
|
-
var $gTuX4$swchelperscjs_to_consumable_arraycjs = require("@swc/helpers/cjs/_to_consumable_array.cjs");
|
|
5
|
-
var $gTuX4$swchelperscjs_ts_generatorcjs = require("@swc/helpers/cjs/_ts_generator.cjs");
|
|
6
2
|
var $gTuX4$reactjsxruntime = require("react/jsx-runtime");
|
|
7
3
|
var $gTuX4$asupcontextmenu = require("@asup/context-menu");
|
|
8
4
|
var $gTuX4$react = require("react");
|
|
@@ -10,9 +6,10 @@ var $gTuX4$reactbootstrapicons = require("react-bootstrap-icons");
|
|
|
10
6
|
var $gTuX4$swchelperscjs_object_spreadcjs = require("@swc/helpers/cjs/_object_spread.cjs");
|
|
11
7
|
var $gTuX4$reactbootstrap = require("react-bootstrap");
|
|
12
8
|
|
|
9
|
+
|
|
13
10
|
function $parcel$exportWildcard(dest, source) {
|
|
14
11
|
Object.keys(source).forEach(function(key) {
|
|
15
|
-
if (key === 'default' || key === '__esModule' ||
|
|
12
|
+
if (key === 'default' || key === '__esModule' || Object.prototype.hasOwnProperty.call(dest, key)) {
|
|
16
13
|
return;
|
|
17
14
|
}
|
|
18
15
|
|
|
@@ -26,9 +23,11 @@ function $parcel$exportWildcard(dest, source) {
|
|
|
26
23
|
|
|
27
24
|
return dest;
|
|
28
25
|
}
|
|
26
|
+
|
|
29
27
|
function $parcel$export(e, n, v, s) {
|
|
30
28
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
31
29
|
}
|
|
30
|
+
|
|
32
31
|
function $parcel$interopDefault(a) {
|
|
33
32
|
return a && a.__esModule ? a.default : a;
|
|
34
33
|
}
|
|
@@ -41,69 +40,45 @@ $parcel$export($a68bd8a6c0fd98c2$exports, "WordEntry", function () { return $176
|
|
|
41
40
|
|
|
42
41
|
|
|
43
42
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
var $580f9b3e262282c9$export$c6fd3ab3f44300d0 = function(id, included, hierarchyNodes) {
|
|
50
|
-
var processIds = Array.isArray(id) ? id : [
|
|
43
|
+
const $580f9b3e262282c9$export$c6fd3ab3f44300d0 = (id, included, hierarchyNodes)=>{
|
|
44
|
+
const processIds = Array.isArray(id) ? id : [
|
|
51
45
|
id
|
|
52
46
|
];
|
|
53
|
-
|
|
54
|
-
return hierarchyNodes.find(function(h) {
|
|
55
|
-
return h.id === i;
|
|
56
|
-
});
|
|
57
|
-
}).filter(function(h) {
|
|
58
|
-
return h !== undefined;
|
|
59
|
-
});
|
|
47
|
+
const current = processIds.map((i)=>hierarchyNodes.find((h)=>h.id === i)).filter((h)=>h !== undefined);
|
|
60
48
|
if (current.length === 0) return included;
|
|
61
|
-
|
|
62
|
-
return h.parentId;
|
|
63
|
-
}).map(function(pid) {
|
|
64
|
-
return hierarchyNodes.find(function(h) {
|
|
65
|
-
return pid === h.id;
|
|
66
|
-
});
|
|
67
|
-
}).filter(function(p) {
|
|
68
|
-
return p !== undefined;
|
|
69
|
-
});
|
|
49
|
+
const parents = current.map((h)=>h.parentId).map((pid)=>hierarchyNodes.find((h)=>pid === h.id)).filter((p)=>p !== undefined);
|
|
70
50
|
if (parents.length === 0) return included;
|
|
71
|
-
else return $580f9b3e262282c9$export$c6fd3ab3f44300d0(parents.map(
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
}))), hierarchyNodes);
|
|
51
|
+
else return $580f9b3e262282c9$export$c6fd3ab3f44300d0(parents.map((p)=>p.id), [
|
|
52
|
+
...included,
|
|
53
|
+
...parents.filter((p)=>!included.includes(p))
|
|
54
|
+
], hierarchyNodes);
|
|
76
55
|
};
|
|
77
56
|
|
|
78
57
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
var processIds = Array.isArray(id) ? id : [
|
|
58
|
+
const $a19ef65643ae39e0$export$bd923365b402cb04 = (id, hierarchyNodes)=>{
|
|
59
|
+
const processIds = Array.isArray(id) ? id : [
|
|
82
60
|
id
|
|
83
61
|
];
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
return newChildren.length === 0 ? processIds : $a19ef65643ae39e0$export$bd923365b402cb04((0, $gTuX4$swchelperscjs_to_consumable_arraycjs._)(processIds).concat((0, $gTuX4$swchelperscjs_to_consumable_arraycjs._)(newChildren)), hierarchyNodes);
|
|
62
|
+
const newChildren = hierarchyNodes.filter((h)=>h.parentId !== undefined && processIds.includes(h.parentId) && !processIds.includes(h.id)).map((h)=>h.id);
|
|
63
|
+
return newChildren.length === 0 ? processIds : $a19ef65643ae39e0$export$bd923365b402cb04([
|
|
64
|
+
...processIds,
|
|
65
|
+
...newChildren
|
|
66
|
+
], hierarchyNodes);
|
|
90
67
|
};
|
|
91
68
|
|
|
92
69
|
|
|
93
70
|
|
|
94
71
|
|
|
95
|
-
|
|
96
|
-
|
|
72
|
+
const $ff9cca1fe8f6b24e$export$29ec378200e05207 = (0, $gTuX4$react.createContext)(undefined);
|
|
97
73
|
|
|
98
74
|
|
|
99
75
|
|
|
100
76
|
|
|
101
77
|
|
|
102
78
|
|
|
103
|
-
|
|
104
|
-
var id = param.id, value = param.value, editing = param.editing, saving = param.saving, setValue = param.setValue, sendEscape = param.sendEscape, style = param.style, _param_spellCheck = param.spellCheck, spellCheck = _param_spellCheck === void 0 ? "true" : _param_spellCheck;
|
|
79
|
+
const $176d21a51def1fce$export$14f190ac910bde69 = /*#__PURE__*/ (0, ($parcel$interopDefault($gTuX4$react))).forwardRef(({ id: id, value: value, editing: editing, saving: saving, setValue: setValue, sendEscape: sendEscape, style: style, spellCheck: spellCheck = "true" }, ref)=>{
|
|
105
80
|
$176d21a51def1fce$export$14f190ac910bde69.displayName = "WordEntry";
|
|
106
|
-
|
|
81
|
+
const currentStyle = (0, $gTuX4$react.useMemo)(()=>{
|
|
107
82
|
return (0, $gTuX4$swchelperscjs_object_spreadcjs._)({
|
|
108
83
|
display: "inline-block",
|
|
109
84
|
padding: "1px",
|
|
@@ -115,22 +90,22 @@ var $176d21a51def1fce$export$14f190ac910bde69 = /*#__PURE__*/ (0, ($parcel$inter
|
|
|
115
90
|
}, [
|
|
116
91
|
style
|
|
117
92
|
]);
|
|
118
|
-
|
|
119
|
-
(0, $gTuX4$react.useEffect)(
|
|
93
|
+
const [currentValue, setCurrentValue] = (0, $gTuX4$react.useState)(value !== null && value !== void 0 ? value : "");
|
|
94
|
+
(0, $gTuX4$react.useEffect)(()=>{
|
|
120
95
|
setCurrentValue(value !== null && value !== void 0 ? value : "");
|
|
121
96
|
}, [
|
|
122
97
|
value
|
|
123
98
|
]);
|
|
124
|
-
|
|
125
|
-
setValue
|
|
99
|
+
const returnData = (0, $gTuX4$react.useCallback)(()=>{
|
|
100
|
+
setValue === null || setValue === void 0 ? void 0 : setValue(currentValue);
|
|
126
101
|
}, [
|
|
127
102
|
currentValue,
|
|
128
103
|
setValue
|
|
129
104
|
]);
|
|
130
|
-
|
|
105
|
+
const keyPress = (0, $gTuX4$react.useCallback)((e)=>{
|
|
131
106
|
if (e.code === "Escape") {
|
|
132
107
|
setCurrentValue(value !== null && value !== void 0 ? value : "");
|
|
133
|
-
sendEscape
|
|
108
|
+
sendEscape === null || sendEscape === void 0 ? void 0 : sendEscape();
|
|
134
109
|
} else if (e.code === "Enter") returnData();
|
|
135
110
|
}, [
|
|
136
111
|
returnData,
|
|
@@ -140,17 +115,17 @@ var $176d21a51def1fce$export$14f190ac910bde69 = /*#__PURE__*/ (0, ($parcel$inter
|
|
|
140
115
|
// Simple if not editing
|
|
141
116
|
if (!editing) return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("span", {
|
|
142
117
|
style: currentStyle,
|
|
143
|
-
id:
|
|
118
|
+
id: `${id}`,
|
|
144
119
|
children: value ? value : /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactjsxruntime.Fragment), {
|
|
145
120
|
children: "\xa0"
|
|
146
121
|
})
|
|
147
122
|
});
|
|
148
123
|
return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", {
|
|
149
124
|
style: currentStyle,
|
|
150
|
-
id:
|
|
125
|
+
id: `${id}-holder`,
|
|
151
126
|
children: [
|
|
152
127
|
saving && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactbootstrap.Spinner), {
|
|
153
|
-
id:
|
|
128
|
+
id: `${id}-spinner`,
|
|
154
129
|
size: "sm",
|
|
155
130
|
animation: "border"
|
|
156
131
|
}),
|
|
@@ -168,9 +143,7 @@ var $176d21a51def1fce$export$14f190ac910bde69 = /*#__PURE__*/ (0, ($parcel$inter
|
|
|
168
143
|
},
|
|
169
144
|
value: currentValue,
|
|
170
145
|
disabled: saving,
|
|
171
|
-
onChange:
|
|
172
|
-
return setCurrentValue(e.currentTarget.value);
|
|
173
|
-
},
|
|
146
|
+
onChange: (e)=>setCurrentValue(e.currentTarget.value),
|
|
174
147
|
onBlur: returnData,
|
|
175
148
|
onKeyDownCapture: keyPress
|
|
176
149
|
})
|
|
@@ -179,56 +152,43 @@ var $176d21a51def1fce$export$14f190ac910bde69 = /*#__PURE__*/ (0, ($parcel$inter
|
|
|
179
152
|
});
|
|
180
153
|
|
|
181
154
|
|
|
182
|
-
|
|
183
|
-
var id = param.id, canRemove = param.canRemove, canRename = param.canRename, canAddChildren = param.canAddChildren, canRemoveChildren = param.canRemoveChildren, canRenameChildren = param.canRenameChildren;
|
|
155
|
+
const $a56aac35d4408806$export$2eba8ec3a333fdbb = ({ id: id, canRemove: canRemove, canRename: canRename, canAddChildren: canAddChildren, canRemoveChildren: canRemoveChildren, canRenameChildren: canRenameChildren })=>{
|
|
184
156
|
// Contexts
|
|
185
|
-
|
|
157
|
+
const treeContext = (0, $gTuX4$react.useContext)((0, $ff9cca1fe8f6b24e$export$29ec378200e05207));
|
|
186
158
|
// Node information
|
|
187
|
-
|
|
188
|
-
return treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList.find(function(n) {
|
|
189
|
-
return n.id === id;
|
|
190
|
-
});
|
|
191
|
-
}, [
|
|
159
|
+
const thisNode = (0, $gTuX4$react.useMemo)(()=>treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList.find((n)=>n.id === id), [
|
|
192
160
|
id,
|
|
193
161
|
treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList
|
|
194
162
|
]);
|
|
195
|
-
|
|
196
|
-
return treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList.filter(function(n) {
|
|
197
|
-
return n.parentId === id;
|
|
198
|
-
});
|
|
199
|
-
}, [
|
|
163
|
+
const childNodes = (0, $gTuX4$react.useMemo)(()=>treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList.filter((n)=>n.parentId === id), [
|
|
200
164
|
id,
|
|
201
165
|
treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList
|
|
202
166
|
]);
|
|
203
|
-
|
|
204
|
-
|
|
167
|
+
const descendents = (0, $gTuX4$react.useMemo)(()=>{
|
|
168
|
+
var _treeContext_nodeList;
|
|
205
169
|
return (0, $a19ef65643ae39e0$export$bd923365b402cb04)(id, (_treeContext_nodeList = treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList) !== null && _treeContext_nodeList !== void 0 ? _treeContext_nodeList : []);
|
|
206
170
|
}, [
|
|
207
171
|
id,
|
|
208
172
|
treeContext
|
|
209
173
|
]);
|
|
210
174
|
// State
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
175
|
+
const [error, setError] = (0, $gTuX4$react.useState)(false);
|
|
176
|
+
const [errorText, setErrotText] = (0, $gTuX4$react.useState)("");
|
|
177
|
+
const expanded = (0, $gTuX4$react.useMemo)(()=>{
|
|
214
178
|
var _treeContext_expandedNodes_findIndex;
|
|
215
|
-
return ((_treeContext_expandedNodes_findIndex = treeContext === null || treeContext === void 0 ? void 0 : treeContext.expandedNodes.findIndex(
|
|
216
|
-
return e === id;
|
|
217
|
-
})) !== null && _treeContext_expandedNodes_findIndex !== void 0 ? _treeContext_expandedNodes_findIndex : -1) > -1;
|
|
179
|
+
return ((_treeContext_expandedNodes_findIndex = treeContext === null || treeContext === void 0 ? void 0 : treeContext.expandedNodes.findIndex((e)=>e === id)) !== null && _treeContext_expandedNodes_findIndex !== void 0 ? _treeContext_expandedNodes_findIndex : -1) > -1;
|
|
218
180
|
}, [
|
|
219
181
|
id,
|
|
220
182
|
treeContext === null || treeContext === void 0 ? void 0 : treeContext.expandedNodes
|
|
221
183
|
]);
|
|
222
184
|
// Checkbox
|
|
223
|
-
|
|
224
|
-
(0, $gTuX4$react.useEffect)(
|
|
185
|
+
const checkRef = (0, $gTuX4$react.useRef)(null);
|
|
186
|
+
(0, $gTuX4$react.useEffect)(()=>{
|
|
225
187
|
if (checkRef.current) {
|
|
226
188
|
if (treeContext === null || treeContext === void 0 ? void 0 : treeContext.selected.includes(id)) {
|
|
227
189
|
checkRef.current.checked = true;
|
|
228
190
|
checkRef.current.indeterminate = false;
|
|
229
|
-
} else if (descendents.some(
|
|
230
|
-
return treeContext === null || treeContext === void 0 ? void 0 : treeContext.selected.includes(d);
|
|
231
|
-
})) {
|
|
191
|
+
} else if (descendents.some((d)=>treeContext === null || treeContext === void 0 ? void 0 : treeContext.selected.includes(d))) {
|
|
232
192
|
checkRef.current.checked = false;
|
|
233
193
|
checkRef.current.indeterminate = true;
|
|
234
194
|
} else {
|
|
@@ -242,20 +202,19 @@ var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
|
|
|
242
202
|
treeContext === null || treeContext === void 0 ? void 0 : treeContext.selected
|
|
243
203
|
]);
|
|
244
204
|
// Apply selected border
|
|
245
|
-
|
|
205
|
+
const currentBorder = (0, $gTuX4$react.useMemo)(()=>{
|
|
246
206
|
return (treeContext === null || treeContext === void 0 ? void 0 : treeContext.selected.includes(id)) ? "1px solid black" : "";
|
|
247
207
|
}, [
|
|
248
208
|
id,
|
|
249
209
|
treeContext === null || treeContext === void 0 ? void 0 : treeContext.selected
|
|
250
210
|
]);
|
|
251
|
-
|
|
211
|
+
const nodeColour = (0, $gTuX4$react.useMemo)(()=>{
|
|
252
212
|
if (treeContext && treeContext.selected) {
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
if ((0, $gTuX4$swchelperscjs_to_consumable_arraycjs._)(anc).concat([
|
|
213
|
+
const anc = (0, $580f9b3e262282c9$export$c6fd3ab3f44300d0)(treeContext.selected, [], treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList).map((n)=>n.id);
|
|
214
|
+
if ([
|
|
215
|
+
...anc,
|
|
257
216
|
treeContext.selected
|
|
258
|
-
]
|
|
217
|
+
].includes(id)) return treeContext.nodeHighlight;
|
|
259
218
|
}
|
|
260
219
|
return;
|
|
261
220
|
}, [
|
|
@@ -263,15 +222,15 @@ var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
|
|
|
263
222
|
treeContext
|
|
264
223
|
]);
|
|
265
224
|
// New node parameters
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
225
|
+
const newNameRef = (0, $gTuX4$react.useRef)(null);
|
|
226
|
+
const [showNewNode, setShowNewNode] = (0, $gTuX4$react.useState)(false);
|
|
227
|
+
const [savingNewNode, setSavingNewNode] = (0, $gTuX4$react.useState)(false);
|
|
269
228
|
// Rename parameters
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
229
|
+
const currentNameRef = (0, $gTuX4$react.useRef)(null);
|
|
230
|
+
const [renaming, setRenaming] = (0, $gTuX4$react.useState)(false);
|
|
231
|
+
const [updatingNode, setUpdatingNode] = (0, $gTuX4$react.useState)(false);
|
|
273
232
|
// Context functions
|
|
274
|
-
|
|
233
|
+
const handleReturn = (0, $gTuX4$react.useCallback)((ret)=>{
|
|
275
234
|
if (!ret.success) {
|
|
276
235
|
setError(true);
|
|
277
236
|
var _ret_ErrorText;
|
|
@@ -281,131 +240,64 @@ var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
|
|
|
281
240
|
setErrotText("");
|
|
282
241
|
}
|
|
283
242
|
}, []);
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
if (!(treeContext === null || treeContext === void 0 ? void 0 : treeContext.onAddChild)) return [
|
|
291
|
-
3,
|
|
292
|
-
2
|
|
293
|
-
];
|
|
294
|
-
return [
|
|
295
|
-
4,
|
|
296
|
-
treeContext.onAddChild(id, label)
|
|
297
|
-
];
|
|
298
|
-
case 1:
|
|
299
|
-
handleReturn.apply(void 0, [
|
|
300
|
-
_state.sent()
|
|
301
|
-
]);
|
|
302
|
-
_state.label = 2;
|
|
303
|
-
case 2:
|
|
304
|
-
setSavingNewNode(false);
|
|
305
|
-
setShowNewNode(false);
|
|
306
|
-
return [
|
|
307
|
-
2
|
|
308
|
-
];
|
|
309
|
-
}
|
|
310
|
-
});
|
|
311
|
-
});
|
|
312
|
-
return function(label) {
|
|
313
|
-
return _ref.apply(this, arguments);
|
|
314
|
-
};
|
|
315
|
-
}(), [
|
|
243
|
+
const confirmNewNode = (0, $gTuX4$react.useCallback)(async (label)=>{
|
|
244
|
+
setSavingNewNode(true);
|
|
245
|
+
if (treeContext === null || treeContext === void 0 ? void 0 : treeContext.onAddChild) handleReturn(await treeContext.onAddChild(id, label));
|
|
246
|
+
setSavingNewNode(false);
|
|
247
|
+
setShowNewNode(false);
|
|
248
|
+
}, [
|
|
316
249
|
handleReturn,
|
|
317
250
|
id,
|
|
318
251
|
treeContext
|
|
319
252
|
]);
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
2
|
|
329
|
-
];
|
|
330
|
-
setUpdatingNode(true);
|
|
331
|
-
return [
|
|
332
|
-
4,
|
|
333
|
-
treeContext.onRename(id, newLabel)
|
|
334
|
-
];
|
|
335
|
-
case 1:
|
|
336
|
-
handleReturn.apply(void 0, [
|
|
337
|
-
_state.sent()
|
|
338
|
-
]);
|
|
339
|
-
setUpdatingNode(false);
|
|
340
|
-
_state.label = 2;
|
|
341
|
-
case 2:
|
|
342
|
-
return [
|
|
343
|
-
2
|
|
344
|
-
];
|
|
345
|
-
}
|
|
346
|
-
});
|
|
347
|
-
});
|
|
348
|
-
return function(newLabel) {
|
|
349
|
-
return _ref.apply(this, arguments);
|
|
350
|
-
};
|
|
351
|
-
}(), [
|
|
253
|
+
const renameNode = (0, $gTuX4$react.useCallback)(async (newLabel)=>{
|
|
254
|
+
setRenaming(false);
|
|
255
|
+
if (treeContext === null || treeContext === void 0 ? void 0 : treeContext.onRename) {
|
|
256
|
+
setUpdatingNode(true);
|
|
257
|
+
handleReturn(await treeContext.onRename(id, newLabel));
|
|
258
|
+
setUpdatingNode(false);
|
|
259
|
+
}
|
|
260
|
+
}, [
|
|
352
261
|
handleReturn,
|
|
353
262
|
id,
|
|
354
263
|
treeContext
|
|
355
264
|
]);
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
];
|
|
364
|
-
setUpdatingNode(true);
|
|
365
|
-
return [
|
|
366
|
-
4,
|
|
367
|
-
treeContext.onRemove(id)
|
|
368
|
-
];
|
|
369
|
-
case 1:
|
|
370
|
-
handleReturn.apply(void 0, [
|
|
371
|
-
_state.sent()
|
|
372
|
-
]);
|
|
373
|
-
setUpdatingNode(false);
|
|
374
|
-
_state.label = 2;
|
|
375
|
-
case 2:
|
|
376
|
-
return [
|
|
377
|
-
2
|
|
378
|
-
];
|
|
379
|
-
}
|
|
380
|
-
});
|
|
381
|
-
}), [
|
|
265
|
+
const deleteThis = (0, $gTuX4$react.useCallback)(async ()=>{
|
|
266
|
+
if (treeContext === null || treeContext === void 0 ? void 0 : treeContext.onRemove) {
|
|
267
|
+
setUpdatingNode(true);
|
|
268
|
+
handleReturn(await treeContext.onRemove(id));
|
|
269
|
+
setUpdatingNode(false);
|
|
270
|
+
}
|
|
271
|
+
}, [
|
|
382
272
|
handleReturn,
|
|
383
273
|
id,
|
|
384
274
|
treeContext
|
|
385
275
|
]);
|
|
386
276
|
// Context actions
|
|
387
|
-
|
|
277
|
+
const addChild = (0, $gTuX4$react.useCallback)(()=>{
|
|
278
|
+
var _treeContext_handleExpandClick;
|
|
388
279
|
setShowNewNode(true);
|
|
389
|
-
treeContext
|
|
280
|
+
treeContext === null || treeContext === void 0 ? void 0 : (_treeContext_handleExpandClick = treeContext.handleExpandClick) === null || _treeContext_handleExpandClick === void 0 ? void 0 : _treeContext_handleExpandClick.call(treeContext, id, true);
|
|
390
281
|
}, [
|
|
391
282
|
id,
|
|
392
283
|
treeContext
|
|
393
284
|
]);
|
|
394
|
-
(0, $gTuX4$react.useEffect)(
|
|
285
|
+
(0, $gTuX4$react.useEffect)(()=>{
|
|
395
286
|
if (showNewNode === true && newNameRef.current) newNameRef.current.focus();
|
|
396
287
|
}, [
|
|
397
288
|
showNewNode
|
|
398
289
|
]);
|
|
399
|
-
|
|
290
|
+
const renameThis = (0, $gTuX4$react.useCallback)(()=>{
|
|
291
|
+
var _treeContext_handleSelect;
|
|
400
292
|
setRenaming(true);
|
|
401
|
-
treeContext
|
|
293
|
+
treeContext === null || treeContext === void 0 ? void 0 : (_treeContext_handleSelect = treeContext.handleSelect) === null || _treeContext_handleSelect === void 0 ? void 0 : _treeContext_handleSelect.call(treeContext, id);
|
|
402
294
|
}, [
|
|
403
295
|
id,
|
|
404
296
|
treeContext
|
|
405
297
|
]);
|
|
406
298
|
// Context menu
|
|
407
|
-
|
|
408
|
-
|
|
299
|
+
const menuItems = (0, $gTuX4$react.useMemo)(()=>{
|
|
300
|
+
const menuItems = [];
|
|
409
301
|
if (canAddChildren) menuItems.push({
|
|
410
302
|
label: "Add",
|
|
411
303
|
action: addChild
|
|
@@ -429,11 +321,10 @@ var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
|
|
|
429
321
|
renameThis
|
|
430
322
|
]);
|
|
431
323
|
// Return node
|
|
432
|
-
|
|
433
|
-
return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$asupcontextmenu.ContextMenuHandler), {
|
|
324
|
+
return !treeContext ? null : /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$asupcontextmenu.ContextMenuHandler), {
|
|
434
325
|
menuItems: menuItems,
|
|
435
326
|
children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", {
|
|
436
|
-
id:
|
|
327
|
+
id: `${treeContext.id}-treenode-${id}`,
|
|
437
328
|
className: "treenode",
|
|
438
329
|
children: [
|
|
439
330
|
error ? /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)((0, $gTuX4$reactjsxruntime.Fragment), {
|
|
@@ -452,65 +343,54 @@ var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
|
|
|
452
343
|
type: "checkbox",
|
|
453
344
|
role: "checkbox",
|
|
454
345
|
className: "ton-checkbox",
|
|
455
|
-
id:
|
|
456
|
-
onClick:
|
|
457
|
-
|
|
346
|
+
id: `${treeContext.id}-treenode-checkbox-${id}`,
|
|
347
|
+
onClick: ()=>{
|
|
348
|
+
var _treeContext_handleSelect;
|
|
349
|
+
treeContext === null || treeContext === void 0 ? void 0 : (_treeContext_handleSelect = treeContext.handleSelect) === null || _treeContext_handleSelect === void 0 ? void 0 : _treeContext_handleSelect.call(treeContext, descendents);
|
|
458
350
|
}
|
|
459
351
|
}),
|
|
460
352
|
childNodes !== undefined && childNodes.length > 0 ? !expanded ? /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactbootstrapicons.CaretRightFill), {
|
|
461
|
-
id:
|
|
353
|
+
id: `${treeContext.id}-treenode-caret-${id}`,
|
|
462
354
|
className: "ton-expander",
|
|
463
355
|
role: "button",
|
|
464
356
|
color: nodeColour,
|
|
465
357
|
"aria-expanded": false,
|
|
466
358
|
"aria-label": "Expander",
|
|
467
|
-
onClick:
|
|
468
|
-
return treeContext.handleExpandClick(id);
|
|
469
|
-
}
|
|
359
|
+
onClick: ()=>treeContext.handleExpandClick(id)
|
|
470
360
|
}) : /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactbootstrapicons.CaretDownFill), {
|
|
471
|
-
id:
|
|
361
|
+
id: `${treeContext.id}-treenode-caret-${id}`,
|
|
472
362
|
className: "ton-expander",
|
|
473
363
|
role: "button",
|
|
474
364
|
"aria-expanded": true,
|
|
475
365
|
"aria-label": "Expander",
|
|
476
366
|
color: nodeColour,
|
|
477
|
-
onClick:
|
|
367
|
+
onClick: ()=>{
|
|
478
368
|
treeContext.handleExpandClick(id);
|
|
479
369
|
}
|
|
480
370
|
}) : /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactbootstrapicons.CaretRight), {
|
|
481
|
-
id:
|
|
371
|
+
id: `${treeContext.id}-treenode-caret-${id}`,
|
|
482
372
|
className: "ton-expander",
|
|
483
373
|
role: "button",
|
|
484
374
|
color: nodeColour,
|
|
485
375
|
"aria-expanded": false,
|
|
486
376
|
"aria-label": "Disabled expander",
|
|
487
|
-
|
|
377
|
+
onClick: ()=>treeContext.handleSelect && treeContext.handleSelect(id)
|
|
488
378
|
}),
|
|
489
379
|
thisNode && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
490
380
|
style: {
|
|
491
381
|
display: "inline-block"
|
|
492
382
|
},
|
|
493
|
-
onContextMenuCapture:
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
onClickCapture: function() {
|
|
497
|
-
return treeContext.handleSelect && treeContext.handleSelect(id);
|
|
498
|
-
},
|
|
499
|
-
onFocusCapture: function() {
|
|
500
|
-
return treeContext.handleSelect && treeContext.handleSelect(id);
|
|
501
|
-
},
|
|
383
|
+
onContextMenuCapture: ()=>treeContext.handleSelect && treeContext.handleSelect(id),
|
|
384
|
+
onClickCapture: ()=>treeContext.handleSelect && treeContext.handleSelect(id),
|
|
385
|
+
onFocusCapture: ()=>treeContext.handleSelect && treeContext.handleSelect(id),
|
|
502
386
|
children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $176d21a51def1fce$export$14f190ac910bde69), {
|
|
503
|
-
id:
|
|
387
|
+
id: `${treeContext.id}-treenode-entry-${id}`,
|
|
504
388
|
ref: currentNameRef,
|
|
505
389
|
value: thisNode.label,
|
|
506
390
|
editing: renaming,
|
|
507
391
|
saving: updatingNode,
|
|
508
|
-
setValue:
|
|
509
|
-
|
|
510
|
-
},
|
|
511
|
-
sendEscape: function() {
|
|
512
|
-
return setRenaming(false);
|
|
513
|
-
},
|
|
392
|
+
setValue: (ret)=>renameNode(ret),
|
|
393
|
+
sendEscape: ()=>setRenaming(false),
|
|
514
394
|
style: {
|
|
515
395
|
border: currentBorder,
|
|
516
396
|
margin: currentBorder === "" ? "1px" : "",
|
|
@@ -522,12 +402,11 @@ var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
|
|
|
522
402
|
]
|
|
523
403
|
}),
|
|
524
404
|
childNodes !== undefined && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
525
|
-
className:
|
|
405
|
+
className: `ton-collapsible-wrapper ${expanded ? "" : "collapsed"}`,
|
|
526
406
|
children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
527
407
|
className: "ton-collapsible",
|
|
528
|
-
children: childNodes.map(
|
|
529
|
-
|
|
530
|
-
id: "".concat(treeContext.id, "-treenode-child-").concat(h.id),
|
|
408
|
+
children: childNodes.map((h)=>/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("span", {
|
|
409
|
+
id: `${treeContext.id}-treenode-child-${h.id}`,
|
|
531
410
|
className: "ton-child",
|
|
532
411
|
children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)($a56aac35d4408806$export$2eba8ec3a333fdbb, {
|
|
533
412
|
id: h.id,
|
|
@@ -537,8 +416,7 @@ var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
|
|
|
537
416
|
canRemoveChildren: canRemoveChildren,
|
|
538
417
|
canRenameChildren: canRenameChildren
|
|
539
418
|
})
|
|
540
|
-
}, h.id)
|
|
541
|
-
})
|
|
419
|
+
}, h.id))
|
|
542
420
|
})
|
|
543
421
|
}),
|
|
544
422
|
showNewNode && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
@@ -546,14 +424,14 @@ var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
|
|
|
546
424
|
style: {
|
|
547
425
|
marginLeft: "14px"
|
|
548
426
|
},
|
|
549
|
-
id:
|
|
427
|
+
id: `treenode-new-${id}`,
|
|
550
428
|
ref: newNameRef,
|
|
551
429
|
editing: true,
|
|
552
|
-
setValue:
|
|
430
|
+
setValue: (ret)=>{
|
|
553
431
|
confirmNewNode(ret);
|
|
554
432
|
},
|
|
555
433
|
saving: savingNewNode,
|
|
556
|
-
sendEscape:
|
|
434
|
+
sendEscape: ()=>{
|
|
557
435
|
setShowNewNode(false);
|
|
558
436
|
},
|
|
559
437
|
spellCheck: treeContext.spellCheck
|
|
@@ -569,39 +447,28 @@ $a56aac35d4408806$export$2eba8ec3a333fdbb.displayName = "TreeNode";
|
|
|
569
447
|
|
|
570
448
|
|
|
571
449
|
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
return n.id;
|
|
578
|
-
}).filter(function(k) {
|
|
579
|
-
return !expandedNodes.includes(k);
|
|
580
|
-
}))).sort(function(a, b) {
|
|
581
|
-
return "".concat(a).localeCompare("".concat(b));
|
|
582
|
-
});
|
|
450
|
+
const $f31429c9cc6d3bce$export$40c47a7ac5f85aba = (nodeList, selected, expandedNodes)=>{
|
|
451
|
+
return [
|
|
452
|
+
...expandedNodes,
|
|
453
|
+
...(0, $580f9b3e262282c9$export$c6fd3ab3f44300d0)(selected, [], nodeList).map((n)=>n.id).filter((k)=>!expandedNodes.includes(k))
|
|
454
|
+
].sort((a, b)=>`${a}`.localeCompare(`${b}`));
|
|
583
455
|
};
|
|
584
456
|
|
|
585
457
|
|
|
586
458
|
|
|
587
459
|
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
var selectedArray = (0, $gTuX4$react.useMemo)(function() {
|
|
592
|
-
return Array.isArray(selected) ? selected : [
|
|
460
|
+
const $9becaaec3a803ae7$export$5580fff3e08a8be5 = ({ id: id, nodeList: nodeList, roots: roots, selected: selected = [], showCheckBox: showCheckBox = false, handleSelect: handleSelect, onAdd: onAdd, onRename: onRename, onRemove: onRemove, canRemoveRoot: canRemoveRoot = false, canRenameRoot: canRenameRoot = false, canAddChildren: canAddChildren = false, canRemoveChildren: canRemoveChildren = false, canRenameChildren: canRenameChildren = false, nodeHighlight: nodeHighlight = "red", textHighlight: textHighlight = "rgba(255, 0, 0, 0.2)", spellCheck: spellCheck = "true" })=>{
|
|
461
|
+
const [expandedNodes, setExpandedNodes] = (0, $gTuX4$react.useState)([]);
|
|
462
|
+
const selectedArray = (0, $gTuX4$react.useMemo)(()=>Array.isArray(selected) ? selected : [
|
|
593
463
|
selected
|
|
594
|
-
]
|
|
595
|
-
}, [
|
|
464
|
+
], [
|
|
596
465
|
selected
|
|
597
466
|
]);
|
|
598
|
-
(0, $gTuX4$react.useEffect)(
|
|
467
|
+
(0, $gTuX4$react.useEffect)(()=>{
|
|
599
468
|
if (selectedArray.length > 0) {
|
|
600
469
|
// Check all nodes are showing that should be
|
|
601
|
-
|
|
602
|
-
shouldExpand.filter(
|
|
603
|
-
return !expandedNodes.includes(n);
|
|
604
|
-
}).length > 0 && setExpandedNodes(shouldExpand);
|
|
470
|
+
const shouldExpand = (0, $f31429c9cc6d3bce$export$40c47a7ac5f85aba)(nodeList, selectedArray, expandedNodes);
|
|
471
|
+
if (shouldExpand.filter((n)=>!expandedNodes.includes(n)).length > 0) setExpandedNodes(shouldExpand);
|
|
605
472
|
}
|
|
606
473
|
}, [
|
|
607
474
|
expandedNodes,
|
|
@@ -609,11 +476,11 @@ var $9becaaec3a803ae7$export$5580fff3e08a8be5 = function(param) {
|
|
|
609
476
|
selectedArray
|
|
610
477
|
]);
|
|
611
478
|
// Change expansion and update contexts
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
479
|
+
const changeExpand = (0, $gTuX4$react.useCallback)((eKey, force)=>{
|
|
480
|
+
const newExpandedNodes = [
|
|
481
|
+
...expandedNodes
|
|
482
|
+
];
|
|
483
|
+
const ix = newExpandedNodes.findIndex((nKey)=>nKey === eKey);
|
|
617
484
|
if (ix === -1 && force === undefined || force === true) newExpandedNodes.push(eKey);
|
|
618
485
|
else newExpandedNodes.splice(ix, 1);
|
|
619
486
|
setExpandedNodes(newExpandedNodes);
|
|
@@ -628,9 +495,7 @@ var $9becaaec3a803ae7$export$5580fff3e08a8be5 = function(param) {
|
|
|
628
495
|
showCheckBox: showCheckBox,
|
|
629
496
|
handleSelect: handleSelect,
|
|
630
497
|
expandedNodes: expandedNodes,
|
|
631
|
-
handleExpandClick:
|
|
632
|
-
return changeExpand(r, f);
|
|
633
|
-
},
|
|
498
|
+
handleExpandClick: (r, f)=>changeExpand(r, f),
|
|
634
499
|
onAddChild: onAdd,
|
|
635
500
|
onRename: onRename,
|
|
636
501
|
onRemove: onRemove,
|
|
@@ -638,16 +503,14 @@ var $9becaaec3a803ae7$export$5580fff3e08a8be5 = function(param) {
|
|
|
638
503
|
textHighlight: textHighlight,
|
|
639
504
|
spellCheck: spellCheck
|
|
640
505
|
},
|
|
641
|
-
children: roots.map(
|
|
642
|
-
return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $a56aac35d4408806$export$2eba8ec3a333fdbb), {
|
|
506
|
+
children: roots.map((r)=>/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $a56aac35d4408806$export$2eba8ec3a333fdbb), {
|
|
643
507
|
id: r,
|
|
644
508
|
canRemove: canRemoveRoot,
|
|
645
509
|
canAddChildren: canAddChildren,
|
|
646
510
|
canRename: canRenameRoot,
|
|
647
511
|
canRemoveChildren: canRemoveChildren,
|
|
648
512
|
canRenameChildren: canRenameChildren
|
|
649
|
-
}, r)
|
|
650
|
-
})
|
|
513
|
+
}, r))
|
|
651
514
|
});
|
|
652
515
|
};
|
|
653
516
|
$9becaaec3a803ae7$export$5580fff3e08a8be5.displayName = "TreeOfNodes";
|