refactor(modal): use framework delegate for mounting the user's component

packages/angular/src/providers/angular-component-mounter.ts

@@ -1,51 +1,70 @@
 import {
-  ChangeDetectorRef,
+  ApplicationRef,
   ComponentFactoryResolver,
   ComponentRef,
   Injectable,
   Injector,
   NgZone,
   ReflectiveInjector,
-  Type,
+  Type
 } from '@angular/core';
 
+import { getProviders } from '../di/di';
 import { AngularMountingData } from '../types/interfaces';
 
+const elementToComponentRefMap = new Map<HTMLElement, ComponentRef<any>>();
+
 @Injectable()
 export class AngularComponentMounter {
 
-  constructor(private defaultCfr: ComponentFactoryResolver, private zone: NgZone) {
+  constructor(private defaultCfr: ComponentFactoryResolver, private zone: NgZone, private appRef: ApplicationRef) {
   }
 
-  attachViewToDom(parentElement: HTMLElement, componentToMount: Type<any>, providers: any[], changeDetection: ChangeDetectorRef, componentResolveFactory: ComponentFactoryResolver, injector: Injector): Promise<AngularMountingData> {
+  attachViewToDom(parentElement: HTMLElement, hostElement: HTMLElement, componentToMount: Type<any>, componentResolveFactory: ComponentFactoryResolver, injector: Injector, classesToAdd: string[]): Promise<AngularMountingData> {
 
     return new Promise((resolve) => {
       this.zone.run(() => {
-        console.log('parentElement: ', parentElement);
+
         const crf = componentResolveFactory ? componentResolveFactory : this.defaultCfr;
-        const mountingData = attachViewToDom(crf, componentToMount, parentElement, providers, changeDetection, injector);
+
+        const mountingData = attachViewToDom(crf, parentElement, hostElement, componentToMount, injector, this.appRef, classesToAdd);
         resolve(mountingData);
       });
     });
   }
 
-  removeViewFromDom(componentRef: ComponentRef<any>): Promise<any> {
+  removeViewFromDom(childElement: HTMLElement): Promise<any> {
     return new Promise((resolve) => {
       this.zone.run(() => {
-        componentRef.destroy();
+        removeViewFromDom(childElement);
         resolve();
       });
     });
   }
 }
 
-export function attachViewToDom(crf: ComponentFactoryResolver, componentToMount: Type<any>, element: HTMLElement, providers: any, changeDetection: ChangeDetectorRef, injector: Injector): AngularMountingData {
+export function removeViewFromDom(childElement: HTMLElement) {
+  const componentRef = elementToComponentRefMap.get(childElement);
+  if (componentRef) {
+    componentRef.destroy();
+  }
+}
+
+export function attachViewToDom(crf: ComponentFactoryResolver, parentElement: HTMLElement, hostElement: HTMLElement, componentToMount: Type<any>, injector: Injector, appRef: ApplicationRef, classesToAdd: string[]): AngularMountingData {
+
+  const componentProviders = ReflectiveInjector.resolve(getProviders(parentElement));
   const componentFactory = crf.resolveComponentFactory(componentToMount);
-  const componentProviders = ReflectiveInjector.resolve(providers);
   const childInjector = ReflectiveInjector.fromResolvedProviders(componentProviders, injector);
-  const componentRef = componentFactory.create(childInjector, [], element);
+  const componentRef = componentFactory.create(childInjector, [], hostElement);
+  for (const clazz of classesToAdd) {
+    hostElement.classList.add(clazz);
+  }
+
+  parentElement.appendChild(hostElement);
+
+  appRef.attachView(componentRef.hostView);
 
-  changeDetection.detectChanges();
+  elementToComponentRefMap.set(hostElement, componentRef);
 
   return {
     componentFactory,
@@ -53,7 +72,7 @@ export function attachViewToDom(crf: ComponentFactoryResolver, componentToMount:
     componentRef: componentRef,
     instance: componentRef.instance,
     angularHostElement: componentRef.location.nativeElement,
-    element: componentRef.location.nativeElement,
+    element: hostElement,
   };
 }
 

packages/angular/src/providers/modal-controller.ts

@@ -0,0 +1,134 @@
+import {
+  ComponentFactoryResolver,
+  Injectable,
+  Injector,
+  Type,
+} from '@angular/core';
+
+import {
+  FrameworkDelegate,
+  ModalDismissEvent,
+  ModalOptions
+} from '@ionic/core';
+
+import { AngularComponentMounter } from '../providers/angular-component-mounter';
+import { AngularMountingData } from '../types/interfaces';
+
+import { ensureElementInBody, hydrateElement } from '../util/util';
+
+let modalId = 0;
+
+@Injectable()
+export class ModalController implements FrameworkDelegate {
+
+  constructor(private angularComponentMounter: AngularComponentMounter, private componentResolveFactory: ComponentFactoryResolver, private injector: Injector) {
+  }
+
+  create(opts?: ModalOptions): ModalProxy {
+    opts.delegate = this;
+    return getModalProxy(opts);
+  }
+
+  attachViewToDom(elementOrContainerToMountTo: HTMLElement, elementOrComponentToMount: Type<any>, _propsOrDataObj?: any, classesToAdd?: string[]): Promise<AngularMountingData> {
+
+    const hostElement = document.createElement('div');
+    return this.angularComponentMounter.attachViewToDom(elementOrContainerToMountTo, hostElement, elementOrComponentToMount, this.componentResolveFactory, this.injector, classesToAdd);
+  }
+
+  removeViewFromDom(_parentElement: HTMLElement, childElement: HTMLElement) {
+    return this.angularComponentMounter.removeViewFromDom(childElement);
+  }
+}
+
+export function getModalProxy(opts: ModalOptions) {
+  return {
+    id: modalId++,
+    state: PRESENTING,
+    opts: opts,
+    present: function() { return present(this); },
+    dismiss: function() { return dismiss(this); },
+    onDidDismiss: function(callback: (data: any, role: string) => void) {
+      (this as ModalProxyInternal).onDidDismissHandler = callback;
+    },
+    onWillDismiss: function(callback: (data: any, role: string) => void) {
+      (this as ModalProxyInternal).onWillDismissHandler = callback;
+    },
+  };
+}
+
+export function present(modalProxy: ModalProxyInternal): Promise<any> {
+  modalProxy.state = PRESENTING;
+  return loadOverlay(modalProxy.opts).then((modalElement: HTMLIonModalElement) => {
+    Object.assign(modalElement, modalProxy.opts);
+    modalProxy.element = modalElement;
+
+    const onDidDismissHandler = (event: ModalDismissEvent) => {
+      modalElement.removeEventListener(ION_MODAL_DID_DISMISS_EVENT, onDidDismissHandler);
+      if (modalProxy.onDidDismissHandler) {
+        modalProxy.onDidDismissHandler(event.detail.data, event.detail.role);
+      }
+    };
+
+    const onWillDismissHandler = (event: ModalDismissEvent) => {
+      modalElement.removeEventListener(ION_MODAL_WILL_DISMISS_EVENT, onWillDismissHandler);
+      if (modalProxy.onWillDismissHandler) {
+        modalProxy.onWillDismissHandler(event.detail.data, event.detail.role);
+      }
+    };
+
+    modalElement.addEventListener(ION_MODAL_DID_DISMISS_EVENT, onDidDismissHandler);
+    modalElement.addEventListener(ION_MODAL_WILL_DISMISS_EVENT, onWillDismissHandler);
+
+    if (modalProxy.state === PRESENTING) {
+      return modalElement.present();
+    }
+
+    // we'll only ever get here if someone tried to dismiss the overlay or mess with it's internal state
+    // attribute before it could async load and present itself.
+    // with that in mind, just return null to make the TS compiler happy
+    return null;
+  });
+}
+
+export function dismiss(modalProxy: ModalProxyInternal): Promise<any> {
+  modalProxy.state = DISMISSING;
+  if (modalProxy.element) {
+    if (modalProxy.state === DISMISSING) {
+      return modalProxy.element.dismiss();
+    }
+  }
+  // either we're not in the dismissing state
+  // or we're calling this before the element is created
+  // so just return a resolved promise
+  return Promise.resolve();
+}
+
+export function loadOverlay(opts: ModalOptions): Promise<HTMLIonModalElement> {
+  const element = ensureElementInBody('ion-modal-controller') as HTMLIonModalControllerElement;
+  return hydrateElement(element).then(() => {
+    return element.create(opts);
+  });
+}
+
+export interface ModalProxy {
+  present(): Promise<void>;
+  dismiss(): Promise<void>;
+  onDidDismiss(callback: (data: any, role: string) => void): void;
+  onWillDismiss(callback: (data: any, role: string) => void): void;
+}
+
+export interface ModalProxyInternal extends ModalProxy {
+  id: number;
+  opts: ModalOptions;
+  state: number;
+  element: HTMLIonModalElement;
+  onDidDismissHandler?: (data: any, role: string) => void;
+  onWillDismissHandler?: (data: any, role: string) => void;
+}
+
+export const PRESENTING = 1;
+export const DISMISSING = 2;
+
+const ION_MODAL_DID_DISMISS_EVENT = 'ionModalDidDismiss';
+const ION_MODAL_WILL_DISMISS_EVENT = 'ionModalWillDismiss';
+