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

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

Browse Source
This commit is contained in:
Ely Lucas
2019-10-21 06:29:19 -06:00
committed by Liam DeBeasi
parent 5acb58a03d
commit 834666c754
2 changed files with 16 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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