From fa515eb79ba4aca562900e9be72a35fea88f869d Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@users.noreply.github.com>
Date: Mon, 1 Feb 2021 11:31:33 -0600
Subject: [PATCH] refactor(react): look up tabs also by property key (#22823)

When IonTabBar is wrapped by a functional component or fragment, then IonTabs is unable to find it. This is a rare case, but adding the ability for a function component to manually state that is is an IonTabBar. Same for IonTabButtons.
---
 packages/react/src/components/IonRouterContext.tsx     |  4 +++-
 packages/react/src/components/navigation/IonTabBar.tsx | 10 +++++++---
 packages/react/src/components/navigation/IonTabs.tsx   |  9 ++++++---
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/components/IonRouterContext.tsx b/packages/react/src/components/IonRouterContext.tsx
index 50936fdfbb..ff543fd2f6 100644
--- a/packages/react/src/components/IonRouterContext.tsx
+++ b/packages/react/src/components/IonRouterContext.tsx
@@ -44,10 +44,11 @@ export function useIonRouter(): UseIonRouterResult {
     push: context.push,
     goBack: context.back,
     canGoBack: context.canGoBack,
+    routeInfo: context.routeInfo,
   };
 }
 
-type UseIonRouterResult = {
+export type UseIonRouterResult = {
   /**
    * @deprecated - Use goBack instead
    * @param animationBuilder - Optional - A custom transition animation to use
@@ -77,4 +78,5 @@ type UseIonRouterResult = {
    * Determines if there are any additional routes in the the Router's history. However, routing is not prevented if the browser's history has more entries. Returns true if more entries exist, false if not.
    */
   canGoBack(): boolean;
+  routeInfo: RouteInfo;
 };
diff --git a/packages/react/src/components/navigation/IonTabBar.tsx b/packages/react/src/components/navigation/IonTabBar.tsx
index 23ab7ecc57..c0a2bfd5cb 100644
--- a/packages/react/src/components/navigation/IonTabBar.tsx
+++ b/packages/react/src/components/navigation/IonTabBar.tsx
@@ -46,7 +46,7 @@ class IonTabBarUnwrapped extends React.PureComponent<InternalProps, IonTabBarSta
         child != null &&
         typeof child === 'object' &&
         child.props &&
-        child.type === IonTabButton
+        (child.type === IonTabButton || child.type.isTabButton)
       ) {
         tabs[child.props.tab] = {
           originalHref: child.props.href,
@@ -128,7 +128,7 @@ class IonTabBarUnwrapped extends React.PureComponent<InternalProps, IonTabBarSta
         child != null &&
         typeof child === 'object' &&
         child.props &&
-        child.type === IonTabButton
+        (child.type === IonTabButton || child.type.isTabButton)
       ) {
         const tab = tabs[child.props.tab];
         if (!tab || tab.originalHref !== child.props.href) {
@@ -215,7 +215,11 @@ class IonTabBarUnwrapped extends React.PureComponent<InternalProps, IonTabBarSta
         | null
         | undefined
     ) => {
-      if (child != null && child.props && child.type === IonTabButton) {
+      if (
+        child != null &&
+        child.props &&
+        (child.type === IonTabButton || (child as any).type.isTabButton)
+      ) {
         const href =
           child.props.tab === activeTab
             ? this.props.routeInfo?.pathname
diff --git a/packages/react/src/components/navigation/IonTabs.tsx b/packages/react/src/components/navigation/IonTabs.tsx
index f53a144916..16011d7810 100644
--- a/packages/react/src/components/navigation/IonTabs.tsx
+++ b/packages/react/src/components/navigation/IonTabs.tsx
@@ -95,19 +95,22 @@ export class IonTabs extends React.Component<Props> {
       if (child == null || typeof child !== 'object' || !child.hasOwnProperty('type')) {
         return;
       }
-      if (child.type === IonRouterOutlet) {
+      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];
       }
-      if (child.type === IonTabBar) {
+      if (child.type === IonTabBar || child.type.isTabBar) {
         const { onIonTabsDidChange, onIonTabsWillChange } = this.props;
         tabBar = React.cloneElement(child, {
           onIonTabsDidChange,
           onIonTabsWillChange,
           ref: this.tabBarRef,
         });
-      } else if (child.type === Fragment && child.props.children[1].type === IonTabBar) {
+      } else if (
+        child.type === Fragment &&
+        (child.props.children[1].type === IonTabBar || child.props.children[1].type.isTabBar)
+      ) {
         const { onIonTabsDidChange, onIonTabsWillChange } = this.props;
         tabBar = React.cloneElement(child.props.children[1], {
           onIonTabsDidChange,