@aokiapp/rjsf-mantine-theme/lib/widgets/SelectWidget.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, labelValue, } from '@rjsf/utils';
import { MultiSelect, NativeSelect } from '@mantine/core';
import { createErrors } from '../utils/createErrors';
import { useFieldContext } from '../templates/FieldTemplate';
/** The `SelectWidget` is a widget for rendering dropdowns.
 *  It is typically used with string properties constrained with enum options.
 *
 * @param props - The `WidgetProps` for this component
 */
function SelectWidget({ id, options, value, required, disabled, readonly, label, hideLabel, rawErrors, multiple = false, autofocus = false, onChange, onBlur, onFocus, hideError, placeholder, }) {
    const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
    const selectedIndices = enumOptionsIndexForValue(value, enumOptions, multiple);
    // Bypassing null check here because enumOptionsValueForIndex will falls into emptyValue if matching fails
    const handleFocus = useCallback(() => {
        return onFocus(id, enumOptionsValueForIndex(selectedIndices, enumOptions, optEmptyVal));
    }, [onFocus, id, selectedIndices, enumOptions, optEmptyVal]);
    const handleBlur = useCallback(() => {
        return onBlur(id, enumOptionsValueForIndex(selectedIndices, enumOptions, optEmptyVal));
    }, [onBlur, id, selectedIndices, enumOptions, optEmptyVal]);
    const handleChange = useCallback((value) => {
        return onChange(enumOptionsValueForIndex(value, enumOptions, optEmptyVal));
    }, [onChange, enumOptions, optEmptyVal]);
    const { description } = useFieldContext();
    if (multiple) {
        return (_jsx(MultiSelect, { clearable: !required, data: (enumOptions || []).map(({ value, label }, i) => {
                const disabled = enumDisabled && enumDisabled.indexOf(value) !== -1;
                return { value: String(i), label, disabled };
            }), description: description, disabled: disabled || readonly, error: createErrors(rawErrors, hideError), label: labelValue(label, hideLabel, false), autoFocus: autofocus, required: required, searchable: true, value: selectedIndices, onChange: handleChange, onDropdownClose: handleBlur, onDropdownOpen: handleFocus, "aria-describedby": ariaDescribedByIds(id), placeholder: placeholder, className: 'armt-widget-select armt-widget-select-multiple' }));
    }
    else {
        const valuedData = (enumOptions || []).map(({ value, label }, i) => {
            const disabled = enumDisabled && enumDisabled.indexOf(value) !== -1;
            return { value: String(i), label, disabled };
        });
        const data = [{ value: '-1', label: placeholder || '' }, ...valuedData];
        return (_jsx(NativeSelect, { data: data, description: description, disabled: disabled || readonly, error: createErrors(rawErrors, hideError), label: labelValue(label, hideLabel, false), autoFocus: autofocus, required: required, value: selectedIndices !== null && selectedIndices !== void 0 ? selectedIndices : '-1', onChange: (event) => handleChange(event.currentTarget.value), onFocus: handleFocus, onBlur: handleBlur, "aria-describedby": ariaDescribedByIds(id), className: 'armt-widget-select armt-widget-select-single' }));
    }
}
export default SelectWidget;
//# sourceMappingURL=SelectWidget.js.map