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

79
core/src/components/item-option/item-option.tsx
View File

@ -1,4 +1,4 @@
import { Component, ComponentInterface, Element, Listen, Prop, h } from '@stencil/core';
import { Component, ComponentInterface, Element, Host, Prop, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
import { Color } from '../../interface';
@ -76,58 +76,55 @@ export class ItemOption implements ComponentInterface, AnchorInterface, ButtonIn
*/
@Prop() type: 'submit' | 'reset' | 'button' = 'button';
@Listen('click')
onClick(ev: Event) {
private onClick = (ev: Event) => {
const el = (ev.target as HTMLElement).closest('ion-item-option');
if (el) {
ev.preventDefault();
}
}
hostData() {
const mode = getIonMode(this);
const { disabled, expandable } = this;
return {
class: {
...createColorClasses(this.color),
[`${mode}`]: true,
'item-option-disabled': disabled,
'item-option-expandable': expandable,
'ion-activatable': true,
}
};
}
render() {
const TagType = this.href === undefined ? 'button' : 'a' as any;
const { disabled, expandable, href } = this;
const TagType = href === undefined ? 'button' : 'a' as any;
const mode = getIonMode(this);
const attrs = (TagType === 'button')
? { type: this.type }
: {
download: this.download,
href: this.href,
target: this.target
};
? { type: this.type }
: {
download: this.download,
href: this.href,
target: this.target
};
return (
<TagType
{...attrs}
class="button-native"
disabled={this.disabled}
<Host
onClick={this.onClick}
class={{
...createColorClasses(this.color),
[mode]: true,
'item-option-disabled': disabled,
'item-option-expandable': expandable,
'ion-activatable': true,
}}
>
<span class="button-inner">
<slot name="top"></slot>
<div class="horizontal-wrapper">
<slot name="start"></slot>
<slot name="icon-only"></slot>
<slot></slot>
<slot name="end"></slot>
</div>
<slot name="bottom"></slot>
</span>
{mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
</TagType>
<TagType
{...attrs}
class="button-native"
disabled={disabled}
>
<span class="button-inner">
<slot name="top"></slot>
<div class="horizontal-wrapper">
<slot name="start"></slot>
<slot name="icon-only"></slot>
<slot></slot>
<slot name="end"></slot>
</div>
<slot name="bottom"></slot>
</span>
{mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
</TagType>
</Host>
);
}
}