fix(react): adding change events to iontabs, fixes #19665 (#19711)

Author: elylucas

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

@@ -6,6 +6,8 @@ import { IonTabBarInner } from '../inner-proxies';
 import { IonTabButton } from '../proxies';
 
 type Props = LocalJSX.IonTabBar & {
+  onIonTabsDidChange?: (event: CustomEvent<{ tab: string }>) => void;
+  onIonTabsWillChange?: (event: CustomEvent<{ tab: string }>) => void;
   currentPath?: string;
   slot?: 'bottom' | 'top';
 };
@@ -72,9 +74,15 @@ const IonTabBarUnwrapped = /*@__PURE__*/(() => class extends React.Component<Pro
       if (this.context.hasIonicRouter()) {
         this.context.tabNavigate(originalHref);
       } else {
-      this.context.navigate(originalHref, 'back');
+        this.context.navigate(originalHref, 'back');
       }
     } else {
+      if (this.props.onIonTabsWillChange) {
+        this.props.onIonTabsWillChange(new CustomEvent('ionTabWillChange', { detail: { tab: e.detail.tab } }));
+      }
+      if (this.props.onIonTabsDidChange) {
+        this.props.onIonTabsDidChange(new CustomEvent('ionTabDidChange', { detail: { tab: e.detail.tab } }));
+      }
       this.context.navigate(this.state.tabs[e.detail.tab].currentHref, 'none');
     }
   }

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

@@ -1,11 +1,12 @@
+import { JSX as LocalJSX } from '@ionic/core';
 import React from 'react';
 
 import { NavContext } from '../../contexts/NavContext';
 import { IonRouterOutlet } from '../IonRouterOutlet';
 
 import { IonTabBar } from './IonTabBar';
 
-interface Props {
+interface Props extends LocalJSX.IonTabs {
   children: React.ReactNode;
 }
 
@@ -28,7 +29,7 @@ const tabsInner: React.CSSProperties = {
   contain: 'layout size style'
 };
 
-export const IonTabs = /*@__PURE__*/(() => class extends React.Component<Props> {
+export class IonTabs extends React.Component<Props> {
   context!: React.ContextType<typeof NavContext>;
   routerOutletRef: React.Ref<HTMLIonRouterOutletElement> = React.createRef();
 
@@ -38,7 +39,7 @@ export const IonTabs = /*@__PURE__*/(() => class extends React.Component<Props>
 
   render() {
     let outlet: React.ReactElement<{}> | undefined;
-    let tabBar: React.ReactElement<{ slot: 'bottom' | 'top' }> | undefined;
+    let tabBar: React.ReactElement | undefined;
 
     React.Children.forEach(this.props.children, (child: any) => {
       if (child == null || typeof child !== 'object' || !child.hasOwnProperty('type')) {
@@ -48,7 +49,8 @@ export const IonTabs = /*@__PURE__*/(() => class extends React.Component<Props>
         outlet = child;
       }
       if (child.type === IonTabBar) {
-        tabBar = child;
+        const { onIonTabsDidChange, onIonTabsWillChange } = this.props;
+        tabBar = React.cloneElement(child, { onIonTabsDidChange, onIonTabsWillChange });
       }
     });
 
@@ -71,11 +73,7 @@ export const IonTabs = /*@__PURE__*/(() => class extends React.Component<Props>
     );
   }
 
-  static get displayName() {
-    return 'IonTabs';
-  }
-
   static get contextType() {
     return NavContext;
   }
-})();
+}