@skbkontur/db-viewer-ui
Version:
Database Viewer with custom configuration
78 lines • 5.87 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ObjectTable = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const UiFilterSortADefaultIcon16Regular_1 = require("@skbkontur/icons/UiFilterSortADefaultIcon16Regular");
const UiFilterSortAHighToLowIcon16Regular_1 = require("@skbkontur/icons/UiFilterSortAHighToLowIcon16Regular");
const UiFilterSortALowToHighIcon16Regular_1 = require("@skbkontur/icons/UiFilterSortALowToHighIcon16Regular");
const react_ui_1 = require("@skbkontur/react-ui");
const react_1 = tslib_1.__importDefault(require("react"));
const ConfirmDeleteObjectModal_1 = require("../ConfirmDeleteObjectModal/ConfirmDeleteObjectModal");
const ScrollableContainer_1 = require("../Layouts/ScrollableContainer");
const ObjectItemRender_1 = require("../ObjectViewer/ObjectItemRender");
const RouterLink_1 = require("../RouterLink/RouterLink");
const ObjectTable_styles_1 = require("./ObjectTable.styles");
function ObjectTable({ customRenderer, items, objectType, properties, onChangeSortClick, onDetailsClick, onDeleteClick, currentSorts, allowDelete, allowSort, }) {
const [showConfirmModal, setShowConfirmModal] = react_1.default.useState(false);
const [deletedIndex, setDeletedIndex] = react_1.default.useState(null);
const theme = react_1.default.useContext(react_ui_1.ThemeContext);
react_1.default.useEffect(() => window.scrollTo(0, 0), [items]);
const handleDeleteItem = () => {
if (deletedIndex != null) {
onDeleteClick(deletedIndex);
}
handleCancelDelete();
};
const handleCancelDelete = () => {
setShowConfirmModal(false);
setDeletedIndex(null);
};
const handleConfirmDeletion = (index) => {
setShowConfirmModal(true);
setDeletedIndex(index);
};
const renderEmpty = (count) => {
const arr = [];
for (let i = 0; i < count; i++) {
arr.push((0, jsx_runtime_1.jsx)("th", { className: ObjectTable_styles_1.jsStyles.cell(), children: "\u00A0" }, i));
}
return arr;
};
const getIcon = (name, currentSort) => {
var _a;
const dictionary = {
Ascending: (0, jsx_runtime_1.jsx)(UiFilterSortALowToHighIcon16Regular_1.UiFilterSortALowToHighIcon16Regular, {}),
Descending: (0, jsx_runtime_1.jsx)(UiFilterSortAHighToLowIcon16Regular_1.UiFilterSortAHighToLowIcon16Regular, {}),
};
const currentSortOrder = (_a = currentSort.find(x => x.path === name)) === null || _a === void 0 ? void 0 : _a.sortOrder;
if (currentSortOrder) {
return dictionary[currentSortOrder];
}
return (0, jsx_runtime_1.jsx)(UiFilterSortADefaultIcon16Regular_1.UiFilterSortADefaultIcon16Regular, {});
};
const renderTableHeader = (item, key, allowSort) => {
const name = item.name;
const content = item.isSortable && allowSort ? ((0, jsx_runtime_1.jsx)(react_ui_1.Link, { "data-tid": `Header_${name}`, icon: getIcon(name, currentSorts), onClick: () => onChangeSortClick(name), children: name })) : (name);
return ((0, jsx_runtime_1.jsx)("th", { className: `${ObjectTable_styles_1.jsStyles.cell()} ${ObjectTable_styles_1.jsStyles.headerCell()}`, children: content }, key));
};
const renderControls = (item, index) => {
const arr = [];
let key = 0;
let pathToItem = "";
if (item) {
pathToItem = onDetailsClick(item);
}
arr.push((0, jsx_runtime_1.jsx)("td", { className: ObjectTable_styles_1.jsStyles.cell(), children: (0, jsx_runtime_1.jsx)(RouterLink_1.RouterLink, { to: pathToItem, "data-tid": "Details", children: "\u041F\u043E\u0434\u0440\u043E\u0431\u043D\u043E\u0441\u0442\u0438" }) }, ++key));
if (allowDelete) {
arr.push((0, jsx_runtime_1.jsx)("td", { className: ObjectTable_styles_1.jsStyles.cell(), children: (0, jsx_runtime_1.jsx)(react_ui_1.Link, { onClick: () => handleConfirmDeletion(index), use: "danger", "data-tid": "Delete", children: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C" }) }, ++key));
}
return arr;
};
const renderCell = (item, key, type) => {
return ((0, jsx_runtime_1.jsx)("td", { className: ObjectTable_styles_1.jsStyles.cell(), "data-tid": key, children: (0, ObjectItemRender_1.renderForTableCell)(item, [key], type, objectType, customRenderer) }, key));
};
return ((0, jsx_runtime_1.jsxs)(ScrollableContainer_1.ScrollableContainer, { className: ObjectTable_styles_1.jsStyles.tableWrapper(), children: [showConfirmModal && (0, jsx_runtime_1.jsx)(ConfirmDeleteObjectModal_1.ConfirmDeleteObjectModal, { onDelete: handleDeleteItem, onCancel: handleCancelDelete }), properties.length !== 0 && items.length !== 0 ? ((0, jsx_runtime_1.jsx)("div", { className: ObjectTable_styles_1.jsStyles.container(), children: (0, jsx_runtime_1.jsxs)("table", { className: ObjectTable_styles_1.jsStyles.table(), children: [(0, jsx_runtime_1.jsx)("thead", { "data-tid": "TableHeader", children: (0, jsx_runtime_1.jsxs)("tr", { className: ObjectTable_styles_1.jsStyles.tableHeaderRow(theme), children: [renderEmpty(allowDelete ? 2 : 1), properties.map((item, key) => renderTableHeader(item, key, allowSort))] }) }), (0, jsx_runtime_1.jsx)("tbody", { "data-tid": "Body", children: items.map((item, index) => ((0, jsx_runtime_1.jsxs)("tr", { className: ObjectTable_styles_1.jsStyles.row(theme), "data-tid": "Row", children: [renderControls(item, index), properties.map(key => renderCell(item, key.name, key))] }, index))) })] }) })) : ((0, jsx_runtime_1.jsx)("div", { "data-tid": "NothingFound", children: "\u041D\u0438\u0447\u0435\u0433\u043E \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E" }))] }));
}
exports.ObjectTable = ObjectTable;
//# sourceMappingURL=ObjectTable.js.map