diff --git a/nativescript-angular/directives/dialogs.ts b/nativescript-angular/directives/dialogs.ts index 7c8b45739..3c700777d 100644 --- a/nativescript-angular/directives/dialogs.ts +++ b/nativescript-angular/directives/dialogs.ts @@ -7,6 +7,7 @@ import { ReflectiveInjector, Type, ViewContainerRef, + ElementRef, } from "@angular/core"; import { NSLocationStrategy } from "../router/ns-location-strategy"; @@ -17,15 +18,15 @@ import { AppHostView } from "../app-host-view"; import { DetachedLoader } from "../common/detached-loader"; import { PageFactory, PAGE_FACTORY } from "../platform-providers"; import { once } from "../common/utils"; -import { topmost, Frame } from "tns-core-modules/ui/frame"; +import { topmost, Frame, ShowModalOptions } from "tns-core-modules/ui/frame"; -export interface ModalDialogOptions { +export type BaseShowModalOptions = Pick>; + +export interface ModalDialogOptions extends BaseShowModalOptions { context?: any; - fullscreen?: boolean; - animated?: boolean; - stretched?: boolean; viewContainerRef?: ViewContainerRef; moduleRef?: NgModuleRef; + sourceView?: ElementRef; } export class ModalDialogParams { @@ -35,13 +36,10 @@ export class ModalDialogParams { } } -interface ShowDialogOptions { +interface ShowDialogOptions extends BaseShowModalOptions { containerRef: ViewContainerRef; context: any; doneCallback; - fullscreen: boolean; - animated: boolean; - stretched: boolean; pageFactory: PageFactory; parentView: ViewBase; resolver: ComponentFactoryResolver; @@ -54,16 +52,19 @@ export class ModalDialogService { } public showModal(type: Type, - { viewContainerRef, moduleRef, context, fullscreen, animated, stretched }: ModalDialogOptions + options: ModalDialogOptions ): Promise { - if (!viewContainerRef) { + if (!options.viewContainerRef) { throw new Error( "No viewContainerRef: " + "Make sure you pass viewContainerRef in ModalDialogOptions." ); } - let parentView = viewContainerRef.element.nativeElement; + let parentView = options.viewContainerRef.element.nativeElement; + if (options.sourceView) { + parentView = options.sourceView.nativeElement; + } if (parentView instanceof AppHostView && parentView.ngAppRoot) { parentView = parentView.ngAppRoot; } @@ -75,11 +76,11 @@ export class ModalDialogService { parentView = parentView._ngDialogRoot; } - const pageFactory: PageFactory = viewContainerRef.injector.get(PAGE_FACTORY); + const pageFactory: PageFactory = options.viewContainerRef.injector.get(PAGE_FACTORY); // resolve from particular module (moduleRef) // or from same module as parentView (viewContainerRef) - const componentContainer = moduleRef || viewContainerRef; + const componentContainer = options.moduleRef || options.viewContainerRef; const resolver = componentContainer.injector.get(ComponentFactoryResolver); let frame = parentView; @@ -93,16 +94,14 @@ export class ModalDialogService { setTimeout(() => { try { this._showDialog({ - containerRef: viewContainerRef, - context, + ...options, + containerRef: options.viewContainerRef, + context: options.context, doneCallback: resolve, - fullscreen, - animated, - stretched, pageFactory, parentView, resolver, - type, + type }); } catch (err) { reject(err); @@ -111,23 +110,12 @@ export class ModalDialogService { }); } - private _showDialog({ - containerRef, - context, - doneCallback, - fullscreen, - animated, - stretched, - pageFactory, - parentView, - resolver, - type, - }: ShowDialogOptions): void { + private _showDialog(options: ShowDialogOptions): void { let componentView: View; let detachedLoaderRef: ComponentRef; const closeCallback = once((...args) => { - doneCallback.apply(undefined, args); + options.doneCallback.apply(undefined, args); if (componentView) { componentView.closeModal(); this.location._closeModalNavigation(); @@ -136,15 +124,15 @@ export class ModalDialogService { } }); - const modalParams = new ModalDialogParams(context, closeCallback); + const modalParams = new ModalDialogParams(options.context, closeCallback); const providers = ReflectiveInjector.resolve([ { provide: ModalDialogParams, useValue: modalParams }, ]); - const childInjector = ReflectiveInjector.fromResolvedProviders(providers, containerRef.parentInjector); - const detachedFactory = resolver.resolveComponentFactory(DetachedLoader); - detachedLoaderRef = containerRef.createComponent(detachedFactory, -1, childInjector, null); - detachedLoaderRef.instance.loadComponent(type).then((compRef) => { + const childInjector = ReflectiveInjector.fromResolvedProviders(providers, options.containerRef.parentInjector); + const detachedFactory = options.resolver.resolveComponentFactory(DetachedLoader); + detachedLoaderRef = options.containerRef.createComponent(detachedFactory, -1, childInjector, null); + detachedLoaderRef.instance.loadComponent(options.type).then((compRef) => { const detachedProxy = compRef.location.nativeElement; if (detachedProxy.getChildrenCount() > 1) { @@ -157,9 +145,10 @@ export class ModalDialogService { (componentView.parent).removeChild(componentView); } + // TODO: remove cast after https://github.com/NativeScript/NativeScript/pull/5734 // is in a published version of tns-core-modules. - (parentView).showModal(componentView, context, closeCallback, fullscreen, animated, stretched); + (options.parentView).showModal(componentView, { ...options, closeCallback }); }); } }