From 94dba28d1abfe26525ccc74b1253b2f41f3d3698 Mon Sep 17 00:00:00 2001 From: Enea Jahollari Date: Thu, 4 May 2023 07:45:25 +0200 Subject: [PATCH] feat: Add provider function, convert to standalone and use inject (#991) --- src/app/app.module.ts | 7 ++-- src/lib/overlay/overlay-container.ts | 5 +-- src/lib/overlay/overlay.ts | 13 +++--- src/lib/public_api.ts | 1 + src/lib/toastr/toast-noanimation.component.ts | 7 ++-- src/lib/toastr/toast.component.ts | 17 ++++---- src/lib/toastr/toast.directive.ts | 13 +----- src/lib/toastr/toast.provider.ts | 42 +++++++++++++++++++ src/lib/toastr/toastr.module.ts | 24 ++--------- 9 files changed, 75 insertions(+), 54 deletions(-) create mode 100644 src/lib/toastr/toast.provider.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 51178d29..13096298 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -5,7 +5,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { GhButtonModule } from '@ctrl/ngx-github-buttons'; -import { ToastrModule, ToastContainerModule, ToastNoAnimationModule } from '../lib/public_api'; +import { ToastNoAnimationModule, ToastContainerDirective } from '../lib/public_api'; import { AppComponent } from './app.component'; import { FooterComponent } from './footer/footer.component'; @@ -14,6 +14,7 @@ import { HomeComponent } from './home/home.component'; import { NotyfToast } from './notyf.toast'; import { PinkToast } from './pink.toast'; import { BootstrapToast } from './bootstrap.toast'; +import { provideToastr } from '../lib/toastr/toast.provider'; @NgModule({ declarations: [ @@ -30,10 +31,10 @@ import { BootstrapToast } from './bootstrap.toast'; FormsModule, BrowserAnimationsModule, ToastNoAnimationModule, - ToastrModule.forRoot(), - ToastContainerModule, + ToastContainerDirective, GhButtonModule, ], + providers: [provideToastr()], bootstrap: [AppComponent], }) export class AppModule {} diff --git a/src/lib/overlay/overlay-container.ts b/src/lib/overlay/overlay-container.ts index 54b0f5b8..f981d22e 100644 --- a/src/lib/overlay/overlay-container.ts +++ b/src/lib/overlay/overlay-container.ts @@ -1,13 +1,12 @@ import { DOCUMENT } from '@angular/common'; -import { Inject, Injectable, OnDestroy } from '@angular/core'; +import { inject, Injectable, OnDestroy } from '@angular/core'; /** Container inside which all toasts will render. */ @Injectable({ providedIn: 'root' }) export class OverlayContainer implements OnDestroy { + protected _document = inject(DOCUMENT); protected _containerElement!: HTMLElement; - constructor(@Inject(DOCUMENT) protected _document: any) {} - ngOnDestroy() { if (this._containerElement && this._containerElement.parentNode) { this._containerElement.parentNode.removeChild(this._containerElement); diff --git a/src/lib/overlay/overlay.ts b/src/lib/overlay/overlay.ts index 5312ccb1..487abbea 100644 --- a/src/lib/overlay/overlay.ts +++ b/src/lib/overlay/overlay.ts @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/no-non-null-assertion */ import { DOCUMENT } from '@angular/common'; -import { ApplicationRef, ComponentFactoryResolver, Inject, Injectable } from '@angular/core'; +import { ApplicationRef, ComponentFactoryResolver, inject, Inject, Injectable } from '@angular/core'; import { DomPortalHost } from '../portal/dom-portal-host'; import { ToastContainerDirective } from '../toastr/toast.directive'; @@ -17,15 +17,14 @@ import { OverlayRef } from './overlay-ref'; */ @Injectable({ providedIn: 'root' }) export class Overlay { + private _overlayContainer = inject(OverlayContainer); + private _componentFactoryResolver = inject(ComponentFactoryResolver); + private _appRef = inject(ApplicationRef); + private _document = inject(DOCUMENT); + // Namespace panes by overlay container private _paneElements: Map> = new Map(); - constructor( - private _overlayContainer: OverlayContainer, - private _componentFactoryResolver: ComponentFactoryResolver, - private _appRef: ApplicationRef, - @Inject(DOCUMENT) private _document: any, - ) {} /** * Creates an overlay. * @returns A reference to the created overlay. diff --git a/src/lib/public_api.ts b/src/lib/public_api.ts index 13d3e3af..c065497b 100644 --- a/src/lib/public_api.ts +++ b/src/lib/public_api.ts @@ -3,6 +3,7 @@ export * from './toastr/toast.component'; export * from './toastr/toastr.service'; export * from './toastr/toastr-config'; export * from './toastr/toastr.module'; +export * from './toastr/toast.provider'; export * from './toastr/toast-ref'; export * from './toastr/toast-noanimation.component'; diff --git a/src/lib/toastr/toast-noanimation.component.ts b/src/lib/toastr/toast-noanimation.component.ts index 98369830..93bddfed 100644 --- a/src/lib/toastr/toast-noanimation.component.ts +++ b/src/lib/toastr/toast-noanimation.component.ts @@ -1,4 +1,4 @@ -import { CommonModule } from '@angular/common'; +import { NgIf } from '@angular/common'; import { ModuleWithProviders } from '@angular/core'; import { ApplicationRef, @@ -40,6 +40,8 @@ import { ToastrService } from './toastr.service';
`, + standalone: true, + imports: [NgIf] }) export class ToastNoAnimation implements OnDestroy { message?: string | null; @@ -220,8 +222,7 @@ export const DefaultNoAnimationsGlobalConfig: GlobalConfig = { }; @NgModule({ - imports: [CommonModule], - declarations: [ToastNoAnimation], + imports: [ToastNoAnimation], exports: [ToastNoAnimation], }) export class ToastNoAnimationModule { diff --git a/src/lib/toastr/toast.component.ts b/src/lib/toastr/toast.component.ts index 6f2e6e73..abe094d6 100644 --- a/src/lib/toastr/toast.component.ts +++ b/src/lib/toastr/toast.component.ts @@ -10,8 +10,9 @@ import { HostBinding, HostListener, NgZone, - OnDestroy + OnDestroy, } from '@angular/core'; +import { NgIf } from '@angular/common'; import { Subscription } from 'rxjs'; import { IndividualConfig, ToastPackage } from './toastr-config'; import { ToastrService } from './toastr.service'; @@ -43,15 +44,17 @@ import { ToastrService } from './toastr.service'; state('removed', style({ opacity: 0 })), transition( 'inactive => active', - animate('{{ easeTime }}ms {{ easing }}') + animate('{{ easeTime }}ms {{ easing }}'), ), transition( 'active => removed', - animate('{{ easeTime }}ms {{ easing }}') - ) - ]) + animate('{{ easeTime }}ms {{ easing }}'), + ), + ]), ], - preserveWhitespaces: false + preserveWhitespaces: false, + standalone: true, + imports: [ NgIf ], }) export class Toast implements OnDestroy { message?: string | null; @@ -206,7 +209,7 @@ export class Toast implements OnDestroy { clearTimeout(this.timeout); this.options.timeOut = 0; this.hideTime = 0; - + // disable progressBar clearInterval(this.intervalId); this.width = 0; diff --git a/src/lib/toastr/toast.directive.ts b/src/lib/toastr/toast.directive.ts index d135caf9..32d9162d 100644 --- a/src/lib/toastr/toast.directive.ts +++ b/src/lib/toastr/toast.directive.ts @@ -1,12 +1,9 @@ -import { - Directive, - ElementRef, - NgModule, -} from '@angular/core'; +import { Directive, ElementRef } from '@angular/core'; @Directive({ selector: '[toastContainer]', exportAs: 'toastContainer', + standalone: true }) export class ToastContainerDirective { constructor(private el: ElementRef) { } @@ -14,9 +11,3 @@ export class ToastContainerDirective { return this.el.nativeElement; } } - -@NgModule({ - declarations: [ToastContainerDirective], - exports: [ToastContainerDirective], -}) -export class ToastContainerModule {} diff --git a/src/lib/toastr/toast.provider.ts b/src/lib/toastr/toast.provider.ts new file mode 100644 index 00000000..f26d0b7a --- /dev/null +++ b/src/lib/toastr/toast.provider.ts @@ -0,0 +1,42 @@ +import { DefaultNoComponentGlobalConfig, GlobalConfig, TOAST_CONFIG } from './toastr-config'; +import { EnvironmentProviders, makeEnvironmentProviders, Provider } from '@angular/core'; +import { Toast } from './toast.component'; + +export const DefaultGlobalConfig: GlobalConfig = { + ...DefaultNoComponentGlobalConfig, + toastComponent: Toast, +}; + +/** + * @description + * Provides the `TOAST_CONFIG` token with the given config. + * + * @param config The config to configure toastr. + * @returns The environment providers. + * + * @example + * ```ts + * import { provideToastr } from 'ngx-toastr'; + * + * bootstrap(AppComponent, { + * providers: [ + * provideToastr({ + * timeOut: 2000, + * positionClass: 'toast-top-right', + * }), + * ], + * }) + */ +export const provideToastr = (config: Partial = {}): EnvironmentProviders => { + const providers: Provider[] = [ + { + provide: TOAST_CONFIG, + useValue: { + default: DefaultGlobalConfig, + config, + } + } + ]; + + return makeEnvironmentProviders(providers); +}; diff --git a/src/lib/toastr/toastr.module.ts b/src/lib/toastr/toastr.module.ts index 4d3c236f..6867ef94 100644 --- a/src/lib/toastr/toastr.module.ts +++ b/src/lib/toastr/toastr.module.ts @@ -1,39 +1,23 @@ -import { CommonModule } from '@angular/common'; import { ModuleWithProviders, NgModule } from '@angular/core'; import { Toast } from './toast.component'; import { DefaultNoComponentGlobalConfig, GlobalConfig, TOAST_CONFIG } from './toastr-config'; - -export const DefaultGlobalConfig: GlobalConfig = { - ...DefaultNoComponentGlobalConfig, - toastComponent: Toast, -}; +import { provideToastr } from './toast.provider'; @NgModule({ - imports: [CommonModule], - declarations: [Toast], + imports: [Toast], exports: [Toast], }) export class ToastrModule { static forRoot(config: Partial = {}): ModuleWithProviders { return { ngModule: ToastrModule, - providers: [ - { - provide: TOAST_CONFIG, - useValue: { - default: DefaultGlobalConfig, - config, - }, - }, - ], + providers: [provideToastr(config)], }; } } -@NgModule({ - imports: [CommonModule], -}) +@NgModule({}) export class ToastrComponentlessModule { static forRoot(config: Partial = {}): ModuleWithProviders { return {