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

fix(react): handle tab back nav better, fixes #19646 (#19647)

Browse Source
This commit is contained in:
Ely Lucas
2019-10-13 15:20:39 -06:00
parent 3ba9e71a1f
commit 8935d4d1b6
1 changed files with 12 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,6 @@ import { IonTabBarInner } from '../inner-proxies';
import { IonTabButton } from '../proxies'; import { IonTabButton } from '../proxies';
type Props = LocalJSX.IonTabBar & { type Props = LocalJSX.IonTabBar & {
navigate?: (path: string, direction: 'back' | 'none') => void;
currentPath?: string; currentPath?: string;
slot?: 'bottom' | 'top'; slot?: 'bottom' | 'top';
}; };
@ -22,6 +21,7 @@ interface State {
} }
const IonTabBarUnwrapped = /*@__PURE__*/(() => class extends React.Component<Props, State> { const IonTabBarUnwrapped = /*@__PURE__*/(() => class extends React.Component<Props, State> {
context!: React.ContextType<typeof NavContext>;
constructor(props: Props) { constructor(props: Props) {
super(props); super(props);
@ -67,13 +67,15 @@ const IonTabBarUnwrapped = /*@__PURE__*/(() => class extends React.Component<Pro
} }
private onTabButtonClick = (e: CustomEvent<{ href: string, selected: boolean, tab: string }>) => { private onTabButtonClick = (e: CustomEvent<{ href: string, selected: boolean, tab: string }>) => {
const { navigate } = this.props; if (this.state.activeTab === e.detail.tab) {
if (navigate) { const originalHref = this.state.tabs[e.detail.tab].originalHref;
if (this.state.activeTab === e.detail.tab) { if (this.context.hasIonicRouter()) {
navigate(this.state.tabs[e.detail.tab].originalHref, 'back'); this.context.goBack(originalHref);
} else { } else {
navigate(this.state.tabs[e.detail.tab].currentHref, 'none'); this.context.navigate(originalHref, 'back');
} }
} else {
this.context.navigate(this.state.tabs[e.detail.tab].currentHref, 'none');
} }
} }
@ -96,6 +98,10 @@ const IonTabBarUnwrapped = /*@__PURE__*/(() => class extends React.Component<Pro
</IonTabBarInner> </IonTabBarInner>
); );
} }
static get contextType() {
return NavContext;
}
})(); })();
export const IonTabBar: React.FC<Props> = props => { export const IonTabBar: React.FC<Props> = props => {
@ -103,9 +109,6 @@ export const IonTabBar: React.FC<Props> = props => {
return ( return (
<IonTabBarUnwrapped <IonTabBarUnwrapped
{...props as any} {...props as any}
navigate={props.navigate || ((path: string, direction: 'back' | 'none') => {
context.navigate(path, direction);
})}
currentPath={props.currentPath || context.currentPath} currentPath={props.currentPath || context.currentPath}
> >
{props.children} {props.children}