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

fix(tabs): correct order when initializing

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-02-16 10:32:09 +01:00
parent 43c14b3133
commit ca2aded47e
3 changed files with 46 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/core/src/components/tab/readme.md
View File

@ -232,7 +232,7 @@ Emitted when the current tab is selected.
#### getRouteId() #### getRouteId()
#### prepareActive() #### setActive()

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

@ -1,7 +1,7 @@
import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core'; import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
import { FrameworkDelegate } from '../..'; import { FrameworkDelegate } from '../..';
import { getIonApp, getNavAsChildIfExists } from '../../utils/helpers'; import { asyncRaf, getIonApp, getNavAsChildIfExists } from '../../utils/helpers';
@Component({ @Component({
@ -14,7 +14,7 @@ export class Tab {
@Element() el: HTMLElement; @Element() el: HTMLElement;
@State() init = false; @State() init = false;
@Prop() active = false; @Prop({mutable: true}) active = false;
/** /**
* Set the root page for this tab. * Set the root page for this tab.
@ -80,25 +80,6 @@ export class Tab {
*/ */
@Event() ionSelect: EventEmitter<void>; @Event() ionSelect: EventEmitter<void>;
@Method()
prepareActive(): Promise<any> {
if (this.loaded) {
return this.configChildNav();
}
this.loaded = true;
let promise: Promise<any>;
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() @Method()
getRouteId(): string|null { getRouteId(): string|null {
if (this.name) { if (this.name) {
@ -110,9 +91,29 @@ export class Tab {
return null; return null;
} }
private configChildNav(): Promise<any|void> { @Method()
setActive(): Promise<any> {
return this.prepareLazyLoaded().then(() => this.showTab());
}
private prepareLazyLoaded(): Promise<any> {
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<any|void> {
this.active = true;
const nav = getNavAsChildIfExists(this.el); const nav = getNavAsChildIfExists(this.el);
if (nav) { if (!nav) {
return Promise.resolve();
}
// the tab's nav has been initialized externally // the tab's nav has been initialized externally
return getIonApp().then((ionApp) => { return getIonApp().then((ionApp) => {
const externalNavPromise = ionApp ? ionApp.getExternalNavPromise() : null; const externalNavPromise = ionApp ? ionApp.getExternalNavPromise() : null;
@ -134,8 +135,6 @@ export class Tab {
}); });
}); });
} }
return Promise.resolve();
}
hostData() { hostData() {
const hidden = !this.active || !this.selected; const hidden = !this.active || !this.selected;

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

@ -1,7 +1,7 @@
import { Component, Element, Event, EventEmitter, Listen, Method, Prop, State } from '@stencil/core'; import { Component, Element, Event, EventEmitter, Listen, Method, Prop, State } from '@stencil/core';
import { Config, NavEventDetail, NavOutlet } from '../../index'; import { Config, NavEventDetail, NavOutlet } from '../../index';
import { asyncRaf, getIonApp } from '../../utils/helpers'; import { getIonApp } from '../../utils/helpers';
@Component({ @Component({
@ -122,9 +122,7 @@ export class Tabs implements NavOutlet {
const leavingTab = this.selectedTab; const leavingTab = this.selectedTab;
return selectedTab.prepareActive() return selectedTab.setActive()
.then(() => selectedTab.active = true)
.then(() => asyncRaf())
.then(() => { .then(() => {
if (leavingTab) { if (leavingTab) {
leavingTab.active = false; leavingTab.active = false;
@ -213,7 +211,7 @@ export class Tabs implements NavOutlet {
tab.selected = false; tab.selected = false;
} }
} }
const promise = selectedTab ? selectedTab.prepareActive() : Promise.resolve(); const promise = selectedTab ? selectedTab.setActive() : Promise.resolve();
return promise.then(() => { return promise.then(() => {
this.selectedTab = selectedTab; this.selectedTab = selectedTab;
if (selectedTab) { if (selectedTab) {