From c679e78b91523ca15293af2784dd88a75efb0aec Mon Sep 17 00:00:00 2001 From: dobromirts Date: Tue, 12 Jan 2021 15:13:25 +0200 Subject: [PATCH 01/16] fix(toast): isVisible property binding - master --- .../src/lib/toast/toast.component.spec.ts | 21 +++++++++++-------- .../src/lib/toast/toast.component.ts | 21 ++++++++++++------- 2 files changed, 26 insertions(+), 16 deletions(-) diff --git a/projects/igniteui-angular/src/lib/toast/toast.component.spec.ts b/projects/igniteui-angular/src/lib/toast/toast.component.spec.ts index 0c85eabd28c..37ce9901ceb 100644 --- a/projects/igniteui-angular/src/lib/toast/toast.component.spec.ts +++ b/projects/igniteui-angular/src/lib/toast/toast.component.spec.ts @@ -41,8 +41,10 @@ describe('IgxToast', () => { expect(domToast.id).toContain('igx-toast-'); expect(toast.displayTime).toBe(4000); expect(toast.autoHide).toBeTruthy(); - expect(toast.isVisible).toBeTruthy(); + toast.onClosed.subscribe(() => { + expect(toast.isVisible).toBeTruthy(); + }); toast.id = 'customToast'; fixture.detectChanges(); @@ -81,16 +83,16 @@ describe('IgxToast', () => { expect(toast.onHiding.emit).toHaveBeenCalled(); }); - it('should emit onShown when toggle onOpened is fired', waitForAsync(() => { + it('should emit onShown when toggle onOpened is fired', () => { spyOn(toast.onShown, 'emit'); toast.open(); toast.onOpened.subscribe(() => { expect(toast.onShown.emit).toHaveBeenCalled(); }); - })); + }); - it('should emit onHidden when toggle onClosed is fired', waitForAsync(() => { + it('should emit onHidden when toggle onClosed is fired', () => { spyOn(toast.onHidden, 'emit'); toast.isVisible = true; toast.close(); @@ -98,9 +100,9 @@ describe('IgxToast', () => { toast.onClosed.subscribe(() => { expect(toast.onHidden.emit).toHaveBeenCalled(); }); - })); + }); - it('visibility is updated by the toggle() method', waitForAsync((done: DoneFn) => { + it('visibility is updated by the toggle() method', () => { toast.autoHide = false; toast.toggle(); @@ -111,9 +113,8 @@ describe('IgxToast', () => { toast.toggle(); toast.onClosed.subscribe(() => { expect(toast.isVisible).toEqual(false); - done(); }); - })); + }); it('can set message through show method', fakeAsync(() => { toast.displayTime = 100; @@ -122,8 +123,10 @@ describe('IgxToast', () => { toast.show('Custom Message'); tick(100); fixture.detectChanges(); + toast.onClosed.subscribe(() => { + expect(toast.isVisible).toBeTruthy(); + }); - expect(toast.isVisible).toBeTruthy(); expect(toast.autoHide).toBeFalsy(); expect(toast.toastMessage).toBe('Custom Message'); })); diff --git a/projects/igniteui-angular/src/lib/toast/toast.component.ts b/projects/igniteui-angular/src/lib/toast/toast.component.ts index 3e29d1e1004..121653ec007 100644 --- a/projects/igniteui-angular/src/lib/toast/toast.component.ts +++ b/projects/igniteui-angular/src/lib/toast/toast.component.ts @@ -214,8 +214,13 @@ export class IgxToastComponent extends IgxToggleDirective } public set isVisible(value) { - this._isVisible = value; - this.isVisibleChange.emit(this._isVisible); + if (value !== this._isVisible) { + if (value) { + this.show(); + } else { + this.hide(); + } + } } /** @@ -309,8 +314,8 @@ export class IgxToastComponent extends IgxToggleDirective this.position === 'bottom' ? VerticalAlignment.Bottom : this.position === 'middle' - ? VerticalAlignment.Middle - : VerticalAlignment.Top, + ? VerticalAlignment.Middle + : VerticalAlignment.Top, }), closeOnEscape: false, closeOnOutsideClick: false, @@ -377,13 +382,15 @@ export class IgxToastComponent extends IgxToggleDirective */ ngOnInit() { this.onOpened.pipe(takeUntil(this.d$)).subscribe(() => { + this._isVisible = true; + this.isVisibleChange.emit(true); this.onShown.emit(this); - this.isVisible = true; }); this.onClosed.pipe(takeUntil(this.d$)).subscribe(() => { + this._isVisible = false; + this.isVisibleChange.emit(false); this.onHidden.emit(this); - this.isVisible = false; }); } @@ -404,4 +411,4 @@ export class IgxToastComponent extends IgxToggleDirective exports: [IgxToastComponent], imports: [CommonModule], }) -export class IgxToastModule {} +export class IgxToastModule { } From 0b57ad9affdc29a0e0ed4d890a72385c5fd590be Mon Sep 17 00:00:00 2001 From: dobromirts Date: Wed, 13 Jan 2021 11:54:34 +0200 Subject: [PATCH 02/16] chore(*): add additional test --- .../src/lib/toast/toast.component.spec.ts | 37 +++++++++++++++++-- 1 file changed, 33 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/src/lib/toast/toast.component.spec.ts b/projects/igniteui-angular/src/lib/toast/toast.component.spec.ts index 37ce9901ceb..e8c331cabc0 100644 --- a/projects/igniteui-angular/src/lib/toast/toast.component.spec.ts +++ b/projects/igniteui-angular/src/lib/toast/toast.component.spec.ts @@ -14,11 +14,11 @@ import { } from './toast.component'; import { configureTestSuite } from '../test-utils/configure-suite'; -describe('IgxToast', () => { +fdescribe('IgxToast', () => { configureTestSuite(); beforeAll(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ToastInitializeTestComponent], + declarations: [ToastInitializeTestComponent, ToastTestBindingComponent], imports: [BrowserAnimationsModule, IgxToastModule], }).compileComponents(); })); @@ -42,7 +42,7 @@ describe('IgxToast', () => { expect(toast.displayTime).toBe(4000); expect(toast.autoHide).toBeTruthy(); - toast.onClosed.subscribe(() => { + toast.onOpened.subscribe(() => { expect(toast.isVisible).toBeTruthy(); }); toast.id = 'customToast'; @@ -123,13 +123,33 @@ describe('IgxToast', () => { toast.show('Custom Message'); tick(100); fixture.detectChanges(); - toast.onClosed.subscribe(() => { + toast.onOpened.subscribe(() => { expect(toast.isVisible).toBeTruthy(); }); expect(toast.autoHide).toBeFalsy(); expect(toast.toastMessage).toBe('Custom Message'); })); + + it('should open and close toast when set values to isVisible', () => { + const toastFixture = TestBed.createComponent(ToastTestBindingComponent); + const component = fixture.componentInstance.toast; + toastFixture.detectChanges(); + + toastFixture.componentInstance.model = true; + toastFixture.detectChanges(); + + component.onOpened.subscribe(() => { + expect(component.isVisible).toBeTruthy(); + }); + + toastFixture.componentInstance.model = false; + toastFixture.detectChanges(); + + component.onClosed.subscribe(() => { + expect(component.isVisible).toBeFalse(); + }); + }); }); @Component({ @@ -139,3 +159,12 @@ class ToastInitializeTestComponent { @ViewChild(IgxToastComponent, { static: true }) public toast: IgxToastComponent; } + +@Component({ + template: ``, +}) +class ToastTestBindingComponent { + @ViewChild(IgxToastComponent, { static: true }) + public toast: IgxToastComponent; + public model = false; +} From 710dfce35ba90f14669c49063336b261a983dbac Mon Sep 17 00:00:00 2001 From: dobromirts Date: Wed, 13 Jan 2021 11:55:17 +0200 Subject: [PATCH 03/16] chore(*): add additional test --- projects/igniteui-angular/src/lib/toast/toast.component.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/toast/toast.component.spec.ts b/projects/igniteui-angular/src/lib/toast/toast.component.spec.ts index e8c331cabc0..79e00fcc672 100644 --- a/projects/igniteui-angular/src/lib/toast/toast.component.spec.ts +++ b/projects/igniteui-angular/src/lib/toast/toast.component.spec.ts @@ -14,7 +14,7 @@ import { } from './toast.component'; import { configureTestSuite } from '../test-utils/configure-suite'; -fdescribe('IgxToast', () => { +describe('IgxToast', () => { configureTestSuite(); beforeAll(waitForAsync(() => { TestBed.configureTestingModule({ From 72b00fbcc648f669d699b984878e731dc2338a80 Mon Sep 17 00:00:00 2001 From: dobromirts Date: Thu, 14 Jan 2021 12:44:37 +0200 Subject: [PATCH 04/16] chore(*): refactor toggleDirective --- .../lib/directives/toggle/toggle.directive.ts | 76 ++++++++----------- .../src/lib/toast/toast.component.ts | 15 ++-- 2 files changed, 37 insertions(+), 54 deletions(-) diff --git a/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts b/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts index 20c20005bb8..3edf3bfe822 100644 --- a/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts @@ -22,7 +22,7 @@ import { OverlayEventArgs, OverlaySettings } from '../../services/public_api'; -import { filter, takeUntil } from 'rxjs/operators'; +import { filter, first, takeUntil } from 'rxjs/operators'; import { Subscription, Subject, MonoTypeOperatorFunction } from 'rxjs'; import { OverlayClosingEventArgs } from '../../services/overlay/utilities'; import { CancelableBrowserEventArgs, IBaseEventArgs } from '../../core/utils'; @@ -154,6 +154,14 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy { return this._collapsed; } + /** + * @hidden + */ + public set collapsed(value: boolean) { + this._collapsed = value; + this.cdr.detectChanges(); + } + /** * Identifier which is registered into `IgxNavigationService` * @@ -219,48 +227,40 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy { this._overlayId = this.overlayService.attach(this.elementRef, overlaySettings); } - this._collapsed = false; - this.cdr.detectChanges(); + this.collapsed = false; const openEventArgs: ToggleViewCancelableEventArgs = { cancel: false, owner: this, id: this._overlayId }; this.onOpening.emit(openEventArgs); if (openEventArgs.cancel) { - this._collapsed = true; - this.cdr.detectChanges(); + this.collapsed = true; return; } - this.unsubscribe(); - - this._overlayAppendedSub = this.overlayService.onAppended.pipe(...this._overlaySubFilter).subscribe(() => { + this._overlayAppendedSub = this.overlayService.onAppended.pipe(...this._overlaySubFilter, first()).subscribe(() => { const appendedEventArgs: ToggleViewEventArgs = { owner: this, id: this._overlayId }; this.onAppended.emit(appendedEventArgs); }); - this._overlayOpenedSub = this.overlayService.onOpened.pipe(...this._overlaySubFilter).subscribe(() => { + this._overlayOpenedSub = this.overlayService.onOpened.pipe(...this._overlaySubFilter, first()).subscribe(() => { const openedEventArgs: ToggleViewEventArgs = { owner: this, id: this._overlayId }; this.onOpened.emit(openedEventArgs); }); - this._overlayClosingSub = this.overlayService - .onClosing - .pipe(...this._overlaySubFilter) - .subscribe((e: OverlayClosingEventArgs) => { - const eventArgs: ToggleViewCancelableEventArgs = { cancel: false, event: e.event, owner: this, id: this._overlayId }; - this.onClosing.emit(eventArgs); - e.cancel = eventArgs.cancel; - - // in case event is not canceled this will close the toggle and we need to unsubscribe. - // Otherwise if for some reason, e.g. close on outside click, close() gets called before - // onClosed was fired we will end with calling onClosing more than once - if (!e.cancel) { - this.clearSubscription(this._overlayClosingSub); - } - }); - - this._overlayClosedSub = this.overlayService.onClosed - .pipe(...this._overlaySubFilter) - .subscribe(this.overlayClosed); + this._overlayClosingSub = this.overlayService.onClosing.pipe(...this._overlaySubFilter, first()) + .subscribe((e: OverlayClosingEventArgs) => { + const eventArgs: ToggleViewCancelableEventArgs = { cancel: false, event: e.event, owner: this, id: this._overlayId }; + this.onClosing.emit(eventArgs); + e.cancel = eventArgs.cancel; + + // in case event is not canceled this will close the toggle and we need to unsubscribe. + // Otherwise if for some reason, e.g. close on outside click, close() gets called before + // onClosed was fired we will end with calling onClosing more than once + if (!e.cancel) { + return; + } + }); + + this._overlayClosedSub = this.overlayService.onClosed.pipe(...this._overlaySubFilter, first()).subscribe(this.overlayClosed); this.overlayService.show(this._overlayId, overlaySettings); } @@ -353,32 +353,16 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy { if (!this.collapsed && this._overlayId) { this.overlayService.hide(this._overlayId); } - this.unsubscribe(); this.destroy$.next(true); this.destroy$.complete(); } private overlayClosed = (ev) => { - this._collapsed = true; - this.cdr.detectChanges(); + this.collapsed = true; delete this._overlayId; - this.unsubscribe(); - const closedEventArgs: ToggleViewEventArgs = { owner: this, id: this._overlayId, event: ev.event}; + const closedEventArgs: ToggleViewEventArgs = { owner: this, id: this._overlayId, event: ev.event }; this.onClosed.emit(closedEventArgs); } - - private unsubscribe() { - this.clearSubscription(this._overlayOpenedSub); - this.clearSubscription(this._overlayClosingSub); - this.clearSubscription(this._overlayClosedSub); - this.clearSubscription(this._overlayAppendedSub); - } - - private clearSubscription(subscription: Subscription) { - if (subscription && !subscription.closed) { - subscription.unsubscribe(); - } - } } @Directive({ diff --git a/projects/igniteui-angular/src/lib/toast/toast.component.ts b/projects/igniteui-angular/src/lib/toast/toast.component.ts index 121653ec007..6a91dcd081c 100644 --- a/projects/igniteui-angular/src/lib/toast/toast.component.ts +++ b/projects/igniteui-angular/src/lib/toast/toast.component.ts @@ -68,7 +68,6 @@ export type IgxToastPosition = (typeof IgxToastPosition)[keyof typeof IgxToastPo export class IgxToastComponent extends IgxToggleDirective implements IToggleView, OnInit, OnDestroy { private d$ = new Subject(); - private _isVisible = false; /** * @hidden @@ -210,13 +209,15 @@ export class IgxToastComponent extends IgxToggleDirective */ @Input() public get isVisible() { - return this._isVisible; + return !this.collapsed; } public set isVisible(value) { - if (value !== this._isVisible) { + if (value !== this.isVisible) { if (value) { - this.show(); + requestAnimationFrame(() => { + this.show(); + }); } else { this.hide(); } @@ -240,8 +241,8 @@ export class IgxToastComponent extends IgxToggleDirective * ``` * @memberof IgxToastComponent */ - @DeprecateProperty(`'message' property is deprecated. - You can use place the message in the toast content or pass it as parameter to the show method instead.`) + @DeprecateProperty(`'message' property is deprecated. + You can use place the message in the toast content or pass it as parameter to the show method instead.`) @Input() public set message(value: string) { this.toastMessage = value; @@ -382,13 +383,11 @@ export class IgxToastComponent extends IgxToggleDirective */ ngOnInit() { this.onOpened.pipe(takeUntil(this.d$)).subscribe(() => { - this._isVisible = true; this.isVisibleChange.emit(true); this.onShown.emit(this); }); this.onClosed.pipe(takeUntil(this.d$)).subscribe(() => { - this._isVisible = false; this.isVisibleChange.emit(false); this.onHidden.emit(this); }); From 1b68bd70ee9644b73a65789774a9c3a11e9946c9 Mon Sep 17 00:00:00 2001 From: dobromirts Date: Thu, 14 Jan 2021 16:51:13 +0200 Subject: [PATCH 05/16] chore(*): fix toast tests --- .../lib/directives/toggle/toggle.directive.ts | 54 +++++++++++++------ .../src/lib/toast/toast.component.spec.ts | 20 ++++--- 2 files changed, 47 insertions(+), 27 deletions(-) diff --git a/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts b/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts index 3edf3bfe822..dad8a0ef362 100644 --- a/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts @@ -236,31 +236,38 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy { return; } - this._overlayAppendedSub = this.overlayService.onAppended.pipe(...this._overlaySubFilter, first()).subscribe(() => { + this.unsubscribe(); + + this._overlayAppendedSub = this.overlayService.onAppended.pipe(...this._overlaySubFilter).subscribe(() => { const appendedEventArgs: ToggleViewEventArgs = { owner: this, id: this._overlayId }; this.onAppended.emit(appendedEventArgs); }); - this._overlayOpenedSub = this.overlayService.onOpened.pipe(...this._overlaySubFilter, first()).subscribe(() => { + this._overlayOpenedSub = this.overlayService.onOpened.pipe(...this._overlaySubFilter).subscribe(() => { const openedEventArgs: ToggleViewEventArgs = { owner: this, id: this._overlayId }; this.onOpened.emit(openedEventArgs); }); - this._overlayClosingSub = this.overlayService.onClosing.pipe(...this._overlaySubFilter, first()) - .subscribe((e: OverlayClosingEventArgs) => { - const eventArgs: ToggleViewCancelableEventArgs = { cancel: false, event: e.event, owner: this, id: this._overlayId }; - this.onClosing.emit(eventArgs); - e.cancel = eventArgs.cancel; - - // in case event is not canceled this will close the toggle and we need to unsubscribe. - // Otherwise if for some reason, e.g. close on outside click, close() gets called before - // onClosed was fired we will end with calling onClosing more than once - if (!e.cancel) { - return; - } - }); + this._overlayClosingSub = this.overlayService + .onClosing + .pipe(...this._overlaySubFilter) + .subscribe((e: OverlayClosingEventArgs) => { + const eventArgs: ToggleViewCancelableEventArgs = { cancel: false, event: e.event, owner: this, id: this._overlayId }; + this.onClosing.emit(eventArgs); + e.cancel = eventArgs.cancel; + + // in case event is not canceled this will close the toggle and we need to unsubscribe. + // Otherwise if for some reason, e.g. close on outside click, close() gets called before + // onClosed was fired we will end with calling onClosing more than once + if (!e.cancel) { + this.clearSubscription(this._overlayClosingSub); + } + }); - this._overlayClosedSub = this.overlayService.onClosed.pipe(...this._overlaySubFilter, first()).subscribe(this.overlayClosed); + + this._overlayClosedSub = this.overlayService.onClosed + .pipe(...this._overlaySubFilter) + .subscribe(this.overlayClosed); this.overlayService.show(this._overlayId, overlaySettings); } @@ -353,6 +360,7 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy { if (!this.collapsed && this._overlayId) { this.overlayService.hide(this._overlayId); } + this.unsubscribe(); this.destroy$.next(true); this.destroy$.complete(); } @@ -360,9 +368,23 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy { private overlayClosed = (ev) => { this.collapsed = true; delete this._overlayId; + this.unsubscribe(); const closedEventArgs: ToggleViewEventArgs = { owner: this, id: this._overlayId, event: ev.event }; this.onClosed.emit(closedEventArgs); } + + private unsubscribe() { + this.clearSubscription(this._overlayOpenedSub); + this.clearSubscription(this._overlayClosingSub); + this.clearSubscription(this._overlayClosedSub); + this.clearSubscription(this._overlayAppendedSub); + } + + private clearSubscription(subscription: Subscription) { + if (subscription && !subscription.closed) { + subscription.unsubscribe(); + } + } } @Directive({ diff --git a/projects/igniteui-angular/src/lib/toast/toast.component.spec.ts b/projects/igniteui-angular/src/lib/toast/toast.component.spec.ts index 79e00fcc672..6881f442bc1 100644 --- a/projects/igniteui-angular/src/lib/toast/toast.component.spec.ts +++ b/projects/igniteui-angular/src/lib/toast/toast.component.spec.ts @@ -30,7 +30,6 @@ describe('IgxToast', () => { beforeEach(() => { fixture = TestBed.createComponent(ToastInitializeTestComponent); toast = fixture.componentInstance.toast; - toast.isVisible = true; fixture.detectChanges(); }); @@ -42,9 +41,6 @@ describe('IgxToast', () => { expect(toast.displayTime).toBe(4000); expect(toast.autoHide).toBeTruthy(); - toast.onOpened.subscribe(() => { - expect(toast.isVisible).toBeTruthy(); - }); toast.id = 'customToast'; fixture.detectChanges(); @@ -103,16 +99,18 @@ describe('IgxToast', () => { }); it('visibility is updated by the toggle() method', () => { + spyOn(toast.onShown, 'emit'); + spyOn(toast.onHidden, 'emit'); toast.autoHide = false; toast.toggle(); toast.onOpened.subscribe(() => { - expect(toast.isVisible).toEqual(true); + expect(toast.onShown.emit).toHaveBeenCalled(); }); toast.toggle(); toast.onClosed.subscribe(() => { - expect(toast.isVisible).toEqual(false); + expect(toast.onHidden.emit).toHaveBeenCalled(); }); }); @@ -123,9 +121,7 @@ describe('IgxToast', () => { toast.show('Custom Message'); tick(100); fixture.detectChanges(); - toast.onOpened.subscribe(() => { - expect(toast.isVisible).toBeTruthy(); - }); + expect(toast.isVisible).toBeTruthy(); expect(toast.autoHide).toBeFalsy(); expect(toast.toastMessage).toBe('Custom Message'); @@ -135,19 +131,21 @@ describe('IgxToast', () => { const toastFixture = TestBed.createComponent(ToastTestBindingComponent); const component = fixture.componentInstance.toast; toastFixture.detectChanges(); + spyOn(toast.onShown, 'emit'); + spyOn(toast.onHidden, 'emit'); toastFixture.componentInstance.model = true; toastFixture.detectChanges(); component.onOpened.subscribe(() => { - expect(component.isVisible).toBeTruthy(); + expect(toast.onShown.emit).toHaveBeenCalled(); }); toastFixture.componentInstance.model = false; toastFixture.detectChanges(); component.onClosed.subscribe(() => { - expect(component.isVisible).toBeFalse(); + expect(toast.onHidden.emit).toHaveBeenCalled(); }); }); }); From 27887b794fbeec480be9b7244b9c5ae241baade6 Mon Sep 17 00:00:00 2001 From: dobromirts Date: Fri, 15 Jan 2021 11:32:53 +0200 Subject: [PATCH 06/16] chore(*): toggleDirective changes --- .../lib/directives/toggle/toggle.directive.ts | 54 ++++++------------- 1 file changed, 16 insertions(+), 38 deletions(-) diff --git a/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts b/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts index dad8a0ef362..3edf3bfe822 100644 --- a/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts @@ -236,38 +236,31 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy { return; } - this.unsubscribe(); - - this._overlayAppendedSub = this.overlayService.onAppended.pipe(...this._overlaySubFilter).subscribe(() => { + this._overlayAppendedSub = this.overlayService.onAppended.pipe(...this._overlaySubFilter, first()).subscribe(() => { const appendedEventArgs: ToggleViewEventArgs = { owner: this, id: this._overlayId }; this.onAppended.emit(appendedEventArgs); }); - this._overlayOpenedSub = this.overlayService.onOpened.pipe(...this._overlaySubFilter).subscribe(() => { + this._overlayOpenedSub = this.overlayService.onOpened.pipe(...this._overlaySubFilter, first()).subscribe(() => { const openedEventArgs: ToggleViewEventArgs = { owner: this, id: this._overlayId }; this.onOpened.emit(openedEventArgs); }); - this._overlayClosingSub = this.overlayService - .onClosing - .pipe(...this._overlaySubFilter) - .subscribe((e: OverlayClosingEventArgs) => { - const eventArgs: ToggleViewCancelableEventArgs = { cancel: false, event: e.event, owner: this, id: this._overlayId }; - this.onClosing.emit(eventArgs); - e.cancel = eventArgs.cancel; - - // in case event is not canceled this will close the toggle and we need to unsubscribe. - // Otherwise if for some reason, e.g. close on outside click, close() gets called before - // onClosed was fired we will end with calling onClosing more than once - if (!e.cancel) { - this.clearSubscription(this._overlayClosingSub); - } - }); - + this._overlayClosingSub = this.overlayService.onClosing.pipe(...this._overlaySubFilter, first()) + .subscribe((e: OverlayClosingEventArgs) => { + const eventArgs: ToggleViewCancelableEventArgs = { cancel: false, event: e.event, owner: this, id: this._overlayId }; + this.onClosing.emit(eventArgs); + e.cancel = eventArgs.cancel; + + // in case event is not canceled this will close the toggle and we need to unsubscribe. + // Otherwise if for some reason, e.g. close on outside click, close() gets called before + // onClosed was fired we will end with calling onClosing more than once + if (!e.cancel) { + return; + } + }); - this._overlayClosedSub = this.overlayService.onClosed - .pipe(...this._overlaySubFilter) - .subscribe(this.overlayClosed); + this._overlayClosedSub = this.overlayService.onClosed.pipe(...this._overlaySubFilter, first()).subscribe(this.overlayClosed); this.overlayService.show(this._overlayId, overlaySettings); } @@ -360,7 +353,6 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy { if (!this.collapsed && this._overlayId) { this.overlayService.hide(this._overlayId); } - this.unsubscribe(); this.destroy$.next(true); this.destroy$.complete(); } @@ -368,23 +360,9 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy { private overlayClosed = (ev) => { this.collapsed = true; delete this._overlayId; - this.unsubscribe(); const closedEventArgs: ToggleViewEventArgs = { owner: this, id: this._overlayId, event: ev.event }; this.onClosed.emit(closedEventArgs); } - - private unsubscribe() { - this.clearSubscription(this._overlayOpenedSub); - this.clearSubscription(this._overlayClosingSub); - this.clearSubscription(this._overlayClosedSub); - this.clearSubscription(this._overlayAppendedSub); - } - - private clearSubscription(subscription: Subscription) { - if (subscription && !subscription.closed) { - subscription.unsubscribe(); - } - } } @Directive({ From 35b9452db153b05896f785a77702a61a2be46e16 Mon Sep 17 00:00:00 2001 From: dobromirts Date: Fri, 15 Jan 2021 15:16:23 +0200 Subject: [PATCH 07/16] chore(*): addtitional toggle changes --- .../lib/directives/toggle/toggle.directive.ts | 47 +++++++++---------- 1 file changed, 21 insertions(+), 26 deletions(-) diff --git a/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts b/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts index 3edf3bfe822..6f03d515dbf 100644 --- a/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts @@ -22,8 +22,8 @@ import { OverlayEventArgs, OverlaySettings } from '../../services/public_api'; -import { filter, first, takeUntil } from 'rxjs/operators'; -import { Subscription, Subject, MonoTypeOperatorFunction } from 'rxjs'; +import { filter, first} from 'rxjs/operators'; +import { MonoTypeOperatorFunction } from 'rxjs'; import { OverlayClosingEventArgs } from '../../services/overlay/utilities'; import { CancelableBrowserEventArgs, IBaseEventArgs } from '../../core/utils'; @@ -41,15 +41,10 @@ export interface ToggleViewCancelableEventArgs extends ToggleViewEventArgs, Canc }) export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy { protected _overlayId: string; - private destroy$ = new Subject(); private _overlaySubFilter: [MonoTypeOperatorFunction, MonoTypeOperatorFunction] = [ filter(x => x.id === this._overlayId), - takeUntil(this.destroy$) + first() ]; - private _overlayOpenedSub: Subscription; - private _overlayClosingSub: Subscription; - private _overlayClosedSub: Subscription; - private _overlayAppendedSub: Subscription; /** * Emits an event after the toggle container is opened. @@ -236,31 +231,33 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy { return; } - this._overlayAppendedSub = this.overlayService.onAppended.pipe(...this._overlaySubFilter, first()).subscribe(() => { + this.overlayService.onAppended.pipe(...this._overlaySubFilter).subscribe(() => { const appendedEventArgs: ToggleViewEventArgs = { owner: this, id: this._overlayId }; this.onAppended.emit(appendedEventArgs); }); - this._overlayOpenedSub = this.overlayService.onOpened.pipe(...this._overlaySubFilter, first()).subscribe(() => { + this.overlayService.onOpened.pipe(...this._overlaySubFilter).subscribe(() => { const openedEventArgs: ToggleViewEventArgs = { owner: this, id: this._overlayId }; this.onOpened.emit(openedEventArgs); }); - this._overlayClosingSub = this.overlayService.onClosing.pipe(...this._overlaySubFilter, first()) - .subscribe((e: OverlayClosingEventArgs) => { - const eventArgs: ToggleViewCancelableEventArgs = { cancel: false, event: e.event, owner: this, id: this._overlayId }; - this.onClosing.emit(eventArgs); - e.cancel = eventArgs.cancel; - - // in case event is not canceled this will close the toggle and we need to unsubscribe. - // Otherwise if for some reason, e.g. close on outside click, close() gets called before - // onClosed was fired we will end with calling onClosing more than once - if (!e.cancel) { - return; - } - }); + this.overlayService.onClosing.pipe(...this._overlaySubFilter). + subscribe((e: OverlayClosingEventArgs) => { + const eventArgs: ToggleViewCancelableEventArgs = { cancel: false, event: e.event, owner: this, id: this._overlayId }; + this.onClosing.emit(eventArgs); + e.cancel = eventArgs.cancel; + + // in case event is not canceled this will close the toggle and we need to unsubscribe. + // Otherwise if for some reason, e.g. close on outside click, close() gets called before + // onClosed was fired we will end with calling onClosing more than once + if (!e.cancel) { + return; + } + }); - this._overlayClosedSub = this.overlayService.onClosed.pipe(...this._overlaySubFilter, first()).subscribe(this.overlayClosed); + this.overlayService.onClosed + .pipe(...this._overlaySubFilter) + .subscribe(this.overlayClosed); this.overlayService.show(this._overlayId, overlaySettings); } @@ -353,8 +350,6 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy { if (!this.collapsed && this._overlayId) { this.overlayService.hide(this._overlayId); } - this.destroy$.next(true); - this.destroy$.complete(); } private overlayClosed = (ev) => { From b99c7794a8d98eba812a040c4b687275d617811b Mon Sep 17 00:00:00 2001 From: dobromirts Date: Mon, 18 Jan 2021 11:57:57 +0200 Subject: [PATCH 08/16] chore(*): remove detectChanges from toggle --- .../src/lib/directives/toggle/toggle.directive.ts | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts b/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts index 6f03d515dbf..9d076d7ba21 100644 --- a/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts @@ -149,14 +149,6 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy { return this._collapsed; } - /** - * @hidden - */ - public set collapsed(value: boolean) { - this._collapsed = value; - this.cdr.detectChanges(); - } - /** * Identifier which is registered into `IgxNavigationService` * @@ -222,12 +214,12 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy { this._overlayId = this.overlayService.attach(this.elementRef, overlaySettings); } - this.collapsed = false; + this._collapsed = false; const openEventArgs: ToggleViewCancelableEventArgs = { cancel: false, owner: this, id: this._overlayId }; this.onOpening.emit(openEventArgs); if (openEventArgs.cancel) { - this.collapsed = true; + this._collapsed = true; return; } @@ -353,7 +345,7 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy { } private overlayClosed = (ev) => { - this.collapsed = true; + this._collapsed = true; delete this._overlayId; const closedEventArgs: ToggleViewEventArgs = { owner: this, id: this._overlayId, event: ev.event }; this.onClosed.emit(closedEventArgs); From 1987944a3e730ea09c369e7fe3040fe85edce5fd Mon Sep 17 00:00:00 2001 From: dobromirts Date: Mon, 18 Jan 2021 14:35:17 +0200 Subject: [PATCH 09/16] chore(*): deprecate events --- .../update-11_0_0/changes/members.json | 19 +++++++ .../lib/buttonGroup/buttonGroup.component.ts | 4 +- .../lib/directives/toggle/toggle.directive.ts | 51 +++++++++++++++---- .../lib/time-picker/time-picker.component.ts | 4 +- .../igniteui-angular/src/lib/toast/README.md | 12 ++--- .../src/lib/toast/toast.component.spec.ts | 10 ++-- .../src/lib/toast/toast.component.ts | 40 +++++---------- .../drop-down-virtual.component.ts | 4 +- src/app/grid/grid.sample.ts | 4 +- src/app/list-panning/list-panning.sample.ts | 8 +-- src/app/toast/toast.sample.html | 6 +-- src/app/toast/toast.sample.ts | 2 +- 12 files changed, 99 insertions(+), 65 deletions(-) create mode 100644 projects/igniteui-angular/migrations/update-11_0_0/changes/members.json diff --git a/projects/igniteui-angular/migrations/update-11_0_0/changes/members.json b/projects/igniteui-angular/migrations/update-11_0_0/changes/members.json new file mode 100644 index 00000000000..c56227e51fd --- /dev/null +++ b/projects/igniteui-angular/migrations/update-11_0_0/changes/members.json @@ -0,0 +1,19 @@ +{ + "$schema": "../../common/schema/members-changes.schema.json", + "changes": [ + { + "member": "show", + "replaceWith": "open", + "definedIn": [ + "IgxToastComponent" + ] + }, + { + "member": "hide", + "replaceWith": "close", + "definedIn": [ + "IgxToastComponent" + ] + } + ] +} diff --git a/projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts b/projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts index 856ff6f681b..a374c05663d 100644 --- a/projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts +++ b/projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts @@ -216,7 +216,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After * @ViewChild("toast") * private toast: IgxToastComponent; * public onSelect(buttongroup){ - * this.toast.show() + * this.toast.open() * } * //... * ``` @@ -233,7 +233,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After * @ViewChild("toast") * private toast: IgxToastComponent; * public onUnselect(buttongroup){ - * this.toast.show() + * this.toast.open() * } * //... * ``` diff --git a/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts b/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts index 9d076d7ba21..08f719be043 100644 --- a/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts @@ -22,8 +22,8 @@ import { OverlayEventArgs, OverlaySettings } from '../../services/public_api'; -import { filter, first} from 'rxjs/operators'; -import { MonoTypeOperatorFunction } from 'rxjs'; +import { filter, takeUntil } from 'rxjs/operators'; +import { Subscription, Subject, MonoTypeOperatorFunction } from 'rxjs'; import { OverlayClosingEventArgs } from '../../services/overlay/utilities'; import { CancelableBrowserEventArgs, IBaseEventArgs } from '../../core/utils'; @@ -41,10 +41,15 @@ export interface ToggleViewCancelableEventArgs extends ToggleViewEventArgs, Canc }) export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy { protected _overlayId: string; + private destroy$ = new Subject(); private _overlaySubFilter: [MonoTypeOperatorFunction, MonoTypeOperatorFunction] = [ filter(x => x.id === this._overlayId), - first() + takeUntil(this.destroy$) ]; + private _overlayOpenedSub: Subscription; + private _overlayClosingSub: Subscription; + private _overlayClosedSub: Subscription; + private _overlayAppendedSub: Subscription; /** * Emits an event after the toggle container is opened. @@ -215,26 +220,32 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy { } this._collapsed = false; + this.cdr.detectChanges(); const openEventArgs: ToggleViewCancelableEventArgs = { cancel: false, owner: this, id: this._overlayId }; this.onOpening.emit(openEventArgs); if (openEventArgs.cancel) { this._collapsed = true; + this.cdr.detectChanges(); return; } - this.overlayService.onAppended.pipe(...this._overlaySubFilter).subscribe(() => { + this.unsubscribe(); + + this._overlayAppendedSub = this.overlayService.onAppended.pipe(...this._overlaySubFilter).subscribe(() => { const appendedEventArgs: ToggleViewEventArgs = { owner: this, id: this._overlayId }; this.onAppended.emit(appendedEventArgs); }); - this.overlayService.onOpened.pipe(...this._overlaySubFilter).subscribe(() => { + this._overlayOpenedSub = this.overlayService.onOpened.pipe(...this._overlaySubFilter).subscribe(() => { const openedEventArgs: ToggleViewEventArgs = { owner: this, id: this._overlayId }; this.onOpened.emit(openedEventArgs); }); - this.overlayService.onClosing.pipe(...this._overlaySubFilter). - subscribe((e: OverlayClosingEventArgs) => { + this._overlayClosingSub = this.overlayService + .onClosing + .pipe(...this._overlaySubFilter) + .subscribe((e: OverlayClosingEventArgs) => { const eventArgs: ToggleViewCancelableEventArgs = { cancel: false, event: e.event, owner: this, id: this._overlayId }; this.onClosing.emit(eventArgs); e.cancel = eventArgs.cancel; @@ -243,11 +254,11 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy { // Otherwise if for some reason, e.g. close on outside click, close() gets called before // onClosed was fired we will end with calling onClosing more than once if (!e.cancel) { - return; + this.clearSubscription(this._overlayClosingSub); } }); - this.overlayService.onClosed + this._overlayClosedSub = this.overlayService.onClosed .pipe(...this._overlaySubFilter) .subscribe(this.overlayClosed); @@ -342,14 +353,32 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy { if (!this.collapsed && this._overlayId) { this.overlayService.hide(this._overlayId); } + this.unsubscribe(); + this.destroy$.next(true); + this.destroy$.complete(); } private overlayClosed = (ev) => { this._collapsed = true; + this.cdr.detectChanges(); delete this._overlayId; - const closedEventArgs: ToggleViewEventArgs = { owner: this, id: this._overlayId, event: ev.event }; + this.unsubscribe(); + const closedEventArgs: ToggleViewEventArgs = { owner: this, id: this._overlayId, event: ev.event}; this.onClosed.emit(closedEventArgs); } + + private unsubscribe() { + this.clearSubscription(this._overlayOpenedSub); + this.clearSubscription(this._overlayClosingSub); + this.clearSubscription(this._overlayClosedSub); + this.clearSubscription(this._overlayAppendedSub); + } + + private clearSubscription(subscription: Subscription) { + if (subscription && !subscription.closed) { + subscription.unsubscribe(); + } + } } @Directive({ @@ -485,4 +514,4 @@ export class IgxOverlayOutletDirective { exports: [IgxToggleDirective, IgxToggleActionDirective, IgxOverlayOutletDirective], providers: [IgxNavigationService] }) -export class IgxToggleModule { } +export class IgxToggleModule { } \ No newline at end of file diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts index 96767550bb0..b5c03b81410 100644 --- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts +++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts @@ -411,7 +411,7 @@ export class IgxTimePickerComponent implements * @ViewChild("toast") * private toast: IgxToastComponent; * public onValueChanged(timepicker){ - * this.toast.show() + * this.toast.open() * } * //... * ``` @@ -431,7 +431,7 @@ export class IgxTimePickerComponent implements * @ViewChild("toast") * private toast: IgxToastComponent; * public onValidationFailed(timepicker){ - * this.toast.show(); + * this.toast.open(); * } * //... * ``` diff --git a/projects/igniteui-angular/src/lib/toast/README.md b/projects/igniteui-angular/src/lib/toast/README.md index 53b9ac80769..785dc043140 100644 --- a/projects/igniteui-angular/src/lib/toast/README.md +++ b/projects/igniteui-angular/src/lib/toast/README.md @@ -7,17 +7,17 @@ The Toast component shows application messages in a stylized pop-up box position ## Simple Toast ```html - - + + Well, hi there! ``` You can set the id of the component by setting the attribute `id` on the component (e.g. `id="myToast"`), or it will be automatically generated for you if you don't provide anything; -The toast can be shown by using the `show()` method. +The toast can be shown by using the `open()` method. -You can hide the toast by using the `hide()` method. +You can hide the toast by using the `close()` method. ## Toast Position You can set the `positon` property to `top`, `middle`, or `bottom`, which will position the toast near the top, middle, or bottom of the document*. @@ -25,7 +25,7 @@ You can set the `positon` property to `top`, `middle`, or `bottom`, which will p *By default the toast renders inside a global overlay outlet. You can specify a different overlay outlet by setting the `outlet` property on the toast; ```html - + Top Positioned Toast ``` @@ -43,7 +43,7 @@ You can display various content by placing it between the `igx-toast` tags. ## Toast Events ```html - + { spyOn(toast.onHiding, 'emit'); toast.displayTime = 1000; - toast.show(); + toast.open(); tick(1000); expect(toast.onHiding.emit).toHaveBeenCalled(); })); @@ -62,20 +62,20 @@ describe('IgxToast', () => { toast.displayTime = 1000; toast.autoHide = false; - toast.show(); + toast.open(); tick(1000); expect(toast.onHiding.emit).not.toHaveBeenCalled(); })); it('should emit onShowing when toast is shown', () => { spyOn(toast.onShowing, 'emit'); - toast.show(); + toast.open(); expect(toast.onShowing.emit).toHaveBeenCalled(); }); it('should emit onHiding when toast is hidden', () => { spyOn(toast.onHiding, 'emit'); - toast.hide(); + toast.close(); expect(toast.onHiding.emit).toHaveBeenCalled(); }); @@ -118,7 +118,7 @@ describe('IgxToast', () => { toast.displayTime = 100; toast.autoHide = false; - toast.show('Custom Message'); + toast.open('Custom Message'); tick(100); fixture.detectChanges(); expect(toast.isVisible).toBeTruthy(); diff --git a/projects/igniteui-angular/src/lib/toast/toast.component.ts b/projects/igniteui-angular/src/lib/toast/toast.component.ts index 6a91dcd081c..940750f05fc 100644 --- a/projects/igniteui-angular/src/lib/toast/toast.component.ts +++ b/projects/igniteui-angular/src/lib/toast/toast.component.ts @@ -97,6 +97,7 @@ export class IgxToastComponent extends IgxToggleDirective * ``` * @memberof IgxToastComponent */ + @DeprecateProperty(`'onShowing' property is deprecated. You can use 'onOpening' instead.`) @Output() public onShowing = new EventEmitter(); @@ -108,6 +109,7 @@ export class IgxToastComponent extends IgxToggleDirective * ``` * @memberof IgxToastComponent */ + @DeprecateProperty(`'onShown' property is deprecated. You can use 'onOpened' instead.`) @Output() public onShown = new EventEmitter(); @@ -119,6 +121,7 @@ export class IgxToastComponent extends IgxToggleDirective * ``` * @memberof IgxToastComponent */ + @DeprecateProperty(`'onHiding' property is deprecated. You can use 'onClosing' instead.`) @Output() public onHiding = new EventEmitter(); @@ -130,6 +133,7 @@ export class IgxToastComponent extends IgxToggleDirective * ``` * @memberof IgxToastComponent */ + @DeprecateProperty(`'onHidden' property is deprecated. You can use 'onClosed' instead.`) @Output() public onHidden = new EventEmitter(); @@ -216,10 +220,10 @@ export class IgxToastComponent extends IgxToggleDirective if (value !== this.isVisible) { if (value) { requestAnimationFrame(() => { - this.show(); + this.open(); }); } else { - this.hide(); + this.close(); } } } @@ -241,7 +245,7 @@ export class IgxToastComponent extends IgxToggleDirective * ``` * @memberof IgxToastComponent */ - @DeprecateProperty(`'message' property is deprecated. + @DeprecateProperty(`'message' property is deprecated. You can use place the message in the toast content or pass it as parameter to the show method instead.`) @Input() public set message(value: string) { @@ -301,11 +305,10 @@ export class IgxToastComponent extends IgxToggleDirective * Shows the toast. * If `autoHide` is enabled, the toast will hide after `displayTime` is over. * ```typescript - * this.toast.show(); + * this.toast.open(); * ``` - * @memberof IgxToastComponent */ - public show(message?: string): void { + public open(message?) { clearInterval(this.timeoutId); const overlaySettings: OverlaySettings = { @@ -333,40 +336,23 @@ export class IgxToastComponent extends IgxToggleDirective if (this.autoHide) { this.timeoutId = window.setTimeout(() => { - this.hide(); + this.close(); }, this.displayTime); } } - /** +/** * Hides the toast. * ```typescript - * this.toast.hide(); + * this.toast.close(); * ``` - * @memberof IgxToastComponent */ - public hide(): void { + public close() { clearInterval(this.timeoutId); this.onHiding.emit(this); super.close(); } - /** - * Wraps @show() method due @IToggleView interface implementation. - * @hidden - */ - public open() { - this.show(); - } - - /** - * Wraps @hide() method due @IToggleView interface implementation. - * @hidden - */ - public close() { - this.hide(); - } - /** * Toggles the visible state of the toast. * ```typescript diff --git a/src/app/drop-down/drop-down-virtual/drop-down-virtual.component.ts b/src/app/drop-down/drop-down-virtual/drop-down-virtual.component.ts index 54b8b5766cc..dfaa7915a73 100644 --- a/src/app/drop-down/drop-down-virtual/drop-down-virtual.component.ts +++ b/src/app/drop-down/drop-down-virtual/drop-down-virtual.component.ts @@ -66,13 +66,13 @@ export class DropDownVirtualComponent implements OnInit, AfterViewInit { this.loadingToast.message = 'Loading Remote Data...'; this.loadingToast.position = 'middle'; this.loadingToast.autoHide = false; - this.loadingToast.show(); + this.loadingToast.open(); this.cdr.detectChanges(); this.prevRequest = this.remoteService.getData( evt, (data) => { this.remoteVirtDir.totalItemCount = data['@odata.count']; - this.loadingToast.hide(); + this.loadingToast.close(); this.cdr.detectChanges(); }); } diff --git a/src/app/grid/grid.sample.ts b/src/app/grid/grid.sample.ts index 964d1fee726..d42595ab2d0 100644 --- a/src/app/grid/grid.sample.ts +++ b/src/app/grid/grid.sample.ts @@ -121,9 +121,9 @@ export class GridSampleComponent implements OnInit, AfterViewInit { process(event) { this.toast.message = 'Loading remote data'; this.toast.position = 'bottom'; - this.toast.show(); + this.toast.open(); this.remoteService.getData(this.grid3.data, () => { - this.toast.hide(); + this.toast.close(); }); } diff --git a/src/app/list-panning/list-panning.sample.ts b/src/app/list-panning/list-panning.sample.ts index a04ff24fdff..a3bf53e4b6a 100644 --- a/src/app/list-panning/list-panning.sample.ts +++ b/src/app/list-panning/list-panning.sample.ts @@ -97,26 +97,26 @@ export class ListPanningSampleComponent { public onLeftPanHandler(args) { args.keepItem = true; this.toast.message = 'Composing message...'; - this.toast.show(); + this.toast.open(); } public onRightPanHandler(args) { args.keepItem = true; this.toast.message = 'Dialing...'; - this.toast.show(); + this.toast.open(); } public onLeftPanHandler2(args) { args.keepItem = true; this.toast.message = 'Edit contact.'; - this.toast.show(); + this.toast.open(); } public onRightPanHandler2(args) { args.keepItem = false; setTimeout((idx = args.item.index - 1) => { this.toast.message = 'Contact removed.'; - this.toast.show(); + this.toast.open(); this.navItems2.splice(idx, 1); }, 500); } diff --git a/src/app/toast/toast.sample.html b/src/app/toast/toast.sample.html index 468cce07061..ddf9c83cd6c 100644 --- a/src/app/toast/toast.sample.html +++ b/src/app/toast/toast.sample.html @@ -13,7 +13,7 @@

Bottom Position