es-grid-template
Version:
es-grid-template
93 lines (91 loc) • 3.67 kB
JavaScript
import { Classes } from "../styles";
// Table DOM structure
// div.art-table-wrapper
// └── div.art-loading-wrapper
// ├── div.art-loading-indicator-wrapper
// │ └── div.art-loading-indicator
// │
// └── div.art-loading-content-wrapper
// ├── div.art-table
// │ │
// │ ├── div.art-table-header
// │ │ └── table
// │ │ ├── colgroup
// │ │ └── thead // Note: custom content may appear here; nested tables are possible
// │ │
// │ ├── div.art-table-body
// │ │ ├── div.art-virtual-blank.top
// │ │ ├── table
// │ │ │ ├── colgroup
// │ │ │ └── tbody // Note: custom content may appear here; nested tables are possible
// │ │ └── div.art-virtual-blank.bottom
// │ │
// │ ├── div.art-table-footer
// │ │ └── table
// │ │ ├── colgroup
// │ │ └── tfoot // Note: custom content may appear here; nested tables are possible
// │ │
// │ ├── div.art-lock-shadow-mask
// │ │ └── div.art-left-lock-shadow
// │ └── div.art-lock-shadow-mask
// │ └── div.art-right-lock-shadow
// │
// └── div.art-sticky-scroll
// └── div.art-sticky-scroll-item
//
// In cases where nested tables may exist, we can use the following approach
// to avoid accidentally selecting elements from nested tables via querySelector:
// artTable.querySelector(':scope > .art-lock-shadow-mask .art-left-lock-shadow')
//
// Table DOM structure helper
export class TableDOMHelper {
artTableWrapper;
artTable;
tableHeader;
tableBody;
tableFooter;
stickyScroll;
stickyScrollItem;
constructor(artTableWrapper) {
this.artTableWrapper = artTableWrapper;
// @ts-ignore
this.artTable = artTableWrapper.querySelector(`.${Classes.artTable}`);
// @ts-ignore
this.tableHeader = this.artTable.querySelector(`:scope > .${Classes.tableHeader}`);
// @ts-ignore
this.tableBody = this.artTable.querySelector(`:scope > .${Classes.tableBody}`);
// @ts-ignore
this.tableFooter = this.artTable.querySelector(`:scope > .${Classes.tableFooter}`);
const stickyScrollSelector = `.${Classes.artTable} + .${Classes.stickyScroll}`;
// @ts-ignore
this.stickyScroll = artTableWrapper.querySelector(stickyScrollSelector);
// @ts-ignore
this.stickyScrollItem = this.stickyScroll.querySelector(`.${Classes.stickyScrollItem}`);
}
getVirtualTop() {
// @ts-ignore
return this.tableBody.querySelector(`.${Classes.virtualBlank}.top`);
}
getTableRows() {
const htmlTable = this.getTableBodyHtmlTable();
return htmlTable.querySelectorAll(`:scope > tbody > .${Classes.tableRow}`);
}
getTableBodyHtmlTable() {
// @ts-ignore
return this.artTable.querySelector(`.${Classes.tableBody} table`);
}
getLeftLockShadow() {
const selector = `:scope > .${Classes.lockShadowMask} .${Classes.leftLockShadow}`;
// @ts-ignore
return this.artTable.querySelector(selector);
}
getRightLockShadow() {
const selector = `:scope > .${Classes.lockShadowMask} .${Classes.rightLockShadow}`;
// @ts-ignore
return this.artTable.querySelector(selector);
}
getLoadingIndicator() {
// @ts-ignore
return this.artTableWrapper.querySelector(`.${Classes.loadingIndicator}`);
}
}