@magicbe/design/dist/settings/fields/BorderRadius.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 { Collapse, Form, Input } from "antd";
import createInstance from "@emotion/css/create-instance";
var _a = createInstance({ key: "border-radius" }), css = _a.css, cx = _a.cx;
var BorderRadius = function () {
    var cls = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        grid-template-rows: 35px 100px 35px;\n        align-items: center;\n        justify-content: center;\n    "], ["\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        grid-template-rows: 35px 100px 35px;\n        align-items: center;\n        justify-content: center;\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_left_cls = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        grid-column-start: 1;\n        grid-column-end: 2;\n        grid-row-start: 1;\n        grid-row-end: 2;\n    "], ["\n        grid-column-start: 1;\n        grid-column-end: 2;\n        grid-row-start: 1;\n        grid-row-end: 2;\n    "])));
    var right_top_cls = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        grid-column-start: 3;\n        grid-column-end: 4;\n        grid-row-start: 1;\n        grid-row-end: 2;\n    "], ["\n        grid-column-start: 3;\n        grid-column-end: 4;\n        grid-row-start: 1;\n        grid-row-end: 2;\n    "])));
    var bottom_left_cls = css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        grid-column-start: 1;\n        grid-column-end: 2;\n        grid-row-start: 3;\n        grid-row-end: 4;\n    "], ["\n        grid-column-start: 1;\n        grid-column-end: 2;\n        grid-row-start: 3;\n        grid-row-end: 4;\n    "])));
    var bottom_right_cls = css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        grid-column-start: 3;\n        grid-column-end: 4;\n        grid-row-start: 3;\n        grid-row-end: 4;\n    "], ["\n        grid-column-start: 3;\n        grid-column-end: 4;\n        grid-row-start: 3;\n        grid-row-end: 4;\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: 80px;\n        height: 80px;\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: 80px;\n        height: 80px;\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 extra_style = css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        width: 150px;\n    "], ["\n        width: 150px;\n    "])));
    var onClick = 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", "borderRadius"], noStyle: true }, { children: _jsx(Input, { className: extra_style, onClick: onClick }) }))), className: header_style }, { children: _jsxs("div", __assign({ className: cls }, { children: [_jsx(Form.Item, __assign({ className: cx(item_cls, top_left_cls), name: ["style", "borderTopLeftRadius"] }, { children: _jsx(Input, { prefix: "左上" }) })), _jsx(Form.Item, __assign({ className: cx(item_cls, right_top_cls), name: ["style", "borderTopRightRadius"] }, { children: _jsx(Input, { prefix: "右上" }) })), _jsx(Form.Item, __assign({ className: cx(item_cls, bottom_left_cls), name: ["style", "borderBottomLeftRadius"] }, { children: _jsx(Input, { prefix: "左下" }) })), _jsx(Form.Item, __assign({ className: cx(item_cls, bottom_right_cls), name: ["style", "borderBottomRightRadius"] }, { children: _jsx(Input, { prefix: "右下" }) })), _jsx("div", __assign({ className: cx(item_cls, center_cls) }, { children: "\u5706\u89D2" }))] })) }), "point") }) }));
};
export default BorderRadius;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;