mantine-entity
Version:
A library combining Mantine, TanStack Query, and Mantine React Table for efficient entity management
27 lines (26 loc) • 1.67 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/* eslint-disable @typescript-eslint/no-explicit-any */
import { forwardRef } from "react";
import { Grid, InputDescription, InputError, InputLabel, InputWrapper, Stack, } from "@mantine/core";
import { RenderElements } from "../render/render-elements";
export const PanelField = forwardRef(({ field: { name, group, panelProps }, label, error, description, methods, withAsterisk, inputWrapperOrder, }, ref) => {
const content = inputWrapperOrder.map((part) => {
switch (part) {
case "label":
return (_jsx(InputLabel, { required: withAsterisk, children: label }, "label"));
case "input":
return (_jsx(Stack, { ...panelProps?.wrapper, className: `mx-2 p-2.5 rounded-md ${panelProps?.wrapper?.className}`, children: _jsx(Grid, { children: group?.map((field, i) => (_jsx(Grid.Col, { span: { base: 12, md: 6 }, ...field.gridColProps, children: _jsx(RenderElements, { element: {
...field,
name: `${name}.${field.name}`,
}, methods: methods }, `${field.name}-${i}`) }, `${field.name}-${i}`))) }) }, "input"));
case "description":
return (_jsx(InputDescription, { children: description }, "description"));
case "error":
return (_jsx(InputError, { ta: "left", children: error }, "error"));
default:
return null;
}
});
return (_jsxs(InputWrapper, { children: [_jsx("button", { ref: ref }), content] }));
});
PanelField.displayName = "PanelField";