gd-bs
Version:
Bootstrap JavaScript, TypeScript and Web Components library.
204 lines (203 loc) • 8.13 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.Table = void 0;
var base_1 = require("../base");
var templates_1 = require("./templates");
/**
* Table
*/
var _Table = /** @class */ (function (_super) {
__extends(_Table, _super);
// Constructor
function _Table(props, template) {
if (template === void 0) { template = templates_1.HTML; }
var _this = _super.call(this, template, props) || this;
// Configure the collapse
_this.configure();
// Configure the parent
_this.configureParent();
return _this;
}
// Configure the card group
_Table.prototype.configure = function () {
var hasFooter = false;
// See if columns are defined
var head = this.el.querySelector("thead");
if (head) {
if (this.props.columns) {
// Append the row
var row = document.createElement("tr");
head.appendChild(row);
// Parse the columns
for (var i = 0; i < this.props.columns.length; i++) {
var colProp = this.props.columns[i];
// Append the column
var column = document.createElement("th");
row.appendChild(column);
// See if the footer exists
if (colProp.footer || colProp.onRenderFooter) {
// Set the flag
hasFooter = true;
}
// Render the column
this.renderColumn(column, colProp);
}
// See if there is an event
if (this.props.onRenderHeaderRow) {
// Call the event
this.props.onRenderHeaderRow(row);
}
}
}
// Add the rows
this.addRows(this.props.rows);
// See if the footer exists
if (hasFooter) {
// Append the footer
var footer = document.createElement("tfoot");
this.el.appendChild(footer);
// Append the row
var row = document.createElement("tr");
footer.appendChild(row);
// Parse the columns
for (var i = 0; i < this.props.columns.length; i++) {
// Append the column
var column = document.createElement("td");
row.appendChild(column);
// Render the column
this.renderColumnFooter(column, this.props.columns[i]);
}
}
};
// Renders a cell
_Table.prototype.renderCell = function (row, props, data, rowIdx) {
var _this = this;
// Create the cell
var cell = document.createElement("td");
cell.className = props.className || "";
cell.innerHTML = data[props.name] == null ? "" : data[props.name];
row.appendChild(cell);
// See if there is a scope
if (props.scope) {
// Set the scope
cell.setAttribute("scope", props.scope);
}
// See if there is an event for this column
if (props.onRenderCell) {
// Call the event
props.onRenderCell(cell, props, data, rowIdx);
}
// See if there is an event for this component
if (this.props.onRenderCell) {
// Call the event
this.props.onRenderCell(cell, props, data, rowIdx);
}
// See if there is a click event
if (props.onClickCell || this.props.onClickCell) {
// Add the click event
cell.addEventListener("click", function (ev) {
// Call the event
props.onClickCell ? props.onClickCell(cell, props, data, rowIdx) : null;
_this.props.onClickCell ? _this.props.onClickCell(cell, props, data, rowIdx) : null;
});
}
};
// Renders a column
_Table.prototype.renderColumn = function (column, props) {
var _this = this;
column.innerHTML = props.isHidden ? "" : props.title || props.name;
column.setAttribute("scope", "col");
// See if there is an event for this column
if (props.onRenderHeader) {
// Call the event
props.onRenderHeader(column, props);
}
// See if there is an event for this component
if (this.props.onRenderHeaderCell) {
// Call the event
this.props.onRenderHeaderCell(column, props);
}
// See if there is a click event
if (props.onClickHeader || this.props.onClickHeader) {
// Add the click event
column.addEventListener("click", function (ev) {
// Call the event
props.onClickHeader ? props.onClickHeader(column, props) : null;
_this.props.onClickHeader ? _this.props.onClickHeader(column, props) : null;
});
}
};
// Renders a column footer
_Table.prototype.renderColumnFooter = function (column, props) {
var _this = this;
column.innerHTML = props.footer || "";
// See if there is an event for this column
if (props.onRenderFooter) {
// Call the event
props.onRenderFooter(column, props);
}
// See if there is an event for this component
if (this.props.onRenderFooterCell) {
// Call the event
this.props.onRenderFooterCell(column, props);
}
// See if there is a click event
if (props.onClickFooter || this.props.onClickFooter) {
// Add the click event
column.addEventListener("click", function (ev) {
// Call the event
props.onClickFooter ? props.onClickFooter(column, props) : null;
_this.props.onClickFooter ? _this.props.onClickFooter(column, props) : null;
});
}
};
// Renders a row
_Table.prototype.renderRow = function (row, data, rowIdx) {
// See if columns
for (var i = 0; i < this.props.columns.length; i++) {
// Create the cell
this.renderCell(row, this.props.columns[i], data, rowIdx);
}
// See if there is an event
if (this.props.onRenderRow) {
// Call the event
this.props.onRenderRow(row, data, rowIdx);
}
};
/**
* Public Interface
*/
// Method to add the rows
_Table.prototype.addRows = function (rows) {
if (rows === void 0) { rows = []; }
var tbody = this.el.querySelector("tbody");
if (tbody) {
// Parse the rows
for (var i = 0; i < rows.length; i++) {
// Create the row
var row = document.createElement("tr");
tbody.appendChild(row);
// Render the row
this.renderRow(row, rows[i], i);
}
}
};
return _Table;
}(base_1.Base));
var Table = function (props, template) { return new _Table(props, template); };
exports.Table = Table;