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

86
core/src/components/checkbox/checkbox.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 { CheckboxChangeEventDetail, Color, StyleEventDetail } from '../../interface';
@ -101,19 +101,18 @@ export class Checkbox implements ComponentInterface {
});
}
@Listen('click')
onClick() {
this.setFocus();
this.checked = !this.checked;
this.indeterminate = false;
}
private setFocus() {
if (this.buttonEl) {
this.buttonEl.focus();
}
}
private onClick = () => {
this.setFocus();
this.checked = !this.checked;
this.indeterminate = false;
}
private onFocus = () => {
this.ionFocus.emit();
}
@ -122,59 +121,56 @@ export class Checkbox implements ComponentInterface {
this.ionBlur.emit();
}
hostData() {
const { inputId, disabled, checked, color, el } = this;
render() {
const { inputId, indeterminate, disabled, checked, value, color, el } = this;
const labelId = inputId + '-lbl';
const mode = getIonMode(this);
const label = findItemLabel(el);
if (label) {
label.id = labelId;
}
return {
'role': 'checkbox',
'aria-disabled': disabled ? 'true' : null,
'aria-checked': `${checked}`,
'aria-labelledby': labelId,
class: {
...createColorClasses(color),
[`${mode}`]: true,
'in-item': hostContext('ion-item', el),
'checkbox-checked': checked,
'checkbox-disabled': disabled,
'checkbox-indeterminate': this.indeterminate,
'interactive': true
}
};
}
renderHiddenInput(true, el, this.name, (checked ? value : ''), disabled);
render() {
const mode = getIonMode(this);
renderHiddenInput(true, this.el, this.name, (this.checked ? this.value : ''), this.disabled);
let path = this.indeterminate
let path = indeterminate
? <path d="M6 12L18 12"/>
: <path d="M5.9,12.5l3.8,3.8l8.8-8.8" />;
if (mode === 'md') {
path = this.indeterminate
path = indeterminate
? <path d="M2 12H22"/>
: <path d="M1.73,12.91 8.1,19.28 22.79,4.59"/>;
}
return [
<svg class="checkbox-icon" viewBox="0 0 24 24">
{path}
</svg>,
<button
type="button"
onFocus={this.onFocus}
onBlur={this.onBlur}
disabled={this.disabled}
ref={el => this.buttonEl = el}
return (
<Host
onClick={this.onClick}
role="checkbox"
aria-disabled={disabled ? 'true' : null}
aria-checked={`${checked}`}
aria-labelledby={labelId}
class={{
...createColorClasses(color),
[mode]: true,
'in-item': hostContext('ion-item', el),
'checkbox-checked': checked,
'checkbox-disabled': disabled,
'checkbox-indeterminate': indeterminate,
'interactive': true
}}
>
</button>
];
<svg class="checkbox-icon" viewBox="0 0 24 24">
{path}
</svg>
<button
type="button"
onFocus={this.onFocus}
onBlur={this.onBlur}
disabled={this.disabled}
ref={btnEl => this.buttonEl = btnEl}
>
</button>
</Host>
);
}
}