1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-16 08:13:42 +00:00

[PM-3919] Remove deprecated Angular functionality from ModalService (#6285)

Remove deprecated Angular functionality from ModalService so we can upgrade Angular.
This commit is contained in:
Oscar Hinton
2024-01-22 10:36:42 +01:00
committed by GitHub
parent 487d17daed
commit 7bb4ea842f
6 changed files with 29 additions and 107 deletions

View File

@@ -1,26 +1,10 @@
import {
ApplicationRef,
ComponentFactory,
ComponentFactoryResolver,
ComponentRef,
EmbeddedViewRef,
Injectable,
Injector,
Type,
ViewContainerRef,
} from "@angular/core";
import { ComponentRef, Injectable, Injector, Type, ViewContainerRef } from "@angular/core";
import { first } from "rxjs/operators";
import { DynamicModalComponent } from "../components/modal/dynamic-modal.component";
import { ModalInjector } from "../components/modal/modal-injector";
import { ModalRef } from "../components/modal/modal.ref";
export class ModalConfig<D = any> {
data?: D;
allowMultipleModals?: boolean;
replaceTopModal?: boolean;
}
/**
* @deprecated Use the Component Library's `DialogService` instead.
*/
@@ -28,15 +12,7 @@ export class ModalConfig<D = any> {
export class ModalService {
protected modalList: ComponentRef<DynamicModalComponent>[] = [];
// Lazy loaded modules are not available in componentFactoryResolver,
// therefore modules needs to manually initialize their resolvers.
private factoryResolvers: Map<Type<any>, ComponentFactoryResolver> = new Map();
constructor(
private componentFactoryResolver: ComponentFactoryResolver,
private applicationRef: ApplicationRef,
private injector: Injector,
) {
constructor(private injector: Injector) {
document.addEventListener("keyup", (event) => {
if (event.key === "Escape" && this.modalCount > 0) {
this.topModal.instance.close();
@@ -62,7 +38,7 @@ export class ModalService {
viewContainerRef: ViewContainerRef,
setComponentParameters: (component: T) => void = null,
): Promise<[ModalRef, T]> {
const [modalRef, modalComponentRef] = this.openInternal(componentType, null, false);
const [modalRef, modalComponentRef] = this.openInternal(viewContainerRef, componentType);
modalComponentRef.instance.setComponentParameters = setComponentParameters;
viewContainerRef.insert(modalComponentRef.hostView);
@@ -72,52 +48,18 @@ export class ModalService {
return [modalRef, modalComponentRef.instance.componentRef.instance];
}
open(componentType: Type<any>, config: ModalConfig = {}) {
const { replaceTopModal = false, allowMultipleModals = false } = config;
if (this.modalCount > 0 && replaceTopModal) {
this.topModal.instance.close();
}
if (this.modalCount > 0 && !allowMultipleModals) {
return;
}
const [modalRef] = this.openInternal(componentType, config, true);
return modalRef;
}
resolveComponentFactory<T>(componentType: Type<T>): ComponentFactory<T> {
if (this.factoryResolvers.has(componentType)) {
return this.factoryResolvers.get(componentType).resolveComponentFactory(componentType);
}
return this.componentFactoryResolver.resolveComponentFactory(componentType);
}
closeAll(): void {
this.modalList.forEach((modal) => modal.instance.close());
}
protected openInternal(
viewContainerRef: ViewContainerRef,
componentType: Type<any>,
config?: ModalConfig,
attachToDom?: boolean,
): [ModalRef, ComponentRef<DynamicModalComponent>] {
const [modalRef, componentRef] = this.createModalComponent(config);
): [ModalRef, ComponentRef<any>] {
const [modalRef, componentRef] = this.createModalComponent(viewContainerRef);
componentRef.instance.childComponentType = componentType;
if (attachToDom) {
this.applicationRef.attachView(componentRef.hostView);
const domElem = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
document.body.appendChild(domElem);
}
modalRef.onClosed.pipe(first()).subscribe(() => {
if (attachToDom) {
this.applicationRef.detachView(componentRef.hostView);
}
componentRef.destroy();
this.modalList.pop();
@@ -174,17 +116,15 @@ export class ModalService {
}
protected createModalComponent(
config: ModalConfig,
): [ModalRef, ComponentRef<DynamicModalComponent>] {
viewContainerRef: ViewContainerRef,
): [ModalRef, ComponentRef<any>] {
const modalRef = new ModalRef();
const map = new WeakMap();
map.set(ModalConfig, config);
map.set(ModalRef, modalRef);
const componentFactory =
this.componentFactoryResolver.resolveComponentFactory(DynamicModalComponent);
const componentRef = componentFactory.create(new ModalInjector(this.injector, map));
const injector = new ModalInjector(this.injector, map);
const componentRef = viewContainerRef.createComponent(DynamicModalComponent, { injector });
return [modalRef, componentRef];
}