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

chore(): fix tabs (#19821)

Browse Source 
* fix(tabs): do not wait on child tab setActive() lazy loading

* whenDefined example

* chore(): fix lint
This commit is contained in:
Mike Hartington
2019-11-01 09:29:30 -07:00
committed by GitHub
parent 7bd4412889
commit 60aa027903
4 changed files with 22 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
core/src/components/tab/tab.tsx
View File

@ -1,4 +1,4 @@
import { Build, Component, ComponentInterface, Element, Host, Method, Prop, h } from '@stencil/core'; import { Build, Component, ComponentInterface, Element, Host, Method, Prop, Watch, h } from '@stencil/core';
import { ComponentRef, FrameworkDelegate } from '../../interface'; import { ComponentRef, FrameworkDelegate } from '../../interface';
import { attachComponent } from '../../utils/framework-delegate'; import { attachComponent } from '../../utils/framework-delegate';
@ -30,7 +30,7 @@ export class Tab implements ComponentInterface {
*/ */
@Prop() component?: ComponentRef; @Prop() component?: ComponentRef;
componentWillLoad() { async componentWillLoad() {
if (Build.isDev) { if (Build.isDev) {
if (this.component !== undefined && this.el.childElementCount > 0) { if (this.component !== undefined && this.el.childElementCount > 0) {
console.error('You can not use a lazy-loaded component in a tab and inlined content at the same time.' + console.error('You can not use a lazy-loaded component in a tab and inlined content at the same time.' +
@ -39,6 +39,9 @@ export class Tab implements ComponentInterface {
`- Remove the embedded content inside the ion-tab: <ion-tab></ion-tab>`); `- Remove the embedded content inside the ion-tab: <ion-tab></ion-tab>`);
} }
} }
if (this.active) {
await this.setActive();
}
} }
/** Set the active component for the tab */ /** Set the active component for the tab */
@ -48,6 +51,13 @@ export class Tab implements ComponentInterface {
this.active = true; this.active = true;
} }
@Watch('active')
changeActive(isActive: boolean) {
if (isActive) {
this.prepareLazyLoaded();
}
}
private prepareLazyLoaded(): Promise<HTMLElement | undefined> { private prepareLazyLoaded(): Promise<HTMLElement | undefined> {
if (!this.loaded && this.component != null) { if (!this.loaded && this.component != null) {
this.loaded = true; this.loaded = true;

7
core/src/components/tabs/tabs.tsx
View File

@ -46,7 +46,9 @@ export class Tabs implements NavOutlet {
} }
if (!this.useRouter) { if (!this.useRouter) {
const tabs = this.tabs; const tabs = this.tabs;
await this.select(tabs[0]); if (tabs.length > 0) {
await this.select(tabs[0]);
}
} }
this.ionNavWillLoad.emit(); this.ionNavWillLoad.emit();
} }
@ -127,7 +129,8 @@ export class Tabs implements NavOutlet {
this.leavingTab = this.selectedTab; this.leavingTab = this.selectedTab;
this.selectedTab = selectedTab; this.selectedTab = selectedTab;
this.ionTabsWillChange.emit({ tab: selectedTab.tab }); this.ionTabsWillChange.emit({ tab: selectedTab.tab });
return selectedTab.setActive(); selectedTab.active = true;
return Promise.resolve();
} }
private tabSwitch() { private tabSwitch() {

6
core/src/components/tabs/test/standalone/index.html
View File

@ -12,7 +12,7 @@
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script> <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
</head> </head>
<body onload="selectTab()"> <body>
<ion-tabs> <ion-tabs>
<ion-tab tab="tab-one"> <ion-tab tab="tab-one">
<div class="content-div div-one"> <div class="content-div div-one">
@ -71,11 +71,11 @@
</style> </style>
<script> <script>
async function selectTab() { customElements.whenDefined('ion-tabs').then(async () => {
const tabs = document.querySelector('ion-tabs'); const tabs = document.querySelector('ion-tabs');
await tabs.componentOnReady(); await tabs.componentOnReady();
await tabs.select('tab-three'); await tabs.select('tab-three');
} });
</script> </script>
</body> </body>

4
core/src/utils/gesture/pointer-events.ts
View File

@ -92,8 +92,8 @@ export const createPointerEvents = (
stopMouse(); stopMouse();
}; };
const enable = (enable = true) => { const enable = (isEnabled = true) => {
if (!enable) { if (!isEnabled) {
if (rmTouchStart) { if (rmTouchStart) {
rmTouchStart(); rmTouchStart();
} }