From 048c10a6ab8d9c3aecdd1291bfefb020f1f23432 Mon Sep 17 00:00:00 2001 From: Bram Date: Mon, 2 Dec 2024 17:44:38 +0100 Subject: [PATCH] Fix that toHierarchy couldn't be found. Updated docs and test. --- COMPONENT_INDEX.md | 30 ++++++++++---------- docs/src/COMPONENT_API.json | 24 ++++++++-------- docs/src/pages/components/TreeView.svx | 18 ++++++------ src/TreeView/TreeView.svelte | 9 ++++++ src/TreeView/treeview.js | 2 -- src/index.js | 1 + tests/TreeView/TreeViewFlatArray.test.svelte | 10 ++++--- types/TreeView/TreeView.svelte.d.ts | 11 ++++--- types/TreeView/index.d.ts | 2 ++ types/TreeView/treeview.d.ts | 9 ++++++ types/index.d.ts | 1 + 11 files changed, 70 insertions(+), 47 deletions(-) create mode 100644 types/TreeView/index.d.ts create mode 100644 types/TreeView/treeview.d.ts diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index a82d811969..ebfbd425bf 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -4699,21 +4699,21 @@ export interface TreeNode { ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :------------ | :------- | :-------------------- | :------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | -| expandedIds | No | let | Yes | ReadonlyArray | [] | Set the node ids to be expanded | -| selectedIds | No | let | Yes | ReadonlyArray | [] | Set the node ids to be selected | -| activeId | No | let | Yes | TreeNodeId | "" | Set the current active node id
Only one node can be active | -| nodes | No | let | Yes | Array | [] | Provide a nested array of nodes to render | -| nodesFlat | No | let | No | Array | [] | Provide a flat array of nodes to render | -| size | No | let | No | "default" | "compact" | "default" | Specify the TreeView size | -| labelText | No | let | No | string | "" | Specify the label text | -| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | -| expandAll | No | function | No | () => void | () => { expandedIds = [...nodeIds]; } | Programmatically expand all nodes | -| collapseAll | No | function | No | () => void | () => { expandedIds = []; } | Programmatically collapse all nodes | -| expandNodes | No | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = flattenedNodes .filter( (node) => filterNode(node) || node.nodes?.some((child) => filterNode(child) && child.nodes), ) .map((node) => node.id); } | Programmatically expand a subset of nodes.
Expands all nodes if no argument is provided | -| collapseNodes | No | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = flattenedNodes .filter((node) => expandedIds.includes(node.id) && !filterNode(node)) .map((node) => node.id); } | Programmatically collapse a subset of nodes.
Collapses all nodes if no argument is provided | -| showNode | No | function | No | (id: TreeNodeId) => void | () => { for (const child of nodes) { const nodes = findNodeById(child, id); if (nodes) { const ids = nodes.map((node) => node.id); const nodeIds = new Set(ids); expandNodes((node) => nodeIds.has(node.id)); const lastId = ids[ids.length - 1]; activeId = lastId; selectedIds = [lastId]; tick().then(() => { ref?.querySelector(\`[id="${lastId}"]\`)?.focus(); }); break; } } } | Programmatically show a node by `id`.
The matching node will be expanded, selected, and focused | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------ | :------- | :-------------------- | :------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | +| expandedIds | No | let | Yes | ReadonlyArray | [] | Set the node ids to be expanded | +| selectedIds | No | let | Yes | ReadonlyArray | [] | Set the node ids to be selected | +| activeId | No | let | Yes | TreeNodeId | "" | Set the current active node id
Only one node can be active | +| nodes | No | let | No | Array | [] | Provide a nested array of nodes to render | +| size | No | let | No | "default" | "compact" | "default" | Specify the TreeView size | +| labelText | No | let | No | string | "" | Specify the label text | +| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | +| expandAll | No | function | No | () => void | () => { expandedIds = [...nodeIds]; } | Programmatically expand all nodes | +| collapseAll | No | function | No | () => void | () => { expandedIds = []; } | Programmatically collapse all nodes | +| toHierarchy | No | function | No | (flatArray: TreeNode[] & { pid?: any }[]) => TreeNode[] | () => { return th(flatArray); } | Create a nested array from a flat array | +| expandNodes | No | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = flattenedNodes .filter( (node) => filterNode(node) || node.nodes?.some((child) => filterNode(child) && child.nodes), ) .map((node) => node.id); } | Programmatically expand a subset of nodes.
Expands all nodes if no argument is provided | +| collapseNodes | No | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = flattenedNodes .filter((node) => expandedIds.includes(node.id) && !filterNode(node)) .map((node) => node.id); } | Programmatically collapse a subset of nodes.
Collapses all nodes if no argument is provided | +| showNode | No | function | No | (id: TreeNodeId) => void | () => { for (const child of nodes) { const nodes = findNodeById(child, id); if (nodes) { const ids = nodes.map((node) => node.id); const nodeIds = new Set(ids); expandNodes((node) => nodeIds.has(node.id)); const lastId = ids[ids.length - 1]; activeId = lastId; selectedIds = [lastId]; tick().then(() => { ref?.querySelector(\`[id="${lastId}"]\`)?.focus(); }); break; } } } | Programmatically show a node by `id`.
The matching node will be expanded, selected, and focused | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 005acb7678..962830d49a 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -17777,18 +17777,6 @@ "isFunctionDeclaration": false, "isRequired": false, "constant": false, - "reactive": true - }, - { - "name": "nodesFlat", - "kind": "let", - "description": "Provide a flat array of nodes to render", - "type": "Array", - "value": "[]", - "isFunction": false, - "isFunctionDeclaration": false, - "isRequired": false, - "constant": false, "reactive": false }, { @@ -17887,6 +17875,18 @@ "constant": false, "reactive": false }, + { + "name": "toHierarchy", + "kind": "function", + "description": "Create a nested array from a flat array", + "type": "(flatArray: TreeNode[] & { pid?: any }[]) => TreeNode[]", + "value": "() => {\n return th(flatArray);\n}", + "isFunction": true, + "isFunctionDeclaration": true, + "isRequired": false, + "constant": false, + "reactive": false + }, { "name": "expandNodes", "kind": "function", diff --git a/docs/src/pages/components/TreeView.svx b/docs/src/pages/components/TreeView.svx index e95b782852..5c639924c2 100644 --- a/docs/src/pages/components/TreeView.svx +++ b/docs/src/pages/components/TreeView.svx @@ -58,14 +58,6 @@ To render a node with an icon, define an `icon` property with a Carbon Svelte ic -## Flat data structure - -Provide a flat data structure through the `nodesFlat` property. Child object needs to have a `pid` property -to reference its parent. Optionally the key for the parent can be provided. -When no parent id is available the object is assumed to be at the root of the tree. - - - ## Initial expanded nodes Expanded nodes can be set using `expandedIds`. @@ -116,3 +108,13 @@ Use the `TreeView.showNode` method to show a specific node. If a matching node is found, it will be expanded, selected, and focused. + +## Flat data structure + +Use the `toHierarchy` method to provide a flat data structure to the `nodes` property. + +This method will transform a flat array of objects into the hierarchical array as expected by `nodes`. +The child objects in the flat array need to have a `pid` property to reference its parent. +When `pid` is not provided the object is assumed to be at the root of the tree. + + \ No newline at end of file diff --git a/src/TreeView/TreeView.svelte b/src/TreeView/TreeView.svelte index b07d428dd7..7f3a028ec6 100644 --- a/src/TreeView/TreeView.svelte +++ b/src/TreeView/TreeView.svelte @@ -89,6 +89,14 @@ expandedIds = []; } + /** + * Create a nested array from a flat array + * @type {(flatArray: TreeNode[] & { pid?: any }[]) => TreeNode[]} + */ + export function toHierarchy(flatArray) { + return th(flatArray); + } + /** * Programmatically expand a subset of nodes. * Expands all nodes if no argument is provided @@ -147,6 +155,7 @@ import { createEventDispatcher, setContext, onMount, tick } from "svelte"; import { writable } from "svelte/store"; import TreeViewNodeList from "./TreeViewNodeList.svelte"; + import { toHierarchy as th } from "./treeview"; const dispatch = createEventDispatcher(); const labelId = `label-${Math.random().toString(36)}`; diff --git a/src/TreeView/treeview.js b/src/TreeView/treeview.js index e1ec636695..5804ae92d2 100644 --- a/src/TreeView/treeview.js +++ b/src/TreeView/treeview.js @@ -25,8 +25,6 @@ export function toHierarchy(flatArray) { }); // Remove the empty nodes props that make TreeView render a twistie. - // Maybe this should actually be taken care of in TreeView itself? It makes - // no sense i think that an empty nodes property render a twistie. function removeEmptyNodes(element) { element.forEach((elmt) => { if (elmt.nodes?.length === 0) delete elmt.nodes; diff --git a/src/index.js b/src/index.js index ea1a84cf46..75a2c8dcc9 100644 --- a/src/index.js +++ b/src/index.js @@ -127,6 +127,7 @@ export { Tooltip, TooltipFooter } from "./Tooltip"; export { TooltipDefinition } from "./TooltipDefinition"; export { TooltipIcon } from "./TooltipIcon"; export { TreeView } from "./TreeView"; +export { toHierarchy } from "./TreeView/treeview"; export { Truncate } from "./Truncate"; export { default as truncate } from "./Truncate/truncate"; export { diff --git a/tests/TreeView/TreeViewFlatArray.test.svelte b/tests/TreeView/TreeViewFlatArray.test.svelte index 86b7fe718f..005394724b 100644 --- a/tests/TreeView/TreeViewFlatArray.test.svelte +++ b/tests/TreeView/TreeViewFlatArray.test.svelte @@ -1,7 +1,9 @@