From 23d2084ad6b0b7d447c9be8e7f70fe2cc8bf4fc8 Mon Sep 17 00:00:00 2001 From: Austin Date: Mon, 7 May 2018 15:25:35 -0500 Subject: [PATCH 1/7] feat(scroll): add update method --- .../scrolling/virtual-scroll-viewport.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/cdk-experimental/scrolling/virtual-scroll-viewport.ts b/src/cdk-experimental/scrolling/virtual-scroll-viewport.ts index f01f82ca6ba4..1ebe11cc2ec3 100644 --- a/src/cdk-experimental/scrolling/virtual-scroll-viewport.ts +++ b/src/cdk-experimental/scrolling/virtual-scroll-viewport.ts @@ -137,6 +137,15 @@ export class CdkVirtualScrollViewport implements DoCheck, OnInit, OnDestroy { this._detachedSubject.complete(); } + /** Update the viewport dimensions and re-render. */ + updateViewport() { + const viewportEl = this.elementRef.nativeElement; + this._viewportSize = this.orientation === 'horizontal' ? + viewportEl.clientWidth : viewportEl.clientHeight; + + this._scrollStrategy.onDataLengthChanged(); + } + /** Attaches a `CdkVirtualForOf` to this viewport. */ attach(forOf: CdkVirtualForOf) { if (this._forOf) { From d6c3c52b0fc0226a48c5dd299f54b625eea6d9c9 Mon Sep 17 00:00:00 2001 From: Austin Date: Mon, 7 May 2018 15:38:35 -0500 Subject: [PATCH 2/7] chore: address feedback --- .../scrolling/virtual-scroll-viewport.ts | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/cdk-experimental/scrolling/virtual-scroll-viewport.ts b/src/cdk-experimental/scrolling/virtual-scroll-viewport.ts index 1ebe11cc2ec3..7cf8386b1501 100644 --- a/src/cdk-experimental/scrolling/virtual-scroll-viewport.ts +++ b/src/cdk-experimental/scrolling/virtual-scroll-viewport.ts @@ -102,8 +102,7 @@ export class CdkVirtualScrollViewport implements DoCheck, OnInit, OnDestroy { ngOnInit() { const viewportEl = this.elementRef.nativeElement; Promise.resolve().then(() => { - this._viewportSize = this.orientation === 'horizontal' ? - viewportEl.clientWidth : viewportEl.clientHeight; + this._measureViewportSize(); this._scrollStrategy.attach(this); this._ngZone.runOutsideAngular(() => { @@ -138,11 +137,8 @@ export class CdkVirtualScrollViewport implements DoCheck, OnInit, OnDestroy { } /** Update the viewport dimensions and re-render. */ - updateViewport() { - const viewportEl = this.elementRef.nativeElement; - this._viewportSize = this.orientation === 'horizontal' ? - viewportEl.clientWidth : viewportEl.clientHeight; - + updateViewportSize() { + this._measureViewportSize(); this._scrollStrategy.onDataLengthChanged(); } @@ -303,4 +299,11 @@ export class CdkVirtualScrollViewport implements DoCheck, OnInit, OnDestroy { } return this._forOf.measureRangeSize(range, this.orientation); } + + /** Measure the viewport size. */ + _measureViewportSize() { + const viewportEl = this.elementRef.nativeElement; + this._viewportSize = this.orientation === 'horizontal' ? + viewportEl.clientWidth : viewportEl.clientHeight; + } } From 94ddfb7a48770f63da19d1f9dc8b4d0fc410af2c Mon Sep 17 00:00:00 2001 From: Austin Date: Mon, 7 May 2018 16:06:27 -0500 Subject: [PATCH 3/7] chore: address feedback --- src/cdk-experimental/scrolling/virtual-scroll-viewport.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/cdk-experimental/scrolling/virtual-scroll-viewport.ts b/src/cdk-experimental/scrolling/virtual-scroll-viewport.ts index 7cf8386b1501..2918c6af9f5c 100644 --- a/src/cdk-experimental/scrolling/virtual-scroll-viewport.ts +++ b/src/cdk-experimental/scrolling/virtual-scroll-viewport.ts @@ -100,13 +100,12 @@ export class CdkVirtualScrollViewport implements DoCheck, OnInit, OnDestroy { @Inject(VIRTUAL_SCROLL_STRATEGY) private _scrollStrategy: VirtualScrollStrategy) {} ngOnInit() { - const viewportEl = this.elementRef.nativeElement; Promise.resolve().then(() => { 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)) @@ -301,7 +300,7 @@ export class CdkVirtualScrollViewport implements DoCheck, OnInit, OnDestroy { } /** Measure the viewport size. */ - _measureViewportSize() { + private _measureViewportSize() { const viewportEl = this.elementRef.nativeElement; this._viewportSize = this.orientation === 'horizontal' ? viewportEl.clientWidth : viewportEl.clientHeight; From 1382b58a891fa5baf96ce8844779ce6d0d46f3bb Mon Sep 17 00:00:00 2001 From: Austin Date: Sun, 13 May 2018 10:02:44 -0500 Subject: [PATCH 4/7] chore: nit feedback --- src/cdk-experimental/scrolling/virtual-scroll-viewport.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/cdk-experimental/scrolling/virtual-scroll-viewport.ts b/src/cdk-experimental/scrolling/virtual-scroll-viewport.ts index 2918c6af9f5c..fde1b007a5d3 100644 --- a/src/cdk-experimental/scrolling/virtual-scroll-viewport.ts +++ b/src/cdk-experimental/scrolling/virtual-scroll-viewport.ts @@ -137,6 +137,7 @@ export class CdkVirtualScrollViewport implements DoCheck, OnInit, OnDestroy { /** Update the viewport dimensions and re-render. */ updateViewportSize() { + // TODO: Cleanup later when add logic for handling content resize this._measureViewportSize(); this._scrollStrategy.onDataLengthChanged(); } From 640288923f9bb69bedfc4a5ea3650ea2a3705184 Mon Sep 17 00:00:00 2001 From: Austin Date: Sun, 13 May 2018 10:25:24 -0500 Subject: [PATCH 5/7] chore: tests --- .../scrolling/virtual-scroll-viewport.spec.ts | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts b/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts index a84330d870a4..b66c1209dbe1 100644 --- a/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts +++ b/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts @@ -30,6 +30,23 @@ describe('Basic CdkVirtualScrollViewport', () => { expect((viewport._renderedContentTransform as any).changingThisBreaksApplicationSecurity) .toEqual('translateY(NaNpx)'); })); + + fit('should update content size', fakeAsync(() => { + viewport.elementRef.nativeElement.style['height'] = '300px'; + viewport.updateViewportSize(); + fixture.detectChanges(); + const size = viewport.getViewportSize(); + + expect(size).toBe(300); + + viewport.elementRef.nativeElement.style['height'] = '500px'; + viewport.updateViewportSize(); + fixture.detectChanges(); + const newSize = viewport.getViewportSize(); + const newLength = viewport.getRenderedRange(); + + expect(newSize).toBe(500); + })); }); @Component({ From 04bdfc38558fc1714e25d28ebe1abab9a8013d7b Mon Sep 17 00:00:00 2001 From: Austin Date: Wed, 16 May 2018 07:04:41 -0500 Subject: [PATCH 6/7] chore: address pr feedback --- .../scrolling/virtual-scroll-viewport.spec.ts | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts b/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts index 8cc9a538cbeb..11274435550c 100644 --- a/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts +++ b/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts @@ -56,19 +56,15 @@ describe('CdkVirtualScrollViewport', () => { expect(viewport.getViewportSize()).toBe(testComponent.viewportSize); })); - + it('should update viewport size', fakeAsync(() => { - viewport.elementRef.nativeElement.style['height'] = '300px'; + testComponent.viewportSize = 300; viewport.updateViewportSize(); - const size = viewport.getViewportSize(); - - expect(size).toBe(300); + expect(viewport.getViewportSize()).toBe(300); - viewport.elementRef.nativeElement.style['height'] = '500px'; + testComponent.viewportSize = 500; viewport.updateViewportSize(); - const newSize = viewport.getViewportSize(); - - expect(newSize).toBe(500); + expect(viewport.getViewportSize()).toBe(500); })); it('should get the rendered range', fakeAsync(() => { @@ -503,12 +499,9 @@ describe('CdkVirtualScrollViewport', () => { expect(contentWrapper.children.length).toBe(4, 'should render 4 items to fill 200px space based on 50px estimate from first item'); })); - + // TODO(mmalerba): Add test that it corrects the initial render if it didn't render enough, // once it actually does that. - expect((viewport._renderedContentTransform as any).changingThisBreaksApplicationSecurity) - .toEqual('translateY(NaNpx)'); - })); }); From bb92f069b6b20ba17b57c7858b57770c3b1860c7 Mon Sep 17 00:00:00 2001 From: Austin Date: Thu, 17 May 2018 08:49:52 -0500 Subject: [PATCH 7/7] chore: fix feedback --- src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts b/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts index 11274435550c..b95b569c06cf 100644 --- a/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts +++ b/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts @@ -502,6 +502,7 @@ describe('CdkVirtualScrollViewport', () => { // TODO(mmalerba): Add test that it corrects the initial render if it didn't render enough, // once it actually does that. + }); });