@tomino/dynamic-form-semantic-ui
Version:
Semantic UI form renderer based on dynamic form generation
89 lines • 5.42 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 mobx_react_1 = require("mobx-react");
const editor_context_1 = require("../editor_context");
const tool_icon_1 = require("../toolbox/tool_icon");
const common_1 = require("../../common");
const drag_drop_1 = require("../../layouts/drag_drop");
const editor_common_1 = require("../editor_common");
const drag_drop_form_control_1 = require("../drag_drop_form_control");
exports.OutlineItem = mobx_react_1.observer(({ item, folder, indent, className, isOver, canDrop }) => {
const state = React.useContext(editor_context_1.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: common_1.names(indent ? 'contentSimple' : 'content', className, {
outlineOn: isOver && canDrop
}), ref: ref },
React.createElement("a", { className: common_1.names(folder, item.isSelected ? 'selected' : '', common_1.pointer), onClick: onSelect },
React.createElement(tool_icon_1.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 } };
}
exports.OutlineFolder = mobx_react_1.observer(({ item, expanded, isOver, canDrop, filter, index, parentDragStart }) => {
let context = React.useContext(editor_context_1.EditorContext);
let [opened, toggleOpen] = React.useState(!!expanded);
const indent = (item.control || '').indexOf('Provider') === -1;
const dropHandler = React.useCallback(drag_drop_form_control_1.dragDropHandler(context, item), [context, item]);
const endDragHandler = React.useCallback(drag_drop_form_control_1.dragEndHandler(context), [context.dragItem]);
const drag = React.useMemo(() => new drag_drop_1.DragDrop('column', item, editor_common_1.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(semantic_ui_react_1.Icon, { name: opened ? 'caret down' : 'caret right', className: "treeCaret", onClick: () => toggleOpen(!opened) })),
React.createElement(exports.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(exports.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(exports.OutlineItem, { item: child, folder: "single", filter: filter }))));
}))));
});
//# sourceMappingURL=outline_folder.js.map