feat(infinite-scroll): add waitFor method to InfiniteScroll

This allows to use `$event.waitFor(request())` inside template within `infinite` event. So that, user components do not depend on InifiniteScroll inside javascript.

Author: stalniy

src/components/infinite-scroll/infinite-scroll.ts

@@ -57,6 +57,52 @@ import { DomController } from '../../platform/dom-controller';
  * }
  * ```
  *
+ * ## `waitFor` method of InfiniteScroll
+ *
+ * In case if your async operation returns promise you can utilize
+ * `waitFor` method inside your template.
+ *
+ * ```html
+ * <ion-content>
+ *
+ *  <ion-list>
+ *    <ion-item *ngFor="let item of items">{{item}}</ion-item>
+ *  </ion-list>
+ *
+ *  <ion-infinite-scroll (ionInfinite)="$event.waitFor(doInfinite())">
+ *    <ion-infinite-scroll-content></ion-infinite-scroll-content>
+ *  </ion-infinite-scroll>
+ *
+ * </ion-content>
+ * ```
+ *
+ * ```ts
+ * @Component({...})
+ * export class NewsFeedPage {
+ *   items = [];
+ *
+ *   constructor() {
+ *     for (var i = 0; i < 30; i++) {
+ *       this.items.push( this.items.length );
+ *     }
+ *   }
+ *
+ *   doInfinite(): Promise<any> {
+ *     console.log('Begin async operation');
+ *
+ *     return new Promise((resolve) => {
+ *       setTimeout(() => {
+ *         for (var i = 0; i < 30; i++) {
+ *           this.items.push( this.items.length );
+ *         }
+ *
+ *         console.log('Async operation has ended');
+ *         resolve();
+ *       }, 500);
+ *     })
+ *   }
+ * }
+ * ```
  *
  * ## Infinite Scroll Content
  *
@@ -221,7 +267,18 @@ export class InfiniteScroll {
    * to `enabled`.
    */
   complete() {
-    this.state = STATE_ENABLED;
+    if (this.state === STATE_LOADING) {
+      this.state = STATE_ENABLED;
+    }
+  }
+
+  /**
+  * Pass a promise inside `waitFor()` within the `infinite` output event handler in order to
+  * change state of infiniteScroll to "complete"
+  */
+  waitFor(action: Promise) {
+    const enable = this.complete.bind(this);
+    action.then(enable, enable);
   }
 
   /**

src/components/infinite-scroll/test/basic/app.module.ts

@@ -16,16 +16,15 @@ export class E2EPage1 {
     }
   }
 
-  doInfinite(infiniteScroll: InfiniteScroll) {
+  doInfinite(): Promise<any> {
     console.log('Begin async operation');
 
-    getAsyncData().then(newData => {
+    return getAsyncData().then(newData => {
       for (var i = 0; i < newData.length; i++) {
         this.items.push( this.items.length );
       }
 
       console.log('Finished receiving data, async operation complete');
-      infiniteScroll.complete();
 
       if (this.items.length > 90) {
         this.enabled = false;

src/components/infinite-scroll/test/basic/main.html

@@ -23,7 +23,7 @@
     </button>
   </ion-list>
 
-  <ion-infinite-scroll (ionInfinite)="doInfinite($event)" [enabled]="enabled" threshold="100px">
+  <ion-infinite-scroll (ionInfinite)="$event.waitFor(doInfinite())" [enabled]="enabled" threshold="100px">
     <ion-infinite-scroll-content
       loadingSpinner="bubbles"
       loadingText="Loading more data...">