Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix(react): handle tab back nav better, fixes #19646 (#19647)
  • Loading branch information
elylucas committed Oct 13, 2019
1 parent ed98d9e commit 8776556
Showing 1 changed file with 12 additions and 9 deletions.
21 changes: 12 additions & 9 deletions packages/react/src/components/navigation/IonTabBar.tsx
Expand Up @@ -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';
};
Expand All @@ -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);
Expand Down Expand Up @@ -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');
if (this.state.activeTab === e.detail.tab) {
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');
}
}

Expand All @@ -96,16 +98,17 @@ const IonTabBarUnwrapped = /*@__PURE__*/(() => class extends React.Component<Pro
</IonTabBarInner>
);
}

static get contextType() {
return NavContext;
}
})();

export const IonTabBar: React.FC<Props> = props => {
const context = useContext(NavContext);
return (
<IonTabBarUnwrapped
{...props as any}
navigate={props.navigate || ((path: string, direction: 'back' | 'none') => {
context.navigate(path, direction);
})}
currentPath={props.currentPath || context.currentPath}
>
{props.children}
Expand Down

0 comments on commit 8776556

Please sign in to comment.