work for #4780 : lazy-loading

surveyjs · Oct 6, 2022 · 80c8615 · 80c8615
1 parent 8e992b2
commit 80c8615
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 24 deletions.
diff --git a/packages/survey-angular-ui/src/components/list/list.component.html b/packages/survey-angular-ui/src/components/list/list.component.html
@@ -1,5 +1,5 @@
 <ng-template #template>
-    <div [class]="model.cssClasses.root">
+    <div [class]="model.cssClasses.root" #listContainerElement>
         <div *ngIf="model.showFilter" [class]="model.cssClasses.filter">
             <div [class]="model.cssClasses.filterIcon">
                 <svg [iconName]="'icon-search'" [size]="24" sv-ng-svg-icon></svg>

diff --git a/packages/survey-angular-ui/src/components/list/list.component.ts b/packages/survey-angular-ui/src/components/list/list.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from "@angular/core";
+import { AfterViewInit, Component, ElementRef, Input, ViewChild } from "@angular/core";
 import { BaseAngular } from "../../base-angular";
 import { AngularComponentFactory } from "../../component-factory";
 
@@ -7,8 +7,9 @@ import { AngularComponentFactory } from "../../component-factory";
   templateUrl: "./list.component.html",
   styleUrls: ["../../hide-host.scss"]
 })
-export class ListComponent extends BaseAngular {
+export class ListComponent extends BaseAngular implements AfterViewInit {
   @Input() model: any;
+  @ViewChild("listContainerElement") listContainerElement!: ElementRef<HTMLDivElement>;
 
   getModel() {
     return this.model;
@@ -25,6 +26,11 @@ export class ListComponent extends BaseAngular {
   onMouseMove(event: Event): void {
     this.model.onMouseMove(event);
   }
+  ngAfterViewInit(): void {
+    if(!!this.listContainerElement?.nativeElement) {
+      this.model.initListContainerHtmlElement(this.listContainerElement.nativeElement);
+    }
+  }
 }
 
 AngularComponentFactory.Instance.registerComponent("sv-list", ListComponent);
diff --git a/src/dropdownListModel.ts b/src/dropdownListModel.ts
@@ -228,21 +228,22 @@ export class DropdownListModel extends Base {
     doKey2ClickBlur(event);
   }
   scrollToFocusedItem(): void {
-    setTimeout(() => {
-      let visiblePopup: Element = undefined;
-      document.querySelectorAll(".sv-popup").forEach((el) => {
-        const style = window.getComputedStyle(el);
-        if((style.display !== "none") && (style.visibility !== "hidden")) {
-          visiblePopup = el;
-        }
-      });
-
-      if(!visiblePopup) return;
-
-      const item = visiblePopup.querySelector("." + defaultListCss.itemFocused);
-      if(item) {
-        item.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "start" });
-      }
-    }, 0);
+    this.listModel.scrollToFocusedItem();
+    // setTimeout(() => {
+    //   let visiblePopup: Element = undefined;
+    //   document.querySelectorAll(".sv-popup").forEach((el) => {
+    //     const style = window.getComputedStyle(el);
+    //     if((style.display !== "none") && (style.visibility !== "hidden")) {
+    //       visiblePopup = el;
+    //     }
+    //   });
+
+    //   if(!visiblePopup) return;
+
+    //   const item = visiblePopup.querySelector("." + defaultListCss.itemFocused);
+    //   if(item) {
+    //     item.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "start" });
+    //   }
+    // }, 0);
   }
 }
diff --git a/src/element-helper.ts b/src/element-helper.ts
@@ -23,4 +23,16 @@ export class ElementHelper {
       return this.getNextElementPostorder(result);
     }
   }
+  static hasHorizontalScroller(element: HTMLElement): boolean {
+    if (!!element) {
+      return element.scrollWidth > element.offsetWidth;
+    }
+    return false;
+  }
+  static hasVerticalScroller(element: HTMLElement): boolean {
+    if (!!element) {
+      return element.scrollHeight > element.offsetHeight;
+    }
+    return false;
+  }
 }
diff --git a/src/knockout/components/list/list.ts b/src/knockout/components/list/list.ts
@@ -14,6 +14,7 @@ ko.components.register("sv-list", {
     createViewModel: (params: any, componentInfo: any) => {
       const model: ListModel = params.model;
       const _implementor: ImplementorBase = new ActionContainerImplementor(model);
+      model.initListContainerHtmlElement(componentInfo.element);
       return { model: model, dispose: () => { _implementor.dispose(); } };
     },
   },

diff --git a/src/list.ts b/src/list.ts
@@ -29,6 +29,8 @@ export interface IListModel {
   onFilterStringChangedCallback?: (text: string) => void;
 }
 export class ListModel extends ActionContainer {
+  private listContainerHtmlElement: HTMLElement;
+
   @property({
     defaultValue: true,
     onSet: (newValue: boolean, target: ListModel) => {
@@ -48,6 +50,7 @@ export class ListModel extends ActionContainer {
       target.onFilterStringChanged(target.filterString);
     }
   }) filterString: string;
+  @property({ defaultValue: false }) hasVerticalScroller: boolean;
 
   public static INDENT: number = 16;
   public static MINELEMENTCOUNT: number = 10;
@@ -218,4 +221,24 @@ export class ListModel extends ActionContainer {
   public selectFocusedItem(): void {
     this.onItemClick(this.focusedItem);
   }
+  public initListContainerHtmlElement(htmlElement: HTMLElement): void {
+    this.listContainerHtmlElement = htmlElement;
+  }
+  public scrollToFocusedItem(): void {
+    setTimeout(() => {
+      if(!this.listContainerHtmlElement) return;
+
+      const item = this.listContainerHtmlElement.querySelector("." + defaultListCss.itemFocused);
+      if(item) {
+        item.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "start" });
+      }
+    }, 0);
+  }
+  public setItems(items: Array<IAction>, sortByVisibleIndex?: boolean): void {
+    super.setItems(items, sortByVisibleIndex);
+
+    if(!!this.listContainerHtmlElement) {
+      this.hasVerticalScroller = ElementHelper.hasVerticalScroller(this.listContainerHtmlElement);
+    }
+  }
 }
diff --git a/src/question_dropdown.ts b/src/question_dropdown.ts
@@ -198,9 +198,9 @@ export class QuestionDropdownModel extends QuestionSelectBase {
     }
     return this.dropdownListModel?.popupModel;
   }
-  public get lazyLoading(): boolean {
-    return true;
-  }
+  // public get lazyLoading(): boolean {
+  //   return true;
+  // }
 
   public onOpened: EventBase<QuestionDropdownModel> = this.addEvent<QuestionDropdownModel>();
   public onOpenedCallBack(): void {

diff --git a/src/react/components/list/list.tsx b/src/react/components/list/list.tsx
@@ -10,11 +10,14 @@ interface IListProps {
 }
 
 export class List extends SurveyElementBase<IListProps, any> {
+  private listContainerRef: React.RefObject<HTMLDivElement>;
+
   constructor(props: any) {
     super(props);
     this.state = {
       filterString: this.model.filterString || ""
     };
+    this.listContainerRef = React.createRef();
   }
   get model(): ListModel {
     return this.props.model;
@@ -28,10 +31,14 @@ export class List extends SurveyElementBase<IListProps, any> {
   getStateElement() {
     return this.model;
   }
+  componentDidMount(): void {
+    super.componentDidMount();
+    this.model.initListContainerHtmlElement(this.listContainerRef.current);
+  }
   renderElement() {
     const items = this.renderItems();
     return (
-      <div className={this.model.cssClasses.root}>
+      <div className={this.model.cssClasses.root} ref={this.listContainerRef}>
         {this.searchElementContent()}
         {this.emptyContent()}
         <ul

diff --git a/src/vue/components/list/list.vue b/src/vue/components/list/list.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-bind:class="model.cssClasses.root">
+  <div v-bind:class="model.cssClasses.root" ref="listContainerElement">
     <div v-bind:class="model.cssClasses.filter" v-if="model.showFilter">
       <div v-bind:class="model.cssClasses.filterIcon">
         <sv-svg-icon :iconName="'icon-search'" :size="'auto'"> </sv-svg-icon>
@@ -70,6 +70,10 @@ export class List extends BaseVue {
   mouseMove(event: any) {
     this.model.onMouseMove(event);
   }
+  mounted() {
+    super.mounted();
+    this.model.initListContainerHtmlElement(this.$refs["listContainerElement"]);
+  }
 }
 
 Vue.component("sv-list", List);