Contrib > Infinite scroll component

skyux-spa-visual-tests/src/app/infinite-scroll/index.html

@@ -0,0 +1 @@
+<infinite-scroll-visual></infinite-scroll-visual>

skyux-spa-visual-tests/src/app/infinite-scroll/infinite-scroll-visual.component.html

@@ -0,0 +1,74 @@
+<div id="screenshot-infinite-scroll">
+  <sky-repeater>
+    <sky-repeater-item>
+      <sky-repeater-item-title>
+        Title 1
+      </sky-repeater-item-title>
+      <sky-repeater-item-content>
+        Content 1
+      </sky-repeater-item-content>
+    </sky-repeater-item>
+    <sky-repeater-item>
+      <sky-repeater-item-title>
+        Title 2
+      </sky-repeater-item-title>
+      <sky-repeater-item-content>
+        Content 2
+      </sky-repeater-item-content>
+    </sky-repeater-item>
+  </sky-repeater>
+  <sky-infinite-scroll
+    [enabled]="true"
+  >
+  </sky-infinite-scroll>
+</div>
+
+<div id="screenshot-infinite-scroll-nobutton">
+  <sky-repeater>
+    <sky-repeater-item>
+      <sky-repeater-item-title>
+        Title 1
+      </sky-repeater-item-title>
+      <sky-repeater-item-content>
+        Content 1
+      </sky-repeater-item-content>
+    </sky-repeater-item>
+    <sky-repeater-item>
+      <sky-repeater-item-title>
+        Title 2
+      </sky-repeater-item-title>
+      <sky-repeater-item-content>
+        Content 2
+      </sky-repeater-item-content>
+    </sky-repeater-item>
+  </sky-repeater>
+  <sky-infinite-scroll
+    [enabled]="false"
+  >
+  </sky-infinite-scroll>
+</div>
+
+<div id="screenshot-infinite-scroll-wait">
+  <sky-repeater>
+    <sky-repeater-item>
+      <sky-repeater-item-title>
+        Title 1
+      </sky-repeater-item-title>
+      <sky-repeater-item-content>
+        Content 1
+      </sky-repeater-item-content>
+    </sky-repeater-item>
+    <sky-repeater-item>
+      <sky-repeater-item-title>
+        Title 2
+      </sky-repeater-item-title>
+      <sky-repeater-item-content>
+        Content 2
+      </sky-repeater-item-content>
+    </sky-repeater-item>
+  </sky-repeater>
+  <sky-infinite-scroll
+    [enabled]="true"
+  >
+  </sky-infinite-scroll>
+</div>

skyux-spa-visual-tests/src/app/infinite-scroll/infinite-scroll.component.ts

@@ -0,0 +1,9 @@
+import {
+  Component
+} from '@angular/core';
+
+@Component({
+  selector: 'infinite-scroll-visual',
+  templateUrl: './infinite-scroll-visual.component.html'
+})
+export class InfiniteScrollVisualComponent { }

skyux-spa-visual-tests/src/app/infinite-scroll/infinite-scroll.visual-spec.ts

@@ -0,0 +1,44 @@
+// #region imports
+import {
+  SkyVisualTest
+} from '../../../config/utils/visual-test-commands';
+
+import {
+  by,
+  element
+} from 'protractor';
+// #endregion
+
+describe('Infinite Scroll', () => {
+  it('should match previous infinite scroll screenshot', () => {
+    return SkyVisualTest
+      .setupTest('infinite-scroll')
+      .then(() => {
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'infinite-scroll',
+          selector: '#screenshot-infinite-scroll'
+        });
+      });
+  });
+
+  it('should match previous infinite scroll screenshot when hasMore is false', () => {
+    return SkyVisualTest.setupTest('infinite-scroll')
+    .then(() => {
+      return SkyVisualTest.compareScreenshot({
+        screenshotName: 'infinite-scroll-nobutton',
+        selector: '#screenshot-infinite-scroll-nobutton'
+      });
+    });
+  });
+
+  it('should match previous infinite scroll screenshot in wait mode', () => {
+    return SkyVisualTest.setupTest('infinite-scroll')
+    .then(() => {
+      element(by.css('.sky-btn')).click();
+      return SkyVisualTest.compareScreenshot({
+        screenshotName: 'infinite-scroll-wait',
+        selector: '#screenshot-infinite-scroll-wait'
+      });
+    });
+  });
+});

src/core.ts

@@ -34,6 +34,7 @@ import { SkyFluidGridModule } from './modules/fluid-grid/fluid-grid.module';
 import { SkyFlyoutModule } from './modules/flyout/flyout.module';
 import { SkyGridModule } from './modules/grid';
 import { SkyHelpInlineModule } from './modules/help-inline';
+import { SkyInfiniteScrollModule } from './modules/infinite-scroll';
 import { SkyKeyInfoModule } from './modules/key-info';
 import { SkyLabelModule } from './modules/label';
 import { SkyLinkRecordsModule } from './modules/link-records';
@@ -95,6 +96,7 @@ import { SkyWaitModule } from './modules/wait';
     SkyFlyoutModule,
     SkyGridModule,
     SkyHelpInlineModule,
+    SkyInfiniteScrollModule,
     SkyKeyInfoModule,
     SkyLabelModule,
     SkyLinkRecordsModule,
@@ -159,6 +161,7 @@ export * from './modules/flyout';
 export * from './modules/format';
 export * from './modules/grid';
 export * from './modules/help-inline';
+export * from './modules/infinite-scroll';
 export * from './modules/key-info';
 export * from './modules/label';
 export * from './modules/link-records';

src/demo.ts

@@ -38,6 +38,7 @@ import {
   SkyFlyoutDemoComponent,
   SkyGridDemoComponent,
   SkyHelpInlineDemoComponent,
+  SkyInfiniteScrollDemoComponent,
   SkyKeyInfoDemoComponent,
   SkyLabelDemoComponent,
   SkyLinkRecordsDemoComponent,
@@ -119,6 +120,7 @@ const components = [
   SkyFlyoutDemoInternalComponent,
   SkyGridDemoComponent,
   SkyHelpInlineDemoComponent,
+  SkyInfiniteScrollDemoComponent,
   SkyKeyInfoDemoComponent,
   SkyLabelDemoComponent,
   SkyLinkRecordsDemoComponent,

src/demos/demo.service.ts

@@ -24,6 +24,7 @@ import {
   SkyFlyoutDemoComponent,
   SkyGridDemoComponent,
   SkyHelpInlineDemoComponent,
+  SkyInfiniteScrollDemoComponent,
   SkyKeyInfoDemoComponent,
   SkyLabelDemoComponent,
   SkyLinkRecordsDemoComponent,
@@ -450,6 +451,26 @@ export class SkyDemoService {
         }
       ]
     },
+    {
+      name: 'Infinite scroll',
+      component: SkyInfiniteScrollDemoComponent,
+      files: [
+        {
+          name: 'infinite-scroll-demo.component.html',
+          fileContents: require('!!raw-loader!./infinite-scroll/infinite-scroll-demo.component.html')
+        },
+        {
+          name: 'infinite-scroll-demo.component.scss',
+          fileContents: require('!!raw-loader!./infinite-scroll/infinite-scroll-demo.component.scss')
+        },
+        {
+          name: 'infinite-scroll-demo.component.ts',
+          fileContents: require('!!raw-loader!./infinite-scroll/infinite-scroll-demo.component.ts'),
+          componentName: 'SkyInfiniteScrollDemoComponent',
+          bootstrapSelector: 'sky-infinite-scroll-demo'
+        }
+      ]
+    },
     {
       name: 'Key info',
       component: SkyKeyInfoDemoComponent,

src/demos/index.ts

@@ -17,6 +17,7 @@ export * from './fluid-grid';
 export * from './flyout';
 export * from './grid';
 export * from './help-inline';
+export * from './infinite-scroll';
 export * from './key-info';
 export * from './label';
 export * from './link-records';

src/demos/infinite-scroll/index.ts

@@ -0,0 +1 @@
+export * from './infinite-scroll-demo.component';

src/demos/infinite-scroll/infinite-scroll-demo.component.html

@@ -0,0 +1,16 @@
+<div class="sky-infinite-scroll-demo">
+  <sky-repeater>
+    <sky-repeater-item *ngFor="let item of data">
+      <sky-repeater-item-title>
+        <div class="pull-left">
+          {{ item.name }}
+        </div>
+      </sky-repeater-item-title>
+    </sky-repeater-item>
+  </sky-repeater>
+  <sky-infinite-scroll
+    [enabled]="hasMore"
+    (scrollEnd)="onScrollEnd()"
+  >
+  </sky-infinite-scroll>
+</div>

src/demos/infinite-scroll/infinite-scroll-demo.component.scss

@@ -0,0 +1,5 @@
+.sky-infinite-scroll-demo {
+  overflow-y: auto;
+  max-height: 400px;
+  position: relative;
+}

src/demos/infinite-scroll/infinite-scroll-demo.component.ts

@@ -0,0 +1,53 @@
+import {
+  Component,
+  OnInit
+} from '@angular/core';
+
+let nextId = 0;
+
+@Component({
+  selector: 'sky-infinite-scroll-demo',
+  templateUrl: './infinite-scroll-demo.component.html',
+  styleUrls: ['./infinite-scroll-demo.component.scss']
+})
+export class SkyInfiniteScrollDemoComponent implements OnInit {
+  public data: any[] = [];
+  public hasMore = true;
+
+  public ngOnInit(): void {
+    this.addData();
+  }
+
+  public onScrollEnd(): void {
+    if (this.hasMore) {
+      this.addData();
+    }
+  }
+
+  private addData(): void {
+    this.mockRemote().then((result: any) => {
+      this.data = this.data.concat(result.data);
+      this.hasMore = result.hasMore;
+    });
+  }
+
+  private mockRemote(): Promise<any> {
+    const data: any[] = [];
+
+    for (let i = 0; i < 8; i++) {
+      data.push({
+        name: `Item #${++nextId}`
+      });
+    }
+
+    // Simulate async request.
+    return new Promise((resolve: any) => {
+      setTimeout(() => {
+        resolve({
+          data,
+          hasMore: (nextId < 50)
+        });
+      }, 1000);
+    });
+  }
+}

src/locales/resources_en_US.json

@@ -531,6 +531,10 @@
     "_description": "The title for the help button.",
     "message": "Show help content"
   },
+  "infinite_scroll_load_more_button": {
+    "_description": "Text for loading more in the infinite scroll button",
+    "message": "Load more"
+  },
   "link_records_item_info_match": {
     "_description": "",
     "message": "A possible match has been identified for this record. Would you like to link it?"

src/modules/infinite-scroll/fixtures/index.ts

@@ -0,0 +1,2 @@
+export * from './infinite-scroll-fixtures.module';
+export * from './infinite-scroll.component.fixture';

src/modules/infinite-scroll/fixtures/infinite-scroll-fixtures.module.ts

@@ -0,0 +1,38 @@
+// #region imports
+import {
+  NgModule
+} from '@angular/core';
+
+import {
+  CommonModule
+} from '@angular/common';
+
+import {
+  SkyWindowRefService
+} from '../../window';
+
+import {
+  SkyInfiniteScrollModule
+} from '../infinite-scroll.module';
+
+import {
+  SkyInfiniteScrollTestComponent
+} from './infinite-scroll.component.fixture';
+// #endregion
+
+@NgModule({
+  declarations: [
+    SkyInfiniteScrollTestComponent
+  ],
+  imports: [
+    CommonModule,
+    SkyInfiniteScrollModule
+  ],
+  exports: [
+    SkyInfiniteScrollTestComponent
+  ],
+  providers: [
+    SkyWindowRefService
+  ]
+})
+export class SkyInfiniteScrollFixturesModule { }

src/modules/infinite-scroll/fixtures/infinite-scroll.component.fixture.html

@@ -0,0 +1,14 @@
+<div #wrapper>
+  <ul>
+    <li *ngFor="let item of items">
+      {{ item.name }}
+    </li>
+  </ul>
+
+  <sky-infinite-scroll
+    [enabled]="enabled"
+    (scrollEnd)="onScrollEnd()"
+    #infiniteScrollComponent
+  >
+  </sky-infinite-scroll>
+</div>