@tomino/dynamic-form-semantic-ui
Version:
Semantic UI form renderer based on dynamic form generation
76 lines • 3.6 kB
JavaScript
import React from 'react';
import names from 'classnames';
import { Modal, Menu, Button } from 'semantic-ui-react';
import { css } from '../common';
import { config } from '@tomino/dynamic-form';
import { EditorContext } from './editor_context';
const itemStyle = css `
padding: 3px;
cursor: pointer;
label: item;
`;
const selectedStyle = css `
${itemStyle}
background-color: #dedede;
label: selected;
`;
const row = css `
display: flex;
.name {
flex: 2;
}
.size {
flex: 1;
}
.date {
flex: 1;
}
`;
const header = css `
font-weight: bolder;
`;
export const ModalLoad = () => {
const context = React.useContext(EditorContext);
const [open, changeOpen] = React.useState(false);
const [selected, setSelected] = React.useState(null);
const [projects, setProjects] = React.useState(null);
function loadForm() {
context.load(selected);
changeOpen(false);
}
function deleteForm() {
if (confirm(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.createElement("div", null, "Loading Projects ...");
}
return (React.createElement(Modal, { trigger: React.createElement(Menu.Item, { icon: "folder open", title: "Open project from storage", onClick: () => {
changeOpen(true);
} }), open: open },
React.createElement(Modal.Header, null, "Load project from storage"),
React.createElement(Modal.Content, null,
React.createElement(Modal.Description, null,
projects.length === 0 && React.createElement("div", null, "There are no projects in your storage"),
React.createElement("div", { className: names(row, header) },
React.createElement("div", { className: "name" }, config.i18n `Form Name`),
React.createElement("div", { className: "size" }, config.i18n `Size (B)`),
React.createElement("div", { className: "date" }, config.i18n `Created`),
React.createElement("div", { className: "date" }, config.i18n `Modified`)),
projects.map(p => (React.createElement("div", { key: p.id, onClick: () => setSelected(p), className: names(row, selected && p.id === selected.id ? selectedStyle : itemStyle) },
React.createElement("div", { className: "name" }, p.form.props.label),
React.createElement("div", { className: "size" }, JSON.stringify(p).length),
React.createElement("div", { className: "date" }, p.created ? new Date(p.created).toLocaleString() : '--'),
React.createElement("div", { className: "date" }, p.modified ? new Date(p.modified).toLocaleString() : '--')))),
React.createElement("br", null),
React.createElement("br", null),
React.createElement("div", null,
React.createElement(Button, { onClick: () => changeOpen(false) }, "Close"),
selected && (React.createElement(React.Fragment, null,
React.createElement(Button, { floated: "right", onClick: loadForm, icon: "folder open", primary: true, content: "Load" }),
React.createElement(Button, { floated: "right", onClick: deleteForm, icon: "trash", color: "red", content: "Delete" }))))))));
};
//# sourceMappingURL=modal_load.js.map