@scania/tegel
Version:
Tegel Design System
143 lines (142 loc) • 5.09 kB
JavaScript
import { h, Host } from "@stencil/core";
const relevantTableProps = ['compactDesign'];
export class TdsTableBodyInputWrapper {
constructor() {
this.showIcon = true;
this.renderSlot = true;
this.inputFocused = false;
this.compactDesign = false;
this.tableId = '';
}
internalTdsPropChangeListener(event) {
if (this.tableId === event.detail.tableId) {
event.detail.changed
.filter((changedProp) => relevantTableProps.includes(changedProp))
.forEach((changedProp) => {
if (typeof this[changedProp] === 'undefined') {
console.error(`Table prop is not supported: ${changedProp}`); // More informative error
throw new Error(`Table prop is not supported: ${changedProp}`);
}
this[changedProp] = event.detail[changedProp];
});
}
}
connectedCallback() {
const tableEl = this.host.closest('tds-table');
if (tableEl) {
this.tableId = tableEl.getAttribute('table-id');
}
else {
console.error('Failed to find parent tds-table element.');
}
}
componentWillLoad() {
const tableEl = this.host.closest('tds-table');
if (tableEl) {
relevantTableProps.forEach((tablePropName) => {
this[tablePropName] = tableEl[tablePropName];
});
}
else {
console.error('Failed to find parent tds-table element.');
}
}
handleSlotChange() {
this.validateSlot();
}
validateSlot() {
const children = Array.from(this.host.children).filter((element) => element.tagName === 'INPUT');
if (children.length !== 1) {
console.warn('TABLE-BODY-INPUT-WRAPPER: Wrapper only accepts input as children.');
this.renderSlot = false;
}
else {
if (!this.renderSlot)
this.renderSlot = true;
const input = children[0];
input.addEventListener('focus', () => {
this.inputFocused = true;
});
input.addEventListener('blur', () => {
this.inputFocused = false;
});
// Handle Enter key event
input.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
event.preventDefault();
this.moveToNextEditableCell();
}
});
}
}
moveToNextEditableCell() {
const allEditableCells = Array.from(document.querySelectorAll('tds-table-body-input-wrapper'));
const currentIndex = allEditableCells.indexOf(this.host);
if (currentIndex !== -1 && currentIndex < allEditableCells.length - 1) {
const nextCell = allEditableCells[currentIndex + 1];
const nextInput = nextCell.querySelector('input');
if (nextInput) {
nextInput.focus();
}
}
}
render() {
return (h(Host, { key: '47496dfe7467e43cede5af53d6c30fe17c116eaf', class: {
'focused-input-wrapper': this.inputFocused,
'show-icon': this.showIcon,
'tds-table__compact': this.compactDesign,
} }, this.renderSlot ? h("slot", { onSlotchange: () => this.handleSlotChange() }) : null, this.showIcon ? (h("tds-icon", { class: "edit-icon", slot: "icon", size: "16px", name: "edit" })) : null));
}
static get is() { return "tds-table-body-input-wrapper"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["table-body-input-wrapper.scss"]
};
}
static get styleUrls() {
return {
"$": ["table-body-input-wrapper.css"]
};
}
static get properties() {
return {
"showIcon": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Controls if the edit icon is shown"
},
"attribute": "show-icon",
"reflect": false,
"defaultValue": "true"
}
};
}
static get states() {
return {
"renderSlot": {},
"inputFocused": {},
"compactDesign": {},
"tableId": {}
};
}
static get elementRef() { return "host"; }
static get listeners() {
return [{
"name": "internalTdsTablePropChange",
"method": "internalTdsPropChangeListener",
"target": "body",
"capture": false,
"passive": false
}];
}
}