@dccs/react-table-plain
Version:
A NPM package that helps creating HTML tables in a React-way.
447 lines (446 loc) • 19.8 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 __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TablePlain = void 0;
var React = require("react");
var lodash_1 = require("lodash");
var TablePlain = /** @class */ (function (_super) {
__extends(TablePlain, _super);
function TablePlain() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
filter: _this.props.defaultFilter || {},
showSubComponent: {}
};
_this.renderRoot = function (children) {
var Root = _this.rootElement;
return React.createElement(Root, { style: { tableLayout: "auto" } }, children);
};
_this.handleChangeSort = function (orderBy) {
if (_this.props.onChangeOrderBy) {
_this.props.onChangeOrderBy(orderBy);
}
};
_this.handleFilterChange = function (orderBy, value) {
var name = orderBy;
function callHandler(fn) {
if (fn != null) {
fn(orderBy, value);
}
}
if (_this.props.filter != null) {
callHandler(_this.props.onChangeFilter);
}
else {
_this.setState(function (p) {
var _a;
return ({
filter: __assign(__assign({}, p.filter), (_a = {}, _a[name] = value, _a))
});
}, function () { return callHandler(_this.props.onChangeFilter); });
}
};
_this.handleExpansionClick = function (e, key) {
e.stopPropagation();
_this.toggleSubmenu(key);
};
_this.toggleSubmenu = function (key) {
_this.setState(function (prev) {
var _a;
return ({
showSubComponent: __assign(__assign({}, prev.showSubComponent), (_a = {}, _a[key] = !prev.showSubComponent[key], _a))
});
});
};
return _this;
}
Object.defineProperty(TablePlain.prototype, "rootElement", {
get: function () {
return this.props.rootElement || "table";
},
enumerable: false,
configurable: true
});
Object.defineProperty(TablePlain.prototype, "rowElement", {
get: function () {
return this.props.rowElement || "tr";
},
enumerable: false,
configurable: true
});
Object.defineProperty(TablePlain.prototype, "cellElement", {
get: function () {
return this.props.cellElement || "td";
},
enumerable: false,
configurable: true
});
Object.defineProperty(TablePlain.prototype, "headerCellElement", {
get: function () {
return this.props.headerCellElement || "th";
},
enumerable: false,
configurable: true
});
Object.defineProperty(TablePlain.prototype, "headerElement", {
get: function () {
return this.props.headerElement || "thead";
},
enumerable: false,
configurable: true
});
Object.defineProperty(TablePlain.prototype, "bodyElement", {
get: function () {
return this.props.bodyElement || "tbody";
},
enumerable: false,
configurable: true
});
Object.defineProperty(TablePlain.prototype, "footerElement", {
get: function () {
return this.props.footerElement || "tfoot";
},
enumerable: false,
configurable: true
});
Object.defineProperty(TablePlain.prototype, "hasFooter", {
get: function () {
return (0, lodash_1.some)(this.props.colDef, function (def) { return def.footer != null; });
},
enumerable: false,
configurable: true
});
Object.defineProperty(TablePlain.prototype, "isFilterable", {
get: function () {
return (0, lodash_1.some)(this.props.colDef, function (def) { return def.filterable === true; });
},
enumerable: false,
configurable: true
});
Object.defineProperty(TablePlain.prototype, "filter", {
get: function () {
return this.props.filter ? this.props.filter : this.state.filter;
},
enumerable: false,
configurable: true
});
TablePlain.prototype.render = function () {
var data = this.props.data;
var colDef = this.props.colDef || this.generateColDef(data);
if (data != null) {
var renderRoot = this.props.renderRoot || this.renderRoot;
return renderRoot(React.createElement(React.Fragment, null,
this.renderHeader(colDef),
this.renderData(colDef, data),
this.hasFooter && this.renderFooter(colDef, data)));
}
return null;
};
TablePlain.prototype.renderData = function (colDef, data) {
var _this = this;
var Body = this.bodyElement;
return (React.createElement(Body, null, data && data.map(function (d, idx) { return _this.renderRow(colDef, d, idx); })));
};
TablePlain.prototype.getSelectedRowProps = function (data) {
if (this.props.selectedRow == null) {
// No Row is selected
return false;
}
if (this.props.rowSelectionColumnName != null) {
// The user has provided a ColumnName to compare a single Column with the SelectedRow Value
if (Array.isArray(this.props.selectedRow)) {
// This is a multi-line selectable table
if (this.props.selectedRow.indexOf(data[this.props.rowSelectionColumnName]) !== -1) {
// This row is in scope of the selectedRow Array
if (this.props.selectedRowProps != null) {
// The user has provided a function that provides a object for the row
return this.props.selectedRowProps(data);
}
else {
// The user has not provided a function that provides a object for the row,
// so default the background is set to grey
return {
style: {
background: "grey",
cursor: this.props.onRowClick ? "pointer" : "default"
}
};
}
}
else {
// This row is not in scope of the selectedRow Array
return false;
}
}
else {
// This is a single-line selectable table
if (this.props.selectedRow === data[this.props.rowSelectionColumnName]) {
// This row is the selectedRow
if (this.props.selectedRowProps != null) {
// The user has provided a function that provides a object for the row
return this.props.selectedRowProps(data);
}
else {
// The user has not provided a function that provides a object for the row,
// so default the background is set to grey
return {
style: {
background: "grey",
cursor: this.props.onRowClick ? "pointer" : "default"
}
};
}
}
else {
// This row is not the selected Row
return false;
}
}
}
else {
// The user has not provided a ColumnName to compare a single Column with the SelectedRow Value
// so default the selectedRow is compared with the whole data object
if (Array.isArray(this.props.selectedRow)) {
// This is a multi-line selectable table
if (this.props.selectedRow.indexOf(data) !== -1) {
// This row is in scope of the selectedRow Array
if (this.props.selectedRowProps != null) {
// The user has provided a function that provides a object for the row
return this.props.selectedRowProps(data);
}
else {
// The user has not provided a function that provides a object for the row,
// so default the background is set to grey
return {
style: {
background: "grey",
cursor: this.props.onRowClick ? "pointer" : "default"
}
};
}
}
else {
// This row is not in scope of the selectedRow Array
return false;
}
}
else {
// This is a single-line selectable table
if (this.props.selectedRow === data) {
// This row is the selectedRow
if (this.props.selectedRowProps != null) {
// The user has provided a function that provides a object for the row
return this.props.selectedRowProps(data);
}
else {
// The user has not provided a function that provides a object for the row,
// so default the background is set to grey
return {
style: {
background: "grey",
cursor: this.props.onRowClick ? "pointer" : "default"
}
};
}
}
else {
// This row is not the selected Row
return false;
}
}
}
};
TablePlain.prototype.onClickCalls = function (data) {
if (this.props.onRowClick) {
this.props.onRowClick(data);
}
if (this.props.onChangeSelectedRow) {
this.props.onChangeSelectedRow(data);
}
};
TablePlain.prototype.renderRow = function (colDef, data, key) {
var _this = this;
var Row = this.rowElement;
var Cell = this.cellElement;
var renderIndicator = this.props.renderExpansionIndicator || this.renderExpansionIndicator;
var props = this.props.rowProps != null && this.props.rowProps(data);
var selectedRowProps = this.getSelectedRowProps(data);
var result = [
React.createElement(Row, __assign({ key: key, style: {
background: key % 2 ? "#ebebeb" : "white",
cursor: this.props.onRowClick ? "pointer" : "default"
}, onClick: function () { return _this.onClickCalls(data); } }, props, selectedRowProps),
this.props.subComponent &&
this.renderCell({
header: "",
prop: "",
props: function () { return ({
onClick: function (e) {
return _this.handleExpansionClick(e, key);
}
}); },
render: function () {
return renderIndicator(_this.state.showSubComponent[key] === true);
}
}, data, -1, { width: "1%", style: { paddingRight: 0 } }),
colDef.map(function (def, idx) { return _this.renderCell(def, data, idx); }))
];
if (this.props.subComponent && this.state.showSubComponent[key]) {
result.push(React.createElement(Row, { key: -1 },
React.createElement(Cell, { colSpan: colDef.length + 1 }, this.props.subComponent(data))));
}
return result;
};
TablePlain.prototype.renderCell = function (colDef, data, idx, props) {
var Cell = this.cellElement;
var ps = __assign(__assign(__assign(__assign({}, this.ellipsisToCss(this.props.ellipsis)), this.alignToCss(colDef.align)), (this.props.cellProps != null
? this.props.cellProps(data)
: undefined)), (colDef.props != null ? __assign(__assign({}, props), colDef.props(data)) : props));
if (colDef.render != null) {
return (React.createElement(Cell, __assign({ key: idx }, ps), colDef.render(data)));
}
var val = colDef.accessor != null ? colDef.accessor(data) : data[colDef.prop];
return (React.createElement(Cell, __assign({ key: idx }, ps), val));
};
TablePlain.prototype.renderHeader = function (colDef) {
var _this = this;
var Header = this.headerElement;
var Row = this.rowElement;
var Cell = this.headerCellElement;
var totalWidth = (0, lodash_1.sumBy)(colDef, function (x) { return x.width || 0; });
var render = this.props.renderHeaderCell != null
? this.props.renderHeaderCell.bind(this)
: this.renderHeaderCell.bind(this);
function renderSubComponentSpacer(subComponent) {
return subComponent != null
? render({ prop: "", header: "" }, -1, {
width: "1%",
style: { paddingRight: 0 }
}, totalWidth)
: null;
}
return (React.createElement(Header, null,
React.createElement(Row, null,
renderSubComponentSpacer(this.props.subComponent),
colDef.map(function (col, idx) {
return render(col, idx, undefined, totalWidth);
})),
this.isFilterable && (React.createElement(Row, null,
renderSubComponentSpacer(this.props.subComponent),
colDef.map(function (def, idx) { return (React.createElement(Cell, { key: idx }, def.filterable
? _this.props.renderFilter != null
? _this.props.renderFilter(def, idx)
: _this.renderFilter(def)
: null)); })))));
};
TablePlain.prototype.renderHeaderCell = function (colDef, idx, props, totalWidth) {
var _this = this;
var HeaderCell = this.headerCellElement;
var ps = __assign(__assign({}, props), this.alignToCss(colDef.align));
var showSortHint = colDef.sortable && this.props.orderBy !== colDef.prop && this.props.renderSortHint != null;
var showSortLabel = this.props.orderBy &&
this.props.orderBy === colDef.prop &&
this.props.renderSortLabel != null;
return (React.createElement(HeaderCell, __assign({ key: idx }, colDef.headerProps, { onClick: function () { return colDef.sortable && _this.handleChangeSort(colDef.prop); } }, ps, { width: colDef.width ? "".concat((colDef.width / totalWidth) * 100, "%") : undefined }),
colDef.header,
showSortHint && this.props.renderSortHint(colDef),
showSortLabel &&
this.props.renderSortLabel(colDef, this.props.sort === "desc")));
};
TablePlain.prototype.renderFilter = function (colDef) {
var _this = this;
var input = (React.createElement("input", { type: "text", name: colDef.prop, value: this.filter[colDef.prop] || "", onChange: function (e) { return _this.handleFilterChange(colDef.prop, e.target.value); } }));
if (this.props.filterBlur === true) {
input = (React.createElement("input", { type: "text", name: colDef.prop, onKeyDown: function (e) {
var code = e.keyCode || e.which;
if (code === 13) {
// 13 is the enter keycode
e.currentTarget.blur();
}
}, onBlur: function (e) {
_this.handleFilterChange(colDef.prop, e.target.value);
} }));
}
return colDef.renderFilter
? colDef.renderFilter(this.filter[colDef.prop], function (v) {
return _this.handleFilterChange(colDef.prop, v);
})
: input;
};
TablePlain.prototype.renderFooter = function (colDef, data) {
var _this = this;
var Footer = this.footerElement;
var Row = this.rowElement;
return (React.createElement(Footer, null,
React.createElement(Row, null, colDef.map(function (def, idx) {
return _this.props.renderFooterCell != null
? _this.props.renderFooterCell(def, data, idx)
: _this.renderFooterCell(def, data, idx);
}))));
};
TablePlain.prototype.renderFooterCell = function (colDef, data, idx) {
var FooterCell = this.cellElement;
var ps = this.alignToCss(colDef.align);
return (React.createElement(FooterCell, __assign({ key: idx }, colDef.footerProps, ps), colDef.footer != null
? typeof colDef.footer === "string"
? colDef.footer
: colDef.footer(colDef, data)
: null));
};
TablePlain.prototype.renderExpansionIndicator = function (expanded) {
var rot = expanded ? -90 : 90;
return (React.createElement("div", { className: "expander", style: {
transform: "rotate(".concat(rot, "deg)"),
display: "flex",
justifyContent: "center",
cursor: "pointer",
userSelect: "none"
} }, ">"));
};
TablePlain.prototype.generateColDef = function (data) {
return [];
};
TablePlain.prototype.alignToCss = function (align) {
return align != null ? { style: { textAlign: align } } : undefined;
};
TablePlain.prototype.ellipsisToCss = function (ellipsis) {
return ellipsis === true
? {
style: {
whiteSpace: "nowrap",
width: "100%",
overflow: "hidden",
textOverflow: "ellipsis",
maxWidth: "auto"
}
}
: undefined;
};
return TablePlain;
}(React.Component));
exports.TablePlain = TablePlain;