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

Semantic UI form renderer based on dynamic form generation

import * as React from 'react';
import { observer } from 'mobx-react';
import names from 'classnames';
import { bind } from '../editor_helpers';
import { css } from '../../common';
import { EditorContext } from '../editor_context';
import { calculateHorizontalPosition } from '../editor_common';
import { clearAll } from '../../layouts/drag_drop';
const cell = css `
  &.empty {
    border: dotted 2px #dfdfdf;
    min-width: 50px;
    min-height: 20px;
    height: 100%;
  }
  label: cell;
`;
export const DropCell = observer((props) => {
    const context = React.useContext(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: calculateHorizontalPosition(ev)
        };
    }, [context.dragItem, props.formElement, props.id]);
    const dragEnter = React.useCallback(() => 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) {
            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: names(cell, 'cellContent', control === 'EditorCell' ? 'empty' : '', props.className), "data-id": props.id }, props.children || '\xa0'));
});
//# sourceMappingURL=editor_cell.js.map