From cdf889c321e40c036bd8235e9fcac658a7fe61a2 Mon Sep 17 00:00:00 2001 From: Dominic Carretto Date: Tue, 18 Feb 2020 18:02:24 -0500 Subject: [PATCH] fix(linear-progress): Throws exception using Ivy (#2112) closes #2108 --- packages/linear-progress/linear-progress.ts | 66 ++++++++++++++------ test/linear-progress/linear-progress.test.ts | 20 +++--- 2 files changed, 59 insertions(+), 27 deletions(-) diff --git a/packages/linear-progress/linear-progress.ts b/packages/linear-progress/linear-progress.ts index 0224b7762..2b2dcc41e 100644 --- a/packages/linear-progress/linear-progress.ts +++ b/packages/linear-progress/linear-progress.ts @@ -4,7 +4,9 @@ import { Component, ElementRef, Input, + OnChanges, OnInit, + SimpleChanges, ViewEncapsulation } from '@angular/core'; import {Platform} from '@angular/cdk/platform'; @@ -38,9 +40,11 @@ import {strings, MDCLinearProgressFoundation, MDCLinearProgressAdapter} from '@m changeDetection: ChangeDetectionStrategy.OnPush }) export class MdcLinearProgress extends MDCComponent - implements MDCProgressIndicator, OnInit { + implements MDCProgressIndicator, OnChanges, OnInit { _root!: Element; + private _initialized: boolean = false; + /* Label indicating how the progress bar should be announced to the user. */ @Input() label?: string = undefined; @@ -50,8 +54,6 @@ export class MdcLinearProgress extends MDCComponent } set progress(value: number) { this._progress = coerceNumberProperty(value); - this._foundation.setProgress(this._progress); - this._changeDetectorRef.markForCheck(); } private _progress = 0; @@ -61,8 +63,6 @@ export class MdcLinearProgress extends MDCComponent } set determinate(value: boolean) { this._determinate = coerceBooleanProperty(value); - this._foundation.setDeterminate(this._determinate); - this._changeDetectorRef.markForCheck(); } private _determinate = false; @@ -72,8 +72,6 @@ export class MdcLinearProgress extends MDCComponent } set buffer(value: number) { this._buffer = coerceNumberProperty(value); - this._foundation.setBuffer(this._buffer); - this._changeDetectorRef.markForCheck(); } private _buffer = 0; @@ -83,8 +81,7 @@ export class MdcLinearProgress extends MDCComponent } set reversed(value: boolean) { this._reversed = coerceBooleanProperty(value); - this._foundation.setReverse(this._reversed); - this._changeDetectorRef.markForCheck(); + this._syncReversedWithFoundation(); } private _reversed = false; @@ -113,13 +110,34 @@ export class MdcLinearProgress extends MDCComponent ngOnInit(): void { if (this._platform.isBrowser) { - this._asyncInitializeFoundation() - .then(() => { - this.progress = this._progress; - this.buffer = this._buffer; - this.determinate = this._determinate; - this._changeDetectorRef.markForCheck(); - }); + this._initialized = true; + + this._foundation.init(); + this._syncProgressWithFoundation(); + this._syncBufferWithFoundation(); + this._syncDeterminateWithFoundation(); + this._syncReversedWithFoundation(); + + this._changeDetectorRef.markForCheck(); + } + } + + ngOnChanges(changes: SimpleChanges) { + if (!this._initialized) { + return; + } + + if (changes['progress']) { + this._syncProgressWithFoundation(); + } + if (changes['buffer']) { + this._syncBufferWithFoundation(); + } + if (changes['determinate']) { + this._syncDeterminateWithFoundation(); + } + if (changes['reversed']) { + this._syncReversedWithFoundation(); } } @@ -131,7 +149,19 @@ export class MdcLinearProgress extends MDCComponent this._foundation.close(); } - async _asyncInitializeFoundation(): Promise { - this._foundation.init(); + private _syncProgressWithFoundation(): void { + this._foundation.setProgress(this.progress); + } + + private _syncBufferWithFoundation(): void { + this._foundation.setBuffer(this.buffer); + } + + private _syncDeterminateWithFoundation(): void { + this._foundation.setDeterminate(this.determinate); + } + + private _syncReversedWithFoundation(): void { + this._foundation.setReverse(this.reversed); } } diff --git a/test/linear-progress/linear-progress.test.ts b/test/linear-progress/linear-progress.test.ts index 92625e514..f3e3f9f93 100644 --- a/test/linear-progress/linear-progress.test.ts +++ b/test/linear-progress/linear-progress.test.ts @@ -65,25 +65,25 @@ describe('MdcLinearProgress', () => { }); it('#should set buffer to value', () => { - testInstance.buffer = 50; + testComponent.buffer = 50; fixture.detectChanges(); expect(testInstance.buffer).toBe(50); }); it('#should set progress to value', () => { - testInstance.progress = 20; + testComponent.progress = 20; fixture.detectChanges(); expect(testInstance.progress).toBe(20); }); it('#should not apply indeterminate class', () => { - testInstance.determinate = true; + testComponent.determinate = true; fixture.detectChanges(); expect(testDebugElement.nativeElement.classList.contains('mdc-linear-progress--indeterminate')).toBe(false); }); - it('#should not apply reverse class', () => { - testInstance.reversed = true; + it('#should apply reverse class', () => { + testComponent.reversed = true; fixture.detectChanges(); expect(testDebugElement.nativeElement.classList.contains('mdc-linear-progress--reversed')).toBe(true); expect(testInstance.reversed).toBe(true); @@ -102,14 +102,16 @@ describe('MdcLinearProgress', () => { `, }) class SimpleTest { - reversed: boolean = false; - determinate: boolean = false; + reversed: boolean; + determinate: boolean; + buffer = 0.75; + progress = 0.5; label: string; }