fix(core): remove hyperlist dependency (#1603)

siemens · Dec 10, 2024 · 0fe4d52 · 0fe4d52
1 parent 77f76fe
commit 0fe4d52
Show file tree

Hide file tree

Showing 7 changed files with 811 additions and 102 deletions.
diff --git a/.changeset/real-timers-relate.md b/.changeset/real-timers-relate.md
@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+Remove _hyperlist_ from the dependencies
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -47,7 +47,6 @@
     "@stencil/core": "~4.17.0",
     "@types/luxon": "^3.3.7",
     "animejs": "~3.2.1",
-    "hyperlist": "^1.0.0",
     "luxon": "^3.4.4"
   },
   "devDependencies": {

diff --git a/packages/core/src/components/tree-item/tree-item.tsx b/packages/core/src/components/tree-item/tree-item.tsx
@@ -9,6 +9,7 @@
 
 import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';
 import { TreeItemContext } from '../tree/tree-model';
+import { iconChevronRight } from '@siemens/ix-icons/icons';
 
 @Component({
   tag: 'ix-tree-item',
@@ -57,7 +58,7 @@ export class TreeItem {
         >
           {this.hasChildren ? (
             <ix-icon
-              name={'chevron-right'}
+              name={iconChevronRight}
               size="16"
               class={{
                 ['icon-toggle-down']: !!this.context?.isExpanded,

diff --git a/packages/core/src/components/tree/tree.tsx b/packages/core/src/components/tree/tree.tsx
@@ -17,7 +17,7 @@ import {
   Prop,
   Watch,
 } from '@stencil/core';
-import Hyperlist from 'hyperlist';
+import { VirtualList, VirtualListConfig } from './../utils/lazy-list';
 import { renderDefaultItem } from '../tree-item/default-tree-item';
 import {
   TreeContext,
@@ -85,7 +85,7 @@ export class Tree {
    */
   @Event() nodeRemoved!: EventEmitter<any>;
 
-  private hyperlist: Hyperlist;
+  private hyperlist: VirtualList;
 
   private toggleListener = new Map<HTMLElement, Function>();
   private itemClickListener = new Map<HTMLElement, Function>();
@@ -97,7 +97,7 @@ export class Tree {
     element.style.paddingLeft = item.level + 'rem';
   }
 
-  private getVirtualizerOptions() {
+  private getVirtualizerOptions(): VirtualListConfig {
     const list = this.buildTreeList(this.model[this.root]);
 
     let setToggleListener = (
@@ -120,6 +120,8 @@ export class Tree {
     };
 
     return {
+      width: '100%',
+      height: '100%',
       itemHeight: 32,
       total: list.length,
       generate: (index: number) => {
@@ -302,6 +304,7 @@ export class Tree {
   }
 
   private isListInitialized() {
+    //@ts-ignore
     const itemPositions = this.hyperlist?._itemPositions;
 
     return (
@@ -326,7 +329,7 @@ export class Tree {
 
     this.hyperlist?.destroy();
     const config = this.getVirtualizerOptions();
-    this.hyperlist = new Hyperlist(this.hostElement, config);
+    this.hyperlist = new VirtualList(this.hostElement, config);
   }
 
   render() {

diff --git a/packages/core/src/components/utils/lazy-list/index.ts b/packages/core/src/components/utils/lazy-list/index.ts
@@ -0,0 +1,10 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export type { VirtualListConfig } from './lazy';
+export { VirtualList } from './lazy';