es-grid-template
Version:
es-grid-template
99 lines (97 loc) • 3.93 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TableDOMHelper = void 0;
var _styles = require("../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
class TableDOMHelper {
artTableWrapper;
artTable;
tableHeader;
tableBody;
tableFooter;
stickyScroll;
stickyScrollItem;
constructor(artTableWrapper) {
this.artTableWrapper = artTableWrapper;
// @ts-ignore
this.artTable = artTableWrapper.querySelector(`.${_styles.Classes.artTable}`);
// @ts-ignore
this.tableHeader = this.artTable.querySelector(`:scope > .${_styles.Classes.tableHeader}`);
// @ts-ignore
this.tableBody = this.artTable.querySelector(`:scope > .${_styles.Classes.tableBody}`);
// @ts-ignore
this.tableFooter = this.artTable.querySelector(`:scope > .${_styles.Classes.tableFooter}`);
const stickyScrollSelector = `.${_styles.Classes.artTable} + .${_styles.Classes.stickyScroll}`;
// @ts-ignore
this.stickyScroll = artTableWrapper.querySelector(stickyScrollSelector);
// @ts-ignore
this.stickyScrollItem = this.stickyScroll.querySelector(`.${_styles.Classes.stickyScrollItem}`);
}
getVirtualTop() {
// @ts-ignore
return this.tableBody.querySelector(`.${_styles.Classes.virtualBlank}.top`);
}
getTableRows() {
const htmlTable = this.getTableBodyHtmlTable();
return htmlTable.querySelectorAll(`:scope > tbody > .${_styles.Classes.tableRow}`);
}
getTableBodyHtmlTable() {
// @ts-ignore
return this.artTable.querySelector(`.${_styles.Classes.tableBody} table`);
}
getLeftLockShadow() {
const selector = `:scope > .${_styles.Classes.lockShadowMask} .${_styles.Classes.leftLockShadow}`;
// @ts-ignore
return this.artTable.querySelector(selector);
}
getRightLockShadow() {
const selector = `:scope > .${_styles.Classes.lockShadowMask} .${_styles.Classes.rightLockShadow}`;
// @ts-ignore
return this.artTable.querySelector(selector);
}
getLoadingIndicator() {
// @ts-ignore
return this.artTableWrapper.querySelector(`.${_styles.Classes.loadingIndicator}`);
}
}
exports.TableDOMHelper = TableDOMHelper;