mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
refactor(all): updating to newest stencil apis (#18578)
* chore(): update ionicons * refactor(all): updating to newest stencil apis * fix lint issues * more changes * moreee * fix treeshaking * fix config * fix checkbox * fix stuff * chore(): update ionicons * fix linting errors
This commit is contained in:
@ -1,6 +1,6 @@
|
||||
import { Component, Element, Event, EventEmitter, Listen, Method, Prop, State, h } from '@stencil/core';
|
||||
import { Component, Element, Event, EventEmitter, Host, Method, Prop, State, h } from '@stencil/core';
|
||||
|
||||
import { Config, NavOutlet, RouteID, RouteWrite, TabButtonClickEventDetail } from '../../interface';
|
||||
import { NavOutlet, RouteID, RouteWrite, TabButtonClickEventDetail } from '../../interface';
|
||||
|
||||
/**
|
||||
* @slot - Content is placed between the named slots if provided without a slot.
|
||||
@ -22,9 +22,6 @@ export class Tabs implements NavOutlet {
|
||||
@State() tabs: HTMLIonTabElement[] = [];
|
||||
@State() selectedTab?: HTMLIonTabElement;
|
||||
|
||||
@Prop({ context: 'config' }) config!: Config;
|
||||
@Prop({ context: 'document' }) doc!: Document;
|
||||
|
||||
/** @internal */
|
||||
@Prop({ mutable: true }) useRouter = false;
|
||||
|
||||
@ -68,20 +65,6 @@ export class Tabs implements NavOutlet {
|
||||
}
|
||||
}
|
||||
|
||||
@Listen('ionTabButtonClick')
|
||||
protected onTabClicked(ev: CustomEvent<TabButtonClickEventDetail>) {
|
||||
const { href, tab } = ev.detail;
|
||||
const selectedTab = this.tabs.find(t => t.tab === tab);
|
||||
if (this.useRouter && href !== undefined) {
|
||||
const router = document.querySelector('ion-router');
|
||||
if (router) {
|
||||
router.push(href);
|
||||
}
|
||||
} else if (selectedTab) {
|
||||
this.select(selectedTab);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Select a tab by the value of its `tab` property or an element reference.
|
||||
*
|
||||
@ -203,13 +186,30 @@ export class Tabs implements NavOutlet {
|
||||
return selectedTab !== undefined && selectedTab !== leavingTab && !this.transitioning;
|
||||
}
|
||||
|
||||
private onTabClicked = (ev: CustomEvent<TabButtonClickEventDetail>) => {
|
||||
const { href, tab } = ev.detail;
|
||||
const selectedTab = this.tabs.find(t => t.tab === tab);
|
||||
if (this.useRouter && href !== undefined) {
|
||||
const router = document.querySelector('ion-router');
|
||||
if (router) {
|
||||
router.push(href);
|
||||
}
|
||||
} else if (selectedTab) {
|
||||
this.select(selectedTab);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return [
|
||||
<slot name="top"></slot>,
|
||||
<div class="tabs-inner">
|
||||
<slot></slot>
|
||||
</div>,
|
||||
<slot name="bottom"></slot>
|
||||
];
|
||||
return (
|
||||
<Host
|
||||
onIonTabButtonClick={this.onTabClicked}
|
||||
>
|
||||
<slot name="top"></slot>
|
||||
<div class="tabs-inner">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<slot name="bottom"></slot>
|
||||
</Host>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user