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

fix(react): setting active tab properly on mount, closes #21830 (#21833)

Browse Source 
* fix(react): setting active tab properly on mount, closes #21830

* removing commented code

* merge with master
This commit is contained in:
Ely Lucas
2020-07-29 12:15:34 -06:00
committed by GitHub
parent 74468ab797
commit f58424f625
6 changed files with 51 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -30,7 +30,7 @@ interface TabUrls {
}
interface IonTabBarState {
activeTab: string | undefined;
activeTab?: string;
tabs: { [key: string]: TabUrls; };
}
@ -51,15 +51,7 @@ class IonTabBarUnwrapped extends React.PureComponent<InternalProps, IonTabBarSta
}
});
const tabKeys = Object.keys(tabs);
const activeTab = tabKeys
.find(key => {
const href = tabs[key].originalHref;
return props.routeInfo!.pathname.startsWith(href);
}) || tabKeys[0];
this.state = {
activeTab,
tabs
};
@ -69,6 +61,28 @@ class IonTabBarUnwrapped extends React.PureComponent<InternalProps, IonTabBarSta
this.selectTab = this.selectTab.bind(this);
}
componentDidMount() {
const tabs = this.state.tabs;
const tabKeys = Object.keys(tabs);
const activeTab = tabKeys
.find(key => {
const href = tabs[key].originalHref;
return this.props.routeInfo!.pathname.startsWith(href);
});
if (activeTab) {
this.setState({
activeTab
});
}
}
componentDidUpdate() {
if (this.state.activeTab) {
this.setActiveTabOnContext(this.state.activeTab);
}
}
setActiveTabOnContext = (_tab: string) => { };
selectTab(tab: string) {
@ -94,7 +108,7 @@ class IonTabBarUnwrapped extends React.PureComponent<InternalProps, IonTabBarSta
.find(key => {
const href = state.tabs[key].originalHref;
return props.routeInfo!.pathname.startsWith(href);
}) || tabKeys[0];
});
// Check to see if the tab button href has changed, and if so, update it in the tabs state
React.Children.forEach((props as any).children, (child: any) => {