@tomino/dynamic-form-semantic-ui
Version:
Semantic UI form renderer based on dynamic form generation
71 lines • 4.33 kB
JavaScript
import * as React from 'react';
import { observer } from 'mobx-react';
import { BuildLayer } from './dataset_layer';
import { BuildLayerFolder } from './dataset_folder';
import { PaneContent, ToolBox } from '../editor_styles';
import { AddSchema } from './dataset_modals';
import { Dropdown, Modal, Header, Button, Table } from 'semantic-ui-react';
import { EditorContext } from '../editor_context';
import { toJS } from '../../common';
function addCondition(schema, collection, editorState) {
(schema || editorState.project.state.selectedSchema).addRow(collection, { type: 'object' });
}
export const RootElement = ({ schema }) => {
const editorState = React.useContext(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(Table, { striped: true },
React.createElement(Table.Header, null, keys(value).map((k, i) => (React.createElement(Table.HeaderCell, { key: k + i }, k)))),
React.createElement(Table.Body, null,
React.createElement(Table.Row, null, keys(value).map((k, i) => (React.createElement(Table.Cell, { key: k + i }, previewValue(k))))))));
const ArrayPreview = ({ value }) => (React.createElement(Table, { striped: true },
React.createElement(Table.Header, null, keys(value[0]).map((k, i) => (React.createElement(Table.HeaderCell, { key: k + i }, k)))),
React.createElement(Table.Body, null, value.map((v, j) => (React.createElement(Table.Row, { key: j }, keys(v).map((k, i) => (React.createElement(Table.Cell, { key: k + i }, previewValue(v[k]))))))))));
const DataPrevieModal = observer(() => {
const state = React.useContext(EditorContext);
const close = React.useCallback(() => (state.previewOpen = false), [state.previewOpen]);
return (React.createElement(Modal, { open: state.previewOpen, onClose: close },
React.createElement(Header, { icon: "browser", content: "Data Preview" }),
React.createElement(Modal.Content, null, previewValue(toJS(state.dataPreview))),
React.createElement(Modal.Actions, null,
React.createElement(Button, { color: "green", onClick: close, inverted: true }, "Close"))));
});
export const DatasetElements = observer(({ schema, owner }) => {
const editorState = React.useContext(EditorContext);
if (!owner || !owner.getValue) {
return React.createElement("div", null, "Loading ...");
}
return (React.createElement(PaneContent, null,
React.createElement(DataPrevieModal, null),
React.createElement("div", { className: "paneHeader" },
React.createElement("div", { className: "text" }, "Data"),
React.createElement("span", null),
React.createElement(Dropdown, { button: true, className: "icon tiny", icon: "code branch", compact: true, size: "tiny", pointing: "top right" },
React.createElement(Dropdown.Menu, null,
React.createElement(Dropdown.Item, { content: "All Of", onClick: () => addCondition(schema, 'allOf', editorState) }),
React.createElement(Dropdown.Item, { content: "Any Of", onClick: () => addCondition(schema, 'anyOf', editorState) }),
React.createElement(Dropdown.Item, { content: "One Of", onClick: () => addCondition(schema, 'oneOf', editorState) }))),
React.createElement(AddSchema, { schema: schema, property: "properties" })),
React.createElement(ToolBox, null,
React.createElement(BuildLayerFolder, { expanded: true, BuildLayer: BuildLayer, schema: schema, name: 'root', sourcePath: '', owner: owner, index: 0 }))));
});
DatasetElements.displayName = 'DatasetElements';
//# sourceMappingURL=dataset_elements.js.map