work for #4780 : lazy-loading

surveyjs · Oct 10, 2022 · 9d260b6 · 9d260b6
1 parent 7da4564
commit 9d260b6
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 30 deletions.
diff --git a/packages/survey-angular-ui/src/components/list/list-item.component.ts b/packages/survey-angular-ui/src/components/list/list-item.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from "@angular/core";
+import { AfterViewInit, Component, Input } from "@angular/core";
 import { ListModel, Action } from "survey-core";
 import { BaseAngular } from "../../base-angular";
 import { AngularComponentFactory } from "../../component-factory";
@@ -9,7 +9,7 @@ import { AngularComponentFactory } from "../../component-factory";
   styleUrls: ["../../hide-host.scss"],
 })
 
-export class ListItemComponent extends BaseAngular {
+export class ListItemComponent extends BaseAngular implements AfterViewInit {
   @Input() element: any;
   @Input() model!: Action;
   @Input() listModel!: ListModel;
@@ -34,6 +34,10 @@ export class ListItemComponent extends BaseAngular {
   getModel() {
     return this.model;
   }
+
+  ngAfterViewInit(): void {
+    this.listModel.onLastItemRended(this.model);
+  }
 }
 
 AngularComponentFactory.Instance.registerComponent("sv-list-item", ListItemComponent);
diff --git a/src/dropdownListModel.ts b/src/dropdownListModel.ts
@@ -112,6 +112,11 @@ export class DropdownListModel extends Base {
     }
     const res = new ListModel(visibleItems, _onSelectionChanged, true, this.question.selectedItem);
     res.locOwner = this.question;
+    res.onPropertyChanged.add((sender: any, options: any) => {
+      if (options.name == "hasVerticalScroller") {
+        this.hasScroll = options.newValue;
+      }
+    });
     return res;
   }
   protected resetFilterString(): void {
@@ -137,6 +142,12 @@ export class DropdownListModel extends Base {
       target.onSetFilterString();
     }
   }) filterString: string;
+  @property({
+    defaultValue: false,
+    onSet: (newVal: boolean, target: DropdownListModel) => {
+      // addEventListener
+    }
+  }) hasScroll: boolean;
 
   constructor(protected question: Question, protected onSelectionChanged?: (item: IAction, ...params: any[]) => void) {
     super();
@@ -220,7 +231,10 @@ export class DropdownListModel extends Base {
       doKey2ClickUp(event, { processEsc: false, disableTabStop: this.question.isInputReadOnly });
     }
   }
-
+  onScroll(event: Event):void {
+    const target = event.target;
+    // load next items
+  }
   onBlur(event: any): void {
     this.resetFilterString();
     this._popupModel.isVisible = false;
@@ -229,21 +243,5 @@ export class DropdownListModel extends Base {
   }
   scrollToFocusedItem(): void {
     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/knockout/components/list/list.html b/src/knockout/components/list/list.html
@@ -13,7 +13,7 @@
   </div>
   <ul role="listbox"
     data-bind="css: model.cssClasses.itemsContainer, event: { mousedown: function (data, e) { e.preventDefault(); }, keydown: function(data, e) { $data.model.onKeyDown(event); return true; }, mousemove: function(data, e) { $data.model.onMouseMove(event); return true; } }">
-    <!--ko foreach: model.renderedActions -->
+    <!-- ko template: { foreach: model.renderedActions, afterRender: $data.afterItemRender } -->
     <!-- ko component: { name: 'sv-list-item', params: { item: $data, model: $parent.model } } -->
     <!-- /ko -->
     <!-- /ko -->

diff --git a/src/knockout/components/list/list.ts b/src/knockout/components/list/list.ts
@@ -1,5 +1,5 @@
 import * as ko from "knockout";
-import { ListModel } from "survey-core";
+import { Action, ListModel } from "survey-core";
 import { ImplementorBase } from "../../kobase";
 import { ActionContainerImplementor } from "../action-bar/action-bar";
 
@@ -15,7 +15,14 @@ ko.components.register("sv-list", {
       const model: ListModel = params.model;
       const _implementor: ImplementorBase = new ActionContainerImplementor(model);
       model.initListContainerHtmlElement(componentInfo.element);
-      return { model: model, dispose: () => { _implementor.dispose(); } };
+      return {
+        model: model,
+        dispose: () => { _implementor.dispose(); },
+        afterItemRender: (_: any, action: Action) => {
+          !!ko.tasks && ko.tasks.runEarly();
+          model.onLastItemRended(action);
+        }
+      };
     },
   },
   template: template,

diff --git a/src/list.ts b/src/list.ts
@@ -148,6 +148,9 @@ export class ListModel extends ActionContainer {
   public get emptyMessage(): string {
     return this.getLocalizationString("emptyMessage");
   }
+  public get scrollableContainer(): HTMLElement {
+    return this.listContainerHtmlElement.querySelector("." + this.getDefaultCssClasses().itemsContainer);
+  }
 
   public goToItems(event: KeyboardEvent): void {
     if (event.key === "ArrowDown" || event.keyCode === 40) {
@@ -224,21 +227,19 @@ export class ListModel extends ActionContainer {
   public initListContainerHtmlElement(htmlElement: HTMLElement): void {
     this.listContainerHtmlElement = htmlElement;
   }
+  public onLastItemRended(item: Action): void {
+    if(item === this.actions[this.actions.length - 1] && !!this.listContainerHtmlElement) {
+      this.hasVerticalScroller = ElementHelper.hasVerticalScroller(this.scrollableContainer);
+    }
+  }
   public scrollToFocusedItem(): void {
     setTimeout(() => {
       if(!this.listContainerHtmlElement) return;
 
-      const item = this.listContainerHtmlElement.querySelector("." + defaultListCss.itemFocused);
+      const item = this.listContainerHtmlElement.querySelector("." + this.getDefaultCssClasses().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/react/components/list/list-item.tsx b/src/react/components/list/list-item.tsx
@@ -77,7 +77,11 @@ export class ListItem extends SurveyElementBase<IListItemProps, any> {
       </li>
     );
   }
+  componentDidMount() {
+    super.componentDidMount();
 
+    this.model.onLastItemRended(this.item);
+  }
 }
 
 ReactElementFactory.Instance.registerElement("sv-list-item", (props) => {

diff --git a/src/vue/components/list/list-item.vue b/src/vue/components/list/list-item.vue
@@ -56,6 +56,9 @@ export class ListItem extends BaseVue {
     this.model.onItemClick(this.item as any);
     event.stopPropagation();
   }
+  protected onMounted() {
+    this.model.onLastItemRended(<any>this.item);
+  }
 }
 
 Vue.component("sv-list-item", ListItem);