feat(tree-view): add expandedIds #750 (#751)

COMPONENT_INDEX.md

@@ -4749,6 +4749,7 @@ export interface TreeNode {
 
 | Prop name   | Kind             | Reactive | Type                                                     | Default value          | Description                                                     |
 | :---------- | :--------------- | :------- | :------------------------------------------------------- | ---------------------- | --------------------------------------------------------------- |
+| expandedIds | <code>let</code> | Yes      | <code>TreeNodeId[]</code>                                | <code>[]</code>        | Set the node ids to be expanded                                 |
 | selectedIds | <code>let</code> | Yes      | <code>TreeNodeId[]</code>                                | <code>[]</code>        | Set the node ids to be selected                                 |
 | activeId    | <code>let</code> | Yes      | <code>TreeNodeId</code>                                  | <code>""</code>        | Set the current active node id<br />Only one node can be active |
 | children    | <code>let</code> | No       | <code>Array<TreeNode & { children?: TreeNode[] }></code> | <code>[]</code>        | Provide an array of children nodes to render                    |

docs/src/COMPONENT_API.json

@@ -13057,6 +13057,17 @@
           "constant": false,
           "reactive": true
         },
+        {
+          "name": "expandedIds",
+          "kind": "let",
+          "description": "Set the node ids to be expanded",
+          "type": "TreeNodeId[]",
+          "value": "[]",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": true
+        },
         {
           "name": "size",
           "kind": "let",

docs/src/pages/framed/TreeView/TreeViewExpanded.svelte

@@ -3,17 +3,16 @@
 
   let activeId = 1;
   let selectedIds = [];
+  let expandedIds = [1, 2, 14];
   let children = [
     { id: 0, text: "AI / Machine learning" },
     {
       id: 1,
       text: "Analytics",
-      expanded: true,
       children: [
         {
           id: 2,
           text: "IBM Analytics Engine",
-          expanded: true,
           children: [
             { id: 3, text: "Apache Spark" },
             { id: 4, text: "Hadoop" },
@@ -52,6 +51,7 @@
   children="{children}"
   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)}"
@@ -59,6 +59,7 @@
 
 <div>Active node id: {activeId}</div>
 <div>Selected ids: {JSON.stringify(selectedIds)}</div>
+<div>Expanded ids: {JSON.stringify(expandedIds)}</div>
 
 <style>
   div {

src/TreeView/TreeView.svelte

@@ -26,6 +26,12 @@
    */
   export let selectedIds = [];
 
+  /**
+   * Set the node ids to be expanded
+   * @type {TreeNodeId[]}
+   */
+  export let expandedIds = [];
+
   /**
    * Specify the TreeView size
    * @type {"default" | "compact"}
@@ -46,6 +52,7 @@
   const labelId = `label-${Math.random().toString(36)}`;
   const activeNodeId = writable(activeId);
   const selectedNodeIds = writable(selectedIds);
+  const expandedNodeIds = writable(expandedIds);
 
   let ref = null;
   let treeWalker = null;
@@ -53,6 +60,7 @@
   setContext("TreeView", {
     activeNodeId,
     selectedNodeIds,
+    expandedNodeIds,
     clickNode: (node) => {
       activeId = node.id;
       selectedIds = [node.id];
@@ -61,6 +69,13 @@
     selectNode: (node) => {
       selectedIds = [node.id];
     },
+    expandNode: (node, expanded) => {
+      if (expanded) {
+        expandedIds = [...expandedIds, node.id];
+      } else {
+        expandedIds = expandedIds.filter((_id) => _id !== node.id);
+      }
+    },
     focusNode: (node) => dispatch("focus", node),
     toggleNode: (node) => dispatch("toggle", node),
   });
@@ -92,6 +107,7 @@
 
   $: activeNodeId.set(activeId);
   $: selectedNodeIds.set(selectedIds);
+  $: expandedNodeIds.set(expandedIds);
   $: if (ref) {
     treeWalker = document.createTreeWalker(ref, NodeFilter.SHOW_ELEMENT, {
       acceptNode: (node) => {

src/TreeView/TreeViewNodeList.svelte

@@ -31,8 +31,10 @@
   const {
     activeNodeId,
     selectedNodeIds,
+    expandedNodeIds,
     clickNode,
     selectNode,
+    expandNode,
     focusNode,
     toggleNode,
   } = getContext("TreeView");
@@ -59,6 +61,7 @@
     refLabel.style.marginLeft = `-${offset()}rem`;
     refLabel.style.paddingLeft = `${offset()}rem`;
   }
+  $: expanded = $expandedNodeIds.includes(id);
 </script>
 
 {#if root}
@@ -100,6 +103,7 @@
 
       if (parent && e.key === 'ArrowLeft') {
         expanded = false;
+        expandNode(node, false);
         toggleNode(node);
       }
 
@@ -108,6 +112,7 @@
           ref.lastChild.firstChild.focus();
         } else {
           expanded = true;
+          expandNode(node, true);
           toggleNode(node);
         }
       }
@@ -118,6 +123,7 @@
         expanded = !expanded;
         toggleNode(node);
         clickNode(node);
+        expandNode(node, expanded);
         ref.focus();
       }
     }}"
@@ -132,6 +138,7 @@
         on:click="{() => {
           if (disabled) return;
           expanded = !expanded;
+          expandNode(node, expanded);
           toggleNode(node);
         }}"
       >

tests/TreeView.test.svelte

@@ -5,6 +5,7 @@
 
   let activeId: TreeNodeId = "";
   let selectedIds = [];
+  let expandedIds = [1];
   let children = [
     { id: 0, text: "AI / Machine learning", icon: Analytics16 },
     {
@@ -53,6 +54,7 @@
   children="{children}"
   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)}"

types/TreeView/TreeView.d.ts

@@ -32,6 +32,12 @@ export interface TreeViewProps
    */
   selectedIds?: TreeNodeId[];
 
+  /**
+   * Set the node ids to be expanded
+   * @default []
+   */
+  expandedIds?: TreeNodeId[];
+
   /**
    * Specify the TreeView size
    * @default "default"