@morjs/runtime-web
Version:
mor runtime for web
162 lines • 5.25 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const lit_element_1 = require("lit-element");
const baseElement_1 = require("../baseElement");
const bool_converter_1 = tslib_1.__importDefault(require("../utils/bool-converter"));
class RadioGroup extends baseElement_1.BaseElement {
constructor() {
super();
this.selectVal = '';
/**
* 组件值，选中时 change 事件会携带的 value。
*/
this.onChange = '';
/**
* 当前的value
* 内部变量，暴露给form
*/
this.value = '';
/**
* 私有属性，当前组件是否受控
* 默认值：false
*/
this.controlled = false;
this._callTigaRadioGroup = (e) => {
const { value = '' } = e.detail || {};
this.changeRadioValue(value);
};
this._initTigaRadioGroup = (e) => {
const value = e.detail.value || '';
const nodeList = this.querySelectorAll('tiga-radio');
nodeList.forEach((item) => {
const radio = item;
if (radio.value === value) {
radio.checked = true;
radio.classList.add('a-radio-checked');
}
else {
radio.checked = false;
radio.classList.remove('a-radio-checked');
}
});
};
this.selectVal = '';
}
reset() {
const namedElements = this.querySelectorAll('tiga-radio');
namedElements.forEach((e) => {
;
e.checked = false;
e.classList.remove('a-radio-checked');
});
}
connectedCallback() {
super.connectedCallback();
this.addListener();
this.initTapClick();
}
initStatus() {
const nodeList = this.querySelectorAll('tiga-radio');
nodeList.forEach((item) => {
const radio = item;
if (radio.checked) {
radio.classList.add('a-radio-checked');
}
else {
radio.classList.remove('a-radio-checked');
}
});
}
initTapClick() {
this.addEventListener('touchstart', (e) => {
if (!this.controlled) {
const checkboxNode = this.findCheckNode(e.target);
if (checkboxNode && !checkboxNode.disabled) {
this.changeRadioValue(checkboxNode.value);
}
}
}, false);
}
findCheckNode(node) {
if (node.tagName === 'TIGA-RADIO-GROUP') {
return undefined;
}
if (node.tagName === 'TIGA-RADIO') {
return node;
}
if (node.tagName === 'TIGA-LABEL') {
const checkBoxNode = node.querySelector('tiga-radio');
if (checkBoxNode) {
return checkBoxNode;
}
else {
return undefined;
}
}
else {
const radioNodeList = node.querySelectorAll('tiga-radio');
if (radioNodeList && radioNodeList.length > 0) {
return radioNodeList[0];
}
else if (node.parentNode) {
const radioNode = node.parentNode.querySelector('tiga-radio');
if (radioNode) {
return radioNode;
}
else {
return this.findCheckNode(node.parentNode);
}
}
}
return node;
}
attributeChangedCallback(name, oldVal, newVal) {
super.attributeChangedCallback(name, oldVal, newVal);
}
disconnectedCallback() {
super.disconnectedCallback();
}
changeRadioValue(value) {
;
this.selectVal = value;
const nodeList = this.querySelectorAll('tiga-radio');
nodeList.forEach((item) => {
const radio = item;
if (radio.value === value) {
radio.checked = true;
}
else {
radio.checked = false;
}
});
this.value = value;
this.dispatchEvent(new CustomEvent('change', {
detail: {
value
},
bubbles: true
}));
}
addListener() {
window.addEventListener('call-tiga-radio-group-event', this._callTigaRadioGroup);
window.addEventListener('init-tiga-radio-group-event', this._initTigaRadioGroup);
}
render() {
return (0, lit_element_1.html) ` <slot></slot> `;
}
}
tslib_1.__decorate([
(0, lit_element_1.property)({ type: String })
], RadioGroup.prototype, "selectVal", void 0);
tslib_1.__decorate([
(0, lit_element_1.property)({ type: String })
], RadioGroup.prototype, "onChange", void 0);
tslib_1.__decorate([
(0, lit_element_1.internalProperty)()
], RadioGroup.prototype, "value", void 0);
tslib_1.__decorate([
(0, lit_element_1.property)({ converter: bool_converter_1.default })
], RadioGroup.prototype, "controlled", void 0);
exports.default = RadioGroup;
//# sourceMappingURL=radio-group.js.map