@skbkontur/db-viewer-ui
Version:
Database Viewer with custom configuration
46 lines • 3.43 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ObjectRenderer = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const ArrowDUturnLeftDownIcon16Regular_1 = require("@skbkontur/icons/ArrowDUturnLeftDownIcon16Regular");
const CheckAIcon16Regular_1 = require("@skbkontur/icons/CheckAIcon16Regular");
const ToolPencilLineIcon16Regular_1 = require("@skbkontur/icons/ToolPencilLineIcon16Regular");
const react_stack_layout_1 = require("@skbkontur/react-stack-layout");
const react_ui_1 = require("@skbkontur/react-ui");
const get_1 = tslib_1.__importDefault(require("lodash/get"));
const react_1 = require("react");
const ObjectItemRender_1 = require("./ObjectItemRender");
function getByPath(target, path) {
return (0, get_1.default)(target, path.join("."));
}
const ObjectRenderer = ({ target, objectType, customRenderer, path, property, allowEdit, onChange, }) => {
const [editableMode, setEditableMode] = (0, react_1.useState)(false);
const [value, setValue] = (0, react_1.useState)(undefined);
const handleClick = () => {
setEditableMode(true);
setValue(getByPath(target, path));
};
const handleChange = (value) => {
setValue(value);
};
const handleSaveChanges = () => {
onChange(value, path);
setEditableMode(false);
setValue(undefined);
};
const handleCancelChanges = () => {
setEditableMode(false);
setValue(undefined);
};
const canEditProperty = () => {
const type = property.type.typeName;
return type != null && !type.includes("[]") && !property.isIdentity && property.isEditable && allowEdit;
};
const canEdit = canEditProperty();
return ((0, jsx_runtime_1.jsxs)(react_stack_layout_1.RowStack, { gap: 2, baseline: true, block: true, "data-tid": "FieldRow", children: [(0, jsx_runtime_1.jsx)(react_stack_layout_1.Fit, { "data-tid": "FieldValue", children: editableMode
? (0, ObjectItemRender_1.renderForEdit)(editableMode ? value : getByPath(target, path), property, objectType, handleChange, customRenderer)
: (0, ObjectItemRender_1.renderForDetails)(target, path, property, objectType, customRenderer) }), (0, jsx_runtime_1.jsx)(react_stack_layout_1.Fill, {}), canEdit && !editableMode && ((0, jsx_runtime_1.jsx)(react_stack_layout_1.Fit, { children: (0, jsx_runtime_1.jsx)(react_ui_1.Button, { use: "link", icon: (0, jsx_runtime_1.jsx)(ToolPencilLineIcon16Regular_1.ToolPencilLineIcon16Regular, {}), onClick: handleClick, "data-tid": "Edit" }) })), canEdit && editableMode && ((0, jsx_runtime_1.jsx)(react_stack_layout_1.Fit, { children: (0, jsx_runtime_1.jsx)(react_ui_1.Button, { use: "link", icon: (0, jsx_runtime_1.jsx)(CheckAIcon16Regular_1.CheckAIcon16Regular, {}), onClick: handleSaveChanges, "data-tid": "Save", children: "\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C" }) })), canEdit && editableMode && ((0, jsx_runtime_1.jsx)(react_stack_layout_1.Fit, { children: (0, jsx_runtime_1.jsx)(react_ui_1.Button, { use: "link", icon: (0, jsx_runtime_1.jsx)(ArrowDUturnLeftDownIcon16Regular_1.ArrowDUturnLeftDownIcon16Regular, {}), onClick: handleCancelChanges, "data-tid": "Cancel", children: "\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C" }) }))] }));
};
exports.ObjectRenderer = ObjectRenderer;
//# sourceMappingURL=ObjectRenderer.js.map