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:
Manu MA
2019-06-23 11:26:42 +02:00
committed by GitHub
parent 78e477b2a7
commit 34dfc3ce98
112 changed files with 1229 additions and 1233 deletions

View File

@ -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>
);
}
}