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

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

import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback } from 'react';
import { ariaDescribedByIds, enumOptionsIndexForValue, enumOptionsValueForIndex, optionId, } from '@rjsf/utils';
import { Radio, Flex } from '@mantine/core';
import { cleanupOptions } from '../utils';
/** The `RadioWidget` is a widget for rendering a radio group.
 *  It is typically used with a string property constrained with enum options.
 *
 * @param props - The `WidgetProps` for this component
 */
export default function RadioWidget(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 && target.value, enumOptions, emptyValue));
        }
    }, [onBlur, id, enumOptions, emptyValue]);
    const handleFocus = useCallback(({ target }) => {
        if (onFocus) {
            onFocus(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
        }
    }, [onFocus, id, enumOptions, emptyValue]);
    const selected = enumOptionsIndexForValue(value, enumOptions);
    return (_jsx(Radio.Group, { id: id, name: id, value: selected, label: !hideLabel ? label : undefined, 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(Radio, { id: optionId(id, i), 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 }));
}
//# sourceMappingURL=RadioWidget.js.map