@teknim/rjsf-mantine/lib/widgets/CheckboxesWidget.js

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

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback } from 'react';
import { ariaDescribedByIds, enumOptionsValueForIndex, enumOptionsIndexForValue, optionId, titleId, } from '@rjsf/utils';
import { Checkbox, Flex, Input } from '@mantine/core';
import { cleanupOptions } from '../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(props) {
    const { id, value, required, disabled, readonly, autofocus, label, hideLabel, rawErrors, options, onChange, onBlur, onFocus, } = props;
    const { enumOptions, enumDisabled, inline, emptyValue } = options;
    const themeProps = cleanupOptions(options);
    const handleChange = useCallback((nextValue) => {
        if (!disabled && !readonly && onChange) {
            onChange(enumOptionsValueForIndex(nextValue, enumOptions, emptyValue));
        }
    }, [onChange, disabled, readonly, enumOptions, emptyValue]);
    const handleBlur = useCallback(({ target }) => {
        if (onBlur) {
            onBlur(id, enumOptionsValueForIndex(target.value, enumOptions, emptyValue));
        }
    }, [onBlur, id, enumOptions, emptyValue]);
    const handleFocus = useCallback(({ target }) => {
        if (onFocus) {
            onFocus(id, enumOptionsValueForIndex(target.value, enumOptions, emptyValue));
        }
    }, [onFocus, id, enumOptions, emptyValue]);
    const selectedIndexes = enumOptionsIndexForValue(value, enumOptions, true);
    return Array.isArray(enumOptions) && enumOptions.length > 0 ? (_jsxs(_Fragment, { children: [!hideLabel && !!label && (_jsx(Input.Label, { id: titleId(id), required: required, children: label })), _jsx(Checkbox.Group, { id: id, value: selectedIndexes, onChange: handleChange, required: required, readOnly: disabled || readonly, error: rawErrors && rawErrors.length > 0 ? rawErrors.join('\n') : undefined, "aria-describedby": ariaDescribedByIds(id), ...themeProps, children: Array.isArray(enumOptions) ? (_jsx(Flex, { mt: 'xs', direction: inline ? 'row' : 'column', gap: 'xs', wrap: 'wrap', children: enumOptions.map((option, i) => (_jsx(Checkbox, { id: optionId(id, i), name: id, value: String(i), label: option.label, disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1, autoFocus: i === 0 && autofocus, onBlur: handleBlur, onFocus: handleFocus }, i))) })) : null })] })) : null;
}
//# sourceMappingURL=CheckboxesWidget.js.map