Modal dialogs reafactoring

Author: vakrilov

nativescript-angular/directives/dialogs.ts

@@ -1,14 +1,15 @@
 import {
     ReflectiveInjector, ComponentFactoryResolver, ViewContainerRef,
-    Injector, Type, Injectable, ComponentRef, Directive
+    Type, Injectable, ComponentRef, Directive
 } from '@angular/core';
-import {Page} from 'ui/page';
-import {View} from 'ui/core/view';
-import {DetachedLoader} from '../common/detached-loader';
+import { Page } from 'ui/page';
+import { View } from 'ui/core/view';
+import { DetachedLoader } from '../common/detached-loader';
 
 export interface ModalDialogOptions {
     context?: any;
     fullscreen?: boolean;
+    viewContainerRef?: ViewContainerRef;
 }
 
 export class ModalDialogParams {
@@ -22,52 +23,61 @@ export class ModalDialogParams {
 export class ModalDialogService {
     private containerRef: ViewContainerRef;
 
-    constructor(
-        private page: Page,
-        private resolver: ComponentFactoryResolver) {
-    }
-
     public registerViewContainerRef(ref: ViewContainerRef) {
         this.containerRef = ref;
     }
 
     public showModal(type: Type<any>, options: ModalDialogOptions): Promise<any> {
-        if (!this.containerRef) {
-            throw new Error("No viewContainerRef: Make sure you have the modal-dialog-host directive inside your component.");
+        let viewContainerRef = options.viewContainerRef || this.containerRef;
+
+        if (!viewContainerRef) {
+            throw new Error("No viewContainerRef: Make sure you pass viewContainerRef in ModalDialogOptions.");
         }
+
+        const parentPage: Page = viewContainerRef.injector.get(Page);
+        const resolver: ComponentFactoryResolver = viewContainerRef.injector.get(ComponentFactoryResolver);
+
         return new Promise((resolve, reject) => {
-            setTimeout(() => this.showDialog(type, options, resolve), 10);
+            setTimeout(() => ModalDialogService.showDialog(type, options, resolve, viewContainerRef, resolver, parentPage), 10);
         });
     }
 
-    private showDialog(type: Type<any>, options: ModalDialogOptions, doneCallback): void {
+    private static showDialog(
+        type: Type<any>,
+        options: ModalDialogOptions,
+        doneCallback,
+        containerRef: ViewContainerRef,
+        resolver: ComponentFactoryResolver,
+        parentPage: Page): void {
+
         const page = new Page();
 
-        var detachedLoaderRef: ComponentRef<DetachedLoader>;
+        let detachedLoaderRef: ComponentRef<DetachedLoader>;
         const closeCallback = (...args) => {
             doneCallback.apply(undefined, args);
             page.closeModal();
             detachedLoaderRef.destroy();
-        }
+        };
+
         const modalParams = new ModalDialogParams(options.context, closeCallback);
 
         const providers = ReflectiveInjector.resolve([
-            {provide: Page, useValue: page },
-            {provide: ModalDialogParams, useValue: modalParams },
+            { provide: Page, useValue: page },
+            { provide: ModalDialogParams, useValue: modalParams },
         ]);
 
-        const childInjector = ReflectiveInjector.fromResolvedProviders(providers, this.containerRef.parentInjector);
-        const detachedFactory = this.resolver.resolveComponentFactory(DetachedLoader);
-        detachedLoaderRef = this.containerRef.createComponent(detachedFactory, -1, childInjector, null)
+        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 componentView = <View>compRef.location.nativeElement;
-            
+
             if (componentView.parent) {
                 (<any>componentView.parent).removeChild(componentView);
             }
-            
+
             page.content = componentView;
-            this.page.showModal(page, options.context, closeCallback, options.fullscreen);
+            parentPage.showModal(page, options.context, closeCallback, options.fullscreen);
         });
     }
 }
@@ -78,6 +88,8 @@ export class ModalDialogService {
 })
 export class ModalDialogHost {
     constructor(containerRef: ViewContainerRef, modalService: ModalDialogService) {
+        console.log("ModalDialogHost is deprecated. Call ModalDialogService.showModal() by passing ViewContainerRef in the options instead.")
+
         modalService.registerViewContainerRef(containerRef);
     }
 } 

nativescript-angular/platform.ts

@@ -16,7 +16,7 @@ import {CommonModule} from '@angular/common';
 import {Provider} from '@angular/core';
 import {NativeScriptRootRenderer, NativeScriptRenderer} from './renderer';
 import {DetachedLoader} from "./common/detached-loader";
-import {ModalDialogHost} from "./directives/dialogs";
+import {ModalDialogHost, ModalDialogService} from "./directives/dialogs";
 import {
     Type,
     Injector,
@@ -84,6 +84,7 @@ export interface AppOptions {
         NativeScriptRenderer,
         {provide: Renderer, useClass: NativeScriptRenderer},
         {provide: Sanitizer, useClass: NativeScriptSanitizer},
+        ModalDialogService
     ],
     entryComponents: [
         DetachedLoader,

ng-sample/app/examples/modal/modal-test.ts

@@ -1,13 +1,12 @@
-import {Component} from '@angular/core';
+import { Component, ViewContainerRef } from '@angular/core';
 import * as dialogs from "ui/dialogs";
-import {ModalDialogService, ModalDialogOptions, ModalDialogHost} from "nativescript-angular/directives/dialogs";
-import {ModalContent} from "./modal-content";
+import { ModalDialogService, ModalDialogOptions } from "nativescript-angular/directives/dialogs";
+import { ModalContent} from "./modal-content";
 
 @Component({
     selector: 'modal-test',
-    providers: [ModalDialogService],
     template: `
-    <GridLayout rows="*, auto" modal-dialog-host>
+    <GridLayout rows="*, auto">
         <StackLayout verticalAlignment="top" margin="12">
             <Button text="show component" (tap)="showModal(false)"></Button>
             <Button text="show component fullscreen" (tap)="showModal(true)"></Button>
@@ -27,7 +26,7 @@ import {ModalContent} from "./modal-content";
 export class ModalTest {
     public result: string = "result";
 
-    constructor(private modal: ModalDialogService) {
+    constructor(private modal: ModalDialogService, private vcRef: ViewContainerRef) {
     }
 
     static entries = [
@@ -39,14 +38,15 @@ export class ModalTest {
     ];
 
     public showModal(fullscreen: boolean) {
-        var options: ModalDialogOptions = {
+        const options: ModalDialogOptions = {
             context: { promptMsg: "This is the prompt message!" },
-            fullscreen: fullscreen
+            fullscreen: fullscreen,
+            viewContainerRef: this.vcRef
         };
 
         this.modal.showModal(ModalContent, options).then((res: string) => {
             this.result = res || "empty result";
-        })
+        });
     }
 
     public showAlert() {

tests/app/tests/modal-dialog.ts

@@ -1,7 +1,7 @@
 //make sure you import mocha-config before @angular/core
 import {assert} from "./test-config";
 import {TestApp} from "./test-app";
-import {Component, ComponentRef} from "@angular/core";
+import {Component, ViewContainerRef} from "@angular/core";
 import {Page} from "ui/page";
 import {topmost} from "ui/frame";
 import {ModalDialogParams, ModalDialogService} from "nativescript-angular/directives/dialogs";
@@ -16,7 +16,7 @@ const CLOSE_WAIT = (device.os === platformNames.ios) ? 1000 : 0;
 export class ModalComponent {
     constructor(public params: ModalDialogParams, private page: Page) {
         page.on("shownModally", () => {
-            var result = this.params.context;
+            const result = this.params.context;
             this.params.closeCallback(result);
         });
     }
@@ -42,7 +42,7 @@ export class FailComponent {
     </GridLayout>`
 })
 export class SuccessComponent {
-    constructor(public service: ModalDialogService) {
+    constructor(public service: ModalDialogService, public vcRef: ViewContainerRef) {
     }
 }
 
@@ -56,15 +56,15 @@ describe('modal-dialog', () => {
             // HACK: Wait for the navigations from the test runner app
             // Remove the setTimeout when test runner start tests on page.navigatedTo
             setTimeout(done, 1000);
-        })
+        });
     });
 
     after(() => {
         testApp.dispose();
     });
 
     afterEach(() => {
-        var page = topmost().currentPage;
+        const page = topmost().currentPage;
         if (page && page.modal) {
             console.log("Warning: closing a leftover modal page!");
             page.modal.closeModal();
@@ -73,34 +73,43 @@ describe('modal-dialog', () => {
     });
 
 
-    it("showModal throws when there is no modal-dialog-host", (done) => {
+    it("showModal throws when there is no modal-dialog-host and no viewContainer provided", (done) => {
         testApp.loadComponent(FailComponent)
             .then((ref) => {
-                var service = <ModalDialogService>ref.instance.service;
+                const service = <ModalDialogService>ref.instance.service;
                 assert.throws(() => service.showModal(ModalComponent, {}), "No viewContainerRef: Make sure you have the modal-dialog-host directive inside your component.");
             }).then(() => done(), err => done(err));
     });
 
     it("showModal succeeds when there is modal-dialog-host", (done) => {
         testApp.loadComponent(SuccessComponent)
             .then((ref) => {
-                var service = <ModalDialogService>ref.instance.service;
+                const service = <ModalDialogService>ref.instance.service;
                 return service.showModal(ModalComponent, {});
             })
-            .then((res) => setTimeout(done, CLOSE_WAIT), err => done(err)) // wait for the dialog to close in IOS
+            .then((res) => setTimeout(done, CLOSE_WAIT), err => done(err)); // wait for the dialog to close in IOS
+    });
+
+    it("showModal succeeds when there is viewContainer provided", (done) => {
+        testApp.loadComponent(SuccessComponent)
+            .then((ref) => {
+                const service = <ModalDialogService>ref.instance.service;
+                return service.showModal(ModalComponent, {});
+            })
+            .then((res) => setTimeout(done, CLOSE_WAIT), err => done(err)); // wait for the dialog to close in IOS
     });
 
 
     it("showModal passes modal params and gets result when resolved", (done) => {
-        var context = { property: "my context" };
+        const context = { property: "my context" };
         testApp.loadComponent(SuccessComponent)
             .then((ref) => {
-                var service = <ModalDialogService>ref.instance.service;
+                const service = <ModalDialogService>ref.instance.service;
                 return service.showModal(ModalComponent, { context: context });
             })
             .then((res) => {
                 assert.strictEqual(res, context);
-                setTimeout(done, CLOSE_WAIT) // wait for the dialog to close in IOS
+                setTimeout(done, CLOSE_WAIT); // wait for the dialog to close in IOS
             }, err => done(err));
-    })
+    });
 });