From 1dad0adb03c3b5e233d3959eaf256cf4f5f29f74 Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Thu, 8 Mar 2018 10:51:18 +0100 Subject: [PATCH] refactor(tabs): tab matching --- .../src/components/router/utils/interfaces.ts | 2 +- packages/core/src/components/tabs/readme.md | 8 +-- packages/core/src/components/tabs/tabs.tsx | 49 ++++++++----------- 3 files changed, 22 insertions(+), 37 deletions(-) diff --git a/packages/core/src/components/router/utils/interfaces.ts b/packages/core/src/components/router/utils/interfaces.ts index abc294ad3c..c25b37d093 100644 --- a/packages/core/src/components/router/utils/interfaces.ts +++ b/packages/core/src/components/router/utils/interfaces.ts @@ -1,6 +1,6 @@ export interface NavOutlet { - setRouteId(id: any, data: any, direction: number): Promise; + setRouteId(id: string, data: any, direction: number): Promise; markVisible?(): Promise; getRouteId(): string; diff --git a/packages/core/src/components/tabs/readme.md b/packages/core/src/components/tabs/readme.md index c3424fd3f4..5e099a2b7b 100644 --- a/packages/core/src/components/tabs/readme.md +++ b/packages/core/src/components/tabs/readme.md @@ -222,22 +222,16 @@ Emitted when the tab changes. ## Methods -#### getByIndex() - - #### getContentElement() -#### getIndex() - - #### getRouteId() #### getSelected() -#### getTabs() +#### getTab() #### markVisible() diff --git a/packages/core/src/components/tabs/tabs.tsx b/packages/core/src/components/tabs/tabs.tsx index 28439114aa..a6a9ebee7b 100644 --- a/packages/core/src/components/tabs/tabs.tsx +++ b/packages/core/src/components/tabs/tabs.tsx @@ -7,10 +7,10 @@ import { Config, NavOutlet } from '../../index'; styleUrl: 'tabs.scss' }) export class Tabs implements NavOutlet { + private ids = -1; private transitioning = false; private routingView: HTMLIonTabElement; - private tabsId: number = (++tabIds); @Element() el: HTMLElement; @@ -80,7 +80,7 @@ export class Tabs implements NavOutlet { componentDidUnload() { this.tabs.length = 0; - this.selectedTab = undefined; + this.selectedTab = this.routingView = undefined; } @Listen('ionTabbarClick') @@ -98,13 +98,15 @@ export class Tabs implements NavOutlet { .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() - getByIndex(index: number): HTMLIonTabElement { - return this.tabs[index]; + getTab(tabOrIndex: string | number | HTMLIonTabElement): HTMLIonTabElement { + 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() - getIndex(tab: HTMLIonTabElement): number { - return this.tabs.indexOf(tab); - } - - @Method() - getTabs(): HTMLIonTabElement[] { - return this.tabs; - } - - @Method() - setRouteId(id: any): Promise { - 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; + setRouteId(id: string): Promise { + return this.setActive(id).then(tab => { + if (tab) { + this.routingView = tab; + return true; + } + return false; }); } @@ -201,12 +192,12 @@ export class Tabs implements NavOutlet { } } - private setActive(tabOrIndex: number | HTMLIonTabElement): Promise { + private setActive(tabOrIndex: string | number | HTMLIonTabElement): Promise { if (this.transitioning) { return Promise.resolve(null); } - const selectedTab = (typeof tabOrIndex === 'number' ? this.getByIndex(tabOrIndex) : tabOrIndex); - if (!selectedTab) { + const selectedTab = this.getTab(tabOrIndex); + if (!selectedTab || selectedTab === this.selectedTab) { return Promise.resolve(null); }