@tomino/dynamic-form-semantic-ui
Version:
Semantic UI form renderer based on dynamic form generation
151 lines • 8.63 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const semantic_ui_react_1 = require("semantic-ui-react");
const form_store_1 = require("../form_store");
const common_1 = require("../../common");
const mobx_1 = require("mobx");
const dynamic_form_1 = require("@tomino/dynamic-form");
const editor_styles_1 = require("../editor_styles");
const toolbelt_1 = require("@tomino/toolbelt");
const editor_context_1 = require("../editor_context");
const modalLabel = common_1.css `
font-weight: bold;
padding-bottom: 6px;
display: block;
`;
function useMergeState(initialState) {
const [state, setState] = React.useState(initialState);
const setMergedState = (newState) => setState((prevState) => Object.assign({}, prevState, newState));
return [state, setMergedState];
}
exports.AddSchema = ({ schema, property }) => {
const editorState = React.useContext(editor_context_1.EditorContext);
const [state, changeState] = useMergeState({
open: false,
error: '',
name: ''
});
const addSchema = mobx_1.action(() => {
let selected = editorState.project.state.selectedSchema || schema;
if (selected.type === 'array') {
selected = selected.reference ? selected.reference.items : selected.items;
}
while (!selected.reference && selected.type !== 'object') {
selected = selected.parent;
}
let owner = selected.reference ? selected.reference : selected;
let p = property === 'definitions' && schema === selected ? 'definitions' : 'properties';
let name = state.name;
if (owner.getValue(p) == null) {
owner.setValue(p, {});
}
if (p === 'definitions') {
let definitions = owner.getValue(p);
if (Array.from(definitions.keys()).some(key => definitions.get(key).title === state.name)) {
changeState({ error: 'Element with this name already exists!' });
return;
}
let index = 1;
do {
name = 'Type_' + index++;
} while (owner.getValue(p).has(name));
}
else if (owner.getValue(p).has(state.name)) {
changeState({ error: 'Element with this name already exists!' });
return;
}
owner.setMapValue(p, name, { title: state.name, type: 'string' });
changeState({ open: false, error: '', name: '' });
});
return (React.createElement(semantic_ui_react_1.Modal, { open: state.open, trigger: React.createElement(semantic_ui_react_1.Button, { primary: true, title: "Add a new element", floated: "right", icon: "plus", size: "tiny", compact: true, onClick: () => changeState({ open: true }) }) },
React.createElement(semantic_ui_react_1.Modal.Header, null,
React.createElement(semantic_ui_react_1.Icon, { name: "database" }),
"Add Schema Element"),
React.createElement(semantic_ui_react_1.Modal.Content, null,
React.createElement(semantic_ui_react_1.Modal.Description, null,
React.createElement("label", { className: modalLabel }, "Element Name"),
React.createElement(semantic_ui_react_1.Input, { fluid: true, value: state.name, onChange: (_e, v) => changeState({ name: v.value }), placeholder: "Please specify name of the new element" }),
state.error && React.createElement(semantic_ui_react_1.Message, { error: true, content: state.error }),
React.createElement("div", { className: editor_styles_1.modalActions },
React.createElement(semantic_ui_react_1.Button, { onClick: () => changeState({ open: false }) }, "Close"),
React.createElement(semantic_ui_react_1.Button, { onClick: addSchema, icon: "plus", color: "green", content: "Add" }))))));
};
exports.DeleteSchema = ({ schema }) => {
const context = React.useContext(editor_context_1.EditorContext);
const [isOpen, setOpen] = React.useState(false);
let error = '';
function deleteSchema() {
context.project.state.deleteActiveSchema();
}
let formElement = form_store_1.searchForm(context.form, e => {
return Object.keys(e.props).find(key => e.props[key] &&
e.props[key].source &&
e.props[key].source.indexOf(context.selectedSourcePath) >= 0);
});
if (formElement) {
error = `Cannot delete this schema element since it is used in your form by element with label <b>${formElement}</b>`;
}
let dependentSchema = form_store_1.searchSchema(context.schema, s => s.$import === context.project.state.selectedSchemaName ||
s.$ref === '#/definitions/' + context.project.state.selectedSchemaName
? s
: false);
if (dependentSchema) {
error = `Cannot delete this type since it is used your schema by element <b>${dependentSchema.name()}</b>. Please remove all references and try again`;
}
return (React.createElement(semantic_ui_react_1.Modal, { open: isOpen, trigger: React.createElement(semantic_ui_react_1.Button, { default: true, title: "Delete Element", floated: "right", icon: "trash", content: dynamic_form_1.config.i18n `Delete`, onClick: () => {
if (!error) {
deleteSchema();
}
else {
setOpen(true);
}
} }) },
React.createElement(semantic_ui_react_1.Modal.Header, null,
React.createElement(semantic_ui_react_1.Icon, { name: "trash" }),
"Deleting Schema Element \"",
schema.title || context.project.state.selectedSchemaName,
"\""),
React.createElement(semantic_ui_react_1.Modal.Content, null,
React.createElement(semantic_ui_react_1.Modal.Description, null, error ? (React.createElement("div", { dangerouslySetInnerHTML: { __html: error } })) : (React.createElement("span", null, "Do you wish to delete the selected element?")))),
React.createElement(semantic_ui_react_1.Modal.Actions, null,
React.createElement(semantic_ui_react_1.Button, { onClick: () => setOpen(false) }, "Cancel"),
!error && React.createElement(semantic_ui_react_1.Button, { onClick: deleteSchema, icon: "trash", color: "red", content: "Delete" }))));
};
exports.ImportSchema = ({ schema, types }) => {
const [isOpen, setOpen] = React.useState(false);
const imported = Array.from(schema.imports.keys());
const [toggled, setToggled] = React.useState(imported);
function importSchemas() {
for (let name of toggled) {
let item = types.find(t => t.id === name);
let cloned = toolbelt_1.clone(item.schema);
cloned.$import = item.id;
schema.setMapValue('definitions', item.id, cloned);
}
setOpen(false);
}
function toggle(id, isToggled) {
let newState = [...toggled];
if (!isToggled) {
newState.splice(newState.indexOf(id), 1);
}
else {
newState.push(id);
}
setToggled(newState);
}
return (React.createElement(semantic_ui_react_1.Modal, { open: isOpen, trigger: React.createElement(semantic_ui_react_1.Button, { default: true, title: "Import shared schema", floated: "right", icon: "download", size: "tiny", color: "green", compact: true, onClick: () => setOpen(true) }) },
React.createElement(semantic_ui_react_1.Modal.Header, null,
React.createElement(semantic_ui_react_1.Icon, { name: "download" }),
"Import globally defined schema"),
React.createElement(semantic_ui_react_1.Modal.Content, null,
React.createElement(semantic_ui_react_1.Modal.Description, null,
React.createElement("p", null, "Please select one or more schemas to import"),
React.createElement(semantic_ui_react_1.Form, null, types.map(t => (React.createElement(semantic_ui_react_1.Form.Checkbox, { key: t.name, disabled: imported.indexOf(t.id) >= 0, checked: toggled.indexOf(t.id) >= 0, label: t.name, onChange: (_e, v) => toggle(t.id, v.checked) })))))),
React.createElement(semantic_ui_react_1.Modal.Actions, null,
React.createElement(semantic_ui_react_1.Button, { onClick: () => setOpen(false) }, "Cancel"),
React.createElement(semantic_ui_react_1.Button, { onClick: importSchemas, icon: "download", color: "green", content: "Import" }))));
};
//# sourceMappingURL=dataset_modals.js.map