@tomino/dynamic-form-semantic-ui
Version:
Semantic UI form renderer based on dynamic form generation
74 lines • 5.08 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const mobx_react_1 = require("mobx-react");
const dataset_layer_1 = require("./dataset_layer");
const dataset_folder_1 = require("./dataset_folder");
const editor_styles_1 = require("../editor_styles");
const dataset_modals_1 = require("./dataset_modals");
const semantic_ui_react_1 = require("semantic-ui-react");
const editor_context_1 = require("../editor_context");
const common_1 = require("../../common");
function addCondition(schema, collection, editorState) {
(schema || editorState.project.state.selectedSchema).addRow(collection, { type: 'object' });
}
exports.RootElement = ({ schema }) => {
const editorState = React.useContext(editor_context_1.EditorContext);
return (React.createElement("a", { onClick: () => editorState.project.state.setSchema(schema, ''), className: `${schema === editorState.project.state.selectedSchema ? 'selected' : ''}` }, "ROOT"));
};
function keys(obj) {
if (obj == null) {
return [];
}
return Object.keys(obj).filter(k => k !== 'errors');
}
function previewValue(value) {
if (Array.isArray(value)) {
if (value.length > 0) {
return React.createElement(ArrayPreview, { value: value });
}
return null;
}
if (typeof value === 'object') {
return React.createElement(ObjectPreview, { value: value });
}
return value;
}
const ObjectPreview = ({ value }) => (React.createElement(semantic_ui_react_1.Table, { striped: true },
React.createElement(semantic_ui_react_1.Table.Header, null, keys(value).map((k, i) => (React.createElement(semantic_ui_react_1.Table.HeaderCell, { key: k + i }, k)))),
React.createElement(semantic_ui_react_1.Table.Body, null,
React.createElement(semantic_ui_react_1.Table.Row, null, keys(value).map((k, i) => (React.createElement(semantic_ui_react_1.Table.Cell, { key: k + i }, previewValue(k))))))));
const ArrayPreview = ({ value }) => (React.createElement(semantic_ui_react_1.Table, { striped: true },
React.createElement(semantic_ui_react_1.Table.Header, null, keys(value[0]).map((k, i) => (React.createElement(semantic_ui_react_1.Table.HeaderCell, { key: k + i }, k)))),
React.createElement(semantic_ui_react_1.Table.Body, null, value.map((v, j) => (React.createElement(semantic_ui_react_1.Table.Row, { key: j }, keys(v).map((k, i) => (React.createElement(semantic_ui_react_1.Table.Cell, { key: k + i }, previewValue(v[k]))))))))));
const DataPrevieModal = mobx_react_1.observer(() => {
const state = React.useContext(editor_context_1.EditorContext);
const close = React.useCallback(() => (state.previewOpen = false), [state.previewOpen]);
return (React.createElement(semantic_ui_react_1.Modal, { open: state.previewOpen, onClose: close },
React.createElement(semantic_ui_react_1.Header, { icon: "browser", content: "Data Preview" }),
React.createElement(semantic_ui_react_1.Modal.Content, null, previewValue(common_1.toJS(state.dataPreview))),
React.createElement(semantic_ui_react_1.Modal.Actions, null,
React.createElement(semantic_ui_react_1.Button, { color: "green", onClick: close, inverted: true }, "Close"))));
});
exports.DatasetElements = mobx_react_1.observer(({ schema, owner }) => {
const editorState = React.useContext(editor_context_1.EditorContext);
if (!owner || !owner.getValue) {
return React.createElement("div", null, "Loading ...");
}
return (React.createElement(editor_styles_1.PaneContent, null,
React.createElement(DataPrevieModal, null),
React.createElement("div", { className: "paneHeader" },
React.createElement("div", { className: "text" }, "Data"),
React.createElement("span", null),
React.createElement(semantic_ui_react_1.Dropdown, { button: true, className: "icon tiny", icon: "code branch", compact: true, size: "tiny", pointing: "top right" },
React.createElement(semantic_ui_react_1.Dropdown.Menu, null,
React.createElement(semantic_ui_react_1.Dropdown.Item, { content: "All Of", onClick: () => addCondition(schema, 'allOf', editorState) }),
React.createElement(semantic_ui_react_1.Dropdown.Item, { content: "Any Of", onClick: () => addCondition(schema, 'anyOf', editorState) }),
React.createElement(semantic_ui_react_1.Dropdown.Item, { content: "One Of", onClick: () => addCondition(schema, 'oneOf', editorState) }))),
React.createElement(dataset_modals_1.AddSchema, { schema: schema, property: "properties" })),
React.createElement(editor_styles_1.ToolBox, null,
React.createElement(dataset_folder_1.BuildLayerFolder, { expanded: true, BuildLayer: dataset_layer_1.BuildLayer, schema: schema, name: 'root', sourcePath: '', owner: owner, index: 0 }))));
});
exports.DatasetElements.displayName = 'DatasetElements';
//# sourceMappingURL=dataset_elements.js.map