mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
Added test for flat array input data
This commit is contained in:
parent
b9c1f11430
commit
affc0b4e81
2 changed files with 77 additions and 3 deletions
|
@ -44,7 +44,7 @@
|
|||
|
||||
/**
|
||||
* Provide a flat array of nodes to render
|
||||
* @type {Array<TreeNode>}
|
||||
* @type {Array<TreeNode & {pid?: any}>}
|
||||
*/
|
||||
export let nodesFlat = [];
|
||||
|
||||
|
@ -203,8 +203,7 @@
|
|||
|
||||
/**
|
||||
* Create a nested array from a flat array
|
||||
* TODO: accept a parent key
|
||||
* @type {(flatArray: TreeNode[] & { pid: any }[]) => TreeNode[]}
|
||||
* @type {(flatArray: TreeNode[] & { pid?: any }[]) => TreeNode[]}
|
||||
*/
|
||||
function createNestedArray(flatArray) {
|
||||
/** @type TreeNode[] */
|
||||
|
|
75
tests/TreeView/TreeViewFlatArray.test.svelte
Normal file
75
tests/TreeView/TreeViewFlatArray.test.svelte
Normal file
|
@ -0,0 +1,75 @@
|
|||
<script lang="ts">
|
||||
import type { ComponentProps } from "svelte";
|
||||
import { Button, TreeView } from "carbon-components-svelte";
|
||||
import type { TreeNodeId } from "carbon-components-svelte/TreeView/TreeView.svelte";
|
||||
import Analytics from "carbon-icons-svelte/lib/Analytics.svelte";
|
||||
import WatsonMachineLearning from "carbon-icons-svelte/lib/WatsonMachineLearning.svelte";
|
||||
import Blockchain from "carbon-icons-svelte/lib/Blockchain.svelte";
|
||||
import DataBase from "carbon-icons-svelte/lib/DataBase.svelte";
|
||||
import SignalStrength from "carbon-icons-svelte/lib/SignalStrength.svelte";
|
||||
|
||||
let treeview: TreeView;
|
||||
let activeId: TreeNodeId = "";
|
||||
let selectedIds: TreeNodeId[] = [];
|
||||
let expandedIds: TreeNodeId[] = [1];
|
||||
|
||||
let nodesFlat: ComponentProps<TreeView>["nodesFlat"] = [
|
||||
{ id: 0, text: "AI / Machine learning", icon: WatsonMachineLearning },
|
||||
{ id: 1, text: "Analytics", icon: Analytics },
|
||||
{ id: 2, text: "IBM Analytics Engine", pid: 1, icon: Analytics },
|
||||
{ id: 3, text: "Apache Spark", pid: 2, icon: Analytics },
|
||||
{ id: 4, text: "Hadoop", icon: Analytics, pid: 2 },
|
||||
{ id: 5, text: "IBM Cloud SQL Query", icon: Analytics, pid: 1 },
|
||||
{ id: 6, text: "IBM Db2 Warehouse on Cloud", icon: Analytics, pid: 1 },
|
||||
{ id: 7, text: "Blockchain", icon: Blockchain },
|
||||
{ id: 8, text: "IBM Blockchain Platform", icon: Blockchain, pid: 7 },
|
||||
{ id: 9, text: "Databases", icon: DataBase },
|
||||
{
|
||||
id: 10,
|
||||
text: "IBM Cloud Databases for Elasticsearch",
|
||||
icon: DataBase,
|
||||
pid: 9,
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
text: "IBM Cloud Databases for Enterprise DB",
|
||||
icon: DataBase,
|
||||
pid: 9,
|
||||
},
|
||||
{ id: 12, text: "IBM Cloud Databases for MongoDB", icon: DataBase, pid: 9 },
|
||||
{
|
||||
id: 13,
|
||||
text: "IBM Cloud Databases for PostgreSQL",
|
||||
icon: DataBase,
|
||||
pid: 9,
|
||||
},
|
||||
{ id: 14, text: "Integration", icon: SignalStrength, disabled: true },
|
||||
{
|
||||
id: 15,
|
||||
text: "IBM API Connect",
|
||||
icon: SignalStrength,
|
||||
disabled: true,
|
||||
pid: 14,
|
||||
},
|
||||
];
|
||||
|
||||
$: console.log("selectedIds", selectedIds);
|
||||
</script>
|
||||
|
||||
<TreeView
|
||||
bind:this={treeview}
|
||||
size="compact"
|
||||
labelText="Cloud Products"
|
||||
{nodesFlat}
|
||||
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>
|
Loading…
Add table
Add a link
Reference in a new issue