@tomino/dynamic-form-semantic-ui
Version:
Semantic UI form renderer based on dynamic form generation
79 lines • 4.41 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const semantic_ui_react_1 = require("semantic-ui-react");
const common_1 = require("../common");
const dynamic_form_1 = require("@tomino/dynamic-form");
const editor_context_1 = require("./editor_context");
const itemStyle = common_1.css `
padding: 3px;
cursor: pointer;
label: item;
`;
const selectedStyle = common_1.css `
${itemStyle}
background-color: #dedede;
label: selected;
`;
const row = common_1.css `
display: flex;
.name {
flex: 2;
}
.size {
flex: 1;
}
.date {
flex: 1;
}
`;
const header = common_1.css `
font-weight: bolder;
`;
exports.ModalLoad = () => {
const context = react_1.default.useContext(editor_context_1.EditorContext);
const [open, changeOpen] = react_1.default.useState(false);
const [selected, setSelected] = react_1.default.useState(null);
const [projects, setProjects] = react_1.default.useState(null);
function loadForm() {
context.load(selected);
changeOpen(false);
}
function deleteForm() {
if (confirm(dynamic_form_1.config.i18n `Are you sure you want to delete this form?`)) {
changeOpen(false);
context.manager.deleteProject(selected.id);
}
}
if (!projects) {
context.manager.listProjects().then(projects => setProjects(projects));
return react_1.default.createElement("div", null, "Loading Projects ...");
}
return (react_1.default.createElement(semantic_ui_react_1.Modal, { trigger: react_1.default.createElement(semantic_ui_react_1.Menu.Item, { icon: "folder open", title: "Open project from storage", onClick: () => {
changeOpen(true);
} }), open: open },
react_1.default.createElement(semantic_ui_react_1.Modal.Header, null, "Load project from storage"),
react_1.default.createElement(semantic_ui_react_1.Modal.Content, null,
react_1.default.createElement(semantic_ui_react_1.Modal.Description, null,
projects.length === 0 && react_1.default.createElement("div", null, "There are no projects in your storage"),
react_1.default.createElement("div", { className: classnames_1.default(row, header) },
react_1.default.createElement("div", { className: "name" }, dynamic_form_1.config.i18n `Form Name`),
react_1.default.createElement("div", { className: "size" }, dynamic_form_1.config.i18n `Size (B)`),
react_1.default.createElement("div", { className: "date" }, dynamic_form_1.config.i18n `Created`),
react_1.default.createElement("div", { className: "date" }, dynamic_form_1.config.i18n `Modified`)),
projects.map(p => (react_1.default.createElement("div", { key: p.id, onClick: () => setSelected(p), className: classnames_1.default(row, selected && p.id === selected.id ? selectedStyle : itemStyle) },
react_1.default.createElement("div", { className: "name" }, p.form.props.label),
react_1.default.createElement("div", { className: "size" }, JSON.stringify(p).length),
react_1.default.createElement("div", { className: "date" }, p.created ? new Date(p.created).toLocaleString() : '--'),
react_1.default.createElement("div", { className: "date" }, p.modified ? new Date(p.modified).toLocaleString() : '--')))),
react_1.default.createElement("br", null),
react_1.default.createElement("br", null),
react_1.default.createElement("div", null,
react_1.default.createElement(semantic_ui_react_1.Button, { onClick: () => changeOpen(false) }, "Close"),
selected && (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(semantic_ui_react_1.Button, { floated: "right", onClick: loadForm, icon: "folder open", primary: true, content: "Load" }),
react_1.default.createElement(semantic_ui_react_1.Button, { floated: "right", onClick: deleteForm, icon: "trash", color: "red", content: "Delete" }))))))));
};
//# sourceMappingURL=modal_load.js.map