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

packages/react/src/apis/modal.ts

@@ -0,0 +1,13 @@
+
+import { ModalOptions } from '@ionic/core';
+
+import { Delegate } from '../react-framework-delegate';
+import { getOrAppendElement } from '../utils/helpers';
+
+export function createModal(opts: ModalOptions): Promise<HTMLIonModalElement> {
+  opts.delegate = Delegate;
+  const element = getOrAppendElement('ion-modal-controller') as HTMLIonModalControllerElement;
+  return (element as any).componentOnReady().then(() => {
+    return element.create(opts);
+  });
+}

packages/react/src/index.ts

@@ -1,2 +1,3 @@
 export { Delegate } from './react-framework-delegate';
+export { createModal } from './apis/modal';
 export * from './utils/wc-shim';

packages/react/src/utils/helpers.ts

@@ -0,0 +1,10 @@
+
+export function getOrAppendElement(tagName: string): Element {
+  const element = document.querySelector(tagName);
+  if (element) {
+    return element;
+  }
+  const tmp = document.createElement(tagName);
+  document.body.appendChild(tmp);
+  return tmp;
+}