mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 11:36:36 +00:00
feat(tree-view): add accessors to programmatically expand/collapse nodes
This commit is contained in:
parent
e0d5e6133e
commit
e1fbddd8e8
1 changed files with 55 additions and 0 deletions
|
@ -44,6 +44,42 @@
|
|||
/** Set to `true` to visually hide the label text */
|
||||
export let hideLabel = false;
|
||||
|
||||
/**
|
||||
* Programmatically expand all nodes
|
||||
*/
|
||||
export function expandAll() {
|
||||
expandedIds = [...nodeIds];
|
||||
}
|
||||
|
||||
/**
|
||||
* Programmatically collapse all nodes
|
||||
*/
|
||||
export function collapseAll() {
|
||||
expandedIds = [];
|
||||
}
|
||||
|
||||
/**
|
||||
* Programmatically expand a subset of nodes.
|
||||
* Expands all nodes if no argument is provided
|
||||
* @type {(filterId?: (node: TreeNode) => boolean) => void}
|
||||
*/
|
||||
export function expandNodes(filterNode = (node) => false) {
|
||||
expandedIds = nodes
|
||||
.filter((node) => !filterNode(node))
|
||||
.map((node) => node.id);
|
||||
}
|
||||
|
||||
/**
|
||||
* Programmatically collapse a subset of nodes.
|
||||
* Collapses all nodes if no argument is provided
|
||||
* @type {(filterId?: (node: TreeNode) => boolean) => void}
|
||||
*/
|
||||
export function collapseNodes(filterNode = (node) => true) {
|
||||
expandedIds = nodes
|
||||
.filter((node) => !filterNode(node))
|
||||
.map((node) => node.id);
|
||||
}
|
||||
|
||||
import { createEventDispatcher, setContext, onMount } from "svelte";
|
||||
import { writable } from "svelte/store";
|
||||
import TreeViewNodeList from "./TreeViewNodeList.svelte";
|
||||
|
@ -105,6 +141,25 @@
|
|||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* @param {Array<TreeNode & { children?: TreeNode[] }>} children
|
||||
*/
|
||||
function traverse(children) {
|
||||
let nodes = [];
|
||||
|
||||
children.forEach((node) => {
|
||||
nodes.push(node);
|
||||
|
||||
if (Array.isArray(node.children)) {
|
||||
nodes = [...nodes, ...traverse(node.children)];
|
||||
}
|
||||
});
|
||||
|
||||
return nodes;
|
||||
}
|
||||
|
||||
$: nodes = traverse(children);
|
||||
$: nodeIds = nodes.map((node) => node.id);
|
||||
$: activeNodeId.set(activeId);
|
||||
$: selectedNodeIds.set(selectedIds);
|
||||
$: expandedNodeIds.set(expandedIds);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue