javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 18:54:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(react): look up tabs also by property key (#22823)

Browse Source 
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.
This commit is contained in:
Adam Bradley
2021-02-01 11:31:33 -06:00
committed by GitHub
parent 697bcf3420
commit fa515eb79b
3 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/react/src/components/IonRouterContext.tsx
View File

@ -44,10 +44,11 @@ export function useIonRouter(): UseIonRouterResult {
push: context.push, push: context.push,
goBack: context.back, goBack: context.back,
canGoBack: context.canGoBack, canGoBack: context.canGoBack,
routeInfo: context.routeInfo,
}; };
} }
type UseIonRouterResult = { export type UseIonRouterResult = {
/** /**
* @deprecated - Use goBack instead * @deprecated - Use goBack instead
* @param animationBuilder - Optional - A custom transition animation to use * @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. * 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; canGoBack(): boolean;
routeInfo: RouteInfo;
}; };

10
packages/react/src/components/navigation/IonTabBar.tsx
View File

@ -46,7 +46,7 @@ class IonTabBarUnwrapped extends React.PureComponent<InternalProps, IonTabBarSta
child != null && child != null &&
typeof child === 'object' && typeof child === 'object' &&
child.props && child.props &&
child.type === IonTabButton (child.type === IonTabButton || child.type.isTabButton)
) { ) {
tabs[child.props.tab] = { tabs[child.props.tab] = {
originalHref: child.props.href, originalHref: child.props.href,
@ -128,7 +128,7 @@ class IonTabBarUnwrapped extends React.PureComponent<InternalProps, IonTabBarSta
child != null && child != null &&
typeof child === 'object' && typeof child === 'object' &&
child.props && child.props &&
child.type === IonTabButton (child.type === IonTabButton || child.type.isTabButton)
) { ) {
const tab = tabs[child.props.tab]; const tab = tabs[child.props.tab];
if (!tab || tab.originalHref !== child.props.href) { if (!tab || tab.originalHref !== child.props.href) {
@ -215,7 +215,11 @@ class IonTabBarUnwrapped extends React.PureComponent<InternalProps, IonTabBarSta
| null | null
| undefined | undefined
) => { ) => {
if (child != null && child.props && child.type === IonTabButton) { if (
child != null &&
child.props &&
(child.type === IonTabButton || (child as any).type.isTabButton)
) {
const href = const href =
child.props.tab === activeTab child.props.tab === activeTab
? this.props.routeInfo?.pathname ? this.props.routeInfo?.pathname

9
packages/react/src/components/navigation/IonTabs.tsx
View File

@ -95,19 +95,22 @@ export class IonTabs extends React.Component<Props> {
if (child == null || typeof child !== 'object' || !child.hasOwnProperty('type')) { if (child == null || typeof child !== 'object' || !child.hasOwnProperty('type')) {
return; return;
} }
if (child.type === IonRouterOutlet) { if (child.type === IonRouterOutlet || child.type.isRouterOutlet) {
outlet = React.cloneElement(child, { tabs: true }); outlet = React.cloneElement(child, { tabs: true });
} else if (child.type === Fragment && child.props.children[0].type === IonRouterOutlet) { } else if (child.type === Fragment && child.props.children[0].type === IonRouterOutlet) {
outlet = child.props.children[0]; outlet = child.props.children[0];
} }
if (child.type === IonTabBar) { if (child.type === IonTabBar || child.type.isTabBar) {
const { onIonTabsDidChange, onIonTabsWillChange } = this.props; const { onIonTabsDidChange, onIonTabsWillChange } = this.props;
tabBar = React.cloneElement(child, { tabBar = React.cloneElement(child, {
onIonTabsDidChange, onIonTabsDidChange,
onIonTabsWillChange, onIonTabsWillChange,
ref: this.tabBarRef, 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; const { onIonTabsDidChange, onIonTabsWillChange } = this.props;
tabBar = React.cloneElement(child.props.children[1], { tabBar = React.cloneElement(child.props.children[1], {
onIonTabsDidChange, onIonTabsDidChange,