@asup/tree-of-nodes 1.0.8 → 2.0.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/README.md +71 -56
- package/dist/cjs/main.css +49 -2
- package/dist/cjs/main.css.map +1 -1
- package/dist/cjs/main.js +142 -60
- package/dist/cjs/main.js.map +1 -1
- package/dist/main.css +49 -2
- package/dist/main.css.map +1 -1
- package/dist/main.js +125 -57
- package/dist/main.js.map +1 -1
- package/dist/tree-of-nodes.d.ts +7 -5
- package/dist/tree-of-nodes.d.ts.map +1 -1
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -34,40 +34,45 @@ import '@asup/tree-of-nodes/dist/style.css';
|
|
|
34
34
|
id: string;
|
|
35
35
|
nodeList: TreeNodeData<T>[];
|
|
36
36
|
roots: Key[];
|
|
37
|
-
|
|
38
|
-
|
|
37
|
+
multiSelect?: boolean;
|
|
38
|
+
selectedIds?: Key | Key[];
|
|
39
|
+
handleSelect?: (ret: Key | Key []) => void;
|
|
39
40
|
onAdd?: (parentId: Key, newName: string) => Promise<iNodeUpdate>;
|
|
40
41
|
onRemove?: (childId: Key) => Promise<iNodeUpdate>;
|
|
41
42
|
onRename?: (childId: Key, newName: string) => Promise<iNodeUpdate>;
|
|
42
|
-
canAddRoot?: boolean;
|
|
43
43
|
canRemoveRoot?: boolean;
|
|
44
44
|
canRenameRoot?: boolean;
|
|
45
45
|
canAddChildren?: boolean;
|
|
46
46
|
canRemoveChildren?: boolean;
|
|
47
47
|
canRenameChildren?: boolean;
|
|
48
|
+
nodeHighlight?: string;
|
|
49
|
+
textHighlight?: string;
|
|
48
50
|
/>
|
|
49
51
|
```
|
|
50
52
|
|
|
51
|
-
The component expects a list of nodes of type `TreeNodeData<T>` with unique `Key`s.
|
|
53
|
+
The component expects a list of nodes of type `TreeNodeData<T>` with unique `React.Key`s.
|
|
52
54
|
|
|
53
55
|
## Properties
|
|
54
56
|
|
|
55
|
-
| Prop | Description | Default
|
|
56
|
-
| :---------------- | :---------------------------------------------------------------------------------------------- |
|
|
57
|
-
| id | HTML id attribute |
|
|
58
|
-
| nodeList | Array of node data |
|
|
59
|
-
| roots | One or more node Keys to use as the root of the tree |
|
|
60
|
-
|
|
|
61
|
-
|
|
|
62
|
-
|
|
|
63
|
-
|
|
|
64
|
-
|
|
|
65
|
-
|
|
|
66
|
-
| canRemoveRoot | Allows removal of a root node in combination with specification of onRemove function | `false`
|
|
67
|
-
| canRenameRoot | Allows renaming of a root node in combination with specification of onRename function | `false`
|
|
68
|
-
| canAddChildren | Allows addition of children in combination with specification of onAdd function | `false`
|
|
69
|
-
| canRemoveChildren | Allows renaming of non-root nodes in combination with specification of onRemove function | `false`
|
|
70
|
-
| canRenameChildren | Allows renaming of non-root nodes in combination with specification of onRename function | `false`
|
|
57
|
+
| Prop | Description | Default |
|
|
58
|
+
| :---------------- | :---------------------------------------------------------------------------------------------- | :----------------: |
|
|
59
|
+
| id | HTML id attribute | |
|
|
60
|
+
| nodeList | Array of node data | |
|
|
61
|
+
| roots | One or more node Keys to use as the root of the tree | |
|
|
62
|
+
| multiSelect | Allow selection of more than 1 id | `false` |
|
|
63
|
+
| selectedIds | Currently selected list | |
|
|
64
|
+
| handleSelect | Function called when a node is clicked (selected), this should be used to update the selectedId | `() => {return;}` |
|
|
65
|
+
| onAdd | Function called when a new node is added, this should be used to update the nodeList | |
|
|
66
|
+
| onRemove | Function called when a node is removed, this should be used to update the nodeList | |
|
|
67
|
+
| onRename | Function called when a node is renamed, this should be used to update the nodeList | |
|
|
68
|
+
| canRemoveRoot | Allows removal of a root node in combination with specification of onRemove function | `false` |
|
|
69
|
+
| canRenameRoot | Allows renaming of a root node in combination with specification of onRename function | `false` |
|
|
70
|
+
| canAddChildren | Allows addition of children in combination with specification of onAdd function | `false` |
|
|
71
|
+
| canRemoveChildren | Allows renaming of non-root nodes in combination with specification of onRemove function | `false` |
|
|
72
|
+
| canRenameChildren | Allows renaming of non-root nodes in combination with specification of onRename function | `false` |
|
|
73
|
+
| nodeHighlight | Selected node highlight colour | `red` |
|
|
74
|
+
| textHighlight | Selected text highlight colour | `rgba(255,0,0,0.2` |
|
|
75
|
+
| spellCheck | Use/disable browser spell check | 'true' |
|
|
71
76
|
|
|
72
77
|
### TreeNodeData
|
|
73
78
|
|
|
@@ -93,45 +98,55 @@ export interface iNodeUpdate {
|
|
|
93
98
|
}
|
|
94
99
|
```
|
|
95
100
|
|
|
96
|
-
|
|
101
|
+
# Handling clicks
|
|
97
102
|
|
|
98
|
-
|
|
103
|
+
Context menu clicks on a node will result in a context menu being displayed with "Add", "Rename" and "Delete" options being displayed.
|
|
99
104
|
|
|
100
|
-
|
|
101
|
-
import { ContextMenuProvider, iMenuItem, MenuContext } from '@asup/tree-of-nodes';
|
|
102
|
-
import '@asup/tree-of-nodes/dist/style.css';
|
|
105
|
+
Clicks on an expander will either expand or close the node's clidren
|
|
103
106
|
|
|
104
|
-
|
|
107
|
+
Clicks on a name will select that item
|
|
108
|
+
|
|
109
|
+
Clicks on a checkbox will select that item and all its descendents.
|
|
110
|
+
|
|
111
|
+
## Single item selection
|
|
112
|
+
|
|
113
|
+
To handle one (and only one) item being selected, it is suggested to use these base options
|
|
105
114
|
|
|
106
|
-
<ContextMenuProvider>
|
|
107
|
-
|
|
108
|
-
<SomeChild
|
|
109
|
-
|
|
110
|
-
const menuContext = useContext(MenuContext);
|
|
111
|
-
const showMenu = useCallback((e) => {
|
|
112
|
-
e.preventDefault();
|
|
113
|
-
e.stopPropagation();
|
|
114
|
-
const menuItems: iMenuItem[] = [
|
|
115
|
-
{ label: 'Item 1', action: item1Function },
|
|
116
|
-
{ label: 'Item 2', action: item2Function },
|
|
117
|
-
...
|
|
118
|
-
];
|
|
119
|
-
menuContext.set && menuContext.set({
|
|
120
|
-
visible: true,
|
|
121
|
-
y: e.pageY,
|
|
122
|
-
x: e.pageX,
|
|
123
|
-
menuItems: menuItems,
|
|
124
|
-
});
|
|
125
|
-
},
|
|
126
|
-
[...]);
|
|
127
|
-
|
|
128
|
-
return (
|
|
129
|
-
<div onContextMenu={showMenu}>
|
|
130
|
-
</div>
|
|
131
|
-
);
|
|
132
|
-
>
|
|
133
|
-
|
|
134
|
-
</ContextMenuProvider>
|
|
135
115
|
```
|
|
116
|
+
<TreeOfNodes<T>
|
|
117
|
+
id={'...'}
|
|
118
|
+
nodeList={[...]}
|
|
119
|
+
roots={[...]}
|
|
120
|
+
selected={selected}
|
|
121
|
+
handleSelect={async (i) => {
|
|
122
|
+
setSelected([i]);
|
|
123
|
+
}}
|
|
124
|
+
/>
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
## Multiple item selection
|
|
128
|
+
|
|
129
|
+
To handle multiple selections, it is suggested to use these base options
|
|
136
130
|
|
|
137
|
-
|
|
131
|
+
```
|
|
132
|
+
<TreeOfNodes<T>
|
|
133
|
+
id={'...'}
|
|
134
|
+
nodeList={[...]}
|
|
135
|
+
roots={[...]}
|
|
136
|
+
showCheckBox
|
|
137
|
+
selected={selected}
|
|
138
|
+
handleSelect={async (i) => {
|
|
139
|
+
if (Array.isArray(i)) {
|
|
140
|
+
setSelected(
|
|
141
|
+
selected.includes(i[0])
|
|
142
|
+
? selected.filter((s) => !i.includes(s))
|
|
143
|
+
: [...selected, ...i.filter((n) => !selected.includes(n))],
|
|
144
|
+
);
|
|
145
|
+
} else {
|
|
146
|
+
setSelected(
|
|
147
|
+
selected.includes(i) ? selected.filter((s) => s !== i) : [...selected, i],
|
|
148
|
+
);
|
|
149
|
+
}
|
|
150
|
+
}}
|
|
151
|
+
/>
|
|
152
|
+
```
|
package/dist/cjs/main.css
CHANGED
|
@@ -1,10 +1,57 @@
|
|
|
1
|
-
.
|
|
1
|
+
.ton-checkbox {
|
|
2
2
|
margin-top: 3px;
|
|
3
3
|
margin-right: 3px;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
|
-
.
|
|
6
|
+
.ton-expander {
|
|
7
7
|
margin-bottom: 4px;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
+
.ton-child {
|
|
11
|
+
opacity: 1;
|
|
12
|
+
margin-left: 16px;
|
|
13
|
+
transition: opacity .6s linear;
|
|
14
|
+
display: block;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.ton-collapsible-wrapper {
|
|
18
|
+
display: flex;
|
|
19
|
+
overflow: hidden;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.ton-collapsible-wrapper:after {
|
|
23
|
+
content: "";
|
|
24
|
+
height: 20px;
|
|
25
|
+
max-height: 0;
|
|
26
|
+
transition: height .3s linear, max-height 0s linear .3s;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.ton-collapsible {
|
|
30
|
+
max-height: 10000px;
|
|
31
|
+
margin-bottom: 0;
|
|
32
|
+
transition: margin-bottom .3s cubic-bezier(0, 0, 0, 1);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.ton-collapsible-wrapper.collapsed > .ton-collapsible {
|
|
36
|
+
visibility: hidden;
|
|
37
|
+
max-height: 0;
|
|
38
|
+
margin-bottom: -2000px;
|
|
39
|
+
transition: margin-bottom .3s cubic-bezier(1, 0, 1, 1), visibility 0s .3s, max-height 0s .3s;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.ton-collapsible-wrapper.collapsed:after {
|
|
43
|
+
height: 0;
|
|
44
|
+
max-height: 20px;
|
|
45
|
+
transition: height .3s linear;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.ton-collapsible-wrapper.collapsed {
|
|
49
|
+
visibility: hidden;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.ton-collapsible-wrapper.collapsed .ton-child {
|
|
53
|
+
opacity: 0;
|
|
54
|
+
transition: opacity .6s linear;
|
|
55
|
+
}
|
|
56
|
+
|
|
10
57
|
/*# sourceMappingURL=main.css.map */
|
package/dist/cjs/main.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AAAA;;;;;AAKA","sources":["src/components/TreeNode.css"],"sourcesContent":[".
|
|
1
|
+
{"mappings":"AAAA;;;;;AAKA;;;;AAIA;;;;;;;AAOA;;;;;AAIA;;;;;;;AAMA;;;;;;AAKA;;;;;;;AAMA;;;;;;AAKA;;;;AAGA","sources":["src/components/TreeNode.css"],"sourcesContent":[".ton-checkbox {\n margin-right: 3px;\n margin-top: 3px;\n}\n\n.ton-expander {\n margin-bottom: 4px;\n}\n\n.ton-child {\n margin-left: 16px;\n display: block;\n opacity: 1;\n transition: opacity 0.6s linear;\n}\n\n.ton-collapsible-wrapper {\n display: flex;\n overflow: hidden;\n}\n.ton-collapsible-wrapper:after {\n content: '';\n height: 20px;\n transition: height 0.3s linear, max-height 0s 0.3s linear;\n max-height: 0px;\n}\n.ton-collapsible {\n transition: margin-bottom 0.3s cubic-bezier(0, 0, 0, 1);\n margin-bottom: 0;\n max-height: 10000px;\n}\n.ton-collapsible-wrapper.collapsed > .ton-collapsible {\n margin-bottom: -2000px;\n transition: margin-bottom 0.3s cubic-bezier(1, 0, 1, 1), visibility 0s 0.3s, max-height 0s 0.3s;\n visibility: hidden;\n max-height: 0;\n}\n.ton-collapsible-wrapper.collapsed:after {\n height: 0;\n transition: height 0.3s 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 0.6s linear;\n}\n"],"names":[],"version":3,"file":"main.css.map"}
|
package/dist/cjs/main.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
require("./main.css");
|
|
1
2
|
var $gTuX4$swchelperscjs_async_to_generatorcjs = require("@swc/helpers/cjs/_async_to_generator.cjs");
|
|
2
3
|
var $gTuX4$swchelperscjs_sliced_to_arraycjs = require("@swc/helpers/cjs/_sliced_to_array.cjs");
|
|
3
4
|
var $gTuX4$swchelperscjs_to_consumable_arraycjs = require("@swc/helpers/cjs/_to_consumable_array.cjs");
|
|
@@ -46,25 +47,51 @@ $parcel$export($a68bd8a6c0fd98c2$exports, "WordEntry", function () { return $176
|
|
|
46
47
|
|
|
47
48
|
|
|
48
49
|
var $580f9b3e262282c9$export$c6fd3ab3f44300d0 = function(id, included, hierarchyNodes) {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
50
|
+
var processIds = Array.isArray(id) ? id : [
|
|
51
|
+
id
|
|
52
|
+
];
|
|
53
|
+
var current = processIds.map(function(i) {
|
|
54
|
+
return hierarchyNodes.find(function(h) {
|
|
55
|
+
return h.id === i;
|
|
56
|
+
});
|
|
57
|
+
}).filter(function(h) {
|
|
58
|
+
return h !== undefined;
|
|
59
|
+
});
|
|
60
|
+
if (current.length === 0) return included;
|
|
61
|
+
var parents = current.map(function(h) {
|
|
62
|
+
return h.parentId;
|
|
63
|
+
}).map(function(pid) {
|
|
64
|
+
return hierarchyNodes.find(function(h) {
|
|
65
|
+
return pid === h.id;
|
|
66
|
+
});
|
|
67
|
+
}).filter(function(p) {
|
|
68
|
+
return p !== undefined;
|
|
52
69
|
});
|
|
53
|
-
if (
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
70
|
+
if (parents.length === 0) return included;
|
|
71
|
+
else return $580f9b3e262282c9$export$c6fd3ab3f44300d0(parents.map(function(p) {
|
|
72
|
+
return p.id;
|
|
73
|
+
}), (0, $gTuX4$swchelperscjs_to_consumable_arraycjs._)(included).concat((0, $gTuX4$swchelperscjs_to_consumable_arraycjs._)(parents.filter(function(p) {
|
|
74
|
+
return !included.includes(p);
|
|
75
|
+
}))), hierarchyNodes);
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
var $a19ef65643ae39e0$export$bd923365b402cb04 = function(id, hierarchyNodes) {
|
|
81
|
+
var processIds = Array.isArray(id) ? id : [
|
|
82
|
+
id
|
|
83
|
+
];
|
|
84
|
+
var newChildren = hierarchyNodes.filter(function(h) {
|
|
85
|
+
return h.parentId !== undefined && processIds.includes(h.parentId) && !processIds.includes(h.id);
|
|
86
|
+
}).map(function(h) {
|
|
87
|
+
return h.id;
|
|
57
88
|
});
|
|
58
|
-
|
|
59
|
-
return parent === undefined ? included : $580f9b3e262282c9$export$c6fd3ab3f44300d0(parent.id, (0, $gTuX4$swchelperscjs_to_consumable_arraycjs._)(included.filter(function(i) {
|
|
60
|
-
return i.id !== parent.id;
|
|
61
|
-
})).concat([
|
|
62
|
-
parent
|
|
63
|
-
]), hierarchyNodes);
|
|
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);
|
|
64
90
|
};
|
|
65
91
|
|
|
66
92
|
|
|
67
93
|
|
|
94
|
+
|
|
68
95
|
var $ff9cca1fe8f6b24e$export$29ec378200e05207 = (0, $gTuX4$react.createContext)(undefined);
|
|
69
96
|
|
|
70
97
|
|
|
@@ -74,7 +101,7 @@ var $ff9cca1fe8f6b24e$export$29ec378200e05207 = (0, $gTuX4$react.createContext)(
|
|
|
74
101
|
|
|
75
102
|
|
|
76
103
|
var $176d21a51def1fce$export$14f190ac910bde69 = /*#__PURE__*/ (0, ($parcel$interopDefault($gTuX4$react))).forwardRef(function(param, ref) {
|
|
77
|
-
var id = param.id, value = param.value, editing = param.editing, saving = param.saving, setValue = param.setValue, sendEscape = param.sendEscape, style = param.style;
|
|
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;
|
|
78
105
|
$176d21a51def1fce$export$14f190ac910bde69.displayName = "WordEntry";
|
|
79
106
|
var currentStyle = (0, $gTuX4$react.useMemo)(function() {
|
|
80
107
|
return (0, $gTuX4$swchelperscjs_object_spreadcjs._)({
|
|
@@ -113,8 +140,10 @@ var $176d21a51def1fce$export$14f190ac910bde69 = /*#__PURE__*/ (0, ($parcel$inter
|
|
|
113
140
|
// Simple if not editing
|
|
114
141
|
if (!editing) return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("span", {
|
|
115
142
|
style: currentStyle,
|
|
116
|
-
id:
|
|
117
|
-
children: value
|
|
143
|
+
id: "".concat(id),
|
|
144
|
+
children: value ? value : /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactjsxruntime.Fragment), {
|
|
145
|
+
children: "\xa0"
|
|
146
|
+
})
|
|
118
147
|
});
|
|
119
148
|
return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", {
|
|
120
149
|
style: currentStyle,
|
|
@@ -127,6 +156,7 @@ var $176d21a51def1fce$export$14f190ac910bde69 = /*#__PURE__*/ (0, ($parcel$inter
|
|
|
127
156
|
}),
|
|
128
157
|
/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("input", {
|
|
129
158
|
autoFocus: true,
|
|
159
|
+
spellCheck: spellCheck,
|
|
130
160
|
id: String(id),
|
|
131
161
|
ref: ref,
|
|
132
162
|
type: "text",
|
|
@@ -147,7 +177,6 @@ var $176d21a51def1fce$export$14f190ac910bde69 = /*#__PURE__*/ (0, ($parcel$inter
|
|
|
147
177
|
]
|
|
148
178
|
});
|
|
149
179
|
});
|
|
150
|
-
$176d21a51def1fce$export$14f190ac910bde69.displayName = "WordEntry";
|
|
151
180
|
|
|
152
181
|
|
|
153
182
|
var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
|
|
@@ -171,9 +200,16 @@ var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
|
|
|
171
200
|
id,
|
|
172
201
|
treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList
|
|
173
202
|
]);
|
|
203
|
+
var _treeContext_nodeList;
|
|
204
|
+
var descendents = (0, $gTuX4$react.useMemo)(function() {
|
|
205
|
+
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
|
+
}, [
|
|
207
|
+
id,
|
|
208
|
+
treeContext
|
|
209
|
+
]);
|
|
174
210
|
// State
|
|
175
211
|
var _useState = (0, $gTuX4$swchelperscjs_sliced_to_arraycjs._)((0, $gTuX4$react.useState)(false), 2), error = _useState[0], setError = _useState[1];
|
|
176
|
-
var _useState1 = (0, $gTuX4$swchelperscjs_sliced_to_arraycjs._)((0, $gTuX4$react.useState)(
|
|
212
|
+
var _useState1 = (0, $gTuX4$swchelperscjs_sliced_to_arraycjs._)((0, $gTuX4$react.useState)(""), 2), errorText = _useState1[0], setErrotText = _useState1[1];
|
|
177
213
|
var expanded = (0, $gTuX4$react.useMemo)(function() {
|
|
178
214
|
var _treeContext_expandedNodes_findIndex;
|
|
179
215
|
return ((_treeContext_expandedNodes_findIndex = treeContext === null || treeContext === void 0 ? void 0 : treeContext.expandedNodes.findIndex(function(e) {
|
|
@@ -183,20 +219,42 @@ var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
|
|
|
183
219
|
id,
|
|
184
220
|
treeContext === null || treeContext === void 0 ? void 0 : treeContext.expandedNodes
|
|
185
221
|
]);
|
|
186
|
-
//
|
|
222
|
+
// Checkbox
|
|
223
|
+
var checkRef = (0, $gTuX4$react.useRef)(null);
|
|
224
|
+
(0, $gTuX4$react.useEffect)(function() {
|
|
225
|
+
if (checkRef.current) {
|
|
226
|
+
if (treeContext === null || treeContext === void 0 ? void 0 : treeContext.selected.includes(id)) {
|
|
227
|
+
checkRef.current.checked = true;
|
|
228
|
+
checkRef.current.indeterminate = false;
|
|
229
|
+
} else if (descendents.some(function(d) {
|
|
230
|
+
return treeContext === null || treeContext === void 0 ? void 0 : treeContext.selected.includes(d);
|
|
231
|
+
})) {
|
|
232
|
+
checkRef.current.checked = false;
|
|
233
|
+
checkRef.current.indeterminate = true;
|
|
234
|
+
} else {
|
|
235
|
+
checkRef.current.checked = false;
|
|
236
|
+
checkRef.current.indeterminate = false;
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
}, [
|
|
240
|
+
descendents,
|
|
241
|
+
id,
|
|
242
|
+
treeContext === null || treeContext === void 0 ? void 0 : treeContext.selected
|
|
243
|
+
]);
|
|
244
|
+
// Apply selected border
|
|
187
245
|
var currentBorder = (0, $gTuX4$react.useMemo)(function() {
|
|
188
|
-
return
|
|
246
|
+
return (treeContext === null || treeContext === void 0 ? void 0 : treeContext.selected.includes(id)) ? "1px solid black" : "";
|
|
189
247
|
}, [
|
|
190
248
|
id,
|
|
191
|
-
treeContext === null || treeContext === void 0 ? void 0 : treeContext.
|
|
249
|
+
treeContext === null || treeContext === void 0 ? void 0 : treeContext.selected
|
|
192
250
|
]);
|
|
193
251
|
var nodeColour = (0, $gTuX4$react.useMemo)(function() {
|
|
194
|
-
if (treeContext && treeContext.
|
|
195
|
-
var anc = (0, $580f9b3e262282c9$export$c6fd3ab3f44300d0)(treeContext.
|
|
252
|
+
if (treeContext && treeContext.selected) {
|
|
253
|
+
var anc = (0, $580f9b3e262282c9$export$c6fd3ab3f44300d0)(treeContext.selected, [], treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList).map(function(n) {
|
|
196
254
|
return n.id;
|
|
197
255
|
});
|
|
198
256
|
if ((0, $gTuX4$swchelperscjs_to_consumable_arraycjs._)(anc).concat([
|
|
199
|
-
treeContext.
|
|
257
|
+
treeContext.selected
|
|
200
258
|
]).includes(id)) return treeContext.nodeHighlight;
|
|
201
259
|
}
|
|
202
260
|
return;
|
|
@@ -220,7 +278,7 @@ var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
|
|
|
220
278
|
setErrotText((_ret_ErrorText = ret.ErrorText) !== null && _ret_ErrorText !== void 0 ? _ret_ErrorText : "An unknown error has occured");
|
|
221
279
|
} else {
|
|
222
280
|
setError(false);
|
|
223
|
-
setErrotText(
|
|
281
|
+
setErrotText("");
|
|
224
282
|
}
|
|
225
283
|
}, []);
|
|
226
284
|
var confirmNewNode = (0, $gTuX4$react.useCallback)(function() {
|
|
@@ -384,31 +442,48 @@ var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
|
|
|
384
442
|
color: "var(--bs-danger)"
|
|
385
443
|
}),
|
|
386
444
|
" ",
|
|
387
|
-
errorText
|
|
445
|
+
errorText
|
|
388
446
|
]
|
|
389
|
-
}) : /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("
|
|
447
|
+
}) : /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", {
|
|
448
|
+
className: "ton-node",
|
|
390
449
|
children: [
|
|
450
|
+
treeContext.showCheckBox && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("input", {
|
|
451
|
+
ref: checkRef,
|
|
452
|
+
type: "checkbox",
|
|
453
|
+
role: "checkbox",
|
|
454
|
+
className: "ton-checkbox",
|
|
455
|
+
id: "".concat(treeContext.id, "-treenode-checkbox-").concat(id),
|
|
456
|
+
onClick: function() {
|
|
457
|
+
treeContext.handleSelect(descendents);
|
|
458
|
+
}
|
|
459
|
+
}),
|
|
391
460
|
childNodes !== undefined && childNodes.length > 0 ? !expanded ? /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactbootstrapicons.CaretRightFill), {
|
|
392
461
|
id: "".concat(treeContext.id, "-treenode-caret-").concat(id),
|
|
462
|
+
className: "ton-expander",
|
|
393
463
|
role: "button",
|
|
394
464
|
color: nodeColour,
|
|
395
465
|
"aria-expanded": false,
|
|
466
|
+
"aria-label": "Expander",
|
|
396
467
|
onClick: function() {
|
|
397
468
|
return treeContext.handleExpandClick(id);
|
|
398
469
|
}
|
|
399
470
|
}) : /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactbootstrapicons.CaretDownFill), {
|
|
400
471
|
id: "".concat(treeContext.id, "-treenode-caret-").concat(id),
|
|
472
|
+
className: "ton-expander",
|
|
401
473
|
role: "button",
|
|
402
474
|
"aria-expanded": true,
|
|
475
|
+
"aria-label": "Expander",
|
|
403
476
|
color: nodeColour,
|
|
404
477
|
onClick: function() {
|
|
405
478
|
treeContext.handleExpandClick(id);
|
|
406
479
|
}
|
|
407
480
|
}) : /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactbootstrapicons.CaretRight), {
|
|
408
481
|
id: "".concat(treeContext.id, "-treenode-caret-").concat(id),
|
|
482
|
+
className: "ton-expander",
|
|
409
483
|
role: "button",
|
|
410
484
|
color: nodeColour,
|
|
411
485
|
"aria-expanded": false,
|
|
486
|
+
"aria-label": "Disabled expander",
|
|
412
487
|
"aria-disabled": true
|
|
413
488
|
}),
|
|
414
489
|
thisNode && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
@@ -440,33 +515,31 @@ var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
|
|
|
440
515
|
border: currentBorder,
|
|
441
516
|
margin: currentBorder === "" ? "1px" : "",
|
|
442
517
|
backgroundColor: currentBorder === "" ? "" : treeContext.textHighlight
|
|
443
|
-
}
|
|
518
|
+
},
|
|
519
|
+
spellCheck: treeContext.spellCheck
|
|
444
520
|
})
|
|
445
521
|
})
|
|
446
522
|
]
|
|
447
523
|
}),
|
|
448
|
-
childNodes !== undefined &&
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
canAddChildren: canAddChildren,
|
|
466
|
-
canRemoveChildren: canRemoveChildren,
|
|
467
|
-
canRenameChildren: canRenameChildren
|
|
524
|
+
childNodes !== undefined && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
525
|
+
className: "ton-collapsible-wrapper ".concat(expanded ? "" : "collapsed"),
|
|
526
|
+
children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
527
|
+
className: "ton-collapsible",
|
|
528
|
+
children: childNodes.map(function(h) {
|
|
529
|
+
return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("span", {
|
|
530
|
+
id: "".concat(treeContext.id, "-treenode-child-").concat(h.id),
|
|
531
|
+
className: "ton-child",
|
|
532
|
+
children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)($a56aac35d4408806$export$2eba8ec3a333fdbb, {
|
|
533
|
+
id: h.id,
|
|
534
|
+
canRemove: canRemoveChildren,
|
|
535
|
+
canRename: canRenameChildren,
|
|
536
|
+
canAddChildren: canAddChildren,
|
|
537
|
+
canRemoveChildren: canRemoveChildren,
|
|
538
|
+
canRenameChildren: canRenameChildren
|
|
539
|
+
})
|
|
540
|
+
}, h.id);
|
|
468
541
|
})
|
|
469
|
-
}
|
|
542
|
+
})
|
|
470
543
|
}),
|
|
471
544
|
showNewNode && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
472
545
|
children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $176d21a51def1fce$export$14f190ac910bde69), {
|
|
@@ -482,7 +555,8 @@ var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
|
|
|
482
555
|
saving: savingNewNode,
|
|
483
556
|
sendEscape: function() {
|
|
484
557
|
setShowNewNode(false);
|
|
485
|
-
}
|
|
558
|
+
},
|
|
559
|
+
spellCheck: treeContext.spellCheck
|
|
486
560
|
})
|
|
487
561
|
})
|
|
488
562
|
]
|
|
@@ -498,8 +572,8 @@ $a56aac35d4408806$export$2eba8ec3a333fdbb.displayName = "TreeNode";
|
|
|
498
572
|
|
|
499
573
|
|
|
500
574
|
|
|
501
|
-
var $f31429c9cc6d3bce$export$40c47a7ac5f85aba = function(nodeList,
|
|
502
|
-
return (0, $gTuX4$swchelperscjs_to_consumable_arraycjs._)(expandedNodes).concat((0, $gTuX4$swchelperscjs_to_consumable_arraycjs._)((0, $580f9b3e262282c9$export$c6fd3ab3f44300d0)(
|
|
575
|
+
var $f31429c9cc6d3bce$export$40c47a7ac5f85aba = function(nodeList, selected, expandedNodes) {
|
|
576
|
+
return (0, $gTuX4$swchelperscjs_to_consumable_arraycjs._)(expandedNodes).concat((0, $gTuX4$swchelperscjs_to_consumable_arraycjs._)((0, $580f9b3e262282c9$export$c6fd3ab3f44300d0)(selected, [], nodeList).map(function(n) {
|
|
503
577
|
return n.id;
|
|
504
578
|
}).filter(function(k) {
|
|
505
579
|
return !expandedNodes.includes(k);
|
|
@@ -512,15 +586,21 @@ var $f31429c9cc6d3bce$export$40c47a7ac5f85aba = function(nodeList, selectedId, e
|
|
|
512
586
|
|
|
513
587
|
|
|
514
588
|
var $9becaaec3a803ae7$export$5580fff3e08a8be5 = function(param) {
|
|
515
|
-
var id = param.id, nodeList = param.nodeList, roots = param.roots,
|
|
516
|
-
canRemoveRoot, canRemoveRoot = _param_canRemoveRoot === void 0 ? false : _param_canRemoveRoot, _param_canRenameRoot = param.canRenameRoot, canRenameRoot = _param_canRenameRoot === void 0 ? false : _param_canRenameRoot, _param_canAddChildren = param.canAddChildren, canAddChildren = _param_canAddChildren === void 0 ? false : _param_canAddChildren, _param_canRemoveChildren = param.canRemoveChildren, canRemoveChildren = _param_canRemoveChildren === void 0 ? false : _param_canRemoveChildren, _param_canRenameChildren = param.canRenameChildren, canRenameChildren = _param_canRenameChildren === void 0 ? false : _param_canRenameChildren, selectedId = param.selectedId, _param_handleSelect = param.handleSelect, handleSelect = _param_handleSelect === void 0 ? function() {
|
|
589
|
+
var id = param.id, nodeList = param.nodeList, roots = param.roots, _param_selected = param.selected, selected = _param_selected === void 0 ? [] : _param_selected, _param_showCheckBox = param.showCheckBox, showCheckBox = _param_showCheckBox === void 0 ? false : _param_showCheckBox, _param_handleSelect = param.handleSelect, handleSelect = _param_handleSelect === void 0 ? function() {
|
|
517
590
|
return;
|
|
518
|
-
} : _param_handleSelect, onAdd = param.onAdd, onRename = param.onRename, onRemove = param.onRemove, _param_nodeHighlight = param.nodeHighlight, nodeHighlight = _param_nodeHighlight === void 0 ? "red" : _param_nodeHighlight, _param_textHighlight = param.textHighlight, textHighlight = _param_textHighlight === void 0 ? "rgba(255, 0, 0, 0.2)" : _param_textHighlight;
|
|
591
|
+
} : _param_handleSelect, onAdd = param.onAdd, onRename = param.onRename, onRemove = param.onRemove, _param_canRemoveRoot = param.canRemoveRoot, canRemoveRoot = _param_canRemoveRoot === void 0 ? false : _param_canRemoveRoot, _param_canRenameRoot = param.canRenameRoot, canRenameRoot = _param_canRenameRoot === void 0 ? false : _param_canRenameRoot, _param_canAddChildren = param.canAddChildren, canAddChildren = _param_canAddChildren === void 0 ? false : _param_canAddChildren, _param_canRemoveChildren = param.canRemoveChildren, canRemoveChildren = _param_canRemoveChildren === void 0 ? false : _param_canRemoveChildren, _param_canRenameChildren = param.canRenameChildren, canRenameChildren = _param_canRenameChildren === void 0 ? false : _param_canRenameChildren, _param_nodeHighlight = param.nodeHighlight, nodeHighlight = _param_nodeHighlight === void 0 ? "red" : _param_nodeHighlight, _param_textHighlight = param.textHighlight, textHighlight = _param_textHighlight === void 0 ? "rgba(255, 0, 0, 0.2)" : _param_textHighlight, _param_spellCheck = param.spellCheck, spellCheck = _param_spellCheck === void 0 ? "true" : _param_spellCheck;
|
|
519
592
|
var _useState = (0, $gTuX4$swchelperscjs_sliced_to_arraycjs._)((0, $gTuX4$react.useState)([]), 2), expandedNodes = _useState[0], setExpandedNodes = _useState[1];
|
|
593
|
+
var selectedArray = (0, $gTuX4$react.useMemo)(function() {
|
|
594
|
+
return Array.isArray(selected) ? selected : [
|
|
595
|
+
selected
|
|
596
|
+
];
|
|
597
|
+
}, [
|
|
598
|
+
selected
|
|
599
|
+
]);
|
|
520
600
|
(0, $gTuX4$react.useEffect)(function() {
|
|
521
|
-
if (
|
|
601
|
+
if (selectedArray.length > 0) {
|
|
522
602
|
// Check all nodes are showing that should be
|
|
523
|
-
var shouldExpand = (0, $f31429c9cc6d3bce$export$40c47a7ac5f85aba)(nodeList,
|
|
603
|
+
var shouldExpand = (0, $f31429c9cc6d3bce$export$40c47a7ac5f85aba)(nodeList, selectedArray, expandedNodes);
|
|
524
604
|
shouldExpand.filter(function(n) {
|
|
525
605
|
return !expandedNodes.includes(n);
|
|
526
606
|
}).length > 0 && setExpandedNodes(shouldExpand);
|
|
@@ -528,7 +608,7 @@ var $9becaaec3a803ae7$export$5580fff3e08a8be5 = function(param) {
|
|
|
528
608
|
}, [
|
|
529
609
|
expandedNodes,
|
|
530
610
|
nodeList,
|
|
531
|
-
|
|
611
|
+
selectedArray
|
|
532
612
|
]);
|
|
533
613
|
// Change expansion and update contexts
|
|
534
614
|
var changeExpand = (0, $gTuX4$react.useCallback)(function(eKey, force) {
|
|
@@ -546,7 +626,8 @@ var $9becaaec3a803ae7$export$5580fff3e08a8be5 = function(param) {
|
|
|
546
626
|
value: {
|
|
547
627
|
id: id,
|
|
548
628
|
nodeList: nodeList,
|
|
549
|
-
|
|
629
|
+
selected: selectedArray,
|
|
630
|
+
showCheckBox: showCheckBox,
|
|
550
631
|
handleSelect: handleSelect,
|
|
551
632
|
expandedNodes: expandedNodes,
|
|
552
633
|
handleExpandClick: function(r, f) {
|
|
@@ -556,7 +637,8 @@ var $9becaaec3a803ae7$export$5580fff3e08a8be5 = function(param) {
|
|
|
556
637
|
onRename: onRename,
|
|
557
638
|
onRemove: onRemove,
|
|
558
639
|
nodeHighlight: nodeHighlight,
|
|
559
|
-
textHighlight: textHighlight
|
|
640
|
+
textHighlight: textHighlight,
|
|
641
|
+
spellCheck: spellCheck
|
|
560
642
|
},
|
|
561
643
|
children: roots.map(function(r) {
|
|
562
644
|
return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $a56aac35d4408806$export$2eba8ec3a333fdbb), {
|