@ionic/core
Version:
Base components for Ionic
166 lines (165 loc) • 4.91 kB
JavaScript
import { findItemLabel } from '../../utils/helpers';
import { createColorClasses, hostContext } from '../../utils/theme';
export class Radio {
constructor() {
this.inputId = `ion-rb-${radioButtonIds++}`;
this.name = this.inputId;
this.disabled = false;
this.checked = false;
this.onFocus = () => {
this.ionFocus.emit();
};
this.onBlur = () => {
this.ionBlur.emit();
};
}
colorChanged() {
this.emitStyle();
}
checkedChanged(isChecked) {
if (isChecked) {
this.ionSelect.emit({
checked: true,
value: this.value
});
}
this.emitStyle();
}
disabledChanged() {
this.emitStyle();
}
componentWillLoad() {
if (this.value === undefined) {
this.value = this.inputId;
}
this.emitStyle();
}
componentDidLoad() {
this.ionRadioDidLoad.emit();
}
componentDidUnload() {
this.ionRadioDidUnload.emit();
}
onClick() {
if (this.checked) {
this.ionDeselect.emit();
}
else {
this.checked = true;
}
}
emitStyle() {
this.ionStyle.emit({
'radio-checked': this.checked,
'interactive-disabled': this.disabled,
});
}
hostData() {
const { inputId, disabled, checked, color, el } = this;
const labelId = inputId + '-lbl';
const label = findItemLabel(el);
if (label) {
label.id = labelId;
}
return {
'role': 'radio',
'aria-disabled': disabled ? 'true' : null,
'aria-checked': `${checked}`,
'aria-labelledby': labelId,
class: Object.assign({}, createColorClasses(color), { 'in-item': hostContext('ion-item', el), 'interactive': true, 'radio-checked': checked, 'radio-disabled': disabled })
};
}
render() {
return [
h("div", { class: "radio-icon" },
h("div", { class: "radio-inner" })),
h("button", { type: "button", onFocus: this.onFocus, onBlur: this.onBlur, disabled: this.disabled }),
];
}
static get is() { return "ion-radio"; }
static get encapsulation() { return "shadow"; }
static get properties() { return {
"checked": {
"type": Boolean,
"attr": "checked",
"mutable": true,
"watchCallbacks": ["checkedChanged"]
},
"color": {
"type": String,
"attr": "color",
"watchCallbacks": ["colorChanged"]
},
"disabled": {
"type": Boolean,
"attr": "disabled",
"watchCallbacks": ["disabledChanged"]
},
"el": {
"elementRef": true
},
"mode": {
"type": String,
"attr": "mode"
},
"name": {
"type": String,
"attr": "name"
},
"value": {
"type": "Any",
"attr": "value",
"mutable": true
}
}; }
static get events() { return [{
"name": "ionRadioDidLoad",
"method": "ionRadioDidLoad",
"bubbles": true,
"cancelable": true,
"composed": true
}, {
"name": "ionRadioDidUnload",
"method": "ionRadioDidUnload",
"bubbles": true,
"cancelable": true,
"composed": true
}, {
"name": "ionStyle",
"method": "ionStyle",
"bubbles": true,
"cancelable": true,
"composed": true
}, {
"name": "ionSelect",
"method": "ionSelect",
"bubbles": true,
"cancelable": true,
"composed": true
}, {
"name": "ionDeselect",
"method": "ionDeselect",
"bubbles": true,
"cancelable": true,
"composed": true
}, {
"name": "ionFocus",
"method": "ionFocus",
"bubbles": true,
"cancelable": true,
"composed": true
}, {
"name": "ionBlur",
"method": "ionBlur",
"bubbles": true,
"cancelable": true,
"composed": true
}]; }
static get listeners() { return [{
"name": "click",
"method": "onClick"
}]; }
static get style() { return "/**style-placeholder:ion-radio:**/"; }
static get styleMode() { return "/**style-id-placeholder:ion-radio:**/"; }
}
let radioButtonIds = 0;