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

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

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