@tomino/dynamic-form-semantic-ui/dist/cjs/editor/form/editor_cell.js

Semantic UI form renderer based on dynamic form generation

"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 classnames_1 = tslib_1.__importDefault(require("classnames"));
const editor_helpers_1 = require("../editor_helpers");
const common_1 = require("../../common");
const editor_context_1 = require("../editor_context");
const editor_common_1 = require("../editor_common");
const drag_drop_1 = require("../../layouts/drag_drop");
const cell = common_1.css `
  &.empty {
    border: dotted 2px #dfdfdf;
    min-width: 50px;
    min-height: 20px;
    height: 100%;
  }
  label: cell;
`;
exports.DropCell = mobx_react_1.observer((props) => {
    const context = React.useContext(editor_context_1.EditorContext);
    const ref = React.useRef();
    const onDrag = React.useCallback((ev) => {
        context.dragItem = {
            name: props.formElement.control,
            row: props.formElement.props.row,
            column: props.formElement.props.column,
            element: props.formElement,
            id: props.id,
            position: editor_common_1.calculateHorizontalPosition(ev)
        };
    }, [context.dragItem, props.formElement, props.id]);
    const dragEnter = React.useCallback(() => drag_drop_1.clearAll(), []);
    const dragOver = React.useCallback((e) => {
        e.preventDefault();
        e.stopPropagation();
        const item = context.dragItem;
        if (!item) {
            return;
        }
        if (item.dataset) {
            props.editorState.hoverParent = props.formElement.parent;
        }
        else if (props.hover) {
            props.hover(e, props, context);
        }
        ref.current.style.background = '#999';
    }, [context, props]);
    const dragLeave = React.useCallback((e) => {
        e.preventDefault();
        ref.current.style.background = 'inherit';
    }, []);
    const drop = React.useCallback(e => {
        const item = context.dragItem;
        if (!item) {
            return;
        }
        if (item.dataset) {
            editor_helpers_1.bind(props.formElement, item);
        }
        if (props.drop(e, props, context)) {
            context.project.state.setElement(item.element, props.editorState.schema);
            context.selectedParent = props.parentFormElement;
        }
        ref.current.style.background = 'inherit';
    }, [context, props]);
    const mouseOver = React.useCallback(e => {
        if (props.mouseOver) {
            props.mouseOver(e, props, context);
        }
    }, [context, props]);
    let control = props.formElement.control;
    return (React.createElement("div", { ref: ref, draggable: control !== 'EditorCell', onMouseOver: mouseOver, onMouseOut: props.mouseOut, onDragStart: onDrag, onDragOver: dragOver, onDragLeave: dragLeave, onDragEnter: dragEnter, onDrop: drop, style: props.style, className: classnames_1.default(cell, 'cellContent', control === 'EditorCell' ? 'empty' : '', props.className), "data-id": props.id }, props.children || '\xa0'));
});
//# sourceMappingURL=editor_cell.js.map