Merge pull request #66 from siemens/fix/tree-item-selection-state

fix(core/tree-item): replace css properties with tree-item custom properties
siemens · Oct 18, 2022 · 174c49b · 174c49b
2 parents 3de38f8 + fe92d13
commit 174c49b
Show file tree

Hide file tree

Showing 10 changed files with 187 additions and 35 deletions.
diff --git a/packages/angular-test-app/src/preview-examples/tree-custom.ts b/packages/angular-test-app/src/preview-examples/tree-custom.ts
@@ -8,7 +8,7 @@
  */
 
 import { Component } from '@angular/core';
-import { TreeModel } from '@siemens/ix';
+import { TreeContext, TreeModel } from '@siemens/ix';
 
 type TreeData = {
   name: string;
@@ -28,7 +28,19 @@ type TreeData = {
     `,
   ],
   template: `<div class="example">
-    <ix-tree root="root" [model]="model" [renderItem]="treeItem"></ix-tree>
+    <ix-button
+      id="expand"
+      ghost
+      style="margin-bottom: 2rem"
+      (click)="expandAndSelect()"
+      >Expand Tree</ix-button
+    >
+    <ix-tree
+      root="root"
+      [model]="model"
+      [context]="context"
+      [renderItem]="treeItem"
+    ></ix-tree>
     <ng-template #treeItem let-item>
       <div class="d-flex align-items-center">
         <ix-icon [name]="item.icon" size="16" class="me-2"></ix-icon>
@@ -38,6 +50,7 @@ type TreeData = {
   </div>`,
 })
 export class TreeCustom {
+  context: TreeContext = {};
   model: TreeModel<TreeData> = {
     root: {
       id: 'root',
@@ -76,4 +89,17 @@ export class TreeCustom {
       children: [],
     },
   };
+
+  expandAndSelect() {
+    this.context = {
+      sample: {
+        isExpanded: true,
+        isSelected: false,
+      },
+      'sample-child-2': {
+        isSelected: true,
+        isExpanded: false,
+      },
+    };
+  }
 }
diff --git a/packages/angular/src/tree/tree.ts b/packages/angular/src/tree/tree.ts
@@ -8,22 +8,22 @@
  */
 
 import {
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    ElementRef,
-    EmbeddedViewRef,
-    EventEmitter,
-    Input,
-    NgZone,
-    OnDestroy,
-    TemplateRef
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EmbeddedViewRef,
+  EventEmitter,
+  Input,
+  NgZone,
+  OnDestroy,
+  TemplateRef,
 } from '@angular/core';
 import type {
-    Components,
-    TreeContext as ICwTreeTreeContext,
-    TreeContext,
-    UpdateCallback
+  Components,
+  TreeContext as ICwTreeTreeContext,
+  TreeContext,
+  UpdateCallback,
 } from '@siemens/ix';
 import { Subscription } from 'rxjs';
 import { ProxyCmp, proxyOutputs } from './../angular-component-lib/utils';
@@ -95,7 +95,7 @@ export class IxTree implements OnDestroy {
     ) => {
       const treeItem = document.createElement('ix-tree-item');
       treeItem.hasChildren = itemData.hasChildren;
-      treeItem.context = context as any;
+      treeItem.context = context[itemData.id];
 
       const embeddedView = templateRef.createEmbeddedView({
         $implicit: itemData.data,
@@ -105,7 +105,7 @@ export class IxTree implements OnDestroy {
       embeddedView.detectChanges();
 
       update((itemData, context) => {
-        treeItem.context = context as any;
+        treeItem.context = context[itemData.id];
         treeItem.hasChildren = itemData.hasChildren;
 
         embeddedView.context = {

diff --git a/packages/core/src/components/tree-item/tree-item.scss b/packages/core/src/components/tree-item/tree-item.scss
@@ -24,17 +24,27 @@
   &:not(.disabled):not(:disabled):not(.selected) {
     &.hover,
     &:hover {
-      background-color: var(--theme-ghost-hover);
+      background-color: var(--theme-tree-item--background--hover);
     }
 
     &.active,
     &:active {
-      background-color: var(--theme-ghost-pressed);
+      background-color: var(--theme-tree-item--background--active);
     }
   }
 
   &.selected {
-    background-color: var(--theme-ghost-selected);
+    background-color: var(--theme-tree-item--background--selected);
+
+    &.hover,
+    &:hover {
+      background-color: var(--theme-tree-item--background--selected-hover);
+    }
+
+    &.active,
+    &:active {
+      background-color: var(--theme-tree-item--background--selected-active);
+    }
   }
 
   .tree-node-container {

diff --git a/packages/documentation/docs/auto-generated/previews/angular/tree-custom.md b/packages/documentation/docs/auto-generated/previews/angular/tree-custom.md
@@ -16,7 +16,7 @@ SPDX-License-Identifier: MIT
  */
 
 import { Component } from '@angular/core';
-import { TreeModel } from '@siemens/ix';
+import { TreeContext, TreeModel } from '@siemens/ix';
 
 type TreeData = {
   name: string;
@@ -36,7 +36,19 @@ type TreeData = {
     `,
   ],
   template: `<div class="example">
-    <ix-tree root="root" [model]="model" [renderItem]="treeItem"></ix-tree>
+    <ix-button
+      id="expand"
+      ghost
+      style="margin-bottom: 2rem"
+      (click)="expandAndSelect()"
+      >Expand Tree</ix-button
+    >
+    <ix-tree
+      root="root"
+      [model]="model"
+      [context]="context"
+      [renderItem]="treeItem"
+    ></ix-tree>
     <ng-template #treeItem let-item>
       <div class="d-flex align-items-center">
         <ix-icon [name]="item.icon" size="16" class="me-2"></ix-icon>
@@ -46,6 +58,7 @@ type TreeData = {
   </div>`,
 })
 export class TreeCustom {
+  context: TreeContext = {};
   model: TreeModel<TreeData> = {
     root: {
       id: 'root',
@@ -84,5 +97,18 @@ export class TreeCustom {
       children: [],
     },
   };
+
+  expandAndSelect() {
+    this.context = {
+      sample: {
+        isExpanded: true,
+        isSelected: false,
+      },
+      'sample-child-2': {
+        isSelected: true,
+        isExpanded: false,
+      },
+    };
+  }
 }
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/react/tree-custom.md b/packages/documentation/docs/auto-generated/previews/react/tree-custom.md
@@ -15,8 +15,8 @@ SPDX-License-Identifier: MIT
  * LICENSE file in the root directory of this source tree.
  */
 
-import { TreeModel } from '@siemens/ix';
-import { IxIcon, IxTree } from '@siemens/ix-react';
+import { TreeContext, TreeModel } from '@siemens/ix';
+import { IxButton, IxIcon, IxTree } from '@siemens/ix-react';
 import React, { useState } from 'react';
 
 type TreeData = {
@@ -25,6 +25,7 @@ type TreeData = {
 };
 
 export const TreeCustom: React.FC = () => {
+  const [context, setContext] = useState<TreeContext>();
   const [model] = useState<TreeModel<TreeData>>({
     root: {
       id: 'root',
@@ -63,6 +64,20 @@ export const TreeCustom: React.FC = () => {
       children: [],
     },
   });
+
+  function expandAndSelect() {
+    setContext({
+      sample: {
+        isExpanded: true,
+        isSelected: false,
+      },
+      'sample-child-2': {
+        isSelected: true,
+        isExpanded: false,
+      },
+    });
+  }
+
   return (
     <div
       style={{
@@ -72,9 +87,20 @@ export const TreeCustom: React.FC = () => {
         height: '40rem',
       }}
     >
+      <IxButton
+        onClick={expandAndSelect}
+        ghost
+        style={{ marginBottom: '2rem' }}
+      >
+        Expand Tree
+      </IxButton>
       <IxTree
         root="root"
         model={model}
+        context={context}
+        onContextChange={({ detail }) => {
+          setContext(detail);
+        }}
         renderItem={(data: TreeData) => (
           <div className="d-flex align-items-center">
             <IxIcon name={data.icon} size="16" className="me-2" /> {data.name}

diff --git a/packages/documentation/docs/auto-generated/previews/web-component/tree-custom.md b/packages/documentation/docs/auto-generated/previews/web-component/tree-custom.md
@@ -8,6 +8,9 @@ SPDX-License-Identifier: MIT
 ```html
 
 <div style="height: 8rem; width: 100%">
+  <ix-button id="expand" ghost style="margin-bottom: 2rem"
+    >Expand Tree</ix-button
+  >
   <ix-tree root="root" id="tree"></ix-tree>
 </div>
 
@@ -16,10 +19,24 @@ SPDX-License-Identifier: MIT
     await window.customElements.whenDefined('ix-tree');
     const tree = document.getElementById('tree');
 
+    const expandButton = document.getElementById('expand');
+    expandButton.addEventListener('click', () => {
+      tree.context = {
+        sample: {
+          isExpanded: true,
+          isSelected: false,
+        },
+        'sample-child-2': {
+          isSelected: true,
+          isExpanded: false,
+        },
+      };
+    });
+
     tree.renderItem = (index, item, dataList, context, update) => {
       const el = document.createElement('ix-tree-item');
       el.hasChildren = item.hasChildren;
-      el.context = context;
+      el.context = context[item.id];
 
       const div = document.createElement('div');
       div.style.display = 'flex';

diff --git a/packages/html-test-app/package.json b/packages/html-test-app/package.json
@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "start": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },

diff --git a/packages/html-test-app/src/preview-examples/tree-custom.html b/packages/html-test-app/src/preview-examples/tree-custom.html
@@ -13,6 +13,9 @@
     <!-- Preview code -->
 
     <div style="height: 8rem; width: 100%">
+      <ix-button id="expand" ghost style="margin-bottom: 2rem"
+        >Expand Tree</ix-button
+      >
       <ix-tree root="root" id="tree"></ix-tree>
     </div>
 
@@ -21,10 +24,24 @@
         await window.customElements.whenDefined('ix-tree');
         const tree = document.getElementById('tree');
 
+        const expandButton = document.getElementById('expand');
+        expandButton.addEventListener('click', () => {
+          tree.context = {
+            sample: {
+              isExpanded: true,
+              isSelected: false,
+            },
+            'sample-child-2': {
+              isSelected: true,
+              isExpanded: false,
+            },
+          };
+        });
+
         tree.renderItem = (index, item, dataList, context, update) => {
           const el = document.createElement('ix-tree-item');
           el.hasChildren = item.hasChildren;
-          el.context = context;
+          el.context = context[item.id];
 
           const div = document.createElement('div');
           div.style.display = 'flex';