@morjs/runtime-web
Version:
mor runtime for web
159 lines • 5.35 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const lit_element_1 = require("lit-element");
const baseElement_1 = require("../baseElement");
// interface IRadioGroup {
// selectValues: string[];
// myArray: string[];
// }
//
// interface IRadioItem {
// value: string;
// checked: boolean;
// }
class CheckboxGroup extends baseElement_1.BaseElement {
constructor() {
super();
// static get properties() {
// return {
// selectValues: [],
// };
// }
/**
* 组件值，选中时 change 事件会携带的 value。
*/
this.onChange = '';
this.selectValues = [];
/**
* 当前的value
* 内部变量，暴露给form
*/
this.value = '';
this._callTigaCheckboxGroup = (e) => {
const { value = '' } = e.detail || {};
this.changeValueList(value);
};
this._initTigaCheckboxGroup = (e) => {
const nodeList = this.querySelectorAll('tiga-checkbox');
nodeList.forEach((item) => {
const checkbox = item;
if (checkbox.checked &&
!this.selectValues.some((val) => val === checkbox.value)) {
;
this.selectValues.push(checkbox.value);
}
});
};
this.selectVal = '';
}
reset() {
const namedElements = this.querySelectorAll('tiga-checkbox');
namedElements.forEach((e) => {
;
e.checked = false;
e.classList.remove('a-checkbox-checked');
});
}
connectedCallback() {
super.connectedCallback();
this.addListener();
this.initTapClick();
}
attributeChangedCallback(name, oldVal, newVal) {
super.attributeChangedCallback(name, oldVal, newVal);
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener('call-tiga-checkbox-group-event', this._callTigaCheckboxGroup);
this.removeEventListener('init-tiga-checkbox-group-event', this._initTigaCheckboxGroup);
}
initTapClick() {
this.addEventListener('touchstart', (e) => {
const checkboxNode = this.findCheckNode(e.target);
if (checkboxNode && !checkboxNode.disabled) {
this.changeValueList(checkboxNode.value);
}
}, true);
}
findCheckNode(node) {
if (node.tagName === 'TIGA-CHECKBOX' ||
node.tagName === 'TIGA-CHECKBOX-GROUP') {
return undefined;
}
if (node.tagName === 'TIGA-LABEL') {
const checkBoxNode = node.querySelector('tiga-checkbox');
if (checkBoxNode) {
return checkBoxNode;
}
else {
return undefined;
}
}
else {
const checkboxNodeList = node.querySelectorAll('tiga-checkbox');
if (checkboxNodeList && checkboxNodeList.length > 0) {
return checkboxNodeList[0];
}
else if (node.parentNode) {
const checkboxNode = node.parentNode.querySelector('tiga-checkbox');
if (checkboxNode) {
return checkboxNode;
}
else {
return this.findCheckNode(node.parentNode);
}
}
}
return node;
}
addListener() {
this.addEventListener('call-tiga-checkbox-group-event', this._callTigaCheckboxGroup);
this.addEventListener('init-tiga-checkbox-group-event', this._initTigaCheckboxGroup);
}
changeValueList(value) {
const valueArr = this.selectValues || [];
let newValue = [];
if (valueArr.some((item) => item === value)) {
newValue = valueArr.filter((item) => item !== value);
}
else {
newValue = [...valueArr, value];
}
;
this.selectValues = [...newValue];
const nodeList = this.querySelectorAll('tiga-checkbox');
nodeList.forEach((item) => {
const checkbox = item;
const isChecked = this.selectValues.some((val) => val === checkbox.value);
checkbox.checked = isChecked;
if (isChecked) {
checkbox.classList.add('a-checkbox-checked');
}
else {
checkbox.classList.remove('a-checkbox-checked');
}
});
this.value = this.selectValues.join(',');
this.dispatchEvent(new CustomEvent('change', {
detail: {
value: this.selectValues
},
bubbles: true
}));
}
render() {
return (0, lit_element_1.html) ` <slot></slot> `;
}
}
tslib_1.__decorate([
(0, lit_element_1.property)({ type: String })
], CheckboxGroup.prototype, "onChange", void 0);
tslib_1.__decorate([
(0, lit_element_1.property)({ type: Array })
], CheckboxGroup.prototype, "selectValues", void 0);
tslib_1.__decorate([
(0, lit_element_1.internalProperty)()
], CheckboxGroup.prototype, "value", void 0);
exports.default = CheckboxGroup;
//# sourceMappingURL=checkbox-group.js.map