feat(virtual-scroll): fixed size virtual scroll (#9316)

* feat(virtual-scroll): fixed size virtual scroll

* address some comments

* change VirtualScrollStrategy interface a bit

* address some more comments

* fix lint & build

Author: mmalerba

.github/CODEOWNERS

@@ -1,6 +1,7 @@
 # Angular Material components
 /src/lib/*                                         @jelbourn
 /src/lib/autocomplete/**                           @kara @crisbeto
+/src/lib/badge/**                                  @amcdnl
 /src/lib/bottom-sheet/**                           @jelbourn @crisbeto
 /src/lib/button-toggle/**                          @tinayuangao
 /src/lib/button/**                                 @tinayuangao
@@ -32,7 +33,6 @@
 /src/lib/tabs/**                                   @andrewseguin
 /src/lib/toolbar/**                                @devversion
 /src/lib/tooltip/**                                @andrewseguin
-/src/lib/badge/**                                  @amcdnl
 /src/lib/tree/**                                   @tinayuangao
 
 # Angular Material core
@@ -42,10 +42,10 @@
 /src/lib/core/datetime/**                          @mmalerba
 /src/lib/core/error/**                             @crisbeto @mmalerba
 /src/lib/core/gestures/**                          @jelbourn
+/src/lib/core/label/**                             @kara @mmalerba
 /src/lib/core/line/**                              @jelbourn
 /src/lib/core/option/**                            @kara @crisbeto
 /src/lib/core/placeholder/**                       @kara @mmalerba
-/src/lib/core/label/**                             @kara @mmalerba
 /src/lib/core/ripple/**                            @devversion
 /src/lib/core/selection/**                         @tinayuangao @jelbourn
 /src/lib/core/selection/pseudo*/**                 @crisbeto @jelbourn
@@ -93,8 +93,9 @@
 /src/demo-app/*                                    @jelbourn
 /src/demo-app/a11y/**                              @tinayuangao
 /src/demo-app/autocomplete/**                      @kara @crisbeto
-/src/demo-app/bottom-sheet/**                      @jelbourn @crisbeto
+/src/demo-app/badge/**                             @amcdnl
 /src/demo-app/baseline/**                          @mmalerba
+/src/demo-app/bottom-sheet/**                      @jelbourn @crisbeto
 /src/demo-app/button-toggle/**                     @tinayuangao
 /src/demo-app/button/**                            @tinayuangao
 /src/demo-app/card/**                              @jelbourn
@@ -135,7 +136,7 @@
 /src/demo-app/tooltip/**                           @andrewseguin
 /src/demo-app/tree/**                              @tinayuangao
 /src/demo-app/typography/**                        @crisbeto
-/src/demo-app/badge/**                             @amcdnl
+/src/demo-app/virtual-scroll/**                    @mmalerba
 
 # E2E app
 /e2e/*                                             @jelbourn

src/cdk/collections/collection-viewer.ts

@@ -8,6 +8,11 @@
 
 import {Observable} from 'rxjs/Observable';
 
+
+/** Represents a range of numbers with a specified start and end. */
+export type Range = {start: number, end: number};
+
+
 /**
  * Interface for any component that provides a view of some data collection and wants to provide
  * information regarding the view and any changes made.
@@ -17,5 +22,5 @@ export interface CollectionViewer {
    * A stream that emits whenever the `CollectionViewer` starts looking at a new portion of the
    * data. The `start` index is inclusive, while the `end` is exclusive.
    */
-  viewChange: Observable<{start: number, end: number}>;
+  viewChange: Observable<Range>;
 }

src/cdk/collections/data-source.ts

@@ -9,6 +9,7 @@
 import {Observable} from 'rxjs/Observable';
 import {CollectionViewer} from './collection-viewer';
 
+
 export abstract class DataSource<T> {
   /**
    * Connects a collection viewer (such as a data-table) to this data source. Note that

src/cdk/collections/public-api.ts

@@ -9,6 +9,7 @@
 export * from './collection-viewer';
 export * from './data-source';
 export * from './selection';
+export * from './static-array-data-source';
 export {
   UniqueSelectionDispatcher,
   UniqueSelectionDispatcherListener,

src/cdk/collections/static-array-data-source.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Observable} from 'rxjs/Observable';
+import {of as observableOf} from 'rxjs/observable/of';
+import {DataSource} from './data-source';
+
+
+/** DataSource wrapper for a native array. */
+export class StaticArrayDataSource<T> implements DataSource<T> {
+  constructor(private _data: T[]) {}
+
+  connect(): Observable<T[]> {
+    return observableOf(this._data);
+  }
+
+  disconnect() {}
+}

src/cdk/scrolling/BUILD.bazel

@@ -1,13 +1,18 @@
 package(default_visibility=["//visibility:public"])
 load("@angular//:index.bzl", "ng_module")
 load("@build_bazel_rules_typescript//:defs.bzl", "ts_library", "ts_web_test")
+load("@io_bazel_rules_sass//sass:sass.bzl", "sass_binary")
 
 
 ng_module(
   name = "scrolling",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/cdk/scrolling",
+    assets = [
+      ":virtual_scroll_viewport_css",
+    ],
   deps = [
+    "//src/cdk/collections",
     "//src/cdk/platform",
     "@rxjs",
   ],
@@ -28,9 +33,7 @@ ts_library(
 
 ts_web_test(
   name = "unit_tests",
-  bootstrap = [
-    "//:web_test_bootstrap_scripts",
-  ],
+  bootstrap = ["//:web_test_bootstrap_scripts"],
 
   # Do not sort
   deps = [
@@ -41,3 +44,18 @@ ts_web_test(
     ":scrolling_test_sources",
   ],
 )
+
+sass_binary(
+  name = "virtual_scroll_viewport_scss",
+  src = "virtual-scroll-viewport.scss",
+)
+
+# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
+# Copy the output of the sass_binary such that the filename and path match what we expect.
+genrule(
+  name = "virtual_scroll_viewport_css",
+  srcs = [":virtual_scroll_viewport_scss"],
+  outs = ["virtual-scroll-viewport.css"],
+  cmd = "cat $(locations :virtual_scroll_viewport_scss) > $@",
+)
+

src/cdk/scrolling/public-api.ts

@@ -6,7 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+export * from './virtual-for-of';
 export * from './scroll-dispatcher';
 export * from './scrollable';
-export * from './viewport-ruler';
 export * from './scrolling-module';
+export * from './viewport-ruler';
+export * from './virtual-scroll-viewport';

src/cdk/scrolling/scrolling-module.ts

@@ -9,10 +9,23 @@
 import {PlatformModule} from '@angular/cdk/platform';
 import {NgModule} from '@angular/core';
 import {CdkScrollable} from './scrollable';
+import {CdkVirtualForOf} from './virtual-for-of';
+import {CdkVirtualScrollFixedSize} from './virtual-scroll-fixed-size';
+import {CdkVirtualScrollViewport} from './virtual-scroll-viewport';
 
 @NgModule({
   imports: [PlatformModule],
-  exports: [CdkScrollable],
-  declarations: [CdkScrollable],
+  exports: [
+    CdkVirtualForOf,
+    CdkScrollable,
+    CdkVirtualScrollFixedSize,
+    CdkVirtualScrollViewport,
+  ],
+  declarations: [
+    CdkVirtualForOf,
+    CdkScrollable,
+    CdkVirtualScrollFixedSize,
+    CdkVirtualScrollViewport,
+  ],
 })
 export class ScrollDispatchModule {}

src/cdk/scrolling/tsconfig-build.json

@@ -1,7 +1,8 @@
 {
   "extends": "../tsconfig-build",
   "files": [
-    "public-api.ts"
+    "public-api.ts",
+    "../typings.d.ts"
   ],
   "angularCompilerOptions": {
     "annotateForClosureCompiler": true,

src/cdk/scrolling/typings.d.ts

@@ -0,0 +1 @@
+declare var module: {id: string};