@neovici/cosmoz-treenode-navigator 8.4.1 → 8.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +31 -0
- package/dist/cosmoz-treenode-button-view.js +8 -6
- package/dist/cosmoz-treenode-button-view.js.map +1 -1
- package/dist/cosmoz-treenode-navigator.js +41 -30
- package/dist/cosmoz-treenode-navigator.js.map +1 -1
- package/dist/cosmoz-treenode-navigator.styles.d.ts.map +1 -1
- package/dist/cosmoz-treenode-navigator.styles.js +6 -0
- package/dist/cosmoz-treenode-navigator.styles.js.map +1 -1
- package/dist/hooks/useNodes.d.ts +15 -0
- package/dist/hooks/useNodes.d.ts.map +1 -0
- package/dist/hooks/useNodes.js +36 -0
- package/dist/hooks/useNodes.js.map +1 -0
- package/dist/util/source.d.ts +34 -0
- package/dist/util/source.d.ts.map +1 -0
- package/dist/util/source.js +16 -0
- package/dist/util/source.js.map +1 -0
- package/package.json +5 -1
package/README.md
CHANGED
|
@@ -86,6 +86,37 @@ The data is a nested object keyed by node IDs:
|
|
|
86
86
|
|
|
87
87
|
The property names `name` and `children` are configurable via `DefaultTree` options (`searchProperty`, `childProperty`). The `pathLocatorSeparator` defaults to `"."`.
|
|
88
88
|
|
|
89
|
+
## Loading nodes on demand
|
|
90
|
+
|
|
91
|
+
A `Tree` holds the whole hierarchy in memory, which stops being an option once it is a few hundred thousand nodes. Pass a `source` instead and the components ask for one level at a time. Every method may answer synchronously or with a promise.
|
|
92
|
+
|
|
93
|
+
```ts
|
|
94
|
+
import type { NodeSource } from '@neovici/cosmoz-treenode-navigator/source';
|
|
95
|
+
|
|
96
|
+
const source: NodeSource = {
|
|
97
|
+
getLevel: (pathLocator) => fetchChildren(pathLocator), // roots when empty
|
|
98
|
+
getPath: (pathLocator) => fetchAncestors(pathLocator), // outermost first
|
|
99
|
+
search: (query, scope) => fetchMatches(query),
|
|
100
|
+
hasChildren: () => undefined, // undefined renders the arrow anyway
|
|
101
|
+
label: (node) => node.name,
|
|
102
|
+
pathLabel: () => undefined, // heading above a group of search results
|
|
103
|
+
parentOf: (node) =>
|
|
104
|
+
node.pathLocator.slice(0, node.pathLocator.lastIndexOf('.')),
|
|
105
|
+
scopedSearch: false, // true if `search` honours `scope`
|
|
106
|
+
};
|
|
107
|
+
|
|
108
|
+
html`<cosmoz-treenode-button-view
|
|
109
|
+
.source=${source}
|
|
110
|
+
></cosmoz-treenode-button-view>`;
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
Two things are worth getting right:
|
|
114
|
+
|
|
115
|
+
- `search` results are rendered in the order they arrive. A server that ranks its matches has already decided which one the user meant, and re-sorting throws that away.
|
|
116
|
+
- `scopedSearch: false` hides the "search again but globally" button, which has nothing to offer when the search was global to begin with.
|
|
117
|
+
|
|
118
|
+
`tree` keeps working on its own — it is served through the built-in `treeSource` adapter, which is also exported if you want to wrap one yourself.
|
|
119
|
+
|
|
89
120
|
## Components
|
|
90
121
|
|
|
91
122
|
### `<cosmoz-treenode-button-view>`
|
|
@@ -10,7 +10,8 @@ import { ifDefined } from 'lit-html/directives/if-defined.js';
|
|
|
10
10
|
import { when } from 'lit-html/directives/when.js';
|
|
11
11
|
import './cosmoz-treenode-navigator';
|
|
12
12
|
import { useKeyDown } from './hooks/useKeyDown';
|
|
13
|
-
import {
|
|
13
|
+
import { useNodes } from './hooks/useNodes';
|
|
14
|
+
import { treeSource } from './util/source';
|
|
14
15
|
const defaultIcon = html `<svg
|
|
15
16
|
class="default-icon"
|
|
16
17
|
width="20"
|
|
@@ -27,7 +28,7 @@ const defaultIcon = html `<svg
|
|
|
27
28
|
<circle cx="17" cy="17" r="2" />
|
|
28
29
|
<path d="M7 9v3c0 1.66 1.34 3 3 3h7" />
|
|
29
30
|
</svg>`;
|
|
30
|
-
const CosmozNodeButtonView = ({ tree, showReset = false, searchMinLength = 3, searchDebounceTimeout = 500, variant = 'secondary', size, }) => {
|
|
31
|
+
const CosmozNodeButtonView = ({ tree, source, showReset = false, searchMinLength = 3, searchDebounceTimeout = 500, variant = 'secondary', size, }) => {
|
|
31
32
|
const dialogRef = useRef(null);
|
|
32
33
|
const tooltipTimeoutRef = useRef();
|
|
33
34
|
// nodePath is the single source of truth - external two-way binding
|
|
@@ -39,8 +40,8 @@ const CosmozNodeButtonView = ({ tree, showReset = false, searchMinLength = 3, se
|
|
|
39
40
|
// Temporarily suppress tooltip after dialog close to prevent
|
|
40
41
|
// it from showing when focus returns to the button
|
|
41
42
|
const [tooltipDisabled, setTooltipDisabled] = useState(false);
|
|
42
|
-
|
|
43
|
-
const nodesOnNodePath =
|
|
43
|
+
const nodeSource = useMemo(() => source ?? treeSource(tree), [source, tree]);
|
|
44
|
+
const { nodes: nodesOnNodePath } = useNodes(() => (nodePath ? nodeSource.getPath(nodePath) : []), [nodeSource, nodePath]);
|
|
44
45
|
// buttonLabel derived from nodesOnNodePath
|
|
45
46
|
const buttonLabel = useMemo(() => {
|
|
46
47
|
if (!Array.isArray(nodesOnNodePath) || nodesOnNodePath.length === 0) {
|
|
@@ -48,9 +49,9 @@ const CosmozNodeButtonView = ({ tree, showReset = false, searchMinLength = 3, se
|
|
|
48
49
|
}
|
|
49
50
|
return nodesOnNodePath
|
|
50
51
|
.filter((n) => n)
|
|
51
|
-
.map((part) => part
|
|
52
|
+
.map((part) => nodeSource.label(part))
|
|
52
53
|
.join(' / ');
|
|
53
|
-
}, [nodesOnNodePath,
|
|
54
|
+
}, [nodesOnNodePath, nodeSource]);
|
|
54
55
|
// Sync dialog DOM state with opened property
|
|
55
56
|
useEffect(() => {
|
|
56
57
|
if (opened) {
|
|
@@ -169,6 +170,7 @@ const CosmozNodeButtonView = ({ tree, showReset = false, searchMinLength = 3, se
|
|
|
169
170
|
.searchMinLength=${searchMinLength}
|
|
170
171
|
.searchDebounceTimeout=${searchDebounceTimeout}
|
|
171
172
|
.tree=${tree}
|
|
173
|
+
.source=${nodeSource}
|
|
172
174
|
.opened=${opened}
|
|
173
175
|
>
|
|
174
176
|
<slot></slot>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cosmoz-treenode-button-view.js","sourceRoot":"","sources":["../src/cosmoz-treenode-button-view.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EACT,IAAI,EACJ,SAAS,EACT,OAAO,EACP,WAAW,EACX,MAAM,EACN,QAAQ,GACR,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,KAAK,MAAM,sCAAsC,CAAC;AAEzD,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,gCAAgC,CAAC;AACvD,OAAO,yBAAyB,CAAC;AAEjC,OAAO,EAAE,CAAC,EAAE,MAAM,SAAS,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AACnD,OAAO,6BAA6B,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"cosmoz-treenode-button-view.js","sourceRoot":"","sources":["../src/cosmoz-treenode-button-view.ts"],"names":[],"mappings":"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"}
|
|
@@ -11,13 +11,19 @@ import { t } from 'i18next';
|
|
|
11
11
|
import { useHost } from '@neovici/cosmoz-utils/hooks/use-host';
|
|
12
12
|
import { notifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
|
|
13
13
|
import style from './cosmoz-treenode-navigator.styles';
|
|
14
|
-
import {
|
|
14
|
+
import { useNodes } from './hooks/useNodes';
|
|
15
|
+
import { computeRowClass } from './util/helpers';
|
|
16
|
+
import { treeSource } from './util/source';
|
|
15
17
|
// eslint-disable-next-line max-statements
|
|
16
18
|
const NodeNavigator = ({
|
|
17
19
|
/**
|
|
18
|
-
* The main node structure
|
|
20
|
+
* The main node structure. Ignored when `source` is set.
|
|
19
21
|
*/
|
|
20
22
|
tree,
|
|
23
|
+
/**
|
|
24
|
+
* Where to get nodes from. Defaults to serving `tree` from memory.
|
|
25
|
+
*/
|
|
26
|
+
source,
|
|
21
27
|
/**
|
|
22
28
|
* Minimum length of searchValue to trigger a search
|
|
23
29
|
*/
|
|
@@ -31,8 +37,9 @@ searchMinLength = 3, opened, searchDebounceTimeout = 500, }) => {
|
|
|
31
37
|
const [search, setSearch] = useState('');
|
|
32
38
|
const [searchValue, setSearchValue] = useState('');
|
|
33
39
|
const [openNodePath, setOpenNodePath] = useState('');
|
|
34
|
-
|
|
35
|
-
const nodesOnNodePath =
|
|
40
|
+
const nodeSource = useMemo(() => source ?? treeSource(tree), [source, tree]);
|
|
41
|
+
const { nodes: nodesOnNodePath } = useNodes(() => (nodePath ? nodeSource.getPath(nodePath) : []), [nodeSource, nodePath]);
|
|
42
|
+
const { nodes: openNodes } = useNodes(() => (openNodePath ? nodeSource.getPath(openNodePath) : []), [nodeSource, openNodePath]);
|
|
36
43
|
useEffect(() => {
|
|
37
44
|
const timeoutId = setTimeout(() => {
|
|
38
45
|
const searchLength = searchValue.trim().length;
|
|
@@ -43,7 +50,9 @@ searchMinLength = 3, opened, searchDebounceTimeout = 500, }) => {
|
|
|
43
50
|
}, searchDebounceTimeout);
|
|
44
51
|
return () => clearTimeout(timeoutId);
|
|
45
52
|
}, [searchValue]);
|
|
46
|
-
const dataPlane =
|
|
53
|
+
const { nodes: dataPlane, loading, error, } = useNodes(() => search
|
|
54
|
+
? nodeSource.search(search, openNodePath)
|
|
55
|
+
: nodeSource.getLevel(openNodePath), [nodeSource, search, openNodePath]);
|
|
47
56
|
/**
|
|
48
57
|
* Opens a node (renderLevel) based on a given path
|
|
49
58
|
*
|
|
@@ -56,6 +65,7 @@ searchMinLength = 3, opened, searchDebounceTimeout = 500, }) => {
|
|
|
56
65
|
const onNodeClick = useCallback((clickedNode) => {
|
|
57
66
|
setOpenNodePath(clickedNode?.pathLocator || '');
|
|
58
67
|
setSearchValue('');
|
|
68
|
+
setSearch('');
|
|
59
69
|
setHighlightedNode(null);
|
|
60
70
|
}, []);
|
|
61
71
|
/**
|
|
@@ -76,22 +86,20 @@ searchMinLength = 3, opened, searchDebounceTimeout = 500, }) => {
|
|
|
76
86
|
}, [openNodePath]);
|
|
77
87
|
// When nodePath changes externally, sync the view
|
|
78
88
|
useEffect(() => {
|
|
79
|
-
if (!nodesOnNodePath?.length || !
|
|
89
|
+
if (!nodesOnNodePath?.length || !opened) {
|
|
80
90
|
return;
|
|
81
91
|
}
|
|
82
92
|
const lastNode = nodesOnNodePath[nodesOnNodePath.length - 1];
|
|
83
93
|
if (!lastNode?.pathLocator) {
|
|
84
94
|
return;
|
|
85
95
|
}
|
|
86
|
-
if (
|
|
96
|
+
if (nodeSource.hasChildren(lastNode) !== false) {
|
|
87
97
|
setOpenNodePath(lastNode.pathLocator);
|
|
88
98
|
return;
|
|
89
99
|
}
|
|
90
|
-
|
|
91
|
-
// Make sure the parent node exists, otherwise fall back to displaying the roots
|
|
92
|
-
setOpenNodePath(tree.getNodeByPathLocator(parentPath)?.pathLocator ?? '');
|
|
100
|
+
setOpenNodePath(nodesOnNodePath[nodesOnNodePath.length - 2]?.pathLocator ?? '');
|
|
93
101
|
setHighlightedNode(lastNode);
|
|
94
|
-
}, [nodesOnNodePath,
|
|
102
|
+
}, [nodesOnNodePath, nodeSource, opened]);
|
|
95
103
|
// Notify highlightedNodePath when highlightedNode changes
|
|
96
104
|
useEffect(() => {
|
|
97
105
|
notifyProperty(host, 'highlightedNodePath', highlightedNode?.pathLocator || '');
|
|
@@ -184,13 +192,12 @@ searchMinLength = 3, opened, searchDebounceTimeout = 500, }) => {
|
|
|
184
192
|
}
|
|
185
193
|
return html ` <div class="item">
|
|
186
194
|
${when(search, () => {
|
|
187
|
-
const parentPath =
|
|
188
|
-
|
|
189
|
-
parentPath !==
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
`);
|
|
195
|
+
const parentPath = nodeSource.parentOf(node);
|
|
196
|
+
const heading = index === 0 ||
|
|
197
|
+
parentPath !== nodeSource.parentOf(dataPlane[index - 1])
|
|
198
|
+
? nodeSource.pathLabel(parentPath)
|
|
199
|
+
: undefined;
|
|
200
|
+
return when(heading, () => html `<div class="section">${heading}</div>`);
|
|
194
201
|
})}
|
|
195
202
|
<div
|
|
196
203
|
class=${computeRowClass('node', node, highlightedNode)}
|
|
@@ -199,9 +206,9 @@ searchMinLength = 3, opened, searchDebounceTimeout = 500, }) => {
|
|
|
199
206
|
@dblclick=${handleNodeDblClick}
|
|
200
207
|
>
|
|
201
208
|
<div class="name" data-testid="node-name">
|
|
202
|
-
${node
|
|
209
|
+
${nodeSource.label(node)}
|
|
203
210
|
</div>
|
|
204
|
-
${when(
|
|
211
|
+
${when(nodeSource.hasChildren(node) !== false, () => html `
|
|
205
212
|
<span
|
|
206
213
|
class="icon"
|
|
207
214
|
data-testid="node-arrow"
|
|
@@ -241,7 +248,7 @@ searchMinLength = 3, opened, searchDebounceTimeout = 500, }) => {
|
|
|
241
248
|
<g><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path></g>
|
|
242
249
|
</svg>
|
|
243
250
|
</span>
|
|
244
|
-
${guard([
|
|
251
|
+
${guard([openNodes], () => openNodes
|
|
245
252
|
.filter((node) => node !== undefined)
|
|
246
253
|
.map((node) => html `
|
|
247
254
|
<span class="slash">/</span>
|
|
@@ -249,7 +256,7 @@ searchMinLength = 3, opened, searchDebounceTimeout = 500, }) => {
|
|
|
249
256
|
class="pointer"
|
|
250
257
|
tabindex="0"
|
|
251
258
|
@click=${() => onNodeClick(node)}
|
|
252
|
-
>${node
|
|
259
|
+
>${nodeSource.label(node)}</span
|
|
253
260
|
>
|
|
254
261
|
`))}
|
|
255
262
|
</h3>
|
|
@@ -262,18 +269,22 @@ searchMinLength = 3, opened, searchDebounceTimeout = 500, }) => {
|
|
|
262
269
|
@input=${(e) => setSearchValue(e.target.value)}
|
|
263
270
|
/>
|
|
264
271
|
</div>
|
|
265
|
-
${
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
>
|
|
269
|
-
<div virtualizer-sizer></div>
|
|
270
|
-
${virtualize({
|
|
272
|
+
<div class="items" ${ref((el) => (listRef.current = el))}>
|
|
273
|
+
<div virtualizer-sizer></div>
|
|
274
|
+
${virtualize({
|
|
271
275
|
items: dataPlane,
|
|
272
276
|
renderItem,
|
|
273
277
|
scroller: true,
|
|
274
278
|
})}
|
|
275
|
-
|
|
276
|
-
${when(
|
|
279
|
+
</div>
|
|
280
|
+
${when(error, () => html `<div class="status" data-testid="error">
|
|
281
|
+
${t('Could not load nodes.')}
|
|
282
|
+
</div>`, () => when(loading, () => html `<div class="status" data-testid="loading">
|
|
283
|
+
${t('Loading...')}
|
|
284
|
+
</div>`, () => when(!dataPlane.length, () => html `<div class="status" data-testid="empty">
|
|
285
|
+
${search ? t('No matches.') : t('Search to find a node.')}
|
|
286
|
+
</div>`)))}
|
|
287
|
+
${when(search && openNodePath && nodeSource.scopedSearch, () => html `
|
|
277
288
|
<cosmoz-button
|
|
278
289
|
class="global-search"
|
|
279
290
|
variant="link"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cosmoz-treenode-navigator.js","sourceRoot":"","sources":["../src/cosmoz-treenode-navigator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AACjE,OAAO,EACN,SAAS,EACT,WAAW,EACX,SAAS,EACT,OAAO,EACP,WAAW,EACX,MAAM,EACN,QAAQ,GACR,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,UAAU,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,GAAG,EAAE,MAAM,4BAA4B,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AAEnD,OAAO,sCAAsC,CAAC;AAC9C,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC;AAC/D,OAAO,EAAE,CAAC,EAAE,MAAM,SAAS,CAAC;AAG5B,OAAO,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,iDAAiD,CAAC;AACjF,OAAO,KAAK,MAAM,oCAAoC,CAAC;AACvD,OAAO,
|
|
1
|
+
{"version":3,"file":"cosmoz-treenode-navigator.js","sourceRoot":"","sources":["../src/cosmoz-treenode-navigator.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cosmoz-treenode-navigator.styles.d.ts","sourceRoot":"","sources":["../src/cosmoz-treenode-navigator.styles.ts"],"names":[],"mappings":";AAEA,
|
|
1
|
+
{"version":3,"file":"cosmoz-treenode-navigator.styles.d.ts","sourceRoot":"","sources":["../src/cosmoz-treenode-navigator.styles.ts"],"names":[],"mappings":";AAEA,wBA0GE"}
|
|
@@ -99,5 +99,11 @@ export default css `
|
|
|
99
99
|
.global-search {
|
|
100
100
|
margin-block: calc(var(--cz-spacing) * 4);
|
|
101
101
|
}
|
|
102
|
+
|
|
103
|
+
.status {
|
|
104
|
+
padding: 6px 16px;
|
|
105
|
+
color: var(--cosmoz-treenode-navigator-status-color, #757575);
|
|
106
|
+
font-size: 13px;
|
|
107
|
+
}
|
|
102
108
|
`;
|
|
103
109
|
//# sourceMappingURL=cosmoz-treenode-navigator.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cosmoz-treenode-navigator.styles.js","sourceRoot":"","sources":["../src/cosmoz-treenode-navigator.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAEnC,eAAe,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"cosmoz-treenode-navigator.styles.js","sourceRoot":"","sources":["../src/cosmoz-treenode-navigator.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAEnC,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0GjB,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { Node } from '@neovici/cosmoz-tree';
|
|
2
|
+
/**
|
|
3
|
+
* Loads a list of nodes, keeping the previous list on screen while the next one
|
|
4
|
+
* is on its way — a level that resolves instantly would otherwise blink through
|
|
5
|
+
* an empty state on every keystroke.
|
|
6
|
+
*
|
|
7
|
+
* Responses are matched against the request that is still current, so a slow
|
|
8
|
+
* level cannot overwrite a faster one the user asked for afterwards.
|
|
9
|
+
*/
|
|
10
|
+
export declare const useNodes: (load: () => Node[] | Promise<Node[]>, deps: unknown[]) => {
|
|
11
|
+
nodes: Node[];
|
|
12
|
+
loading: boolean;
|
|
13
|
+
error: unknown;
|
|
14
|
+
};
|
|
15
|
+
//# sourceMappingURL=useNodes.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useNodes.d.ts","sourceRoot":"","sources":["../../src/hooks/useNodes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAGjD;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,GACpB,MAAM,MAAM,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,EAAE,CAAC,EACpC,MAAM,OAAO,EAAE;;;;CA+Bf,CAAC"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { useEffect, useRef, useState } from '@pionjs/pion';
|
|
2
|
+
/**
|
|
3
|
+
* Loads a list of nodes, keeping the previous list on screen while the next one
|
|
4
|
+
* is on its way — a level that resolves instantly would otherwise blink through
|
|
5
|
+
* an empty state on every keystroke.
|
|
6
|
+
*
|
|
7
|
+
* Responses are matched against the request that is still current, so a slow
|
|
8
|
+
* level cannot overwrite a faster one the user asked for afterwards.
|
|
9
|
+
*/
|
|
10
|
+
export const useNodes = (load, deps) => {
|
|
11
|
+
const [nodes, setNodes] = useState([]);
|
|
12
|
+
const [loading, setLoading] = useState(true);
|
|
13
|
+
const [error, setError] = useState();
|
|
14
|
+
const request = useRef(0);
|
|
15
|
+
useEffect(() => {
|
|
16
|
+
const id = ++request.current;
|
|
17
|
+
setLoading(true);
|
|
18
|
+
setError(undefined);
|
|
19
|
+
Promise.resolve()
|
|
20
|
+
.then(load)
|
|
21
|
+
.then((result) => {
|
|
22
|
+
if (id !== request.current)
|
|
23
|
+
return;
|
|
24
|
+
setNodes(result ?? []);
|
|
25
|
+
setLoading(false);
|
|
26
|
+
}, (reason) => {
|
|
27
|
+
if (id !== request.current)
|
|
28
|
+
return;
|
|
29
|
+
setNodes([]);
|
|
30
|
+
setError(reason);
|
|
31
|
+
setLoading(false);
|
|
32
|
+
});
|
|
33
|
+
}, deps);
|
|
34
|
+
return { nodes, loading, error };
|
|
35
|
+
};
|
|
36
|
+
//# sourceMappingURL=useNodes.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useNodes.js","sourceRoot":"","sources":["../../src/hooks/useNodes.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE3D;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CACvB,IAAoC,EACpC,IAAe,EACd,EAAE;IACH,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IAC/C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAW,CAAC;IAC9C,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAE1B,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,EAAE,GAAG,EAAE,OAAO,CAAC,OAAO,CAAC;QAE7B,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,QAAQ,CAAC,SAAS,CAAC,CAAC;QAEpB,OAAO,CAAC,OAAO,EAAE;aACf,IAAI,CAAC,IAAI,CAAC;aACV,IAAI,CACJ,CAAC,MAAM,EAAE,EAAE;YACV,IAAI,EAAE,KAAK,OAAO,CAAC,OAAO;gBAAE,OAAO;YACnC,QAAQ,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC;YACvB,UAAU,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC,EACD,CAAC,MAAM,EAAE,EAAE;YACV,IAAI,EAAE,KAAK,OAAO,CAAC,OAAO;gBAAE,OAAO;YACnC,QAAQ,CAAC,EAAE,CAAC,CAAC;YACb,QAAQ,CAAC,MAAM,CAAC,CAAC;YACjB,UAAU,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC,CACD,CAAC;IACJ,CAAC,EAAE,IAAI,CAAC,CAAC;IAET,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;AAClC,CAAC,CAAC"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import type { Node, Tree } from '@neovici/cosmoz-tree';
|
|
2
|
+
/**
|
|
3
|
+
* Where the navigator gets its nodes.
|
|
4
|
+
*
|
|
5
|
+
* A `Tree` holds the whole hierarchy in memory, which stops being an option once
|
|
6
|
+
* it is an organization of a few hundred thousand nodes. Everything the
|
|
7
|
+
* navigator needs is behind this interface instead, so a caller can serve the
|
|
8
|
+
* levels from an API one at a time. Every method may answer synchronously.
|
|
9
|
+
*/
|
|
10
|
+
export interface NodeSource {
|
|
11
|
+
/** Children of a node; the roots when the path locator is empty. */
|
|
12
|
+
getLevel(pathLocator: string): Node[] | Promise<Node[]>;
|
|
13
|
+
/** The node and its ancestors, outermost first. */
|
|
14
|
+
getPath(pathLocator: string): Node[] | Promise<Node[]>;
|
|
15
|
+
/**
|
|
16
|
+
* Matches, in the order they are meant to be rendered — a server that ranks
|
|
17
|
+
* its results has already decided the order, and re-sorting throws that away.
|
|
18
|
+
*/
|
|
19
|
+
search(query: string, scope: string): Node[] | Promise<Node[]>;
|
|
20
|
+
/** `undefined` where the source cannot tell, which renders the arrow anyway. */
|
|
21
|
+
hasChildren(node: Node): boolean | undefined;
|
|
22
|
+
label(node: Node): string;
|
|
23
|
+
/** Label for a whole path, heading the search results grouped under it. */
|
|
24
|
+
pathLabel(pathLocator: string): string | undefined;
|
|
25
|
+
parentOf(node: Node): string;
|
|
26
|
+
/** Whether {@link search} honours its scope argument. */
|
|
27
|
+
scopedSearch: boolean;
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Serves an in-memory {@link Tree}, which is what the navigator did before it
|
|
31
|
+
* took a source at all.
|
|
32
|
+
*/
|
|
33
|
+
export declare const treeSource: (tree: Tree) => NodeSource;
|
|
34
|
+
//# sourceMappingURL=source.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"source.d.ts","sourceRoot":"","sources":["../../src/util/source.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAGvD;;;;;;;GAOG;AACH,MAAM,WAAW,UAAU;IAC1B,oEAAoE;IACpE,QAAQ,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC;IAExD,mDAAmD;IACnD,OAAO,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC;IAEvD;;;OAGG;IACH,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC;IAE/D,gFAAgF;IAChF,WAAW,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,GAAG,SAAS,CAAC;IAE7C,KAAK,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAAC;IAE1B,2EAA2E;IAC3E,SAAS,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAEnD,QAAQ,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAAC;IAE7B,yDAAyD;IACzD,YAAY,EAAE,OAAO,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,MAAM,IAAI,KAAG,UAiBtC,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { computeDataPlane, getParentPath, getTreePathParts } from './helpers';
|
|
2
|
+
/**
|
|
3
|
+
* Serves an in-memory {@link Tree}, which is what the navigator did before it
|
|
4
|
+
* took a source at all.
|
|
5
|
+
*/
|
|
6
|
+
export const treeSource = (tree) => ({
|
|
7
|
+
getLevel: (pathLocator) => computeDataPlane(tree, '', pathLocator),
|
|
8
|
+
getPath: (pathLocator) => getTreePathParts(pathLocator, tree),
|
|
9
|
+
search: (query, scope) => computeDataPlane(tree, query, scope),
|
|
10
|
+
hasChildren: (node) => tree?.hasChildren(node),
|
|
11
|
+
label: (node) => (tree ? node[tree.searchProperty] : '') ?? '',
|
|
12
|
+
pathLabel: (pathLocator) => tree?.getPathString(pathLocator, tree.searchProperty),
|
|
13
|
+
parentOf: (node) => (tree ? getParentPath(tree, node) : ''),
|
|
14
|
+
scopedSearch: true,
|
|
15
|
+
});
|
|
16
|
+
//# sourceMappingURL=source.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"source.js","sourceRoot":"","sources":["../../src/util/source.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAqC9E;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,IAAU,EAAc,EAAE,CAAC,CAAC;IACtD,QAAQ,EAAE,CAAC,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAAC,IAAI,EAAE,EAAE,EAAE,WAAW,CAAC;IAElE,OAAO,EAAE,CAAC,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC;IAE7D,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,gBAAgB,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC;IAE9D,WAAW,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC;IAE9C,KAAK,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAE,IAAI,CAAC,IAAI,CAAC,cAAc,CAAY,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,EAAE;IAE1E,SAAS,EAAE,CAAC,WAAW,EAAE,EAAE,CAC1B,IAAI,EAAE,aAAa,CAAC,WAAW,EAAE,IAAI,CAAC,cAAc,CAAC;IAEtD,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAE3D,YAAY,EAAE,IAAI;CAClB,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neovici/cosmoz-treenode-navigator",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.5.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A Pion component that lets you navigate and search through hierarchically structured data-nodes and select one of them.",
|
|
6
6
|
"keywords": [
|
|
@@ -60,6 +60,10 @@
|
|
|
60
60
|
"./cosmoz-treenode-button-view": {
|
|
61
61
|
"types": "./dist/cosmoz-treenode-button-view.d.ts",
|
|
62
62
|
"default": "./dist/cosmoz-treenode-button-view.js"
|
|
63
|
+
},
|
|
64
|
+
"./source": {
|
|
65
|
+
"types": "./dist/util/source.d.ts",
|
|
66
|
+
"default": "./dist/util/source.js"
|
|
63
67
|
}
|
|
64
68
|
},
|
|
65
69
|
"dependencies": {
|