mantine-entity
Version:
A library combining Mantine, TanStack Query, and Mantine React Table for efficient entity management
37 lines (36 loc) • 2.58 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 { Group, InputDescription, InputError, InputLabel, InputWrapper, Radio, Stack, Text, } from "@mantine/core";
const RadioCardInput = forwardRef(({ label, data, description, error, onChange, value, defaultValue, withAsterisk, inputWrapperOrder, }, ref) => {
const content = inputWrapperOrder.map((part) => {
switch (part) {
case "label":
return (_jsx(InputLabel, { required: withAsterisk, children: label }, "label"));
case "input":
return (_jsx(Radio.Group, { defaultValue: defaultValue, value: value, onChange: (v) => onChange && onChange(v), size: "xs", className: `mb-1 ${error && "border border-[var(--mantine-color-error)]"}`, children: _jsx(Stack, { pt: "md", gap: "xs", children: data?.map((item) => (_jsx(Radio.Card, { radius: "md", value: item.value, children: _jsxs(Group, { wrap: "nowrap", align: "flex-start", children: [_jsx(Radio.Indicator, {}), _jsxs("div", { children: [_jsx(Text, { style: {
fontFamily: "var(--mantine-font-family-monospace)",
fontWeight: 500,
fontSize: "var(--mantine-font-size-md)",
lineHeight: "1.3",
color: "var(--mantine-color-bright)",
}, children: item.label }), _jsx(Text, { style: {
marginTop: "8px",
color: "var(--mantine-color-dimmed)",
fontSize: "var(--mantine-font-size-xs)",
}, children: item?.description })] })] }) }, item.value))) }) }, "input"));
case "description":
return (_jsx(InputDescription, { children: description }, "description"));
case "error":
return (_jsx(InputError, { ta: "left", children: error }, "error"));
default:
return null;
}
});
if (data && data.length >= 1) {
return (_jsxs(InputWrapper, { children: [_jsx("button", { ref: ref }), content] }));
}
return null;
});
RadioCardInput.displayName = "RadioCardInput";
export default RadioCardInput;