@dccs/react-datagrid-mui
Version:
A light datagrid build upon react-table-plain for React in a Material-UI theme.
131 lines (130 loc) • 6.58 kB
JavaScript
;
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.DataGridMui = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
var react_table_mui_1 = require("@dccs/react-table-mui");
var TablePagination_1 = require("@mui/material/TablePagination");
var useDataState_1 = require("./useDataState");
var material_1 = require("@mui/material");
var material_2 = require("@mui/material");
var material_3 = require("@mui/material");
var material_4 = require("@mui/material");
var Error_1 = require("@mui/icons-material/Error");
function DataGridMui(props) {
var internalState = (0, useDataState_1.useDataState)(props);
var _a = props.state || internalState, rowsPerPage = _a.rowsPerPage, page = _a.page, total = _a.total, orderBy = _a.orderBy, sort = _a.sort, filter = _a.filter, data = _a.data, loading = _a.loading, error = _a.error, handleChangeOrderBy = _a.handleChangeOrderBy, handleChangeFilter = _a.handleChangeFilter, handleChangeRowsPerPage = _a.handleChangeRowsPerPage, handleChangePage = _a.handleChangePage, load = _a.load;
function renderTable() {
var ps = {
data: data,
colDef: props.colDef,
orderBy: orderBy,
sort: sort,
filter: filter,
onChangeOrderBy: handleChangeOrderBy,
onChangeFilter: handleChangeFilter,
onRowClick: props.onRowClick,
subComponent: props.subComponent,
selectedRow: props.selectedRow,
selectedRowProps: props.selectedRowProps,
onChangeSelectedRow: props.onChangeSelectedRow,
rowSelectionColumnName: props.rowSelectionColumnName,
rowProps: props.rowProps,
renderHeaderCell: props.renderHeaderCell,
renderFooterCell: props.renderFooterCell,
renderFilter: props.renderFilter,
renderExpansionIndicator: props.renderExpansionIndicator,
cellProps: props.cellProps,
ellipsis: props.ellipsis,
};
return (0, jsx_runtime_1.jsx)(react_table_mui_1.TableMui, __assign({}, ps, { renderSortHint: function () { return (0, jsx_runtime_1.jsx)(material_1.TableSortLabel, { active: true, style: renderSortHint }); } }));
}
function renderLoading() {
if (props.renderLoading != null) {
return props.renderLoading();
}
return (0, jsx_runtime_1.jsx)("div", __assign({ style: styles.progressWrapper }, { children: (0, jsx_runtime_1.jsx)(material_2.CircularProgress, {}) }));
}
function renderError() {
var errorText = "Die Daten konnten nicht geladen werden.";
if (props.texts && props.texts.errorText != null) {
errorText = props.texts.errorText;
}
var reloadText = "Neu laden";
if (props.texts && props.texts.reloadText != null) {
reloadText = props.texts.reloadText;
}
if (props.renderError != null) {
return props.renderError(load, errorText, reloadText);
}
return ((0, jsx_runtime_1.jsx)(material_3.SnackbarContent, { style: { width: "100%", boxSizing: "border-box" }, message: (0, jsx_runtime_1.jsxs)("div", __assign({ style: styles.errorMessage }, { children: [(0, jsx_runtime_1.jsx)(Error_1.default, {}), " ", errorText || "Die Daten konnten nicht geladen werden."] })), action: (0, jsx_runtime_1.jsx)(material_4.Button, __assign({ onClick: function () { return load(); }, color: "primary", size: "small" }, { children: reloadText || "Neu laden" })) }));
}
function renderPaging() {
var labelRowsPerPage = props.texts && props.texts.labelRowsPerPage;
var backIconButtonText = props.texts && props.texts.backIconButtonText;
var nextIconButtonText = props.texts && props.texts.nextIconButtonText;
var labelDisplayedRows = props.texts && props.texts.labelDisplayedRows;
// Custom rendering
if (props.renderPaging != null) {
return props.renderPaging({
rowsPerPage: rowsPerPage,
page: page,
total: total,
orderBy: orderBy,
sort: sort,
filter: filter,
labelRowsPerPage: labelRowsPerPage,
backIconButtonText: backIconButtonText,
nextIconButtonText: nextIconButtonText,
labelDisplayedRows: labelDisplayedRows,
handleChangePage: handleChangePage,
handleChangeRowsPerPage: handleChangeRowsPerPage,
});
}
var defaultLabelDisplayedRows = function (_a) {
var from = _a.from, to = _a.to, count = _a.count;
return "".concat(from, "-").concat(to, " von ").concat(count);
};
var handlePageChange = function (event, newPage) { return handleChangePage(newPage); };
var handleCRPP = function (e) { return handleChangeRowsPerPage(parseInt(e.target.value, 10)); };
return ((0, jsx_runtime_1.jsx)(TablePagination_1.default, { component: function (ps) { return (0, jsx_runtime_1.jsx)("div", __assign({}, ps, { children: ps.children })); }, count: total, rowsPerPage: rowsPerPage, page: page, onPageChange: handlePageChange, onRowsPerPageChange: handleCRPP, labelRowsPerPage: labelRowsPerPage || "Einträge pro Seite:", labelDisplayedRows: labelDisplayedRows || defaultLabelDisplayedRows }));
}
if (error) {
return renderError();
}
return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { position: "relative", overflowX: "auto", width: "100%" } }, { children: [loading && renderLoading(), renderTable(), props.disablePaging !== true && renderPaging()] })));
}
exports.DataGridMui = DataGridMui;
var renderSortHint = {
opacity: 0.2,
};
var styles = {
progressWrapper: {
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0,
display: "flex",
justifyContent: "center",
alignItems: "center",
background: "rgba(255, 255, 255, 0.5)"
},
errorMessage: {
display: "flex",
alignItems: "center",
svg: {
marginRight: "0.5rem"
}
}
};