fix(react): improve component compatibility with preact (#24132)

resolves #23516
ionic-team · Nov 3, 2021 · 15fc293 · 15fc293
1 parent ff25ac1
commit 15fc293
Show file tree

Hide file tree

Showing 5 changed files with 183 additions and 181 deletions.
diff --git a/core/stencil.config.ts b/core/stencil.config.ts
@@ -95,6 +95,7 @@ export const config: Config = {
         'ion-popover',
         'ion-toast',
 
+        'ion-app',
         'ion-icon'
       ]
     }),

diff --git a/packages/react/src/components/IonApp.tsx b/packages/react/src/components/IonApp.tsx
@@ -13,51 +13,52 @@ type Props = LocalJSX.IonApp &
     ref?: React.Ref<HTMLIonAppElement>;
   };
 
-export class IonApp extends React.Component<Props> {
-  addOverlayCallback?: (id: string, overlay: any, containerElement: HTMLDivElement) => void;
-  removeOverlayCallback?: (id: string) => void;
-
-  constructor(props: Props) {
-    super(props);
-  }
-
-  /*
-    Wire up methods to call into IonOverlayManager
-  */
-  ionContext: IonContextInterface = {
-    addOverlay: (
-      id: string,
-      overlay: ReactComponentOrElement,
-      containerElement: HTMLDivElement
-    ) => {
-      if (this.addOverlayCallback) {
-        this.addOverlayCallback(id, overlay, containerElement);
-      }
-    },
-    removeOverlay: (id: string) => {
-      if (this.removeOverlayCallback) {
-        this.removeOverlayCallback(id);
-      }
-    },
-  };
+export const IonApp = /*@__PURE__*/ (() =>
+  class extends React.Component<Props> {
+    addOverlayCallback?: (id: string, overlay: any, containerElement: HTMLDivElement) => void;
+    removeOverlayCallback?: (id: string) => void;
+
+    constructor(props: Props) {
+      super(props);
+    }
+
+    /*
+      Wire up methods to call into IonOverlayManager
+    */
+    ionContext: IonContextInterface = {
+      addOverlay: (
+        id: string,
+        overlay: ReactComponentOrElement,
+        containerElement: HTMLDivElement
+      ) => {
+        if (this.addOverlayCallback) {
+          this.addOverlayCallback(id, overlay, containerElement);
+        }
+      },
+      removeOverlay: (id: string) => {
+        if (this.removeOverlayCallback) {
+          this.removeOverlayCallback(id);
+        }
+      },
+    };
+
+    render() {
+      return (
+        <IonContext.Provider value={this.ionContext}>
+          <IonAppInner {...this.props}>{this.props.children}</IonAppInner>
+          <IonOverlayManager
+            onAddOverlay={(callback) => {
+              this.addOverlayCallback = callback;
+            }}
+            onRemoveOverlay={(callback) => {
+              this.removeOverlayCallback = callback;
+            }}
+          />
+        </IonContext.Provider>
+      );
+    }
 
-  render() {
-    return (
-      <IonContext.Provider value={this.ionContext}>
-        <IonAppInner {...this.props}>{this.props.children}</IonAppInner>
-        <IonOverlayManager
-          onAddOverlay={(callback) => {
-            this.addOverlayCallback = callback;
-          }}
-          onRemoveOverlay={(callback) => {
-            this.removeOverlayCallback = callback;
-          }}
-        />
-      </IonContext.Provider>
-    );
-  }
-
-  static get displayName() {
-    return 'IonApp';
-  }
-}
+    static get displayName() {
+      return 'IonApp';
+    }
+  })();
diff --git a/packages/react/src/components/navigation/IonTabButton.tsx b/packages/react/src/components/navigation/IonTabButton.tsx
@@ -12,37 +12,38 @@ type Props = LocalJSX.IonTabButton &
     onClick?: (e: any) => void;
   };
 
-export class IonTabButton extends React.Component<Props> {
-  constructor(props: Props) {
-    super(props);
-    this.handleIonTabButtonClick = this.handleIonTabButtonClick.bind(this);
-  }
+export const IonTabButton = /*@__PURE__*/ (() =>
+  class extends React.Component<Props> {
+    constructor(props: Props) {
+      super(props);
+      this.handleIonTabButtonClick = this.handleIonTabButtonClick.bind(this);
+    }
 
-  handleIonTabButtonClick() {
-    if (this.props.onClick) {
-      this.props.onClick(
-        new CustomEvent('ionTabButtonClick', {
-          detail: {
-            tab: this.props.tab,
-            href: this.props.href,
-            routeOptions: this.props.routerOptions,
-          },
-        })
-      );
+    handleIonTabButtonClick() {
+      if (this.props.onClick) {
+        this.props.onClick(
+          new CustomEvent('ionTabButtonClick', {
+            detail: {
+              tab: this.props.tab,
+              href: this.props.href,
+              routeOptions: this.props.routerOptions,
+            },
+          })
+        );
+      }
     }
-  }
 
-  render() {
-    const { onClick, ...rest } = this.props;
-    return (
-      <IonTabButtonInner
-        onIonTabButtonClick={this.handleIonTabButtonClick}
-        {...rest}
-      ></IonTabButtonInner>
-    );
-  }
+    render() {
+      const { onClick, ...rest } = this.props;
+      return (
+        <IonTabButtonInner
+          onIonTabButtonClick={this.handleIonTabButtonClick}
+          {...rest}
+        ></IonTabButtonInner>
+      );
+    }
 
-  static get displayName() {
-    return 'IonTabButton';
-  }
-}
+    static get displayName() {
+      return 'IonTabButton';
+    }
+  })();