@scania/tegel
Version:
Tegel Design System
115 lines (114 loc) • 4.39 kB
JavaScript
import { h, Host } from "@stencil/core";
const relevantTableProps = [
'multiselect',
'expandableRows',
'zebraMode',
];
/**
* @slot <default> - <b>Unnamed slot.</b> For table rows.
*/
export class TdsTableBody {
constructor() {
this.multiselect = false;
this.enablePaginationTableBody = false;
this.expandableRows = false;
this.multiselectArray = [];
this.multiselectArrayJSON = '';
this.mainCheckboxStatus = false;
this.columnsNumber = 0;
this.zebraMode = 'none';
this.tableId = '';
this.bodyCheckBoxClicked = () => {
const numberOfRows = this.host.getElementsByClassName('tds-table__row').length;
const numberOfRowsSelected = this.host.getElementsByClassName('tds-table__row--selected').length;
this.mainCheckboxStatus = numberOfRows === numberOfRowsSelected;
};
}
internalTdsPropChangeListener(event) {
if (this.tableId === event.detail.tableId) {
event.detail.changed
.filter((changedProp) => relevantTableProps.includes(changedProp))
.forEach((changedProp) => {
if (typeof this[changedProp] === 'undefined') {
throw new Error(`Table prop is not supported: ${changedProp}`);
}
this[changedProp] = event.detail[changedProp];
});
}
}
// No need to read the value, event is here just to trigger another function
bodyCheckboxListener() {
this.bodyCheckBoxClicked();
}
connectedCallback() {
var _a;
this.tableEl = this.host.closest('tds-table');
this.tableId = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.tableId;
}
componentWillLoad() {
relevantTableProps.forEach((tablePropName) => {
var _a;
this[tablePropName] = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a[tablePropName];
});
}
componentWillRender() {
var _a, _b;
const headrColumn = (_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('tds-table-header');
const headerColumnsNo = (_b = headrColumn === null || headrColumn === void 0 ? void 0 : headrColumn.children.length) !== null && _b !== void 0 ? _b : 0;
// multiselect and expended features requires one extra column for controls...
if (this.multiselect || this.expandableRows) {
this.columnsNumber = headerColumnsNo + 1;
}
else {
this.columnsNumber = headerColumnsNo;
}
}
render() {
return (h(Host, { key: 'adce986c270e066e38b0ec79e7d33e6db616c2a2', "data-selected-rows": this.multiselectArrayJSON, class: {
'tds-table--zebra-mode-rows-odd': this.zebraMode === 'rows-odd',
'tds-table--zebra-mode-rows-even': this.zebraMode === 'rows-even',
'tds-table--zebra-mode-columns-odd': this.zebraMode === 'columns-odd',
'tds-table--zebra-mode-columns-even': this.zebraMode === 'columns-even',
} }, h("slot", { key: '52a8e58d426fe4997808baadf591be93d260f701' })));
}
static get is() { return "tds-table-body"; }
static get originalStyleUrls() {
return {
"$": ["table-body.scss"]
};
}
static get styleUrls() {
return {
"$": ["table-body.css"]
};
}
static get states() {
return {
"multiselect": {},
"enablePaginationTableBody": {},
"expandableRows": {},
"multiselectArray": {},
"multiselectArrayJSON": {},
"mainCheckboxStatus": {},
"columnsNumber": {},
"zebraMode": {},
"tableId": {}
};
}
static get elementRef() { return "host"; }
static get listeners() {
return [{
"name": "internalTdsTablePropChange",
"method": "internalTdsPropChangeListener",
"target": "body",
"capture": false,
"passive": false
}, {
"name": "internalTdsRowChange",
"method": "bodyCheckboxListener",
"target": "body",
"capture": false,
"passive": false
}];
}
}