@aokiapp/rjsf-mantine-theme/lib/widgets/CheckboxesWidget.js

Mantine theme, fields and widgets for react-jsonschema-form

import { jsx as _jsx } from "react/jsx-runtime";
import { ariaDescribedByIds, optionId, labelValue, enumOptionsValueForIndex, enumOptionsIndexForValue, } from '@rjsf/utils';
import { Box, Checkbox } from '@mantine/core';
import { useCallback } from 'react';
import { createErrors } from '../utils/createErrors';
import { useFieldContext } from '../templates/FieldTemplate';
/** 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(props) {
    const { id, disabled, options: { inline = false, enumOptions, enumDisabled, emptyValue }, value, autofocus, readonly, label, hideLabel, onChange, onBlur, onFocus, required, rawErrors, hideError, } = props;
    const checkboxesValues = Array.isArray(value) ? value : [value];
    const selectedIndices = enumOptionsIndexForValue(checkboxesValues, enumOptions, true);
    const handleBlur = useCallback(({ target: { value } }) => onBlur(id, enumOptionsValueForIndex(value, enumOptions, emptyValue)), [onBlur, id, enumOptions, emptyValue]);
    const handleFocus = useCallback(({ target: { value } }) => onFocus(id, enumOptionsValueForIndex(value, enumOptions, emptyValue)), [onFocus, id, enumOptions, emptyValue]);
    const { description } = useFieldContext();
    const _onChange = (nextIndices) => {
        const nextValues = enumOptionsValueForIndex(nextIndices, enumOptions, []);
        onChange(nextValues);
    };
    return (_jsx(Checkbox.Group, { label: labelValue(label, hideLabel, false), description: description, error: createErrors(rawErrors, hideError), onChange: _onChange, onBlur: handleBlur, onFocus: handleFocus, value: selectedIndices, id: id, required: required, autoFocus: autofocus, className: 'armt-widget-checkboxes', children: _jsx(Box, { style: {
                display: 'flex',
                flexDirection: inline ? 'row' : 'column',
                gap: '0.5rem',
            }, children: enumOptions === null || enumOptions === void 0 ? void 0 : enumOptions.map((option, index) => {
                var _a;
                return (_jsx(Checkbox, { id: optionId(id, index), label: option.label, value: enumOptionsIndexForValue(option.value, enumOptions, false), disabled: disabled || readonly || (enumDisabled !== null && enumDisabled !== void 0 ? enumDisabled : []).includes(index), name: id, "aria-describedby": ariaDescribedByIds(id), description: (_a = option.schema) === null || _a === void 0 ? void 0 : _a.description }, index));
            }) }) }));
}
//# sourceMappingURL=CheckboxesWidget.js.map