@tomino/dynamic-form-semantic-ui
Version:
Semantic UI form renderer based on dynamic form generation
86 lines • 5.05 kB
JavaScript
import * as React from 'react';
import { Icon } from 'semantic-ui-react';
import { observer } from 'mobx-react';
import { EditorContext } from '../editor_context';
import { ToolIcon } from '../toolbox/tool_icon';
import { names, pointer } from '../../common';
import { DragDrop } from '../../layouts/drag_drop';
import { processor } from '../editor_common';
import { dragDropHandler, dragEndHandler } from '../drag_drop_form_control';
export const OutlineItem = observer(({ item, folder, indent, className, isOver, canDrop }) => {
const state = React.useContext(EditorContext);
const catalogue = state.editorCatalogue;
const element = catalogue.components[item.control] || {
icon: 'folder',
thumbnail: undefined
};
const ref = React.useRef(null);
const onSelect = React.useCallback(() => {
state.project.state.setElement(item, state.schema);
}, [item, state.project.state, state.schema]);
return (React.createElement("div", { className: names(indent ? 'contentSimple' : 'content', className, {
outlineOn: isOver && canDrop
}), ref: ref },
React.createElement("a", { className: names(folder, item.isSelected ? 'selected' : '', pointer), onClick: onSelect },
React.createElement(ToolIcon, { icon: element.icon, thumbnail: element.thumbnail, title: item.control }),
React.createElement("span", null,
item.props.editorLabel ||
(typeof item.props.label === 'string' && item.props.label) ||
item.props.text,
' ',
"\u00A0",
React.createElement("span", { className: "meta" }, item.control || 'Container')))));
});
function filterStyle(filter, item) {
if (!filter) {
return null;
}
if (item.control.toLowerCase().indexOf(filter.toLowerCase()) >= 0) {
return null;
}
return { style: { opacity: 0.1 } };
}
export const OutlineFolder = observer(({ item, expanded, isOver, canDrop, filter, index, parentDragStart }) => {
let context = React.useContext(EditorContext);
let [opened, toggleOpen] = React.useState(!!expanded);
const indent = (item.control || '').indexOf('Provider') === -1;
const dropHandler = React.useCallback(dragDropHandler(context, item), [context, item]);
const endDragHandler = React.useCallback(dragEndHandler(context), [context.dragItem]);
const drag = React.useMemo(() => new DragDrop('column', item, processor, `color: ${context.theme.textColor}!important;`, 'outline', dropHandler, endDragHandler, true, 20, context), [context, dropHandler, endDragHandler, item]);
const onDragStart = React.useCallback((e) => {
if (!context.dragItem) {
context.dragItem = {
name: item.control,
element: item,
node: e.currentTarget,
id: item.uid,
drag,
from: parseInt(e.currentTarget.getAttribute('data-index')),
type: 'outline'
};
let target = e.currentTarget;
setTimeout(() => {
target.style.height = '0px';
target.style.visibility = 'hidden';
}, 1);
}
}, [context.dragItem, drag, item]);
return (React.createElement("div", { draggable: true, onDragStart: parentDragStart, onDragEnd: endDragHandler, "data-index": index },
React.createElement("div", Object.assign({ className: 'item folder' }, filterStyle(filter, item)),
indent && (React.createElement(Icon, { name: opened ? 'caret down' : 'caret right', className: "treeCaret", onClick: () => toggleOpen(!opened) })),
React.createElement(OutlineItem, { item: item, folder: "folder", indent: !indent, filter: filter, className: isOver && canDrop ? 'on' : undefined })),
React.createElement("div", Object.assign({ style: { display: opened ? '' : 'none' }, className: indent ? 'itemContent' : undefined }, drag.props()), item.elements
.filter(e => e && (e.control || (e.elements && e.elements.length)))
.map((child, index) => {
if (child.elements &&
child.elements.filter(e => e && (e.control || (e.elements && e.elements.length)))
.length) {
return (React.createElement(React.Fragment, { key: child.uid },
React.createElement(OutlineFolder, { key: index + child.uid, filter: filter, item: child, index: index, parentDragStart: onDragStart, expanded: true })));
}
return (React.createElement(React.Fragment, { key: child.uid },
React.createElement("div", Object.assign({ className: "item single", "data-index": index, key: index + child.uid, draggable: true, onDragStart: onDragStart, onDragEnd: endDragHandler }, filterStyle(filter, child)),
React.createElement(OutlineItem, { item: child, folder: "single", filter: filter }))));
}))));
});
//# sourceMappingURL=outline_folder.js.map