@rjsf/mui
Version:
Material UI 5 theme, fields and widgets for react-jsonschema-form
35 lines • 2.98 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import MenuItem from '@mui/material/MenuItem/index.js';
import TextField from '@mui/material/TextField/index.js';
import { ariaDescribedByIds, enumOptionsIndexForValue, enumOptionsValueForIndex, labelValue, } from '@rjsf/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({ schema, id, name, // remove this from textFieldProps
options, label, hideLabel, required, disabled, placeholder, readonly, value, multiple, autofocus, onChange, onBlur, onFocus, errorSchema, rawErrors = [], registry, uiSchema, hideError, formContext, ...textFieldProps }) {
const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
multiple = typeof multiple === 'undefined' ? false : !!multiple;
const emptyValue = multiple ? [] : '';
const isEmpty = typeof value === 'undefined' || (multiple && value.length < 1) || (!multiple && value === emptyValue);
const _onChange = ({ target: { value } }) => onChange(enumOptionsValueForIndex(value, enumOptions, optEmptyVal));
const _onBlur = ({ target }) => onBlur(id, enumOptionsValueForIndex(target && target.value, enumOptions, optEmptyVal));
const _onFocus = ({ target }) => onFocus(id, enumOptionsValueForIndex(target && target.value, enumOptions, optEmptyVal));
const selectedIndexes = enumOptionsIndexForValue(value, enumOptions, multiple);
const { InputLabelProps, SelectProps, autocomplete, ...textFieldRemainingProps } = textFieldProps;
const showPlaceholderOption = !multiple && schema.default === undefined;
return (_jsxs(TextField, { id: id, name: id, label: labelValue(label || undefined, hideLabel, undefined), value: !isEmpty && typeof selectedIndexes !== 'undefined' ? selectedIndexes : emptyValue, required: required, disabled: disabled || readonly, autoFocus: autofocus, autoComplete: autocomplete, placeholder: placeholder, error: rawErrors.length > 0, onChange: _onChange, onBlur: _onBlur, onFocus: _onFocus, ...textFieldRemainingProps, select // Apply this and the following props after the potential overrides defined in textFieldProps
: true, InputLabelProps: {
...InputLabelProps,
shrink: !isEmpty,
}, SelectProps: {
...SelectProps,
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: String(i), disabled: disabled, children: label }, i));
})] }));
}
//# sourceMappingURL=SelectWidget.js.map