Programmatically expand/collapse TreeView nodes (#850)

* feat(tree-view): add accessors to programmatically expand/collapse nodes

* feat(tree-view): update docs/types

* test(tree-view): test updated TreeView accessors

* docs(tree-view): document TreeView accessors
This commit is contained in:
Eric Liu 2021-10-13 08:54:37 -07:00 committed by GitHub
commit c4413636a4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 447 additions and 11 deletions

View file

@ -44,6 +44,44 @@
/** Set to `true` to visually hide the label text */
export let hideLabel = false;
/**
* Programmatically expand all nodes
* @type {() => void}
*/
export function expandAll() {
expandedIds = [...nodeIds];
}
/**
* Programmatically collapse all nodes
* @type {() => void}
*/
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 +143,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);