@magicbe/design/dist/settings/fields/Points.js

React + Antd Drag Drop Visual design

var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import createInstance from "@emotion/css/create-instance";
import { Collapse, Form, Input } from "antd";
import { Fragment } from "react";
var _a = createInstance({ key: "points" }), css = _a.css, cx = _a.cx;
var Points = function () {
    var form = Form.useFormInstance();
    var position = Form.useWatch(["style", "position"], form);
    var cls = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        grid-template-rows: 60px 100px 60px;\n        align-items: center;\n        justify-content: center;\n        column-gap: 10px;\n    "], ["\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        grid-template-rows: 60px 100px 60px;\n        align-items: center;\n        justify-content: center;\n        column-gap: 10px;\n    "])));
    var item_cls = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        margin: 0;\n    "], ["\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        margin: 0;\n    "])));
    var top_cls = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        grid-column-start: 2;\n        grid-column-end: 3;\n        grid-row-start: 1;\n        grid-row-end: 2;\n    "], ["\n        grid-column-start: 2;\n        grid-column-end: 3;\n        grid-row-start: 1;\n        grid-row-end: 2;\n    "])));
    var right_cls = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        grid-column-start: 3;\n        grid-column-end: 4;\n        grid-row-start: 2;\n        grid-row-end: 3;\n    "], ["\n        grid-column-start: 3;\n        grid-column-end: 4;\n        grid-row-start: 2;\n        grid-row-end: 3;\n    "])));
    var bottom_cls = css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        grid-column-start: 2;\n        grid-column-end: 3;\n        grid-row-start: 3;\n        grid-row-end: 4;\n    "], ["\n        grid-column-start: 2;\n        grid-column-end: 3;\n        grid-row-start: 3;\n        grid-row-end: 4;\n    "])));
    var left_cls = css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        grid-column-start: 1;\n        grid-column-end: 2;\n        grid-row-start: 2;\n        grid-row-end: 3;\n    "], ["\n        grid-column-start: 1;\n        grid-column-end: 2;\n        grid-row-start: 2;\n        grid-row-end: 3;\n    "])));
    var center_cls = css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        grid-column-start: 2;\n        grid-column-end: 3;\n        grid-row-start: 2;\n        grid-row-end: 3;\n        width: 100px;\n        height: 100px;\n        background-color: #F9F9F9F9;\n        border-radius: 5px;\n    "], ["\n        grid-column-start: 2;\n        grid-column-end: 3;\n        grid-row-start: 2;\n        grid-row-end: 3;\n        width: 100px;\n        height: 100px;\n        background-color: #F9F9F9F9;\n        border-radius: 5px;\n    "])));
    if (!(["absolute", "fixed", "sticky"].includes(position)))
        return _jsx(Fragment, {});
    return (_jsx(Form.Item, { children: _jsx(Collapse, { children: _jsx(Collapse.Panel, __assign({ forceRender: true, header: "位置" }, { children: _jsxs("div", __assign({ className: cls }, { children: [_jsx(Form.Item, __assign({ className: cx(item_cls, top_cls), name: ["style", "top"] }, { children: _jsx(Input, { prefix: "上" }) })), _jsx(Form.Item, __assign({ className: cx(item_cls, right_cls), name: ["style", "right"] }, { children: _jsx(Input, { prefix: "右" }) })), _jsx(Form.Item, __assign({ className: cx(item_cls, bottom_cls), name: ["style", "bottom"] }, { children: _jsx(Input, { prefix: "下" }) })), _jsx(Form.Item, __assign({ className: cx(item_cls, left_cls), name: ["style", "left"] }, { children: _jsx(Input, { prefix: "左" }) })), _jsx("div", __assign({ className: cx(item_cls, center_cls) }, { children: "\u4F4D\u7F6E" }))] })) }), "point") }) }));
};
export default Points;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;