@teknim/rjsf-mantine
Version:
Mantine theme, fields and widgets for react-jsonschema-form
45 lines • 2.79 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback, useMemo } from 'react';
import { ariaDescribedByIds, enumOptionsIndexForValue, enumOptionsValueForIndex, labelValue, } from '@rjsf/utils';
import { Select, MultiSelect } from '@mantine/core';
import { cleanupOptions } from '../utils';
/** 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
*/
export default function SelectWidget(props) {
const { id, value, placeholder, required, disabled, readonly, autofocus, label, hideLabel, multiple, rawErrors, options, onChange, onBlur, onFocus, } = props;
const { enumOptions, enumDisabled, 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 selectedIndexes = enumOptionsIndexForValue(value, enumOptions, multiple);
const selectOptions = useMemo(() => {
if (Array.isArray(enumOptions)) {
return enumOptions.map((option, index) => ({
key: String(index),
value: String(index),
label: option.label,
disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1,
}));
}
return [];
}, [enumDisabled, enumOptions]);
const Component = multiple ? MultiSelect : Select;
return (_jsx(Component, { id: id, name: id, label: labelValue(label || undefined, hideLabel, false), data: selectOptions, value: multiple ? selectedIndexes : selectedIndexes, onChange: !readonly ? handleChange : undefined, onBlur: !readonly ? handleBlur : undefined, onFocus: !readonly ? handleFocus : undefined, autoFocus: autofocus, placeholder: placeholder, disabled: disabled || readonly, required: required, error: rawErrors && rawErrors.length > 0 ? rawErrors.join('\n') : undefined, searchable: true, ...themeProps, "aria-describedby": ariaDescribedByIds(id), comboboxProps: { withinPortal: false } }));
}
//# sourceMappingURL=SelectWidget.js.map