mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(tree-view): add expandedIds #750 (#751)

Browse source
This commit is contained in:
Eric Liu 2021-07-15 07:49:25 -07:00 • committed by GitHub
commit d01995e11e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 46 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/TreeView/TreeView.svelte
View file

@ -26,6 +26,12 @@
*/
export let selectedIds = [];
/**
* Set the node ids to be expanded
* @type {TreeNodeId[]}
*/
export let expandedIds = [];
/**
* Specify the TreeView size
* @type {"default" | "compact"}
@ -46,6 +52,7 @@
const labelId = `label-${Math.random().toString(36)}`;
const activeNodeId = writable(activeId);
const selectedNodeIds = writable(selectedIds);
const expandedNodeIds = writable(expandedIds);
let ref = null;
let treeWalker = null;
@ -53,6 +60,7 @@
setContext("TreeView", {
activeNodeId,
selectedNodeIds,
expandedNodeIds,
clickNode: (node) => {
activeId = node.id;
selectedIds = [node.id];
@ -61,6 +69,13 @@
selectNode: (node) => {
selectedIds = [node.id];
},
expandNode: (node, expanded) => {
if (expanded) {
expandedIds = [...expandedIds, node.id];
} else {
expandedIds = expandedIds.filter((_id) => _id !== node.id);
}
},
focusNode: (node) => dispatch("focus", node),
toggleNode: (node) => dispatch("toggle", node),
});
@ -92,6 +107,7 @@
$: activeNodeId.set(activeId);
$: selectedNodeIds.set(selectedIds);
$: expandedNodeIds.set(expandedIds);
$: if (ref) {
treeWalker = document.createTreeWalker(ref, NodeFilter.SHOW_ELEMENT, {
acceptNode: (node) => {