@dccs/react-datagrid-plain
Version:
A light datagrid build upon react-table-plain for React.
104 lines (103 loc) • 4.66 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 });
var React = require("react");
var react_table_plain_1 = require("@dccs/react-table-plain");
var useDataState_1 = require("./useDataState");
function DataGridPlain(props) {
var internalState = 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,
};
if (props.renderTable != null) {
return props.renderTable(ps);
}
return React.createElement(react_table_plain_1.TablePlain, __assign({}, ps));
}
function renderLoading() {
if (props.renderLoading != null) {
return props.renderLoading();
}
var loadingText = "Loading...";
if (props.texts && props.texts.loadingText != null) {
loadingText = props.texts.loadingText;
}
return React.createElement("h5", null, loadingText);
}
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 (React.createElement("p", { style: { width: "100%", background: "red", padding: 16 } },
React.createElement("p", null, errorText),
React.createElement("p", null,
React.createElement("button", { onClick: function () { return load(); } }, reloadText))));
}
function renderPaging() {
if (props.renderPaging != null) {
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;
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 pagingText = "No paging available right now. Check back later...";
if (props.texts && props.texts.pagingText != null) {
pagingText = props.texts.pagingText;
}
return React.createElement("strong", null, pagingText);
}
if (error) {
return renderError();
}
return (React.createElement("div", { style: { position: "relative", overflowX: "auto", width: "100%" } },
loading && renderLoading(),
renderTable(),
props.disablePaging !== true && renderPaging()));
}
exports.DataGridPlain = DataGridPlain;