javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +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

84
core/src/components/back-button/back-button.tsx
View File

@ -1,7 +1,8 @@
import { Component, ComponentInterface, Element, Listen, Prop, h } from '@stencil/core';
import { Component, ComponentInterface, Element, Host, Prop, h } from '@stencil/core';
import { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global';
import { Color, Config } from '../../interface';
import { Color } from '../../interface';
import { ButtonInterface } from '../../utils/element-interface';
import { createColorClasses, openURL } from '../../utils/theme';
@ -21,9 +22,6 @@ export class BackButton implements ComponentInterface, ButtonInterface {
private mode = getIonMode(this);
@Element() el!: HTMLElement;
@Prop({ context: 'config' }) config!: Config;
@Prop({ context: 'window' }) win!: Window;
/**
* The color to use from your application's color palette.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@ -56,24 +54,13 @@ export class BackButton implements ComponentInterface, ButtonInterface {
*/
@Prop() type: 'submit' | 'reset' | 'button' = 'button';
@Listen('click')
async onClick(ev: Event) {
const nav = this.el.closest('ion-nav');
ev.preventDefault();
if (nav && await nav.canGoBack()) {
return nav.pop({ skipIfBusy: true });
}
return openURL(this.win, this.defaultHref, ev, 'back');
}
private get backButtonIcon() {
return this.icon != null ? this.icon : this.config.get('backButtonIcon', 'arrow-back');
return this.icon != null ? this.icon : config.get('backButtonIcon', 'arrow-back');
}
private get backButtonText() {
const defaultBackButtonText = this.mode === 'ios' ? 'Back' : null;
return this.text != null ? this.text : this.config.get('backButtonText', defaultBackButtonText);
return this.text != null ? this.text : config.get('backButtonText', defaultBackButtonText);
}
private get hasIconOnly() {
@ -90,42 +77,43 @@ export class BackButton implements ComponentInterface, ButtonInterface {
return 'bounded';
}
hostData() {
const { color, defaultHref, disabled, mode, hasIconOnly } = this;
private onClick = async (ev: Event) => {
const nav = this.el.closest('ion-nav');
ev.preventDefault();
const showBackButton = defaultHref !== undefined;
return {
'aria-disabled': disabled ? 'true' : null,
class: {
...createColorClasses(color),
[`${mode}`]: true,
'button': true, // ion-buttons target .button
'back-button-disabled': disabled,
'back-button-has-icon-only': hasIconOnly,
'ion-activatable': true,
'ion-focusable': true,
'show-back-button': showBackButton
}
};
if (nav && await nav.canGoBack()) {
return nav.pop({ skipIfBusy: true });
}
return openURL(this.defaultHref, ev, 'back');
}
render() {
const { backButtonIcon, backButtonText } = this;
const attrs = {
type: this.type
};
const { color, defaultHref, disabled, type, mode, hasIconOnly, backButtonIcon, backButtonText } = this;
const showBackButton = defaultHref !== undefined;
return (
<button {...attrs} disabled={this.disabled} class="button-native">
<span class="button-inner">
{backButtonIcon && <ion-icon icon={backButtonIcon} lazy={false}></ion-icon>}
{backButtonText && <span class="button-text">{backButtonText}</span>}
</span>
{this.mode === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>}
</button>
<Host
onClick={this.onClick}
class={{
...createColorClasses(color),
[mode]: true,
'button': true, // ion-buttons target .button
'back-button-disabled': disabled,
'back-button-has-icon-only': hasIconOnly,
'ion-activatable': true,
'ion-focusable': true,
'show-back-button': showBackButton
}}
>
<button type={type} disabled={disabled} class="button-native">
<span class="button-inner">
{backButtonIcon && <ion-icon icon={backButtonIcon} lazy={false}></ion-icon>}
{backButtonText && <span class="button-text">{backButtonText}</span>}
</span>
{mode === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>}
</button>
</Host>
);
}
}