@tomino/dynamic-form-semantic-ui/dist/cjs/editor/dataset/dataset_drag.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 helpers_1 = require("../../helpers");
let currentStack = [];
function clearStyles(context) {
    let item = context.dragItem;
    if (item && item.node) {
        item.node.style.visibility = 'visible';
        item.node.style.height = 'inherit';
    }
    context.dragItem = null;
}
function clearStack() {
    for (let elem of currentStack) {
        elem.style.outline = '';
    }
}
function dragStart(context, owner) {
    return react_1.default.useCallback((e) => {
        if (!context.dragItem) {
            context.dragItem = {
                name: owner.title,
                schema: owner,
                node: e.currentTarget,
                id: owner.id,
                from: parseInt(e.currentTarget.getAttribute('data-index')),
                type: 'dataset',
                target: e.currentTarget
            };
            let target = e.currentTarget;
            setTimeout(() => {
                target.style.height = '0px';
                target.style.visibility = 'hidden';
            }, 1);
        }
    }, [context.dragItem, owner]);
}
exports.dragStart = dragStart;
function dragEnd(context) {
    return react_1.default.useCallback(() => {
        clearStyles(context);
    }, [context]);
}
exports.dragEnd = dragEnd;
function initDrag(context, owner) {
    const add = react_1.default.useRef(true);
    const onDragOver = react_1.default.useCallback((e) => {
        e.preventDefault();
        if (add.current) {
            currentStack.push(e.currentTarget);
            add.current = false;
        }
        let index = currentStack.indexOf(e.currentTarget);
        if (index != 0) {
            return;
        }
        e.currentTarget.style.outline = 'dashed 2px #DDD';
    }, []);
    const onDragEnd = react_1.default.useCallback(() => {
        clearStack();
        clearStyles(context);
    }, [context]);
    const onDragLeave = react_1.default.useCallback(() => {
        clearStack();
        currentStack = [];
        add.current = true;
    }, []);
    const onDrop = react_1.default.useCallback(() => {
        const item = context.dragItem;
        if (item === null) {
            return;
        }
        if (item.type === 'dataset') {
            const schema = item.schema;
            const parent = schema.parent;
            const path = item.name;
            const source = parent.reference ? parent.reference : parent;
            let target = owner.reference ? owner.reference : owner;
            target =
                target.type === 'array'
                    ? target.items.reference
                        ? target.items.reference
                        : target.items
                    : target;
            const dataset = helpers_1.schemaDatasetToJS(schema, false);
            target.setMapValue('properties', path, dataset);
            context.project.state.setSchema(target.properties.get(path), context.project.state.selectedSchemaName);
            source.mapRemove('properties', path);
        }
        context.dragItem = null;
        clearStack();
        clearStyles(context);
    }, [context, owner]);
    return {
        onDragOver: onDragOver,
        onDragEnd: onDragEnd,
        onDrop: onDrop,
        onDragLeave: onDragLeave
    };
}
exports.initDrag = initDrag;
//# sourceMappingURL=dataset_drag.js.map