Skip to content

feat(virtual-scroll): move from cdk-experimental to cdk #12438

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 1, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 2 additions & 12 deletions src/cdk-experimental/scrolling/BUILD.bazel
Original file line number Diff line number Diff line change
@@ -1,36 +1,28 @@
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-experimental/scrolling",
assets = [":virtual-scroll-viewport.css"] + glob(["**/*.html"]),
deps = [
"//src/cdk/coercion",
"//src/cdk/collections",
"//src/cdk/platform",
"//src/cdk/scrolling",
"@rxjs",
],
tsconfig = "//src/cdk-experimental:tsconfig-build.json",
)

sass_binary(
name = "virtual_scroll_viewport_scss",
src = "virtual-scroll-viewport.scss",
)


ts_library(
name = "scrolling_test_sources",
testonly = 1,
srcs = glob(["**/*.spec.ts"]),
deps = [
":scrolling",
"//src/cdk/collections",
"//src/cdk/scrolling",
"//src/cdk/testing",
"@rxjs",
],
Expand All @@ -42,8 +34,6 @@ ts_web_test(
bootstrap = [
"//:web_test_bootstrap_scripts",
],
tags = ["manual"],

# Do not sort
deps = [
"//:tslib_bundle",
Expand Down
7 changes: 5 additions & 2 deletions src/cdk-experimental/scrolling/auto-size-virtual-scroll.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,13 @@

import {coerceNumberProperty} from '@angular/cdk/coercion';
import {ListRange} from '@angular/cdk/collections';
import {
CdkVirtualScrollViewport,
VIRTUAL_SCROLL_STRATEGY,
VirtualScrollStrategy
} from '@angular/cdk/scrolling';
import {Directive, forwardRef, Input, OnChanges} from '@angular/core';
import {Observable} from 'rxjs';
import {VIRTUAL_SCROLL_STRATEGY, VirtualScrollStrategy} from './virtual-scroll-strategy';
import {CdkVirtualScrollViewport} from './virtual-scroll-viewport';


/**
Expand Down
4 changes: 0 additions & 4 deletions src/cdk-experimental/scrolling/public-api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,4 @@
*/

export * from './auto-size-virtual-scroll';
export * from './fixed-size-virtual-scroll';
export * from './scrolling-module';
export * from './virtual-for-of';
export * from './virtual-scroll-strategy';
export * from './virtual-scroll-viewport';
17 changes: 2 additions & 15 deletions src/cdk-experimental/scrolling/scrolling-module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,10 @@

import {NgModule} from '@angular/core';
import {CdkAutoSizeVirtualScroll} from './auto-size-virtual-scroll';
import {CdkFixedSizeVirtualScroll} from './fixed-size-virtual-scroll';
import {CdkVirtualForOf} from './virtual-for-of';
import {CdkVirtualScrollViewport} from './virtual-scroll-viewport';


@NgModule({
exports: [
CdkAutoSizeVirtualScroll,
CdkFixedSizeVirtualScroll,
CdkVirtualForOf,
CdkVirtualScrollViewport,
],
declarations: [
CdkAutoSizeVirtualScroll,
CdkFixedSizeVirtualScroll,
CdkVirtualForOf,
CdkVirtualScrollViewport,
],
exports: [CdkAutoSizeVirtualScroll],
declarations: [CdkAutoSizeVirtualScroll],
})
export class ScrollingModule {}
32 changes: 32 additions & 0 deletions src/cdk-experimental/scrolling/scrolling.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
**Warning: this component is still experimental. It may have bugs and the API may change at any
time**

### Scrolling over items with different sizes
When the items have different or unknown sizes, you can use the `AutoSizeVirtualScrollStrategy`.
This can be added to your viewport by using the `autosize` directive.

```html
<cdk-virtual-scroll-viewport autosize>
...
</cdk-virtual-scroll-viewport>
```

The `autosize` strategy is configured through two inputs: `minBufferPx` and `addBufferPx`.

**`minBufferPx`** determines the minimum space outside virtual scrolling viewport that will be
filled with content. Increasing this will increase the amount of content a user will see before more
content must be rendered. However, too large a value will cause more content to be rendered than is
necessary.

**`addBufferPx`** determines the amount of content that will be added incrementally as the viewport
is scrolled. This should be greater than the size of `minBufferPx` so that one "render" is needed at
a time.

```html
<cdk-virtual-scroll-viewport autosize minBufferPx="50" addBufferPx="100">
...
</cdk-virtual-scroll-viewport>
```

Because the auto size strategy needs to measure the size of the elements, its performance may not
be as good as the fixed size strategy.
3 changes: 1 addition & 2 deletions src/cdk-experimental/scrolling/tsconfig-build.json
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
{
"extends": "../tsconfig-build",
"files": [
"public-api.ts",
"./typings.d.ts"
"public-api.ts"
],
"angularCompilerOptions": {
"annotateForClosureCompiler": true,
Expand Down
Loading