diff --git a/packages/core/src/components/tab/readme.md b/packages/core/src/components/tab/readme.md index d520203370..eb106cee8d 100644 --- a/packages/core/src/components/tab/readme.md +++ b/packages/core/src/components/tab/readme.md @@ -232,7 +232,7 @@ Emitted when the current tab is selected. #### getRouteId() -#### prepareActive() +#### setActive() diff --git a/packages/core/src/components/tab/tab.tsx b/packages/core/src/components/tab/tab.tsx index 60e6a0e61b..664c117a0d 100644 --- a/packages/core/src/components/tab/tab.tsx +++ b/packages/core/src/components/tab/tab.tsx @@ -1,7 +1,7 @@ import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core'; import { FrameworkDelegate } from '../..'; -import { getIonApp, getNavAsChildIfExists } from '../../utils/helpers'; +import { asyncRaf, getIonApp, getNavAsChildIfExists } from '../../utils/helpers'; @Component({ @@ -14,7 +14,7 @@ export class Tab { @Element() el: HTMLElement; @State() init = false; - @Prop() active = false; + @Prop({mutable: true}) active = false; /** * Set the root page for this tab. @@ -80,25 +80,6 @@ export class Tab { */ @Event() ionSelect: EventEmitter; - @Method() - prepareActive(): Promise { - if (this.loaded) { - return this.configChildNav(); - } - this.loaded = true; - - let promise: Promise; - if (this.component) { - promise = (this.delegate) - ? this.delegate.attachViewToDom(this.el, this.component) - : attachViewToDom(this.el, this.component); - - } else { - promise = Promise.resolve(); - } - return promise.then(() => this.configChildNav()); - } - @Method() getRouteId(): string|null { if (this.name) { @@ -110,33 +91,51 @@ export class Tab { return null; } - private configChildNav(): Promise { - const nav = getNavAsChildIfExists(this.el); - if (nav) { - // the tab's nav has been initialized externally - return getIonApp().then((ionApp) => { - const externalNavPromise = ionApp ? ionApp.getExternalNavPromise() : null; - if (externalNavPromise) { - return (externalNavPromise as any).then(() => { - ionApp.setExternalNavPromise(null); - }); - } + @Method() + setActive(): Promise { + return this.prepareLazyLoaded().then(() => this.showTab()); + } - // the tab's nav has not been initialized externally, so - // check if we need to initiailize it - return nav.componentOnReady() - .then(() => nav.onAllTransitionsComplete()) - .then(() => { - if (nav.getViews().length === 0 && !nav.isTransitioning() && !nav.initialized) { - return nav.setRoot(nav.root); - } - return Promise.resolve(); - }); - }); + private prepareLazyLoaded(): Promise { + if (!this.loaded && this.component) { + this.loaded = true; + const promise = (this.delegate) + ? this.delegate.attachViewToDom(this.el, this.component) + : attachViewToDom(this.el, this.component); + + return promise.then(() => asyncRaf()); } return Promise.resolve(); } + private showTab(): Promise { + this.active = true; + const nav = getNavAsChildIfExists(this.el); + if (!nav) { + return Promise.resolve(); + } + // the tab's nav has been initialized externally + return getIonApp().then((ionApp) => { + const externalNavPromise = ionApp ? ionApp.getExternalNavPromise() : null; + if (externalNavPromise) { + return (externalNavPromise as any).then(() => { + ionApp.setExternalNavPromise(null); + }); + } + + // the tab's nav has not been initialized externally, so + // check if we need to initiailize it + return nav.componentOnReady() + .then(() => nav.onAllTransitionsComplete()) + .then(() => { + if (nav.getViews().length === 0 && !nav.isTransitioning() && !nav.initialized) { + return nav.setRoot(nav.root); + } + return Promise.resolve(); + }); + }); + } + hostData() { const hidden = !this.active || !this.selected; return { diff --git a/packages/core/src/components/tabs/tabs.tsx b/packages/core/src/components/tabs/tabs.tsx index 4bfeeaa45d..55f3df575f 100644 --- a/packages/core/src/components/tabs/tabs.tsx +++ b/packages/core/src/components/tabs/tabs.tsx @@ -1,7 +1,7 @@ import { Component, Element, Event, EventEmitter, Listen, Method, Prop, State } from '@stencil/core'; import { Config, NavEventDetail, NavOutlet } from '../../index'; -import { asyncRaf, getIonApp } from '../../utils/helpers'; +import { getIonApp } from '../../utils/helpers'; @Component({ @@ -122,9 +122,7 @@ export class Tabs implements NavOutlet { const leavingTab = this.selectedTab; - return selectedTab.prepareActive() - .then(() => selectedTab.active = true) - .then(() => asyncRaf()) + return selectedTab.setActive() .then(() => { if (leavingTab) { leavingTab.active = false; @@ -213,7 +211,7 @@ export class Tabs implements NavOutlet { tab.selected = false; } } - const promise = selectedTab ? selectedTab.prepareActive() : Promise.resolve(); + const promise = selectedTab ? selectedTab.setActive() : Promise.resolve(); return promise.then(() => { this.selectedTab = selectedTab; if (selectedTab) {