@tomino/dynamic-form-semantic-ui
Version:
Semantic UI form renderer based on dynamic form generation
41 lines • 1.83 kB
JavaScript
import * as React from 'react';
import { Icon } from 'semantic-ui-react';
import { observer } from 'mobx-react';
import { DatasetValue } from './dataset_value';
import { EditorContext } from '../editor_context';
import { dragStart, dragEnd } from './dataset_drag';
function typeToColor(type) {
switch (type) {
case 'string':
return 'green';
case 'integer':
return 'orange';
case 'number':
return 'red';
case 'boolean':
return 'blue';
case 'array':
return 'yellow';
default:
return 'grey';
}
}
export const BuildLayerItem = observer(({ schema, name, sourcePath, parentSchema, owner, index }) => {
const context = React.useContext(EditorContext);
const onDragStart = dragStart(context, schema);
const onDragEnd = dragEnd(context);
const editorState = React.useContext(EditorContext);
const state = editorState.project.state;
const value = owner && owner.getValue && owner.getValue(name);
return (React.createElement("div", { className: "item single", "data-index": index, draggable: true, onDragStart: onDragStart, onDragEnd: onDragEnd },
React.createElement(Icon, { name: schema.type === 'array' ? 'folder' : 'file outline', className: schema.type, color: typeToColor(schema.type) }),
React.createElement("div", { className: 'link ' + (schema === state.selectedSchema ? 'selected' : ''), onMouseDown: () => {
state.setSchema(schema, name);
editorState.selectedParentSchema = parentSchema;
editorState.selectedSourcePath = sourcePath;
} },
schema.title || name,
" ",
React.createElement(DatasetValue, { value: value }))));
});
//# sourceMappingURL=dataset_item.js.map