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

React + Antd Drag Drop Visual design

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 { AutoComplete, Collapse, Form, Input } from "antd";
import { Fragment } from "react";
var Flexbox = function () {
    var form = Form.useFormInstance();
    var display = form === null || form === void 0 ? void 0 : form.getFieldValue(["style", "display"]);
    var inc = ["flex", "inline-flex", "grid", "inline-grid"];
    var align_items = [
        { value: "normal" },
        { value: "flex-start" },
        { value: "flex-end" },
        { value: "center" },
        { value: "baseline" },
        { value: "stretch" },
        { value: "start" },
        { value: "end" },
        { value: "self-start" },
        { value: "self-end" },
        { value: "first" },
        { value: "last" },
        { value: "safe" },
        { value: "unsafe" },
        { value: "right" },
    ];
    var align_content = [
        { value: "center" },
        { value: "start" },
        { value: "end" },
        { value: "flex-start" },
        { value: "flex-end" },
        { value: "normal" },
        { value: "baseline" },
        { value: "first" },
        { value: "last" },
        { value: "space-between" },
        { value: "space-around" },
        { value: "space-evenly" },
        { value: "stretch" },
        { value: "safe" },
        { value: "unsafe" },
        { value: "inherit" },
        { value: "initial" },
        { value: "unset" },
    ];
    var align_self = [
        { value: "auto" },
        { value: "normal" },
        { value: "center" },
        { value: "start" },
        { value: "end" },
        { value: "self-start" },
        { value: "self-end" },
        { value: "flex-start" },
        { value: "flex-end" },
        { value: "baseline" },
        { value: "first" },
        { value: "last" },
        { value: "stretch" },
        { value: "safe" },
        { value: "unsafe" },
        { value: "inherit" },
        { value: "initial" },
        { value: "unset" },
    ];
    var justify_content = [
        { value: "center" },
        { value: "start" },
        { value: "end" },
        { value: "flex-start" },
        { value: "flex-end" },
        { value: "left" },
        { value: "right" },
        { value: "baseline" },
        { value: "first" },
        { value: "last" },
        { value: "space-between" },
        { value: "space-around" },
        { value: "space-evenly" },
        { value: "stretch" },
        { value: "safe" },
        { value: "unsafe" },
        { value: "inherit" },
        { value: "initial" },
        { value: "unset" },
    ];
    var justify_items = [
        { value: "auto" },
        { value: "normal" },
        { value: "stretch" },
        { value: "center" },
        { value: "start" },
        { value: "end" },
        { value: "flex-start" },
        { value: "flex-end" },
        { value: "self-start" },
        { value: "self-end" },
        { value: "left" },
        { value: "right" },
        { value: "baseline" },
        { value: "first" },
        { value: "last" },
        { value: "safe" },
        { value: "unsafe" },
        { value: "legacy" },
        { value: "inherit" },
        { value: "initial" },
        { value: "unset" },
    ];
    var justify_self = [
        { value: "auto" },
        { value: "normal" },
        { value: "stretch" },
        { value: "center" },
        { value: "start" },
        { value: "end" },
        { value: "flex-start" },
        { value: "flex-end" },
        { value: "self-start" },
        { value: "self-end" },
        { value: "left" },
        { value: "right" },
        { value: "baseline" },
        { value: "first" },
        { value: "last" },
        { value: "safe" },
        { value: "unsafe" },
        { value: "inherit" },
        { value: "initial" },
        { value: "unset" },
    ];
    var flex_wrap = [
        { value: "nowrap" },
        { value: "wrap" },
        { value: "wrap-reverse" },
    ];
    var flex_direction = [
        { value: "row" },
        { value: "row-reverse" },
        { value: "column" },
        { value: "column-reverse" },
        { value: "inherit" },
        { value: "initial" },
        { value: "revert" },
        { value: "revert-layer" },
        { value: "unset" },
    ];
    var flex = [
        { value: "auto" },
        { value: "initial" },
        { value: "none" },
        { value: "min-content" },
        { value: "inherit" },
        { value: "revert" },
        { value: "revert-layer" },
        { value: "unset" },
    ];
    if (!inc.includes(display)) {
        return _jsx(Fragment, {});
    }
    return (_jsx(Form.Item, { children: _jsx(Collapse, { children: _jsxs(Collapse.Panel, __assign({ forceRender: true, header: "弹性布局" }, { children: [_jsx(Form.Item, __assign({ label: "alignItems", name: ["style", "alignItems"] }, { children: _jsx(AutoComplete, { options: align_items }) })), _jsx(Form.Item, __assign({ label: "alignContent", name: ["style", "alignContent"] }, { children: _jsx(AutoComplete, { options: align_content }) })), _jsx(Form.Item, __assign({ label: "alignSelf", name: ["style", "alignSelf"] }, { children: _jsx(AutoComplete, { options: align_self }) })), _jsx(Form.Item, __assign({ label: "justifyContent", name: ["style", "justifyContent"] }, { children: _jsx(AutoComplete, { options: justify_content }) })), _jsx(Form.Item, __assign({ label: "justifyItems", name: ["style", "justifyItems"] }, { children: _jsx(AutoComplete, { options: justify_items }) })), _jsx(Form.Item, __assign({ label: "justifySelf", name: ["style", "justifySelf"] }, { children: _jsx(AutoComplete, { options: justify_self }) })), _jsx(Form.Item, __assign({ label: "flexWrap", name: ["style", "flexWrap"] }, { children: _jsx(AutoComplete, { options: flex_wrap }) })), _jsx(Form.Item, __assign({ label: "flexDirection", name: ["style", "flexDirection"] }, { children: _jsx(AutoComplete, { options: flex_direction }) })), _jsx(Form.Item, __assign({ label: "flex", name: ["style", "flex"] }, { children: _jsx(AutoComplete, { options: flex }) })), _jsx(Form.Item, __assign({ label: "columnGap", name: ["style", "columnGap"] }, { children: _jsx(Input, {}) })), _jsx(Form.Item, __assign({ label: "rowGap", name: ["style", "rowGap"] }, { children: _jsx(Input, {}) }))] }), "flexbox") }) }));
};
export default Flexbox;