@magicbe/design
Version:
React + Antd Drag Drop Visual design
40 lines (39 loc) • 2.77 kB
JavaScript
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/jsx-runtime";
var GridBox = function () {
var form = Form.useFormInstance();
var display = form === null || form === void 0 ? void 0 : form.getFieldValue(["style", "display"]);
var grid_auto_columns = [
{ value: "min-content" },
{ value: "max-content" },
{ value: "auto" },
];
var grid_auto_flow = [
{ value: "row" },
{ value: "column" },
{ value: "dense" },
{ value: "row" },
{ value: "dense" },
];
var grid_auto_rows = [
{ value: "min-content" },
{ value: "max-content" },
{ value: "auto" },
];
if (!(["grid", "inline-grid"].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: "gridAutoColumns", name: ["style", "gridAutoColumns"] }, { children: _jsx(AutoComplete, { options: grid_auto_columns }) })), _jsx(Form.Item, __assign({ label: "gridAutoFlow", name: ["style", "gridAutoFlow"] }, { children: _jsx(AutoComplete, { options: grid_auto_flow }) })), _jsx(Form.Item, __assign({ label: "gridAutoRows", name: ["style", "gridAutoRows"] }, { children: _jsx(AutoComplete, { options: grid_auto_rows }) })), _jsx(Form.Item, __assign({ label: "gridColumnStart", name: ["style", "gridColumnStart"] }, { children: _jsx(Input, {}) })), _jsx(Form.Item, __assign({ label: "gridColumnEnd", name: ["style", "gridColumnEnd"] }, { children: _jsx(Input, {}) })), _jsx(Form.Item, __assign({ label: "gridRowStart", name: ["style", "gridRowStart"] }, { children: _jsx(Input, {}) })), _jsx(Form.Item, __assign({ label: "gridRowEnd", name: ["style", "gridRowEnd"] }, { children: _jsx(Input, {}) })), _jsx(Form.Item, __assign({ label: "gridTemplateAreas", name: ["style", "gridTemplateAreas"] }, { children: _jsx(Input, {}) })), _jsx(Form.Item, __assign({ label: "gridTemplateColumns", name: ["style", "gridTemplateColumns"] }, { children: _jsx(Input, {}) })), _jsx(Form.Item, __assign({ label: "gridTemplateRows", name: ["style", "gridTemplateRows"] }, { children: _jsx(Input, {}) }))] }), "grid-box") }) }));
};
export default GridBox;