@scania/tegel
Version:
Tegel Design System
111 lines (110 loc) • 4.06 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.bodyCheckBoxClicked = () => {
const numberOfRows = this.host.getElementsByClassName('tds-table__row').length;
const numberOfRowsSelected = this.host.getElementsByClassName('tds-table__row--selected').length;
this.mainCheckboxStatus = numberOfRows === numberOfRowsSelected;
};
this.multiselect = false;
this.enablePaginationTableBody = false;
this.expandableRows = false;
this.multiselectArray = [];
this.multiselectArrayJSON = undefined;
this.mainCheckboxStatus = false;
this.columnsNumber = 0;
this.zebraMode = 'none';
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') {
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() {
this.tableEl = this.host.closest('tds-table');
this.tableId = this.tableEl.tableId;
}
componentWillLoad() {
relevantTableProps.forEach((tablePropName) => {
this[tablePropName] = this.tableEl[tablePropName];
});
}
componentWillRender() {
const headerColumnsNo = this.host.parentElement.querySelector('tds-table-header').children.length;
// 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: '22e2e49b6db83c7c71e1e674b3dbfcb1ffd04e66', "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: 'deb2aa129f332b48f7b9a38b0de25c2076fd86d9' })));
}
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
}];
}
}