javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +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

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

@ -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

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')) {
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,