@rjsf/mui/lib/CheckboxesWidget/CheckboxesWidget.js

Material UI 5 theme, fields and widgets for react-jsonschema-form

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import Checkbox from '@mui/material/Checkbox/index.js';
import FormControlLabel from '@mui/material/FormControlLabel/index.js';
import FormGroup from '@mui/material/FormGroup/index.js';
import FormLabel from '@mui/material/FormLabel/index.js';
import { ariaDescribedByIds, enumOptionsDeselectValue, enumOptionsIsSelected, enumOptionsSelectValue, enumOptionsValueForIndex, labelValue, optionId, } from '@rjsf/utils';
/** The `CheckboxesWidget` is a widget for rendering checkbox groups.
 *  It is typically used to represent an array of enums.
 *
 * @param props - The `WidgetProps` for this component
 */
export default function CheckboxesWidget({ label, hideLabel, id, disabled, options, value, autofocus, readonly, required, onChange, onBlur, onFocus, }) {
    const { enumOptions, enumDisabled, inline, emptyValue } = options;
    const checkboxesValues = Array.isArray(value) ? value : [value];
    const _onChange = (index) => ({ target: { checked } }) => {
        if (checked) {
            onChange(enumOptionsSelectValue(index, checkboxesValues, enumOptions));
        }
        else {
            onChange(enumOptionsDeselectValue(index, checkboxesValues, enumOptions));
        }
    };
    const _onBlur = ({ target }) => onBlur(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
    const _onFocus = ({ target }) => onFocus(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
    return (_jsxs(_Fragment, { children: [labelValue(_jsx(FormLabel, { required: required, htmlFor: id, children: label || undefined }), hideLabel), _jsx(FormGroup, { id: id, row: !!inline, children: Array.isArray(enumOptions) &&
                    enumOptions.map((option, index) => {
                        const checked = enumOptionsIsSelected(option.value, checkboxesValues);
                        const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
                        const checkbox = (_jsx(Checkbox, { id: optionId(id, index), name: id, checked: checked, disabled: disabled || itemDisabled || readonly, autoFocus: autofocus && index === 0, onChange: _onChange(index), onBlur: _onBlur, onFocus: _onFocus, "aria-describedby": ariaDescribedByIds(id) }));
                        return _jsx(FormControlLabel, { control: checkbox, label: option.label }, index);
                    }) })] }));
}
//# sourceMappingURL=CheckboxesWidget.js.map