javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 05:21:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(tabs): tab matching

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-03-08 10:51:18 +01:00
parent 878d7e64b0
commit 1dad0adb03
3 changed files with 22 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/core/src/components/router/utils/interfaces.ts
View File

@ -1,6 +1,6 @@
export interface NavOutlet { export interface NavOutlet {
setRouteId(id: any, data: any, direction: number): Promise<boolean>; setRouteId(id: string, data: any, direction: number): Promise<boolean>;
markVisible?(): Promise<void>; markVisible?(): Promise<void>;
getRouteId(): string; getRouteId(): string;

8
packages/core/src/components/tabs/readme.md
View File

@ -222,22 +222,16 @@ Emitted when the tab changes.
## Methods ## Methods
#### getByIndex()
#### getContentElement() #### getContentElement()
#### getIndex()
#### getRouteId() #### getRouteId()
#### getSelected() #### getSelected()
#### getTabs() #### getTab()
#### markVisible() #### markVisible()

49
packages/core/src/components/tabs/tabs.tsx
View File

@ -7,10 +7,10 @@ import { Config, NavOutlet } from '../../index';
styleUrl: 'tabs.scss' styleUrl: 'tabs.scss'
}) })
export class Tabs implements NavOutlet { export class Tabs implements NavOutlet {
private ids = -1; private ids = -1;
private transitioning = false; private transitioning = false;
private routingView: HTMLIonTabElement; private routingView: HTMLIonTabElement;
private tabsId: number = (++tabIds); private tabsId: number = (++tabIds);
@Element() el: HTMLElement; @Element() el: HTMLElement;
@ -80,7 +80,7 @@ export class Tabs implements NavOutlet {
componentDidUnload() { componentDidUnload() {
this.tabs.length = 0; this.tabs.length = 0;
this.selectedTab = undefined; this.selectedTab = this.routingView = undefined;
} }
@Listen('ionTabbarClick') @Listen('ionTabbarClick')
@ -98,13 +98,15 @@ export class Tabs implements NavOutlet {
.then(selectedTab => this.tabSwitch(selectedTab)); .then(selectedTab => this.tabSwitch(selectedTab));
} }
/**
* @param {number} index Index of the tab you want to get
* @returns {HTMLIonTabElement} Returns the tab who's index matches the one passed
*/
@Method() @Method()
getByIndex(index: number): HTMLIonTabElement { getTab(tabOrIndex: string | number | HTMLIonTabElement): HTMLIonTabElement {
return this.tabs[index]; if (typeof tabOrIndex === 'string') {
return this.tabs.find(tab => tab.getRouteId() === tabOrIndex);
}
if (typeof tabOrIndex === 'number') {
return this.tabs[tabOrIndex];
}
return tabOrIndex;
} }
/** /**
@ -116,24 +118,13 @@ export class Tabs implements NavOutlet {
} }
@Method() @Method()
getIndex(tab: HTMLIonTabElement): number { setRouteId(id: string): Promise<boolean> {
return this.tabs.indexOf(tab); return this.setActive(id).then(tab => {
} if (tab) {
this.routingView = tab;
@Method() return true;
getTabs(): HTMLIonTabElement[] { }
return this.tabs; return false;
}
@Method()
setRouteId(id: any): Promise<boolean> {
if (this.selectedTab && this.selectedTab.getRouteId() === id) {
return Promise.resolve(false);
}
const tab = this.tabs.find(t => id === t.getRouteId());
return this.setActive(tab).then(() => {
this.routingView = tab;
return true;
}); });
} }
@ -201,12 +192,12 @@ export class Tabs implements NavOutlet {
} }
} }
private setActive(tabOrIndex: number | HTMLIonTabElement): Promise<HTMLIonTabElement|null> { private setActive(tabOrIndex: string | number | HTMLIonTabElement): Promise<HTMLIonTabElement|null> {
if (this.transitioning) { if (this.transitioning) {
return Promise.resolve(null); return Promise.resolve(null);
} }
const selectedTab = (typeof tabOrIndex === 'number' ? this.getByIndex(tabOrIndex) : tabOrIndex); const selectedTab = this.getTab(tabOrIndex);
if (!selectedTab) { if (!selectedTab || selectedTab === this.selectedTab) {
return Promise.resolve(null); return Promise.resolve(null);
} }