From 0826773e25f12ad4edb82ace9b87583c8346390e Mon Sep 17 00:00:00 2001 From: Austin Date: Wed, 23 May 2018 10:43:58 -0500 Subject: [PATCH 1/3] virtual-scroll: add update method #11210 --- .../scrolling/virtual-scroll-viewport.spec.ts | 10 ++++++++++ .../scrolling/virtual-scroll-viewport.ts | 20 +++++++++++++++---- 2 files changed, 26 insertions(+), 4 deletions(-) diff --git a/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts b/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts index 01af96e49834..c9d1bff0cd49 100644 --- a/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts +++ b/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts @@ -57,6 +57,16 @@ describe('CdkVirtualScrollViewport', () => { expect(viewport.getViewportSize()).toBe(testComponent.viewportSize); })); + it('should update viewport size', fakeAsync(() => { + testComponent.viewportSize = 300; + viewport.updateViewportSize(); + expect(viewport.getViewportSize()).toBe(300); + + testComponent.viewportSize = 500; + viewport.updateViewportSize(); + expect(viewport.getViewportSize()).toBe(500); + })); + it('should get the rendered range', fakeAsync(() => { finishInit(fixture); diff --git a/src/cdk-experimental/scrolling/virtual-scroll-viewport.ts b/src/cdk-experimental/scrolling/virtual-scroll-viewport.ts index c409f8c137ae..c275e3049856 100644 --- a/src/cdk-experimental/scrolling/virtual-scroll-viewport.ts +++ b/src/cdk-experimental/scrolling/virtual-scroll-viewport.ts @@ -107,16 +107,14 @@ export class CdkVirtualScrollViewport implements DoCheck, OnInit, OnDestroy { @Inject(VIRTUAL_SCROLL_STRATEGY) private _scrollStrategy: VirtualScrollStrategy) {} ngOnInit() { - const viewportEl = this.elementRef.nativeElement; // It's still too early to measure the viewport at this point. Deferring with a promise allows // the Viewport to be rendered with the correct size before we measure. Promise.resolve().then(() => { - this._viewportSize = this.orientation === 'horizontal' ? - viewportEl.clientWidth : viewportEl.clientHeight; + this._measureViewportSize(); this._scrollStrategy.attach(this); this._ngZone.runOutsideAngular(() => { - fromEvent(viewportEl, 'scroll') + fromEvent(this.elementRef.nativeElement, 'scroll') // Sample the scroll stream at every animation frame. This way if there are multiple // scroll events in the same frame we only need to recheck our layout once. .pipe(sampleTime(0, animationFrameScheduler), takeUntil(this._destroyed)) @@ -307,4 +305,18 @@ export class CdkVirtualScrollViewport implements DoCheck, OnInit, OnDestroy { } return this._forOf.measureRangeSize(range, this.orientation); } + + /** Update the viewport dimensions and re-render. */ + updateViewportSize() { + // TODO: Cleanup later when add logic for handling content resize + this._measureViewportSize(); + this._scrollStrategy.onDataLengthChanged(); + } + + /** Measure the viewport size. */ + private _measureViewportSize() { + const viewportEl = this.elementRef.nativeElement; + this._viewportSize = this.orientation === 'horizontal' ? + viewportEl.clientWidth : viewportEl.clientHeight; + } } From b0947795f76e8fd4ad0a4d2429cf1ac308d3275a Mon Sep 17 00:00:00 2001 From: Austin Date: Wed, 23 May 2018 13:25:38 -0500 Subject: [PATCH 2/3] chore: pr nit --- .../scrolling/virtual-scroll-viewport.spec.ts | 4 ++-- src/cdk-experimental/scrolling/virtual-scroll-viewport.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts b/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts index c9d1bff0cd49..b16cfba9f348 100644 --- a/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts +++ b/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts @@ -59,11 +59,11 @@ describe('CdkVirtualScrollViewport', () => { it('should update viewport size', fakeAsync(() => { testComponent.viewportSize = 300; - viewport.updateViewportSize(); + viewport.checkViewportSize(); expect(viewport.getViewportSize()).toBe(300); testComponent.viewportSize = 500; - viewport.updateViewportSize(); + viewport.checkViewportSize(); expect(viewport.getViewportSize()).toBe(500); })); diff --git a/src/cdk-experimental/scrolling/virtual-scroll-viewport.ts b/src/cdk-experimental/scrolling/virtual-scroll-viewport.ts index c275e3049856..e720075e3dec 100644 --- a/src/cdk-experimental/scrolling/virtual-scroll-viewport.ts +++ b/src/cdk-experimental/scrolling/virtual-scroll-viewport.ts @@ -307,7 +307,7 @@ export class CdkVirtualScrollViewport implements DoCheck, OnInit, OnDestroy { } /** Update the viewport dimensions and re-render. */ - updateViewportSize() { + checkViewportSize() { // TODO: Cleanup later when add logic for handling content resize this._measureViewportSize(); this._scrollStrategy.onDataLengthChanged(); From 78718e0b709994b04a6bc23b063a443473155899 Mon Sep 17 00:00:00 2001 From: Austin Date: Thu, 24 May 2018 10:04:57 -0500 Subject: [PATCH 3/3] chore: fix test --- src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts b/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts index b16cfba9f348..9051c744de09 100644 --- a/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts +++ b/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts @@ -59,10 +59,12 @@ describe('CdkVirtualScrollViewport', () => { it('should update viewport size', fakeAsync(() => { testComponent.viewportSize = 300; + fixture.detectChanges(); viewport.checkViewportSize(); expect(viewport.getViewportSize()).toBe(300); testComponent.viewportSize = 500; + fixture.detectChanges(); viewport.checkViewportSize(); expect(viewport.getViewportSize()).toBe(500); }));