mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(tree-view): add showNode accessor (#1844)

Browse source 
Closes #1377
This commit is contained in:
metonym 2023-11-12 14:25:15 -08:00 • committed by GitHub
commit 1ad4e3d385
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 150 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

27
COMPONENT_INDEX.md
View file

@ -4691,19 +4691,20 @@ export interface TreeNode {
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------ | :------- | :-------------------- | :------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ | | :------------ | :------- | :-------------------- | :------- | ------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| expandedIds | No | <code>let</code> | Yes | <code>ReadonlyArray<TreeNodeId></code> | <code>[]</code> | Set the node ids to be expanded | | expandedIds | No | <code>let</code> | Yes | <code>ReadonlyArray<TreeNodeId></code> | <code>[]</code> | Set the node ids to be expanded |
| selectedIds | No | <code>let</code> | Yes | <code>ReadonlyArray<TreeNodeId></code> | <code>[]</code> | Set the node ids to be selected | | selectedIds | No | <code>let</code> | Yes | <code>ReadonlyArray<TreeNodeId></code> | <code>[]</code> | Set the node ids to be selected |
| activeId | No | <code>let</code> | Yes | <code>TreeNodeId</code> | <code>""</code> | Set the current active node id<br />Only one node can be active | | activeId | No | <code>let</code> | Yes | <code>TreeNodeId</code> | <code>""</code> | Set the current active node id<br />Only one node can be active |
| children | No | <code>let</code> | No | <code>Array<TreeNode></code> | <code>[]</code> | Provide an array of children nodes to render | | children | No | <code>let</code> | No | <code>Array<TreeNode></code> | <code>[]</code> | Provide an array of children nodes to render |
| size | No | <code>let</code> | No | <code>"default" &#124; "compact"</code> | <code>"default"</code> | Specify the TreeView size | | size | No | <code>let</code> | No | <code>"default" &#124; "compact"</code> | <code>"default"</code> | Specify the TreeView size |
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text | | labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text | | hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
| expandAll | No | <code>function</code> | No | <code>() => void</code> | <code>() => { expandedIds = [...nodeIds]; }</code> | Programmatically expand all nodes | | expandAll | No | <code>function</code> | No | <code>() => void</code> | <code>() => { expandedIds = [...nodeIds]; }</code> | Programmatically expand all nodes |
| collapseAll | No | <code>function</code> | No | <code>() => void</code> | <code>() => { expandedIds = []; }</code> | Programmatically collapse all nodes | | collapseAll | No | <code>function</code> | No | <code>() => void</code> | <code>() => { expandedIds = []; }</code> | Programmatically collapse all nodes |
| expandNodes | No | <code>function</code> | No | <code>(filterId?: (node: TreeNode) => boolean) => void</code> | <code>() => { expandedIds = nodes .filter( (node) => filterNode(node) &#124;&#124; node.children?.some((child) => filterNode(child) && child.children) ) .map((node) => node.id); }</code> | Programmatically expand a subset of nodes.<br />Expands all nodes if no argument is provided | | expandNodes | No | <code>function</code> | No | <code>(filterId?: (node: TreeNode) => boolean) => void</code> | <code>() => { expandedIds = nodes .filter( (node) => filterNode(node) &#124;&#124; node.children?.some((child) => filterNode(child) && child.children) ) .map((node) => node.id); }</code> | Programmatically expand a subset of nodes.<br />Expands all nodes if no argument is provided |
| collapseNodes | No | <code>function</code> | No | <code>(filterId?: (node: TreeNode) => boolean) => void</code> | <code>() => { expandedIds = nodes .filter((node) => expandedIds.includes(node.id) && !filterNode(node)) .map((node) => node.id); }</code> | Programmatically collapse a subset of nodes.<br />Collapses all nodes if no argument is provided | | collapseNodes | No | <code>function</code> | No | <code>(filterId?: (node: TreeNode) => boolean) => void</code> | <code>() => { expandedIds = nodes .filter((node) => expandedIds.includes(node.id) && !filterNode(node)) .map((node) => node.id); }</code> | Programmatically collapse a subset of nodes.<br />Collapses all nodes if no argument is provided |
| showNode | No | <code>function</code> | No | <code>(id: TreeNodeId) => void</code> | <code>() => { for (const child of children) { 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 out of the loop if the node is found. break; } } }</code> | Programmatically show a node by `id`.<br />The matching node will be expanded, selected, and focused |
### Slots ### Slots

12
docs/src/COMPONENT_API.json
View file

@ -14664,6 +14664,18 @@
"isRequired": false, "isRequired": false,
"constant": false, "constant": false,
"reactive": false "reactive": false
},
{
"name": "showNode",
"kind": "function",
"description": "Programmatically show a node by `id`.\nThe matching node will be expanded, selected, and focused",
"type": "(id: TreeNodeId) => void",
"value": "() => { for (const child of children) { 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 out of the loop if the node is found. break; } } }",
"isFunction": true,
"isFunctionDeclaration": true,
"isRequired": false,
"constant": false,
"reactive": false
} }
], ],
"moduleExports": [], "moduleExports": [],

10
docs/src/pages/components/TreeView.svx
View file

@ -92,4 +92,12 @@ Use the `TreeView.collapseNodes` method to collapse a subset of nodes.
If no argument is provided, all nodes will be collapsed. If no argument is provided, all nodes will be collapsed.
<FileSource src="/framed/TreeView/TreeViewCollapseNodes" /> <FileSource src="/framed/TreeView/TreeViewCollapseNodes" />
## Show a specific node
Use the `TreeView.showNode` method to show a specific node.
If a matching node is found, it will be expanded, selected, and focused.
<FileSource src="/framed/TreeView/TreeViewShowNode" />

49
docs/src/pages/framed/TreeView/TreeViewShowNode.svelte Normal file
View file

@ -0,0 +1,49 @@
<script>
import { Button, ButtonSet, TreeView } from "carbon-components-svelte";
const nodeSpark = { id: 3, text: "Apache Spark" };
const nodeBlockchain = { id: 8, text: "IBM Blockchain Platform" };
let treeview = null;
let children = [
{ id: 0, text: "AI / Machine learning" },
{
id: 1,
text: "Analytics",
children: [
{
id: 2,
text: "IBM Analytics Engine",
children: [nodeSpark, { id: 4, text: "Hadoop" }],
},
{ id: 5, text: "IBM Cloud SQL Query" },
{ id: 6, text: "IBM Db2 Warehouse on Cloud" },
],
},
{
id: 7,
text: "Blockchain",
children: [{ id: 8, text: "IBM Blockchain Platform" }],
},
];
</script>
<ButtonSet style="margin-bottom: var(--cds-spacing-05)">
{#each [nodeSpark, nodeBlockchain] as { id, text }}
<Button
on:click="{() => {
treeview?.showNode(id);
}}"
>
Show "{text}"
</Button>
{/each}
<Button kind="tertiary" on:click="{treeview.collapseAll}">Collapse all</Button
>
</ButtonSet>
<TreeView
bind:this="{treeview}"
labelText="Cloud Products"
children="{children}"
/>

60
src/TreeView/TreeView.svelte
View file

@ -1,3 +1,31 @@
<script context="module">
/**
* Depth-first search to find a node by id; returns an array
* of nodes from the initial node to the matching leaf.
* @param {TreeNode} node
* @param {TreeNodeId} id
* @returns {null | TreeNode[]}
*/
function findNodeById(node, id) {
if (node === null) return null;
if (node.id === id) return [node];
if (!Array.isArray(node.children)) {
return null;
}
for (const child of node.children) {
const nodes = findNodeById(child, id);
if (Array.isArray(nodes)) {
nodes.unshift(node);
return nodes;
}
}
return null;
}
</script>
<script> <script>
/** /**
* @typedef {string | number} TreeNodeId * @typedef {string | number} TreeNodeId
@ -87,7 +115,37 @@
.map((node) => node.id); .map((node) => node.id);
} }
import { createEventDispatcher, setContext, onMount } from "svelte"; /**
* Programmatically show a node by `id`.
* The matching node will be expanded, selected, and focused
* @type {(id: TreeNodeId) => void}
*/
export function showNode(id) {
for (const child of children) {
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 out of the loop if the node is found.
break;
}
}
}
import { createEventDispatcher, setContext, onMount, tick } from "svelte";
import { writable } from "svelte/store"; import { writable } from "svelte/store";
import TreeViewNodeList from "./TreeViewNodeList.svelte"; import TreeViewNodeList from "./TreeViewNodeList.svelte";

1
tests/TreeView.test.svelte
View file

@ -58,6 +58,7 @@
treeview.collapseNodes((node) => { treeview.collapseNodes((node) => {
return node.disabled; return node.disabled;
}); });
treeview.showNode(1);
} }
</script> </script>

6
types/TreeView/TreeView.svelte.d.ts vendored
View file

@ -103,4 +103,10 @@ export default class TreeView extends SvelteComponentTyped<
* Collapses all nodes if no argument is provided * Collapses all nodes if no argument is provided
*/ */
collapseNodes: (filterId?: (node: TreeNode) => boolean) => void; collapseNodes: (filterId?: (node: TreeNode) => boolean) => void;
/**
* Programmatically show a node by `id`.
* The matching node will be expanded, selected, and focused
*/
showNode: (id: TreeNodeId) => void;
} }