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

resolves #23516

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';
+    }
+  })();

packages/react/src/components/navigation/IonTabs.tsx

@@ -56,125 +56,126 @@ const tabsInner: React.CSSProperties = {
   contain: 'layout size style',
 };
 
-export class IonTabs extends React.Component<Props> {
-  context!: React.ContextType<typeof NavContext>;
-  routerOutletRef: React.Ref<HTMLIonRouterOutletElement> = React.createRef();
-  selectTabHandler?: (tag: string) => boolean;
-  tabBarRef = React.createRef<any>();
+export const IonTabs = /*@__PURE__*/ (() =>
+  class extends React.Component<Props> {
+    context!: React.ContextType<typeof NavContext>;
+    routerOutletRef: React.Ref<HTMLIonRouterOutletElement> = React.createRef();
+    selectTabHandler?: (tag: string) => boolean;
+    tabBarRef = React.createRef<any>();
 
-  ionTabContextState: IonTabsContextState = {
-    activeTab: undefined,
-    selectTab: () => false,
-  };
+    ionTabContextState: IonTabsContextState = {
+      activeTab: undefined,
+      selectTab: () => false,
+    };
 
-  constructor(props: Props) {
-    super(props);
-  }
-
-  componentDidMount() {
-    if (this.tabBarRef.current) {
-      // Grab initial value
-      this.ionTabContextState.activeTab = this.tabBarRef.current.state.activeTab;
-      // Override method
-      this.tabBarRef.current.setActiveTabOnContext = (tab: string) => {
-        this.ionTabContextState.activeTab = tab;
-      };
-      this.ionTabContextState.selectTab = this.tabBarRef.current.selectTab;
+    constructor(props: Props) {
+      super(props);
     }
-  }
 
-  render() {
-    let outlet: React.ReactElement<{}> | undefined;
-    let tabBar: React.ReactElement | undefined;
-    const { className, onIonTabsDidChange, onIonTabsWillChange, ...props } = this.props;
-
-    const children =
-      typeof this.props.children === 'function'
-        ? (this.props.children as ChildFunction)(this.ionTabContextState)
-        : this.props.children;
-
-    React.Children.forEach(children, (child: any) => {
-      if (child == null || typeof child !== 'object' || !child.hasOwnProperty('type')) {
-        return;
-      }
-      if (child.type === IonRouterOutlet || child.type.isRouterOutlet) {
-        outlet = React.cloneElement(child, { tabs: true });
-      } else if (child.type === Fragment && child.props.children[0].type === IonRouterOutlet) {
-        outlet = child.props.children[0];
+    componentDidMount() {
+      if (this.tabBarRef.current) {
+        // Grab initial value
+        this.ionTabContextState.activeTab = this.tabBarRef.current.state.activeTab;
+        // Override method
+        this.tabBarRef.current.setActiveTabOnContext = (tab: string) => {
+          this.ionTabContextState.activeTab = tab;
+        };
+        this.ionTabContextState.selectTab = this.tabBarRef.current.selectTab;
       }
+    }
 
-      let childProps: any = {
-        ref: this.tabBarRef
-      }
+    render() {
+      let outlet: React.ReactElement<{}> | undefined;
+      let tabBar: React.ReactElement | undefined;
+      const { className, onIonTabsDidChange, onIonTabsWillChange, ...props } = this.props;
 
-      /**
-       * Only pass these props
-       * down from IonTabs to IonTabBar
-       * if they are defined, otherwise
-       * if you have a handler set on
-       * IonTabBar it will be overridden.
-       */
-      if (onIonTabsDidChange !== undefined) {
-        childProps = {
-          ...childProps,
-          onIonTabsDidChange
+      const children =
+        typeof this.props.children === 'function'
+          ? (this.props.children as ChildFunction)(this.ionTabContextState)
+          : this.props.children;
+
+      React.Children.forEach(children, (child: any) => {
+        if (child == null || typeof child !== 'object' || !child.hasOwnProperty('type')) {
+          return;
         }
-      }
-
-      if (onIonTabsWillChange !== undefined) {
-        childProps = {
-          ...childProps,
-          onIonTabsWillChange
+        if (child.type === IonRouterOutlet || child.type.isRouterOutlet) {
+          outlet = React.cloneElement(child, { tabs: true });
+        } else if (child.type === Fragment && child.props.children[0].type === IonRouterOutlet) {
+          outlet = child.props.children[0];
         }
+
+        let childProps: any = {
+          ref: this.tabBarRef
+        }
+
+        /**
+         * Only pass these props
+         * down from IonTabs to IonTabBar
+         * if they are defined, otherwise
+         * if you have a handler set on
+         * IonTabBar it will be overridden.
+         */
+        if (onIonTabsDidChange !== undefined) {
+          childProps = {
+            ...childProps,
+            onIonTabsDidChange
+          }
+        }
+
+        if (onIonTabsWillChange !== undefined) {
+          childProps = {
+            ...childProps,
+            onIonTabsWillChange
+          }
+        }
+
+        if (child.type === IonTabBar || child.type.isTabBar) {
+          tabBar = React.cloneElement(child, childProps);
+        } else if (
+          child.type === Fragment &&
+          (child.props.children[1].type === IonTabBar || child.props.children[1].type.isTabBar)
+        ) {
+          tabBar = React.cloneElement(child.props.children[1], childProps);
+        }
+      });
+
+      if (!outlet) {
+        throw new Error('IonTabs must contain an IonRouterOutlet');
+      }
+      if (!tabBar) {
+        throw new Error('IonTabs needs a IonTabBar');
       }
 
-      if (child.type === IonTabBar || child.type.isTabBar) {
-        tabBar = React.cloneElement(child, childProps);
-      } else if (
-        child.type === Fragment &&
-        (child.props.children[1].type === IonTabBar || child.props.children[1].type.isTabBar)
-      ) {
-        tabBar = React.cloneElement(child.props.children[1], childProps);
-      }
-    });
-
-    if (!outlet) {
-      throw new Error('IonTabs must contain an IonRouterOutlet');
-    }
-    if (!tabBar) {
-      throw new Error('IonTabs needs a IonTabBar');
-    }
-
-    return (
-      <IonTabsContext.Provider value={this.ionTabContextState}>
-        {this.context.hasIonicRouter() ? (
-          <PageManager
-            className={className ? `${className}` : ''}
-            routeInfo={this.context.routeInfo}
-            {...props}
-          >
-            <ion-tabs className="ion-tabs" style={hostStyles}>
+      return (
+        <IonTabsContext.Provider value={this.ionTabContextState}>
+          {this.context.hasIonicRouter() ? (
+            <PageManager
+              className={className ? `${className}` : ''}
+              routeInfo={this.context.routeInfo}
+              {...props}
+            >
+              <ion-tabs className="ion-tabs" style={hostStyles}>
+                {tabBar.props.slot === 'top' ? tabBar : null}
+                <div style={tabsInner} className="tabs-inner">
+                  {outlet}
+                </div>
+                {tabBar.props.slot === 'bottom' ? tabBar : null}
+              </ion-tabs>
+            </PageManager>
+          ) : (
+            <div className={className ? `${className}` : 'ion-tabs'} {...props} style={hostStyles}>
               {tabBar.props.slot === 'top' ? tabBar : null}
               <div style={tabsInner} className="tabs-inner">
                 {outlet}
               </div>
               {tabBar.props.slot === 'bottom' ? tabBar : null}
-            </ion-tabs>
-          </PageManager>
-        ) : (
-          <div className={className ? `${className}` : 'ion-tabs'} {...props} style={hostStyles}>
-            {tabBar.props.slot === 'top' ? tabBar : null}
-            <div style={tabsInner} className="tabs-inner">
-              {outlet}
             </div>
-            {tabBar.props.slot === 'bottom' ? tabBar : null}
-          </div>
-        )}
-      </IonTabsContext.Provider>
-    );
-  }
+          )}
+        </IonTabsContext.Provider>
+      );
+    }
 
-  static get contextType() {
-    return NavContext;
-  }
-}
+    static get contextType() {
+      return NavContext;
+    }
+  })();