@rjsf/mui
Version:
Material UI 7 theme, fields and widgets for react-jsonschema-form
42 lines • 3.51 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import MenuItem from '@mui/material/MenuItem';
import TextField from '@mui/material/TextField';
import { ariaDescribedByIds, enumOptionSelectedValue, enumOptionValueDecoder, enumOptionValueEncoder, getOptionValueFormat, labelValue, } from '@rjsf/utils';
import { getMuiProps } from '../util.js';
/** 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 { schema, id, name, // remove this from textFieldProps
htmlName, options, label, hideLabel, required, disabled, placeholder, readonly, value, multiple, autofocus, onChange, onBlur, onFocus, errorSchema, rawErrors = [], registry, uiSchema, hideError, ...textFieldProps } = props;
const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
const optionValueFormat = getOptionValueFormat(options);
const isMultiple = typeof multiple === 'undefined' ? false : !!multiple;
const emptyValue = isMultiple ? [] : '';
const isEmpty = typeof value === 'undefined' || (isMultiple && value.length < 1) || (!isMultiple && value === emptyValue);
const _onChange = ({ target: { value } }) => onChange(enumOptionValueDecoder(value, enumOptions, optionValueFormat, optEmptyVal));
const _onBlur = ({ target }) => onBlur(id, enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, optEmptyVal));
const _onFocus = ({ target }) => onFocus(id, enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, optEmptyVal));
const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(options);
const { InputLabelProps, SelectProps, autocomplete, ...textFieldRemainingProps } = textFieldProps;
const showPlaceholderOption = !isMultiple && schema.default === undefined;
return (_jsxs(TextField, { id: id, name: htmlName || id, label: labelValue(label || undefined, hideLabel, undefined), value: enumOptionSelectedValue(value, enumOptions, isMultiple, optionValueFormat, emptyValue), required: required, disabled: disabled || readonly, autoFocus: autofocus, autoComplete: autocomplete, placeholder: placeholder, error: rawErrors.length > 0, onChange: _onChange, onBlur: _onBlur, onFocus: _onFocus, ...{ ...otherMuiProps, ...textFieldRemainingProps }, select // Apply this and the following props after the potential overrides defined in textFieldProps
: true, slotProps: {
...muiSlotProps,
inputLabel: {
...muiSlotProps === null || muiSlotProps === void 0 ? void 0 : muiSlotProps.inputLabel,
shrink: !isEmpty,
},
select: {
...muiSlotProps === null || muiSlotProps === void 0 ? void 0 : muiSlotProps.select,
multiple,
},
}, "aria-describedby": ariaDescribedByIds(id), children: [showPlaceholderOption && _jsx(MenuItem, { value: '', children: placeholder }), Array.isArray(enumOptions) &&
enumOptions.map(({ value, label }, i) => {
const disabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1;
return (_jsx(MenuItem, { value: enumOptionValueEncoder(value, i, optionValueFormat), disabled: disabled, children: label }, i));
})] }));
}
//# sourceMappingURL=SelectWidget.js.map