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

refactor(all): updating to newest stencil apis (#18578)

Browse Source 
* 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 1231 additions and 1235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
core/src/components/tab-button/tab-button.tsx
View File

@ -1,7 +1,8 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, QueueApi, h } from '@stencil/core';
import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';
import { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global';
import { Config, TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from '../../interface';
import { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from '../../interface';
import { AnchorInterface } from '../../utils/element-interface';
/**
@ -19,10 +20,6 @@ export class TabButton implements ComponentInterface, AnchorInterface {
@Element() el!: HTMLElement;
@Prop({ context: 'queue' }) queue!: QueueApi;
@Prop({ context: 'document' }) doc!: Document;
@Prop({ context: 'config' }) config!: Config;
/**
* If `true`, the user cannot interact with the tab button.
*/
@ -83,21 +80,9 @@ export class TabButton implements ComponentInterface, AnchorInterface {
this.selected = this.tab === ev.detail.tab;
}
@Listen('click')
onClick(ev: Event) {
this.selectTab(ev);
}
@Listen('keyup')
onKeyUp(ev: KeyboardEvent) {
if (ev.key === 'Enter' || ev.key === ' ') {
this.selectTab(ev);
}
}
componentWillLoad() {
if (this.layout === undefined) {
this.layout = this.config.get('tabButtonLayout', 'icon-top');
this.layout = config.get('tabButtonLayout', 'icon-top');
}
}
@ -134,45 +119,53 @@ export class TabButton implements ComponentInterface, AnchorInterface {
return 0;
}
hostData() {
const { disabled, hasIcon, hasLabel, tabIndex, layout, selected, tab } = this;
const mode = getIonMode(this);
return {
'tabindex': tabIndex,
'role': 'tab',
'aria-selected': selected ? 'true' : null,
'id': tab !== undefined ? `tab-button-${tab}` : null,
class: {
[`${mode}`]: true,
'tab-selected': selected,
'tab-disabled': disabled,
'tab-has-label': hasLabel,
'tab-has-icon': hasIcon,
'tab-has-label-only': hasLabel && !hasIcon,
'tab-has-icon-only': hasIcon && !hasLabel,
[`tab-layout-${layout}`]: true,
'ion-activatable': true,
'ion-selectable': true,
'ion-focusable': true
}
};
private onKeyUp = (ev: KeyboardEvent) => {
if (ev.key === 'Enter' || ev.key === ' ') {
this.selectTab(ev);
}
}
private onClick = (ev: Event) => {
this.selectTab(ev);
}
render() {
const { disabled, hasIcon, hasLabel, tabIndex, href, rel, target, layout, selected, tab } = this;
const mode = getIonMode(this);
const attrs = {
download: this.download,
href: this.href,
rel: this.rel,
target: this.target
href,
rel,
target
};
return (
<a {...attrs} tabIndex={-1}>
<slot></slot>
{mode === 'md' && <ion-ripple-effect type="unbounded"></ion-ripple-effect>}
</a>
<Host
onClick={this.onClick}
onKeyup={this.onKeyUp}
role="tab"
tabindex={tabIndex}
aria-selected={selected ? 'true' : null}
id={tab !== undefined ? `tab-button-${tab}` : null}
class={{
[mode]: true,
'tab-selected': selected,
'tab-disabled': disabled,
'tab-has-label': hasLabel,
'tab-has-icon': hasIcon,
'tab-has-label-only': hasLabel && !hasIcon,
'tab-has-icon-only': hasIcon && !hasLabel,
[`tab-layout-${layout}`]: true,
'ion-activatable': true,
'ion-selectable': true,
'ion-focusable': true
}}
>
<a {...attrs} tabIndex={-1}>
<slot></slot>
{mode === 'md' && <ion-ripple-effect type="unbounded"></ion-ripple-effect>}
</a>
</Host>
);
}
}