styled-hook-form
Version:
React form library for styled-components based on grommet and react-hook-form
63 lines (62 loc) • 2.82 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const grommet_1 = require("grommet");
const shared_1 = require("./shared");
const renderFieldEditors = ({ items, methods, editorWrapComponent, shouldUnregister, }) => {
let groupedEditors = {};
items.forEach((field) => {
let fieldEditor = shared_1.renderField(field, methods, editorWrapComponent, shouldUnregister);
if (field.gridArea) {
let existingArea = groupedEditors[field.gridArea];
groupedEditors[field.gridArea] = existingArea
? [...existingArea, fieldEditor]
: [fieldEditor];
}
else {
groupedEditors["no-area"] = groupedEditors["no-area"]
? [...groupedEditors["no-area"], fieldEditor]
: [fieldEditor];
}
});
return Object.keys(groupedEditors).map((k) => (jsx_runtime_1.jsx(grommet_1.Box, Object.assign({ gridArea: k, pad: "small" }, { children: groupedEditors[k].map((field, i) => {
return jsx_runtime_1.jsx(grommet_1.Box, { children: field }, i);
}) }), k)));
};
const gridLayout = ({ fields, methods, rows, columns, areas, children, editorWrapComponent, options, model, }) => {
let gridDefined = true;
if (!rows) {
gridDefined = false;
rows = ["flex", "xsmall"];
columns = ["flex"];
areas = [
{
name: "body",
start: [0, 0],
end: [0, 0],
},
{
name: "actions",
start: [0, 1],
end: [0, 1],
},
];
}
return (jsx_runtime_1.jsxs(grommet_1.Grid, Object.assign({ rows: rows, columns: columns, areas: areas, fill: true }, { children: [gridDefined ? (renderFieldEditors({
model,
items: fields,
methods,
editorWrapComponent,
shouldUnregister: options === null || options === void 0 ? void 0 : options.shouldUnregister,
})) : (jsx_runtime_1.jsx(grommet_1.Box, Object.assign({ gridArea: "body" }, { children: renderFieldEditors({
model,
items: fields,
methods,
editorWrapComponent,
shouldUnregister: options === null || options === void 0 ? void 0 : options.shouldUnregister,
}) }), void 0)),
children &&
(gridDefined ? (shared_1.renderChildren(children, methods)) : (jsx_runtime_1.jsx(grommet_1.Box, Object.assign({ gridArea: "actions" }, { children: shared_1.renderChildren(children, methods) }), void 0)))] }), void 0));
};
exports.default = gridLayout;