javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +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 { attachComponent } from '../../utils/framework-delegate';
@@ -30,7 +30,7 @@ export class Tab implements ComponentInterface {
*/
@Prop() component?: ComponentRef;
componentWillLoad() {
async componentWillLoad() {
if (Build.isDev) {
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.' +
@@ -39,6 +39,9 @@ export class Tab implements ComponentInterface {
`- 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 */
@@ -48,6 +51,13 @@ export class Tab implements ComponentInterface {
this.active = true;
}
@Watch('active')
changeActive(isActive: boolean) {
if (isActive) {
this.prepareLazyLoaded();
}
}
private prepareLazyLoaded(): Promise<HTMLElement | undefined> {
if (!this.loaded && this.component != null) {
this.loaded = true;

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

@@ -46,7 +46,9 @@ export class Tabs implements NavOutlet {
}
if (!this.useRouter) {
const tabs = this.tabs;
await this.select(tabs[0]);
if (tabs.length > 0) {
await this.select(tabs[0]);
}
}
this.ionNavWillLoad.emit();
}
@@ -127,7 +129,8 @@ export class Tabs implements NavOutlet {
this.leavingTab = this.selectedTab;
this.selectedTab = selectedTab;
this.ionTabsWillChange.emit({ tab: selectedTab.tab });
return selectedTab.setActive();
selectedTab.active = true;
return Promise.resolve();
}
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>
</head>
<body onload="selectTab()">
<body>
<ion-tabs>
<ion-tab tab="tab-one">
<div class="content-div div-one">
@@ -71,11 +71,11 @@
</style>
<script>
async function selectTab() {
customElements.whenDefined('ion-tabs').then(async () => {
const tabs = document.querySelector('ion-tabs');
await tabs.componentOnReady();
await tabs.select('tab-three');
}
});
</script>
</body>

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

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