mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 18:31:06 +00:00
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:
parent
07d226cd87
commit
e488c88371
1 changed files with 12 additions and 14 deletions
|
@ -95,7 +95,7 @@
|
||||||
* @type {(filterId?: (node: TreeNode) => boolean) => void}
|
* @type {(filterId?: (node: TreeNode) => boolean) => void}
|
||||||
*/
|
*/
|
||||||
export function expandNodes(filterNode = (node) => false) {
|
export function expandNodes(filterNode = (node) => false) {
|
||||||
expandedIds = nodes
|
expandedIds = flattenedNodes
|
||||||
.filter(
|
.filter(
|
||||||
(node) =>
|
(node) =>
|
||||||
filterNode(node) ||
|
filterNode(node) ||
|
||||||
|
@ -110,7 +110,7 @@
|
||||||
* @type {(filterId?: (node: TreeNode) => boolean) => void}
|
* @type {(filterId?: (node: TreeNode) => boolean) => void}
|
||||||
*/
|
*/
|
||||||
export function collapseNodes(filterNode = (node) => true) {
|
export function collapseNodes(filterNode = (node) => true) {
|
||||||
expandedIds = nodes
|
expandedIds = flattenedNodes
|
||||||
.filter((node) => expandedIds.includes(node.id) && !filterNode(node))
|
.filter((node) => expandedIds.includes(node.id) && !filterNode(node))
|
||||||
.map((node) => node.id);
|
.map((node) => node.id);
|
||||||
}
|
}
|
||||||
|
@ -207,24 +207,22 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
* Recursively flattens a tree of nodes into a single array
|
||||||
* @param {Array<TreeNode & { nodes?: TreeNode[] }>} nodes
|
* @param {Array<TreeNode & { nodes?: TreeNode[] }>} nodes
|
||||||
|
* @returns {Array<TreeNode>}
|
||||||
*/
|
*/
|
||||||
function traverse(nodes) {
|
function traverse(nodes) {
|
||||||
let _nodes = [];
|
return nodes.reduce((acc, node) => {
|
||||||
|
acc.push(node);
|
||||||
nodes.forEach((node) => {
|
if (Array.isArray(node.nodes) && node.nodes.length > 0) {
|
||||||
_nodes.push(node);
|
acc.push(...traverse(node.nodes));
|
||||||
|
|
||||||
if (Array.isArray(node.nodes)) {
|
|
||||||
_nodes = [...nodes, ...traverse(node.nodes)];
|
|
||||||
}
|
}
|
||||||
});
|
return acc;
|
||||||
|
}, []);
|
||||||
return _nodes;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
$: nodes = traverse(nodes);
|
$: flattenedNodes = traverse(nodes);
|
||||||
$: nodeIds = nodes.map((node) => node.id);
|
$: nodeIds = flattenedNodes.map((node) => node.id);
|
||||||
$: activeNodeId.set(activeId);
|
$: activeNodeId.set(activeId);
|
||||||
$: selectedNodeIds.set(selectedIds);
|
$: selectedNodeIds.set(selectedIds);
|
||||||
$: expandedNodeIds.set(expandedIds);
|
$: expandedNodeIds.set(expandedIds);
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue