@rabahzeineddine/material-ui
Version:
Material ui custom components
129 lines (128 loc) • 10.2 kB
JavaScript
"use strict";
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);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var dx_react_grid_1 = require("@devexpress/dx-react-grid");
var dx_react_grid_export_1 = require("@devexpress/dx-react-grid-export");
var dx_react_grid_material_ui_1 = require("@devexpress/dx-react-grid-material-ui");
var ListSkeletons_1 = __importDefault(require("../Skeletons/ListSkeletons"));
var Helper_1 = __importDefault(require("../../utils/Helper"));
var file_saver_1 = require("file-saver");
var GroupingTableContent_1 = __importDefault(require("./GroupingTableContent"));
var index_1 = __importDefault(require("./TableToolbar/index"));
var index_2 = __importDefault(require("./ColumnChooser/ColumnChooserButton/index"));
var index_3 = __importDefault(require("./TableSelectionCellComponent/index"));
var index_4 = __importDefault(require("./TableSelectionHeaderComponent/index"));
var index_5 = __importDefault(require("./TableRowCommand/index"));
var index_6 = __importDefault(require("./ColumnChooser/ColumnChooserItemComponent/index"));
var index_7 = __importDefault(require("./ColumnChooser/ColumnChooserOverlayComponent/index"));
var index_8 = __importDefault(require("./ColumnChooser/ColumnChooserContainerComponent/index"));
var onSave = function (workbook) {
workbook.xlsx.writeBuffer().then(function (buffer) {
file_saver_1.saveAs(new Blob([buffer], { type: "application/octet-stream" }), "Export-Data.xlsx");
});
};
var DateFormatter = function (props) {
return props.column
? !Helper_1.default.isEmpty(props.value)
? props.column.format
? props.column.format(props.value)
: props.value
: "Não identificado"
: "Coluna inexistente";
};
function DataFormatter(props) {
return react_1.default.createElement(dx_react_grid_1.DataTypeProvider, __assign({ formatterComponent: DateFormatter }, props));
}
function Table(props) {
var _a, _b, _c, _d, _e;
var columns = (_a = props.columns) === null || _a === void 0 ? void 0 : _a.map(function (column) {
return ({
name: column.name,
title: column.title,
getCellValue: column.getCellValue,
format: column.format,
});
});
var _f = react_1.default.useState(props.defaultGrouping || []), grouping = _f[0], setGrouping = _f[1];
var _g = react_1.default.useState(props.selectedRows || []), selection = _g[0], setSelection = _g[1];
var _h = react_1.default.useState([]), filters = _h[0], setFilters = _h[1];
var _j = react_1.default.useState(0), currentPage = _j[0], setCurrentPage = _j[1];
var _k = react_1.default.useState(props.defaultGrouping ? (_b = props.rows) === null || _b === void 0 ? void 0 : _b.length : 10), pageSize = _k[0], setPageSize = _k[1];
var sizes = [10, 20, 30];
if (((_c = props.rows) === null || _c === void 0 ? void 0 : _c.length) > 30)
sizes.push(props.rows.length);
var pageSizes = react_1.default.useState(sizes)[0];
var exporterRef = react_1.default.useRef(null);
var startExport = react_1.default.useCallback(function (options) {
var _a;
(_a = exporterRef === null || exporterRef === void 0 ? void 0 : exporterRef.current) === null || _a === void 0 ? void 0 : _a.exportGrid(options);
}, [exporterRef]);
var columnsName = (_d = props.columns) === null || _d === void 0 ? void 0 : _d.map(function (column) { return column.name; });
var columnsWithWidth = (_e = props.columns) === null || _e === void 0 ? void 0 : _e.map(function (column) { return ({
columnName: column.name,
width: column.width || props.defaultColumnWidth || 150,
}); });
var _l = react_1.default.useState(columnsName || []), columnOrder = _l[0], setColumnOrder = _l[1];
var _m = react_1.default.useState(columnsWithWidth || []), columnWidths = _m[0], setColumnWidths = _m[1];
var _o = react_1.default.useState(false), filtersToggle = _o[0], setFiltersToggle = _o[1];
var _p = react_1.default.useState([]), hiddenColumnNames = _p[0], setHiddenColumnNames = _p[1];
var noDataRow = function (params) {
return props.loading ? (react_1.default.createElement(dx_react_grid_material_ui_1.Table.Row, __assign({}, params),
react_1.default.createElement("td", { colSpan: 20 },
react_1.default.createElement(ListSkeletons_1.default, { items: 10 })))) : (react_1.default.createElement(dx_react_grid_material_ui_1.Table.Row, __assign({}, params),
react_1.default.createElement("td", { colSpan: props.columns.length, style: { textAlign: "center", padding: 5 } }, "Empty table")));
};
var commitChanges = function (data) {
if (data.deleted && props.onRowDelete)
props.onRowDelete(data.deleted);
};
return props.columns && props.columns.length > 0 ? (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(dx_react_grid_material_ui_1.Grid, { rows: props.loading ? [] : props.rows, columns: columns },
react_1.default.createElement(dx_react_grid_material_ui_1.DragDropProvider, null),
react_1.default.createElement(dx_react_grid_1.SortingState, { defaultSorting: props.defaultSorting ? props.defaultSorting : [] }),
props.grouping && (react_1.default.createElement(dx_react_grid_1.GroupingState, { grouping: grouping, onGroupingChange: setGrouping })),
filtersToggle && (react_1.default.createElement(dx_react_grid_1.FilteringState, { filters: filters, onFiltersChange: setFilters })),
react_1.default.createElement(DataFormatter, { for: columnsName }),
react_1.default.createElement(dx_react_grid_1.SelectionState, { selection: selection, onSelectionChange: function (selectionChange) {
if (props.onSelectionChange) {
props.onSelectionChange(selectionChange, setSelection);
}
} }),
react_1.default.createElement(dx_react_grid_1.IntegratedSelection, null),
props.showPaging && (react_1.default.createElement(dx_react_grid_1.PagingState, { currentPage: currentPage, onCurrentPageChange: setCurrentPage, pageSize: pageSize, onPageSizeChange: setPageSize })),
react_1.default.createElement(dx_react_grid_1.IntegratedSorting, null),
props.grouping && react_1.default.createElement(dx_react_grid_1.IntegratedGrouping, null),
filtersToggle && react_1.default.createElement(dx_react_grid_1.IntegratedFiltering, null),
props.showPaging && react_1.default.createElement(dx_react_grid_1.IntegratedPaging, null),
props.showTableEditColumn && (react_1.default.createElement(dx_react_grid_1.EditingState, { onCommitChanges: commitChanges })),
react_1.default.createElement(dx_react_grid_material_ui_1.Table, { noDataRowComponent: noDataRow }),
react_1.default.createElement(dx_react_grid_material_ui_1.TableColumnReordering, { order: columnOrder, onOrderChange: setColumnOrder }),
react_1.default.createElement(dx_react_grid_material_ui_1.TableColumnResizing, { columnWidths: columnWidths, onColumnWidthsChange: setColumnWidths, resizingMode: "widget" }),
react_1.default.createElement(dx_react_grid_material_ui_1.TableColumnVisibility, { hiddenColumnNames: hiddenColumnNames, onHiddenColumnNamesChange: setHiddenColumnNames }),
props.showTableEditColumn && (react_1.default.createElement(dx_react_grid_material_ui_1.TableEditColumn, { showEditCommand: false, showDeleteCommand: props.showDeleteRow || false, commandComponent: index_5.default })),
react_1.default.createElement(dx_react_grid_material_ui_1.TableHeaderRow, { showSortingControls: true }),
props.showPaging && react_1.default.createElement(dx_react_grid_material_ui_1.PagingPanel, { pageSizes: pageSizes }),
filtersToggle && react_1.default.createElement(dx_react_grid_material_ui_1.TableFilterRow, null),
react_1.default.createElement(dx_react_grid_material_ui_1.TableSelection, { highlightRow: props.highlightRow || false, selectByRowClick: props.selectByRowClick || true, showSelectionColumn: props.showSelectionColumn || false, cellComponent: index_3.default, showSelectAll: props.showSelectAll || false, headerCellComponent: index_4.default }),
props.grouping && (react_1.default.createElement(dx_react_grid_material_ui_1.TableGroupRow, { contentComponent: GroupingTableContent_1.default })),
react_1.default.createElement(dx_react_grid_material_ui_1.Toolbar, { rootComponent: function (toolBarProps) { return (react_1.default.createElement(index_1.default, __assign({}, toolBarProps, { onAdd: props.onAdd, onRefresh: props.onRefresh, filtersToggle: filtersToggle, setFiltersToggle: setFiltersToggle }))); } }),
react_1.default.createElement(dx_react_grid_material_ui_1.ColumnChooser, { toggleButtonComponent: index_2.default, itemComponent: index_6.default, overlayComponent: index_7.default, containerComponent: index_8.default }),
props.grouping && (react_1.default.createElement(dx_react_grid_material_ui_1.GroupingPanel, { showGroupingControls: true, showSortingControls: true })),
react_1.default.createElement(dx_react_grid_material_ui_1.ExportPanel, { startExport: startExport })),
react_1.default.createElement(dx_react_grid_export_1.GridExporter, { ref: exporterRef, rows: props.rows, columns: columns, grouping: grouping, filters: filters, selection: selection, onSave: onSave }))) : (react_1.default.createElement("div", null, "No Data"));
}
exports.default = Table;