From 834666c75484cca3eed3a2f45231b6b0592a3c3d Mon Sep 17 00:00:00 2001
From: Ely Lucas <ely@meta-tek.net>
Date: Mon, 21 Oct 2019 06:29:19 -0600
Subject: [PATCH] fix(react): adding change events to iontabs, fixes #19665
 (#19711)

---
 .../src/components/navigation/IonTabBar.tsx      | 10 +++++++++-
 .../react/src/components/navigation/IonTabs.tsx  | 16 +++++++---------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/react/src/components/navigation/IonTabBar.tsx b/packages/react/src/components/navigation/IonTabBar.tsx
index 4bb9593c06..fb656acfd0 100644
--- a/packages/react/src/components/navigation/IonTabBar.tsx
+++ b/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');
     }
   }
diff --git a/packages/react/src/components/navigation/IonTabs.tsx b/packages/react/src/components/navigation/IonTabs.tsx
index 45204cca60..8b155b0869 100644
--- a/packages/react/src/components/navigation/IonTabs.tsx
+++ b/packages/react/src/components/navigation/IonTabs.tsx
@@ -1,3 +1,4 @@
+import { JSX as LocalJSX } from '@ionic/core';
 import React from 'react';
 
 import { NavContext } from '../../contexts/NavContext';
@@ -5,7 +6,7 @@ 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;
   }
-})();
+}