@etsoo/materialui/lib/mjs/custom/FieldCheckbox.js

TypeScript Material-UI Implementation

import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import React from "react";
import { OptionGroup } from "../OptionGroup";
import Typography from "@mui/material/Typography";
/**
 * Checkbox (multiple values) field creator
 * type: checkbox
 * @returns Component
 */
export const FieldCheckbox = ({ field, mref, onChange, defaultValue }) => {
    // State
    const [value, setLocalValue] = React.useState();
    // Ref
    const getValue = () => value;
    const setValue = (value) => {
        if (Array.isArray(value)) {
            setLocalValue(value);
        }
        else if (typeof value === "string" || typeof value === "number") {
            setLocalValue([value]);
        }
        else {
            setLocalValue(undefined);
        }
    };
    React.useImperativeHandle(mref, () => ({
        getValue,
        setValue
    }));
    React.useEffect(() => {
        if (defaultValue == null)
            return;
        setValue(defaultValue);
    }, [defaultValue]);
    // Name
    const name = field.name;
    if (!name) {
        return (_jsxs(Typography, { children: ["No name for FieldCheckbox ", JSON.stringify(field)] }));
    }
    return (_jsx(OptionGroup, { name: name, options: field.options ?? [], multiple: true, row: true, helperText: field.helperText, label: field.label, variant: "outlined", fullWidth: true, defaultValue: value, onValueChange: (value) => {
            const newValue = Array.isArray(value)
                ? value
                : value == null
                    ? undefined
                    : [value];
            setLocalValue(newValue);
            onChange(name, newValue);
        }, ...field.mainSlotProps }));
};