@magicbe/design/dist/settings/fields/Marging.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";
var _a = createInstance({ key: "marging" }), css = _a.css, cx = _a.cx;
var Marging = function () {
    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    "])));
    var header_style = css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        .ant-collapse-header {\n            align-items: center !important;\n        }\n    "], ["\n        .ant-collapse-header {\n            align-items: center !important;\n        }\n    "])));
    var padding_style = css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        width: 150px;\n    "], ["\n        width: 150px;\n    "])));
    var onPaddingClick = function (event) {
        event.stopPropagation();
    };
    return (_jsx(Form.Item, { children: _jsx(Collapse, { children: _jsx(Collapse.Panel, __assign({ forceRender: true, header: "外边距", extra: (_jsx(Form.Item, __assign({ name: ["style", "margin"], noStyle: true }, { children: _jsx(Input, { className: padding_style, onClick: onPaddingClick }) }))), className: header_style }, { children: _jsxs("div", __assign({ className: cls }, { children: [_jsx(Form.Item, __assign({ className: cx(item_cls, top_cls), name: ["style", "marginTop"] }, { children: _jsx(Input, { prefix: "上" }) })), _jsx(Form.Item, __assign({ className: cx(item_cls, right_cls), name: ["style", "marginRight"] }, { children: _jsx(Input, { prefix: "右" }) })), _jsx(Form.Item, __assign({ className: cx(item_cls, bottom_cls), name: ["style", "marginBottom"] }, { children: _jsx(Input, { prefix: "下" }) })), _jsx(Form.Item, __assign({ className: cx(item_cls, left_cls), name: ["style", "marginLeft"] }, { children: _jsx(Input, { prefix: "左" }) })), _jsx("div", __assign({ className: cx(item_cls, center_cls) }, { children: "\u5916\u8FB9\u8DDD" }))] })) }), "margin") }) }));
};
export default Marging;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;