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

feat: add toHierarchy utility for TreeView, RecursiveList (#2072)

Browse source 
Co-authored-by: Bram <bramhavers@gmail.com>
This commit is contained in:
Eric Liu 2024-12-09 12:22:36 -08:00 • committed by GitHub
commit 48afd18e5e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
19 changed files with 413 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

61
tests/TreeView/TreeView.hierarchy.test.svelte Normal file
View file

@ -0,0 +1,61 @@
<script lang="ts">
import { Button, TreeView } from "carbon-components-svelte";
import { toHierarchy } from "../../src/utils/toHierarchy";
import type { TreeNodeId } from "carbon-components-svelte/TreeView/TreeView.svelte";
import Analytics from "carbon-icons-svelte/lib/Analytics.svelte";
let treeview: TreeView;
let activeId: TreeNodeId = "";
let selectedIds: TreeNodeId[] = [];
let expandedIds: TreeNodeId[] = [];
let nodes = toHierarchy(
[
{ id: 0, text: "AI / Machine learning", icon: Analytics },
{ id: 1, text: "Analytics" },
{ id: 2, text: "IBM Analytics Engine", pid: 1 },
{ id: 3, text: "Apache Spark", pid: 2 },
{ id: 4, text: "Hadoop", pid: 2 },
{ id: 5, text: "IBM Cloud SQL Query", pid: 1 },
{ id: 6, text: "IBM Db2 Warehouse on Cloud", pid: 1 },
{ id: 7, text: "Blockchain" },
{ id: 8, text: "IBM Blockchain Platform", pid: 7 },
{ id: 9, text: "Databases" },
{ id: 10, text: "IBM Cloud Databases for Elasticsearch", pid: 9 },
{ id: 11, text: "IBM Cloud Databases for Enterprise DB", pid: 9 },
{ id: 12, text: "IBM Cloud Databases for MongoDB", pid: 9 },
{ id: 13, text: "IBM Cloud Databases for PostgreSQL", pid: 9 },
{ id: 14, text: "Integration", disabled: true },
{ id: 15, text: "IBM API Connect", disabled: true, pid: 14 },
],
(node) => node.pid,
);
$: console.log("selectedIds", selectedIds);
</script>
<TreeView
bind:this={treeview}
size="compact"
labelText="Cloud Products"
{nodes}
bind:activeId
bind:selectedIds
bind:expandedIds
on:select={({ detail }) => console.log("select", detail)}
on:toggle={({ detail }) => console.log("toggle", detail)}
on:focus={({ detail }) => console.log("focus", detail)}
let:node
>
{node.text}
</TreeView>
<Button on:click={treeview.expandAll}>Expand all</Button>
<Button
on:click={() => {
treeview.expandNodes((node) => {
return /^IBM/.test(node.text);
});
}}
>
Expand some nodes
</Button>