fix(): use defineCustomElement from component

ionic-team · Jan 4, 2022 · 575f6e0 · 575f6e0
1 parent c1d4978
commit 575f6e0
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 10 deletions.
diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts
@@ -35,9 +35,6 @@ const createController = <Opts extends object, HTMLElm extends any>(tagName: str
     },
     async getTop(): Promise<HTMLElm | undefined> {
       return getOverlay(document, tagName) as any;
-    },
-    defineCustomElements() {
-      return registerOverlayComponents(tagName, customElement, childrenCustomElements);
     }
   };
 };

diff --git a/packages/react/src/components/IonModal.tsx b/packages/react/src/components/IonModal.tsx
@@ -1,8 +1,9 @@
-import { JSX, modalController } from '@ionic/core/components';
+import { JSX } from '@ionic/core/components';
+import { IonModal as IonModalCmp, defineCustomElement } from '@ionic/core/components/ion-modal.js';
 
 import { createInlineOverlayComponent } from './createInlineOverlayComponent'
 
 export const IonModal = /*@__PURE__*/ createInlineOverlayComponent<
   JSX.IonModal,
   HTMLIonModalElement
->('ion-modal', modalController);
+>('ion-modal', IonModalCmp, defineCustomElement);
diff --git a/packages/react/src/components/IonPopover.tsx b/packages/react/src/components/IonPopover.tsx
@@ -1,8 +1,8 @@
-import { JSX, popoverController } from '@ionic/core/components';
-
+import { JSX } from '@ionic/core/components';
+import { IonPopover as IonPopoverCmp, defineCustomElement } from '@ionic/core/components/ion-popover.js';
 import { createInlineOverlayComponent } from './createInlineOverlayComponent'
 
 export const IonPopover = /*@__PURE__*/ createInlineOverlayComponent<
   JSX.IonPopover,
   HTMLIonPopoverElement
->('ion-popover', popoverController);
+>('ion-popover', IonPopoverCmp, defineCustomElement);
diff --git a/packages/react/src/components/createInlineOverlayComponent.tsx b/packages/react/src/components/createInlineOverlayComponent.tsx
@@ -5,6 +5,7 @@ import {
   attachProps,
   camelToDashCase,
   dashToPascalCase,
+  defineCustomElement,
   isCoveredByReact,
   mergeRefs,
 } from './react-component-lib/utils';
@@ -25,9 +26,13 @@ interface IonicReactInternalProps<ElementType> extends React.HTMLAttributes<Elem
 
 export const createInlineOverlayComponent = <PropType, ElementType>(
   tagName: string,
-  controller: { defineCustomElements: () => Promise<any> }
+  customElement?: any,
+  defineNestedCustomElements?: () => void
 ) => {
-  controller.defineCustomElements();
+  defineCustomElement(tagName, customElement);
+  if (defineNestedCustomElements) {
+    defineNestedCustomElements();
+  }
 
   const displayName = dashToPascalCase(tagName);
   const ReactComponent = class extends React.Component<IonicReactInternalProps<PropType>, InlineOverlayState> {