diff --git a/CHANGELOG.md b/CHANGELOG.md index 7b8a1ab23c5..3227b86d176 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,10 @@ All notable changes for each version of this project will be documented in this - Added new property `alignment` that determines the radio group alignment. Available options are `horizontal` (default) and `vertical`. - `IgxDialog` - Added new `onOpened` and `onClosed` events. +- `IgxToast` + - **Breaking Change** - + `show` and `hide` methods have been deprecated. `open` and `close` should be used instead. + `onShowing`,`onShown`,`onHiding` and `onHiden` events have been deprecated. `onOpening`, `onOpened`, `onClosing` and `onClosed`should be used instead. - `IgxInputGroup` - Added new property `theme` that allows you to set the theme explicitly and at runtime. 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 20c20005bb8..d3dbdd0cdac 100644 --- a/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts @@ -219,17 +219,15 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy { this._overlayId = this.overlayService.attach(this.elementRef, overlaySettings); } - 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._collapsed = false; + this.cdr.detectChanges(); + this.unsubscribe(); this._overlayAppendedSub = this.overlayService.onAppended.pipe(...this._overlaySubFilter).subscribe(() => { 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 - + { beforeEach(() => { fixture = TestBed.createComponent(ToastInitializeTestComponent); toast = fixture.componentInstance.toast; - toast.isVisible = true; fixture.detectChanges(); }); @@ -41,7 +40,6 @@ describe('IgxToast', () => { expect(domToast.id).toContain('igx-toast-'); expect(toast.displayTime).toBe(4000); expect(toast.autoHide).toBeTruthy(); - expect(toast.isVisible).toBeTruthy(); toast.id = 'customToast'; fixture.detectChanges(); @@ -51,79 +49,59 @@ describe('IgxToast', () => { }); it('should auto hide after it\'s open', fakeAsync(() => { - spyOn(toast.onHiding, 'emit'); + spyOn(toast.onClosing, 'emit'); toast.displayTime = 1000; - toast.show(); + toast.open(); tick(1000); - expect(toast.onHiding.emit).toHaveBeenCalled(); + expect(toast.onClosing.emit).toHaveBeenCalled(); })); it('should not auto hide after it\'s open', fakeAsync(() => { - spyOn(toast.onHiding, 'emit'); + spyOn(toast.onClosing, 'emit'); toast.displayTime = 1000; toast.autoHide = false; - toast.show(); + toast.open(); tick(1000); - expect(toast.onHiding.emit).not.toHaveBeenCalled(); + expect(toast.onClosing.emit).not.toHaveBeenCalled(); })); - it('should emit onShowing when toast is shown', () => { - spyOn(toast.onShowing, 'emit'); - toast.show(); - expect(toast.onShowing.emit).toHaveBeenCalled(); + it('should emit onOpening when toast is shown', () => { + spyOn(toast.onOpening, 'emit'); + toast.open(); + expect(toast.onOpening.emit).toHaveBeenCalled(); }); it('should emit onHiding when toast is hidden', () => { spyOn(toast.onHiding, 'emit'); - toast.hide(); + toast.close(); expect(toast.onHiding.emit).toHaveBeenCalled(); }); - it('should emit onShown when toggle onOpened is fired', waitForAsync(() => { - spyOn(toast.onShown, 'emit'); + it('should emit onOpened when toast is opened', () => { + expect(toast.isVisible).toBeFalse(); toast.open(); + fixture.detectChanges(); + expect(toast.isVisible).toBeTrue(); + }); - toast.onOpened.subscribe(() => { - expect(toast.onShown.emit).toHaveBeenCalled(); - }); - })); - - it('should emit onHidden when toggle onClosed is fired', waitForAsync(() => { - spyOn(toast.onHidden, 'emit'); - toast.isVisible = true; - toast.close(); - - toast.onClosed.subscribe(() => { - expect(toast.onHidden.emit).toHaveBeenCalled(); - }); - })); - - it('visibility is updated by the toggle() method', waitForAsync((done: DoneFn) => { - toast.autoHide = false; - - toast.toggle(); - toast.onOpened.subscribe(() => { - expect(toast.isVisible).toEqual(true); - }); - + it('visibility is updated by the toggle() method', () => { + expect(toast.isVisible).toBeFalse(); toast.toggle(); - toast.onClosed.subscribe(() => { - expect(toast.isVisible).toEqual(false); - done(); - }); - })); + fixture.detectChanges(); + expect(toast.isVisible).toBeTrue(); + }); it('can set message through show method', fakeAsync(() => { toast.displayTime = 100; toast.autoHide = false; - toast.show('Custom Message'); + toast.open('Custom Message'); tick(100); fixture.detectChanges(); - expect(toast.isVisible).toBeTruthy(); + expect(toast.autoHide).toBeFalsy(); expect(toast.toastMessage).toBe('Custom Message'); })); @@ -136,3 +114,4 @@ class ToastInitializeTestComponent { @ViewChild(IgxToastComponent, { static: true }) public toast: IgxToastComponent; } + diff --git a/projects/igniteui-angular/src/lib/toast/toast.component.ts b/projects/igniteui-angular/src/lib/toast/toast.component.ts index 3e29d1e1004..95d4f7a5e2c 100644 --- a/projects/igniteui-angular/src/lib/toast/toast.component.ts +++ b/projects/igniteui-angular/src/lib/toast/toast.component.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { DeprecateProperty } from '../core/deprecateDecorators'; +import { DeprecateMethod, DeprecateProperty } from '../core/deprecateDecorators'; import { ChangeDetectorRef, Component, @@ -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 @@ -98,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(); @@ -109,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(); @@ -120,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(); @@ -131,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(); @@ -210,12 +213,19 @@ export class IgxToastComponent extends IgxToggleDirective */ @Input() public get isVisible() { - return this._isVisible; + return !this.collapsed; } public set isVisible(value) { - this._isVisible = value; - this.isVisibleChange.emit(this._isVisible); + if (value !== this.isVisible) { + if (value) { + requestAnimationFrame(() => { + this.open(); + }); + } else { + this.close(); + } + } } /** @@ -236,7 +246,7 @@ 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.`) + 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; @@ -292,13 +302,15 @@ export class IgxToastComponent extends IgxToggleDirective } /** + * @deprecated * Shows the toast. * If `autoHide` is enabled, the toast will hide after `displayTime` is over. * ```typescript * this.toast.show(); * ``` - * @memberof IgxToastComponent + * @memberof IgxGridCellComponent */ + @DeprecateMethod(`'show' is deprecated. Use 'open' method instead.`) public show(message?: string): void { clearInterval(this.timeoutId); @@ -333,12 +345,14 @@ export class IgxToastComponent extends IgxToggleDirective } /** + * @deprecated * Hides the toast. * ```typescript * this.toast.hide(); * ``` * @memberof IgxToastComponent */ + @DeprecateMethod(`'hide' is deprecated. Use 'close' method instead.`) public hide(): void { clearInterval(this.timeoutId); this.onHiding.emit(this); @@ -346,19 +360,55 @@ export class IgxToastComponent extends IgxToggleDirective } /** - * Wraps @show() method due @IToggleView interface implementation. - * @hidden + * Shows the toast. + * If `autoHide` is enabled, the toast will hide after `displayTime` is over. + * ```typescript + * this.toast.open(); + * ``` */ - public open() { - this.show(); + public open(message?) { + clearInterval(this.timeoutId); + + const overlaySettings: OverlaySettings = { + positionStrategy: new GlobalPositionStrategy({ + horizontalDirection: HorizontalAlignment.Center, + verticalDirection: + this.position === 'bottom' + ? VerticalAlignment.Bottom + : this.position === 'middle' + ? VerticalAlignment.Middle + : VerticalAlignment.Top, + }), + closeOnEscape: false, + closeOnOutsideClick: false, + modal: false, + outlet: this.outlet, + }; + + if (message !== undefined) { + this.toastMessage = message; + } + + this.onShowing.emit(this); + super.open(overlaySettings); + + if (this.autoHide) { + this.timeoutId = window.setTimeout(() => { + this.close(); + }, this.displayTime); + } } /** - * Wraps @hide() method due @IToggleView interface implementation. - * @hidden + * Hides the toast. + * ```typescript + * this.toast.close(); + * ``` */ public close() { - this.hide(); + clearInterval(this.timeoutId); + this.onHiding.emit(this); + super.close(); } /** @@ -377,13 +427,13 @@ export class IgxToastComponent extends IgxToggleDirective */ ngOnInit() { this.onOpened.pipe(takeUntil(this.d$)).subscribe(() => { + this.isVisibleChange.emit(true); this.onShown.emit(this); - this.isVisible = true; }); this.onClosed.pipe(takeUntil(this.d$)).subscribe(() => { + this.isVisibleChange.emit(false); this.onHidden.emit(this); - this.isVisible = false; }); } @@ -404,4 +454,4 @@ export class IgxToastComponent extends IgxToggleDirective exports: [IgxToastComponent], imports: [CommonModule], }) -export class IgxToastModule {} +export class IgxToastModule { } 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