Merge pull request #142 from bigopon/master

fix(infinite-scroll-next): invoke get more if initial amount of item is small
aurelia · Jan 19, 2019 · c6ce1f3 · c6ce1f3
2 parents 48aed90 + fde0c40
commit c6ce1f3
Show file tree

Hide file tree

Showing 14 changed files with 629 additions and 260 deletions.
diff --git a/sample/sample-v-ui-app/src/app.html b/sample/sample-v-ui-app/src/app.html
@@ -6,7 +6,7 @@
     <main as-element='router-view'></main>
   </div>
   <div
-    if.bind="virtualRepeat"
+    if.bind="window.virtualRepeat"
     class="bg-white border shadow-lg"
     style="position: fixed; bottom: 0; right: 0">
     <table>

diff --git a/sample/sample-v-ui-app/src/app.ts b/sample/sample-v-ui-app/src/app.ts
@@ -10,28 +10,32 @@ export class App {
       {
         route: ['', 'phone-list'],
         moduleId: PLATFORM.moduleName('./phone-list'),
-        nav: true,
+        nav: 1,
         title: 'Contacts'
       },
       {
         route: 'issue-138',
         moduleId: PLATFORM.moduleName('./issue-138/sub-app'),
-        nav: true,
+        nav: 2,
         title: 'Issue 138'
+      },
+      {
+        route: 'issue-129',
+        moduleId: PLATFORM.moduleName('./issue-129/sub-app'),
+        nav: 3,
+        title: 'Issue 129'
+      },
+      {
+        route: 'issue-102',
+        moduleId: PLATFORM.moduleName('./issue-102/sub-app'),
+        nav: 4,
+        title: 'Issue 102'
       }
     ]);
 
     this.router = router;
     window['app'] = this;
   }
 
-  bind() {
-    this.check();
-  }
-
-  check() {
-    setInterval(() => {
-      this.virtualRepeat = window['virtualRepeat'];
-    }, 1500);
-  }
+  window = window;
 }
diff --git a/sample/sample-v-ui-app/src/issue-102/sub-app.html b/sample/sample-v-ui-app/src/issue-102/sub-app.html
@@ -0,0 +1,27 @@
+<template>
+  <div class="">
+    <div class="d-flex justify-content-around">
+      <table class="table table-striped table-sm">
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>First Name</th>
+            <th>Last Name</th>
+            <th>Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr virtual-repeat.for="person of people" infinite-scroll-next.call="push30($scrollContext)">
+            <td>${$index}</td>
+            <td>${person.fname}</td>
+            <td>${person.lname}</td>
+            <td>
+              <button type="button" class="btn btn-link"><i class="far fa-edit"></i></button>
+              <button type="button" class="btn btn-link"><i class="far fa-trash-alt"></i></button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
diff --git a/sample/sample-v-ui-app/src/issue-102/sub-app.ts b/sample/sample-v-ui-app/src/issue-102/sub-app.ts
@@ -0,0 +1,47 @@
+interface IScrollContext {
+  isAtTop: boolean;
+  isAtBottom: boolean;
+  topIndex: number;
+}
+
+export interface Person {
+  fname: string;
+  lname: string;
+}
+
+const fNames = [
+  // tslint:disable-next-line:max-line-length
+  'Ford', 'Arthur', 'Trillian', 'Sneezy', 'Sleepy', 'Dopey', 'Doc', 'Happy', 'Bashful', 'Grumpy', 'Mufasa', 'Sarabi', 'Simba', 'Nala', 'Kiara', 'Kovu', 'Timon', 'Pumbaa', 'Rafiki', 'Shenzi'
+];
+const lNames = [
+  // tslint:disable-next-line:max-line-length
+  'Prefect', 'Dent', 'Astra', 'Adams', 'Baker', 'Clark', 'Davis', 'Evans', 'Frank', 'Ghosh', 'Hills', 'Irwin', 'Jones', 'Klein', 'Lopez', 'Mason', 'Nalty', 'Ochoa', 'Patel', 'Quinn', 'Reily', 'Smith', 'Trott', 'Usman', 'Valdo', 'White', 'Xiang', 'Yakub', 'Zafar'
+];
+export class App {
+  private people: Person[];
+
+  constructor() {
+    this.people = [
+      { fname: fNames[0], lname: lNames[0] },
+      { fname: fNames[1], lname: lNames[1] },
+      { fname: fNames[2], lname: lNames[2] }
+    ];
+    this.push30(undefined, 0);
+  }
+
+  public push30(scrollContext?: IScrollContext, count = 30) {
+    console.log('Issue-102 getting more...');
+    // if (scrollContext) {
+    //   console.log('Issue-129 getting more:', JSON.stringify(scrollContext, undefined, 2));
+    // }
+    if (!scrollContext || scrollContext.isAtBottom) {
+      for (let i = 0; i < count; i++) {
+        this.people.push({
+          fname: fNames[Math.floor(Math.random() * fNames.length)],
+          lname: lNames[Math.floor(Math.random() * lNames.length)]
+        });
+      }
+    }
+    console.log('Population size:', this.people.length);
+  }
+}
diff --git a/sample/sample-v-ui-app/src/issue-129/sub-app.html b/sample/sample-v-ui-app/src/issue-129/sub-app.html
@@ -0,0 +1,27 @@
+<template>
+  <div class="">
+    <div class="d-flex justify-content-around">
+      <table class="table table-striped table-sm">
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>First Name</th>
+            <th>Last Name</th>
+            <th>Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr virtual-repeat.for="person of people" infinite-scroll-next.call="push30($scrollContext)">
+            <td>${$index}</td>
+            <td>${person.fname}</td>
+            <td>${person.lname}</td>
+            <td>
+              <button type="button" class="btn btn-link"><i class="far fa-edit"></i></button>
+              <button type="button" class="btn btn-link"><i class="far fa-trash-alt"></i></button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
diff --git a/sample/sample-v-ui-app/src/issue-129/sub-app.ts b/sample/sample-v-ui-app/src/issue-129/sub-app.ts
@@ -0,0 +1,47 @@
+interface IScrollContext {
+  isAtTop: boolean;
+  isAtBottom: boolean;
+  topIndex: number;
+}
+
+export interface Person {
+  fname: string;
+  lname: string;
+}
+
+const fNames = [
+  // tslint:disable-next-line:max-line-length
+  'Ford', 'Arthur', 'Trillian', 'Sneezy', 'Sleepy', 'Dopey', 'Doc', 'Happy', 'Bashful', 'Grumpy', 'Mufasa', 'Sarabi', 'Simba', 'Nala', 'Kiara', 'Kovu', 'Timon', 'Pumbaa', 'Rafiki', 'Shenzi'
+];
+const lNames = [
+  // tslint:disable-next-line:max-line-length
+  'Prefect', 'Dent', 'Astra', 'Adams', 'Baker', 'Clark', 'Davis', 'Evans', 'Frank', 'Ghosh', 'Hills', 'Irwin', 'Jones', 'Klein', 'Lopez', 'Mason', 'Nalty', 'Ochoa', 'Patel', 'Quinn', 'Reily', 'Smith', 'Trott', 'Usman', 'Valdo', 'White', 'Xiang', 'Yakub', 'Zafar'
+];
+export class App {
+  private people: Person[];
+
+  constructor() {
+    this.people = [
+      { fname: fNames[0], lname: lNames[0] },
+      { fname: fNames[1], lname: lNames[1] },
+      { fname: fNames[2], lname: lNames[2] }
+    ];
+    this.push30(undefined, 5);
+  }
+
+  public push30(scrollContext?: IScrollContext, count = 30) {
+    console.log('Issue-129 getting more...');
+    // if (scrollContext) {
+    //   console.log('Issue-129 getting more:', JSON.stringify(scrollContext, undefined, 2));
+    // }
+    if (!scrollContext || scrollContext.isAtBottom) {
+      for (let i = 0; i < count; i++) {
+        this.people.push({
+          fname: fNames[Math.floor(Math.random() * fNames.length)],
+          lname: lNames[Math.floor(Math.random() * lNames.length)]
+        });
+      }
+    }
+    console.log('Population size:', this.people.length);
+  }
+}
diff --git a/src/array-virtual-repeat-strategy.ts b/src/array-virtual-repeat-strategy.ts
@@ -1,6 +1,6 @@
 import { ArrayRepeatStrategy, createFullOverrideContext } from 'aurelia-templating-resources';
 import { updateVirtualOverrideContexts, rebindAndMoveView, getElementDistanceToBottomViewPort } from './utilities';
-import { IVirtualRepeat, IVirtualRepeatStrategy } from './interfaces';
+import { IVirtualRepeat, IVirtualRepeatStrategy, IView } from './interfaces';
 import { ViewSlot } from 'aurelia-templating';
 import { mergeSplice } from 'aurelia-binding';
 
@@ -14,6 +14,7 @@ export class ArrayVirtualRepeatStrategy extends ArrayRepeatStrategy implements I
     repeat.addView(overrideContext.bindingContext, overrideContext);
   }
   /**
+   * @override
   * Handle the repeat's collection instance changing.
   * @param repeat The repeater instance.
   * @param items The new array instance.
@@ -23,6 +24,7 @@ export class ArrayVirtualRepeatStrategy extends ArrayRepeatStrategy implements I
   }
 
   /**
+   * @override
   * Handle the repeat's collection instance mutating.
   * @param repeat The repeat instance.
   * @param array The modified array.
@@ -170,14 +172,15 @@ export class ArrayVirtualRepeatStrategy extends ArrayRepeatStrategy implements I
     return undefined;
   }
 
-  _removeViewAt(repeat: IVirtualRepeat, collectionIndex: number, returnToCache: boolean, j: number, removedLength: number): any {
-    let viewOrPromise;
-    let view;
+  /**@internal */
+  _removeViewAt(repeat: IVirtualRepeat, collectionIndex: number, returnToCache: boolean, removeIndex: number, removedLength: number): any {
+    let viewOrPromise: IView | Promise<IView>;
+    let view: IView;
     let viewSlot = repeat.viewSlot;
     let viewCount = repeat.viewCount();
-    let viewAddIndex;
+    let viewAddIndex: number;
     let removeMoreThanInDom = removedLength > viewCount;
-    if (repeat._viewsLength <= j) {
+    if (repeat._viewsLength <= removeIndex) {
       repeat._bottomBufferHeight = repeat._bottomBufferHeight - (repeat.itemHeight);
       repeat._adjustBufferHeights();
       return;
@@ -196,7 +199,7 @@ export class ArrayVirtualRepeatStrategy extends ArrayRepeatStrategy implements I
             let lastViewItem = repeat._getLastViewItem();
             collectionAddIndex = repeat.items.indexOf(lastViewItem) + 1;
           } else {
-            collectionAddIndex = j;
+            collectionAddIndex = removeIndex;
           }
           repeat._bottomBufferHeight = repeat._bottomBufferHeight - (repeat.itemHeight);
         } else if (repeat._topBufferHeight > 0) {
@@ -207,7 +210,7 @@ export class ArrayVirtualRepeatStrategy extends ArrayRepeatStrategy implements I
         let data = repeat.items[collectionAddIndex];
         if (data) {
           let overrideContext = createFullOverrideContext(repeat, data, collectionAddIndex, repeat.items.length);
-          view = repeat.viewFactory.create();
+          view = repeat.viewFactory.create() as IView;
           view.bind(overrideContext.bindingContext, overrideContext);
         }
       }
@@ -233,16 +236,22 @@ export class ArrayVirtualRepeatStrategy extends ArrayRepeatStrategy implements I
     repeat._adjustBufferHeights();
   }
 
+  /**@internal */
   _isIndexBeforeViewSlot(repeat: IVirtualRepeat, viewSlot: ViewSlot, index: number): boolean {
     let viewIndex = this._getViewIndex(repeat, viewSlot, index);
     return viewIndex < 0;
   }
 
+  /**@internal */
   _isIndexAfterViewSlot(repeat: IVirtualRepeat, viewSlot: ViewSlot, index: number): boolean {
     let viewIndex = this._getViewIndex(repeat, viewSlot, index);
     return viewIndex > repeat._viewsLength - 1;
   }
 
+  /**
+   * @internal
+   * Calculate real index of a given index, based on existing buffer height and item height
+   */
   _getViewIndex(repeat: IVirtualRepeat, viewSlot: ViewSlot, index: number): number {
     if (repeat.viewCount() === 0) {
       return -1;
@@ -252,6 +261,7 @@ export class ArrayVirtualRepeatStrategy extends ArrayRepeatStrategy implements I
     return index - topBufferItems;
   }
 
+  /**@internal */
   _handleAddedSplices(repeat: IVirtualRepeat, array: Array<any>, splices: any): void {
     let arrayLength = array.length;
     let viewSlot = repeat.viewSlot;

diff --git a/src/aurelia-ui-virtualization.ts b/src/aurelia-ui-virtualization.ts
@@ -12,3 +12,7 @@ export {
   VirtualRepeat,
   InfiniteScrollNext
 };
+
+export {
+  IScrollNextScrollContext
+} from './interfaces';
diff --git a/src/infinite-scroll-next.ts b/src/infinite-scroll-next.ts
@@ -1,5 +1,3 @@
-import { OverrideContext, Scope } from 'aurelia-binding';
-
 // Placeholder attribute to prohibit use of this attribute name in other places
 export class InfiniteScrollNext {
 
@@ -10,15 +8,4 @@ export class InfiniteScrollNext {
       name: 'infinite-scroll-next'
     };
   }
-
-  /**@internal */
-  scope: Scope;
-
-  bind(bindingContext: any, overrideContext: OverrideContext): void {
-    this.scope = { bindingContext, overrideContext };
-  }
-
-  unbind() {
-    this.scope = undefined;
-  }
 }