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

67
core/src/components/segment-button/segment-button.tsx
View File

@ -1,4 +1,4 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, Watch, h } from '@stencil/core';
import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
import { SegmentButtonLayout } from '../../interface';
@ -58,11 +58,6 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
}
}
@Listen('click')
onClick() {
this.checked = true;
}
private get hasLabel() {
return !!this.el.querySelector('ion-label');
}
@ -71,39 +66,41 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
return !!this.el.querySelector('ion-icon');
}
hostData() {
const { checked, disabled, hasIcon, hasLabel, layout } = this;
const mode = getIonMode(this);
return {
'aria-disabled': disabled ? 'true' : null,
class: {
[`${mode}`]: true,
'segment-button-has-label': hasLabel,
'segment-button-has-icon': hasIcon,
'segment-button-has-label-only': hasLabel && !hasIcon,
'segment-button-has-icon-only': hasIcon && !hasLabel,
'segment-button-disabled': disabled,
'segment-button-checked': checked,
[`segment-button-layout-${layout}`]: true,
'ion-activatable': true,
'ion-activatable-instant': true,
}
};
private onClick = () => {
this.checked = true;
}
render() {
const { checked, type, disabled, hasIcon, hasLabel, layout } = this;
const mode = getIonMode(this);
return [
<button
type={this.type}
aria-pressed={this.checked ? 'true' : null}
class="button-native"
disabled={this.disabled}
return (
<Host
onClick={this.onClick}
aria-disabled={disabled ? 'true' : null}
class={{
[mode]: true,
'segment-button-has-label': hasLabel,
'segment-button-has-icon': hasIcon,
'segment-button-has-label-only': hasLabel && !hasIcon,
'segment-button-has-icon-only': hasIcon && !hasLabel,
'segment-button-disabled': disabled,
'segment-button-checked': checked,
[`segment-button-layout-${layout}`]: true,
'ion-activatable': true,
'ion-activatable-instant': true,
}}
>
<slot></slot>
{mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
</button>,
<div class="segment-button-indicator"></div>
];
<button
type={type}
aria-pressed={checked ? 'true' : null}
class="button-native"
disabled={disabled}
>
<slot></slot>
{mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
</button>
<div class="segment-button-indicator"></div>
</Host>
);
}
}