@skbkontur/db-viewer-ui
Version:
Database Viewer with custom configuration
80 lines • 5.73 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ObjectTable = ObjectTable;
const jsx_runtime_1 = require("react/jsx-runtime");
const IconUiFilterSortADefaultRegular16_1 = require("@skbkontur/icons/IconUiFilterSortADefaultRegular16");
const IconUiFilterSortAHighToLowRegular16_1 = require("@skbkontur/icons/IconUiFilterSortAHighToLowRegular16");
const IconUiFilterSortALowToHighRegular16_1 = require("@skbkontur/icons/IconUiFilterSortALowToHighRegular16");
const react_ui_1 = require("@skbkontur/react-ui");
const renderEnvironment_1 = require("@skbkontur/react-ui/lib/renderEnvironment");
const react_1 = require("react");
const ConfirmDeleteObjectModal_1 = require("../ConfirmDeleteObjectModal/ConfirmDeleteObjectModal");
const ObjectItemRender_1 = require("../ObjectViewer/ObjectItemRender");
const RouterLink_1 = require("../RouterLink/RouterLink");
const ScrollableContainer_1 = require("../ScrollableContainer/ScrollableContainer");
const ObjectTable_styles_1 = require("./ObjectTable.styles");
function ObjectTable({ customRenderer, items, objectType, properties, onChangeSortClick, onDetailsClick, onDeleteClick, currentSorts, allowDelete, allowSort, }) {
const jsStyles = (0, renderEnvironment_1.useStyles)(ObjectTable_styles_1.getStyles);
const [showConfirmModal, setShowConfirmModal] = (0, react_1.useState)(false);
const [deletedIndex, setDeletedIndex] = (0, react_1.useState)(null);
const theme = (0, react_1.useContext)(react_ui_1.ThemeContext);
(0, react_1.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: jsStyles.cell(), children: "\u00A0" }, i));
}
return arr;
};
const getIcon = (name, currentSort) => {
var _a;
const dictionary = {
Ascending: (0, jsx_runtime_1.jsx)(IconUiFilterSortALowToHighRegular16_1.IconUiFilterSortALowToHighRegular16, {}),
Descending: (0, jsx_runtime_1.jsx)(IconUiFilterSortAHighToLowRegular16_1.IconUiFilterSortAHighToLowRegular16, {}),
};
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)(IconUiFilterSortADefaultRegular16_1.IconUiFilterSortADefaultRegular16, {});
};
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: `${jsStyles.cell()} ${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: 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: 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: 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: 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: jsStyles.container(), children: (0, jsx_runtime_1.jsxs)("table", { className: jsStyles.table(), children: [(0, jsx_runtime_1.jsx)("thead", { "data-tid": "TableHeader", children: (0, jsx_runtime_1.jsxs)("tr", { className: 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: 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" }))] }));
}
//# sourceMappingURL=ObjectTable.js.map