@dccs/react-table-mui
Version:
A Material-UI implementation of react-table-plain
396 lines (395 loc) • 18.7 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.TableMui = void 0;
var React = require("react");
var lodash_1 = require("lodash");
var material_1 = require("@mui/material");
var icons_material_1 = require("@mui/icons-material");
var TableMui = /** @class */ (function (_super) {
__extends(TableMui, _super);
function TableMui() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
filter: _this.props.defaultFilter || {},
showSubComponent: {}
};
_this.renderRoot = function (children) {
return React.createElement(material_1.Table, { 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;
/*private ellipsisToCss(ellipsis?: boolean) {
return ellipsis === true
? {
style: {
whiteSpace: "nowrap",
width: "100%",
overflow: "hidden",
textOverflow: "ellipsis",
maxWidth: "auto"
}
}
: undefined;
}*/
}
Object.defineProperty(TableMui.prototype, "hasFooter", {
get: function () {
return (0, lodash_1.some)(this.props.colDef, function (def) { return def.footer != null; });
},
enumerable: false,
configurable: true
});
Object.defineProperty(TableMui.prototype, "isFilterable", {
get: function () {
return (0, lodash_1.some)(this.props.colDef, function (def) { return def.filterable === true; });
},
enumerable: false,
configurable: true
});
Object.defineProperty(TableMui.prototype, "filter", {
get: function () {
return this.props.filter ? this.props.filter : this.state.filter;
},
enumerable: false,
configurable: true
});
TableMui.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;
};
TableMui.prototype.renderData = function (colDef, data) {
var _this = this;
return (React.createElement(material_1.TableBody, null, data && data.map(function (d, idx) { return _this.renderRow(colDef, d, idx); })));
};
TableMui.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;
}
}
}
};
TableMui.prototype.onClickCalls = function (data) {
if (this.props.onRowClick) {
this.props.onRowClick(data);
}
if (this.props.onChangeSelectedRow) {
this.props.onChangeSelectedRow(data);
}
};
TableMui.prototype.renderRow = function (colDef, data, key) {
var _this = this;
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(material_1.TableRow, __assign({ key: key, style: {
background: this.props.alternateRowBackgroundColor != null
? (key % 2 ? this.props.alternateRowBackgroundColor : "white")
: undefined,
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(material_1.TableRow, { key: -1 },
React.createElement(material_1.TableCell, { colSpan: colDef.length + 1 }, this.props.subComponent(data))));
}
return result;
};
TableMui.prototype.renderCell = function (colDef, data, idx, props) {
var ps = __assign(__assign(__assign({}, 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(material_1.TableCell, __assign({ key: idx }, ps), colDef.render(data)));
}
var val = colDef.accessor != null ? colDef.accessor(data) : data[colDef.prop];
return (React.createElement(material_1.TableCell, __assign({ key: idx }, ps), val));
};
TableMui.prototype.renderHeader = function (colDef) {
var _this = this;
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(material_1.TableHead, null,
React.createElement(material_1.TableRow, null,
renderSubComponentSpacer(this.props.subComponent),
colDef.map(function (col, idx) {
return render(col, idx, undefined, totalWidth);
})),
this.isFilterable && (React.createElement(material_1.TableRow, null,
renderSubComponentSpacer(this.props.subComponent),
colDef.map(function (def, idx) { return (React.createElement(material_1.TableCell, { key: idx }, def.filterable
? _this.props.renderFilter != null
? _this.props.renderFilter(def, idx)
: _this.renderFilter(def)
: null)); })))));
};
TableMui.prototype.renderHeaderCell = function (colDef, idx, props, totalWidth) {
var _this = this;
var ps = __assign(__assign({}, props), this.alignToCss(colDef.align));
var isSorted = this.props.orderBy === colDef.prop;
var showSortHint = colDef.sortable === true
&& this.props.orderBy !== colDef.prop
&& this.props.renderSortHint != null;
var showSortLabel = this.props.orderBy != null
&& this.props.orderBy === colDef.prop
&& this.props.renderSortLabel != null;
return (React.createElement(material_1.TableCell, __assign({ key: idx, variant: "head", style: { cursor: colDef.sortable ? "pointer" : "" } }, colDef.headerProps, { onClick: function () { return colDef.sortable && _this.handleChangeSort(colDef.prop); } }, ps, { width: colDef.width ? "".concat((colDef.width / totalWidth) * 100, "%") : undefined }),
React.createElement(React.Fragment, null,
colDef.header,
colDef.sortable && showSortHint && this.props.renderSortHint(colDef),
colDef.sortable
? (showSortLabel && this.props.renderSortLabel
? this.props.renderSortLabel(colDef, this.props.sort === "desc")
: React.createElement(material_1.TableSortLabel, { active: isSorted, direction: this.props.sort }))
: null)));
};
TableMui.prototype.renderSortLabel = function (colDef, desc) {
return React.createElement(material_1.TableSortLabel, { active: true, direction: desc ? "desc" : "asc" });
};
TableMui.prototype.renderExpansionIndicator = function (expanded) {
return React.createElement(material_1.IconButton, { style: {
transition: "transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
transform: "rotate(".concat(expanded ? 0 : -90, "deg)")
} },
React.createElement(icons_material_1.ExpandMore, null));
};
TableMui.prototype.renderFilter = function (colDef) {
var _this = this;
var propName = colDef.prop.toString();
var input = (React.createElement("input", { type: "text", name: propName, value: this.filter[propName] || "", onChange: function (e) { return _this.handleFilterChange(colDef.prop, e.target.value); } }));
if (this.props.filterBlur === true) {
input = (React.createElement("input", { type: "text", name: propName, onKeyDown: function (e) {
if (e.code === 'Enter') {
e.currentTarget.blur();
}
}, onBlur: function (e) {
_this.handleFilterChange(colDef.prop, e.target.value);
} }));
}
return colDef.renderFilter
? colDef.renderFilter(this.filter[propName], function (v) {
return _this.handleFilterChange(colDef.prop, v);
})
: input;
};
TableMui.prototype.renderFooter = function (colDef, data) {
var _this = this;
return (React.createElement(material_1.TableFooter, null,
React.createElement(material_1.TableRow, null, colDef.map(function (def, idx) {
return _this.props.renderFooterCell != null
? _this.props.renderFooterCell(def, data, idx)
: _this.renderFooterCell(def, data, idx);
}))));
};
TableMui.prototype.renderFooterCell = function (colDef, data, idx) {
var ps = this.alignToCss(colDef.align);
return (React.createElement(material_1.TableCell, __assign({ key: idx, variant: "footer" }, colDef.footerProps, ps), colDef.footer != null
? typeof colDef.footer === "string"
? colDef.footer
: colDef.footer(colDef, data)
: null));
};
TableMui.prototype.generateColDef = function (_) {
return [];
};
TableMui.prototype.alignToCss = function (align) {
return align != null ? { style: { textAlign: align } } : undefined;
};
return TableMui;
}(React.Component));
exports.TableMui = TableMui;