fix(tree-view): do not flatten original nodes (#2056)

`$: nodes = traverse(nodes);` is unexpectedly mutating the original `nodes` reference used to render `TreeView`.

As a result, a tail leaf node is appended to the top-level list.

Flattening is necessary to obtain a reference to all node IDs (to programmatically show/hide nodes). This fix creates a new reference `flattenedNodes` instead of overriding the original `nodes`.
This commit is contained in:
Eric Liu 2024-11-22 13:24:43 -08:00 committed by GitHub
commit e488c88371
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -95,7 +95,7 @@
* @type {(filterId?: (node: TreeNode) => boolean) => void}
*/
export function expandNodes(filterNode = (node) => false) {
expandedIds = nodes
expandedIds = flattenedNodes
.filter(
(node) =>
filterNode(node) ||
@ -110,7 +110,7 @@
* @type {(filterId?: (node: TreeNode) => boolean) => void}
*/
export function collapseNodes(filterNode = (node) => true) {
expandedIds = nodes
expandedIds = flattenedNodes
.filter((node) => expandedIds.includes(node.id) && !filterNode(node))
.map((node) => node.id);
}
@ -207,24 +207,22 @@
});
/**
* Recursively flattens a tree of nodes into a single array
* @param {Array<TreeNode & { nodes?: TreeNode[] }>} nodes
* @returns {Array<TreeNode>}
*/
function traverse(nodes) {
let _nodes = [];
nodes.forEach((node) => {
_nodes.push(node);
if (Array.isArray(node.nodes)) {
_nodes = [...nodes, ...traverse(node.nodes)];
return nodes.reduce((acc, node) => {
acc.push(node);
if (Array.isArray(node.nodes) && node.nodes.length > 0) {
acc.push(...traverse(node.nodes));
}
});
return _nodes;
return acc;
}, []);
}
$: nodes = traverse(nodes);
$: nodeIds = nodes.map((node) => node.id);
$: flattenedNodes = traverse(nodes);
$: nodeIds = flattenedNodes.map((node) => node.id);
$: activeNodeId.set(activeId);
$: selectedNodeIds.set(selectedIds);
$: expandedNodeIds.set(expandedIds);