From e1fbddd8e885e5bd05f22b8706eb461d2a0e6816 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Tue, 12 Oct 2021 21:18:30 -0700 Subject: [PATCH] feat(tree-view): add accessors to programmatically expand/collapse nodes --- src/TreeView/TreeView.svelte | 55 ++++++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) diff --git a/src/TreeView/TreeView.svelte b/src/TreeView/TreeView.svelte index 699a4898..f0a19ccd 100644 --- a/src/TreeView/TreeView.svelte +++ b/src/TreeView/TreeView.svelte @@ -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} 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);