feat(virtual-scroll): fixed size virtual scroll (angular#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

@@ -138,6 +138,7 @@
 /src/demo-app/tooltip/**                           @andrewseguin
 /src/demo-app/tree/**                              @tinayuangao
 /src/demo-app/typography/**                        @crisbeto
+/src/demo-app/virtual-scroll/**                    @mmalerba
 
 # E2E app
 /e2e/*                                             @jelbourn

src/cdk/collections/collection-viewer.ts

@@ -8,6 +8,11 @@
 
 import {Observable} from 'rxjs';
 
+
+/** 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';
 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",
   ],
@@ -42,3 +47,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};