@tomino/dynamic-form-semantic-ui/dist/cjs/editor/create_control.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_1 = tslib_1.__importDefault(require("react"));
const common_1 = require("../common");
const editor_context_1 = require("./editor_context");
const label = common_1.css `
  position: absolute;
  z-index: 100;
  background: salmon;
  padding: 3px;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  color: white;
  transition: width 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);

  span {
    padding: 0px 3px;
    cursor: pointer;
  }

  label: label;
`;
const overStyle = common_1.css `
  outline: dotted 2px;
  outline-color: transparent;
  transition: outline-color 0.3s;
  .on {
    outline: dotted 2px;
    outline-color: #aaa !important;
  }

  /* outline-offset: -3px; */
  /* background-color: pink !important; */
  label: over;
`;
let controls = [];
let elem;
let timer = null;
let out = true;
function startTimer() {
    clearTimeout(timer);
    timer = setTimeout(() => {
        if (!elem) {
            return;
        }
        elem.style.left = '-1000px';
        elem.style.top = '-1000px';
    }, 1000);
}
function showLabel(currentTarget) {
    clearTimeout(timer);
    if (!elem) {
        elem = document.createElement('div');
        elem.className = label;
        document.body.appendChild(elem);
    }
    let bb = currentTarget.getBoundingClientRect();
    elem.onmouseover = () => {
        clearTimeout(timer);
    };
    elem.onmouseout = () => startTimer();
    let left = bb.left + window.scrollX;
    let top = bb.top + bb.height + window.scrollY;
    while (elem.firstChild) {
        elem.removeChild(elem.firstChild);
    }
    elem.style.left = left + 'px';
    elem.style.top = top + 'px';
}
function editorProps(element, props) {
    const context = react_1.default.useContext(editor_context_1.EditorContext);
    const ele = element;
    const onClick = react_1.default.useCallback((e) => {
        e.stopPropagation();
        context.state.setElement(element, context.schema);
    }, [context.schema, context.state, element]);
    const onMouseOver = react_1.default.useCallback((e) => {
        e.stopPropagation();
        e.preventDefault();
        let el = ele;
        if (controls.length > 0) {
            return;
        }
        while (el.elements && el.elements.length && el.elements[0]) {
            let control = context.editorCatalogue.components[el.elements[0].control];
            if (control && control.provider) {
                el = el.elements[0];
            }
            else {
                break;
            }
        }
        while (el != null && el.control) {
            let current = el;
            controls.push(element);
            if (out) {
                showLabel(e.currentTarget);
                if (!e.currentTarget.classList.contains(overStyle)) {
                    e.currentTarget.classList.add(overStyle);
                }
                e.currentTarget.classList.add('on');
                out = false;
            }
            let child = document.createElement('span');
            child.onclick = ((e) => {
                e.stopPropagation();
                context.state.setElement(current, context.schema);
            });
            child.innerHTML = el.control;
            if (elem && elem.childNodes.length === 1) {
                let expand = document.createElement('span');
                expand.onclick = () => {
                    elem.style.width = elem.getAttribute('data-full-width') + 'px';
                };
                expand.style.padding = '0px 6px 0px 3px';
                expand.innerHTML = ' \u276F ';
                elem.appendChild(expand);
            }
            else if (elem && elem.childNodes.length > 1) {
                elem.appendChild(document.createTextNode(' \u276F '));
            }
            if (elem) {
                elem.appendChild(child);
                elem.style.width = null;
                if (elem.childNodes.length === 1) {
                    elem.setAttribute('data-start-width', elem.getBoundingClientRect().width.toString());
                }
                else {
                    elem.setAttribute('data-full-width', elem.getBoundingClientRect().width.toString());
                    elem.style.width = parseInt(elem.getAttribute('data-start-width')) + 16 + 'px';
                }
            }
            el = el.parent;
        }
    }, [context.editorCatalogue.components, context.schema, context.state, ele, element]);
    const onMouseOut = react_1.default.useCallback((e) => {
        out = true;
        controls = [];
        e.currentTarget.classList.remove('on');
        startTimer();
    }, []);
    const newProps = react_1.default.useMemo(() => ({
        ...props.extra,
        onClick,
        onMouseOver,
        onMouseOut
    }), [onClick, onMouseOut, onMouseOver, props.extra]);
    if (!element || element.uid == null) {
        return undefined;
    }
    return newProps;
}
exports.editorProps = editorProps;
//# sourceMappingURL=create_control.js.map