mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
5f1e8de1e1
Refactor `toHiearchy` to be more generic, performant - Use callback to "pick" generic parent ID property instead of requiring that `pid` be hardcoded` - Account for edge cases of an invalid parent ID - Use Map to store node children for lookups - Use one pass instead of removing empty nodes at the very end - DX: use generics to type `toHierarchy` - Make `toHierarchy` even more generic (reusable with `RecursiveList`) Co-Authored-By: Bram <bramhavers@gmail.com>
24 lines
633 B
Svelte
24 lines
633 B
Svelte
<script lang="ts">
|
|
import { RecursiveList } from "carbon-components-svelte";
|
|
import toHierarchy from "../../src/utils/toHierarchy";
|
|
|
|
let nodes = toHierarchy(
|
|
[
|
|
{ id: 1, text: "Item 1" },
|
|
{ id: 2, text: "Item 1a", pid: 1 },
|
|
{ id: 3, html: "<h5>HTML content</h5>", pid: 2 },
|
|
{ id: 4, text: "Item 2" },
|
|
{ id: 5, href: "https://svelte.dev/", pid: 4 },
|
|
{
|
|
id: 6,
|
|
href: "https://svelte.dev/",
|
|
text: "Link with custom text",
|
|
pid: 4,
|
|
},
|
|
{ id: 7, text: "Item 3" },
|
|
],
|
|
(node) => node.pid,
|
|
);
|
|
</script>
|
|
|
|
<RecursiveList type="ordered" {nodes} />
|