diff --git a/projects/ion/src/lib/core/types/notification.ts b/projects/ion/src/lib/core/types/notification.ts index 6b8a0ae21..d2392ecbd 100644 --- a/projects/ion/src/lib/core/types/notification.ts +++ b/projects/ion/src/lib/core/types/notification.ts @@ -16,3 +16,7 @@ export interface NotificationConfigOptions { fadeOut?: fadeOutDirection; ionOnClose?: EventEmitter; } + +export interface NotificationServiceConfig { + maxStack?: number; +} diff --git a/projects/ion/src/lib/notification/service/notification.container.component.ts b/projects/ion/src/lib/notification/service/notification.container.component.ts index 98503bbae..932e96fe8 100644 --- a/projects/ion/src/lib/notification/service/notification.container.component.ts +++ b/projects/ion/src/lib/notification/service/notification.container.component.ts @@ -7,11 +7,27 @@ import { Component, ComponentRef, Renderer2, ElementRef } from '@angular/core'; styleUrls: ['notification.container.scss'], }) export class IonNotificationContainerComponent { + private notificationRefControl: ComponentRef[] = []; constructor(private renderer: Renderer2, private element: ElementRef) {} - addNotification(notification: ComponentRef): void { + addNotification( + notification: ComponentRef, + maxStack: number + ): void { + if (this.notificationRefControl.length === maxStack) { + this.notificationRefControl[0].instance.ionOnClose.complete(); + this.removeNotification( + this.notificationRefControl[0].location.nativeElement + ); + this.notificationRefControl.shift(); + } + + this.notificationRefControl.push(notification); notification.instance.ionOnClose.subscribe(() => { this.removeNotification(notification.location.nativeElement); + this.notificationRefControl = this.notificationRefControl.filter( + (value) => value !== notification + ); }); this.renderer.appendChild( diff --git a/projects/ion/src/lib/notification/service/notification.service.spec.ts b/projects/ion/src/lib/notification/service/notification.service.spec.ts index c0c460b8f..b846ef22a 100644 --- a/projects/ion/src/lib/notification/service/notification.service.spec.ts +++ b/projects/ion/src/lib/notification/service/notification.service.spec.ts @@ -162,3 +162,33 @@ describe('NotificationService -> notification types', () => { } ); }); + +describe('NotificationService -> notification maxStack', () => { + let notificationService: IonNotificationService; + + it('should not exceed the maxStack', () => { + const removeNotification = screen.getAllByTestId('btn-remove'); + removeNotification.forEach((element) => fireEvent.click(element)); + + TestBed.configureTestingModule({ + imports: [TestModule], + }).compileComponents(); + + notificationService = TestBed.get(IonNotificationService); + + notificationService.notificationServiceConfig = { maxStack: 2 }; + notificationService.success( + DEFAULT_NOTIFICATION_OPTIONS.title, + DEFAULT_NOTIFICATION_OPTIONS.message + ); + notificationService.error( + DEFAULT_NOTIFICATION_OPTIONS.title, + DEFAULT_NOTIFICATION_OPTIONS.message + ); + notificationService.error( + DEFAULT_NOTIFICATION_OPTIONS.title, + DEFAULT_NOTIFICATION_OPTIONS.message + ); + expect(screen.getAllByTestId('ion-notification').length).toBe(2); + }); +}); diff --git a/projects/ion/src/lib/notification/service/notification.service.ts b/projects/ion/src/lib/notification/service/notification.service.ts index 259f00bf9..89ec79353 100644 --- a/projects/ion/src/lib/notification/service/notification.service.ts +++ b/projects/ion/src/lib/notification/service/notification.service.ts @@ -1,5 +1,8 @@ import { StatusType } from './../../core/types/status'; -import { NotificationConfigOptions } from './../../core/types/notification'; +import { + NotificationConfigOptions, + NotificationServiceConfig, +} from './../../core/types/notification'; import { IonNotificationComponent } from './../component/notification.component'; import { Injectable, @@ -25,6 +28,7 @@ enum NOTIFICATION_TYPES { providedIn: 'root', }) export class IonNotificationService { + public notificationServiceConfig: NotificationServiceConfig = { maxStack: 8 }; private notificationContainerComponentRef: ComponentRef; private componentSubscriber!: Subject; @@ -183,7 +187,8 @@ export class IonNotificationService { notification.changeDetectorRef.detectChanges(); this.notificationContainerComponentRef.instance.addNotification( - notification + notification, + this.notificationServiceConfig.maxStack ); this.notificationContainerComponentRef.changeDetectorRef.detectChanges();