UNPKG

@rjsf/mui

Version:

Material UI 7 theme, fields and widgets for react-jsonschema-form

31 lines 2.95 kB
import { createElement as _createElement } from "react"; import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime"; import FormControlLabel from '@mui/material/FormControlLabel'; import FormLabel from '@mui/material/FormLabel'; import Radio from '@mui/material/Radio'; import RadioGroup from '@mui/material/RadioGroup'; import { ariaDescribedByIds, enumOptionSelectedValue, enumOptionValueDecoder, enumOptionValueEncoder, getOptionValueFormat, labelValue, optionId, } from '@rjsf/utils'; import { getMuiProps } from '../util.js'; /** 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, htmlName, options, value, required, disabled, readonly, label, hideLabel, onChange, onBlur, onFocus } = props; const { enumOptions, enumDisabled, emptyValue } = options; const optionValueFormat = getOptionValueFormat(options); const _onChange = (_, value) => onChange(enumOptionValueDecoder(value, enumOptions, optionValueFormat, emptyValue)); const _onBlur = ({ target }) => onBlur(id, enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue)); const _onFocus = ({ target }) => onFocus(id, enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue)); const row = options ? options.inline : false; const selectValue = enumOptionSelectedValue(value, enumOptions, false, optionValueFormat, ''); const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(options); return (_jsxs(_Fragment, { children: [labelValue(_jsx(FormLabel, { required: required, htmlFor: id, children: label || undefined }), hideLabel), _jsx(RadioGroup, { ...otherMuiProps, ...muiSlotProps === null || muiSlotProps === void 0 ? void 0 : muiSlotProps.radioGroup, id: id, name: htmlName || id, value: selectValue, row: row, onChange: _onChange, onBlur: _onBlur, onFocus: _onFocus, "aria-describedby": ariaDescribedByIds(id), children: Array.isArray(enumOptions) && enumOptions.map((option, index) => { const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1; const radio = (_createElement(FormControlLabel, { ...muiSlotProps === null || muiSlotProps === void 0 ? void 0 : muiSlotProps.formControlLabel, control: _jsx(Radio, { ...muiSlotProps === null || muiSlotProps === void 0 ? void 0 : muiSlotProps.radio, name: htmlName || id, id: optionId(id, index), color: 'primary' }), label: option.label, value: enumOptionValueEncoder(option.value, index, optionValueFormat), key: index, disabled: disabled || itemDisabled || readonly })); return radio; }) })] })); } //# sourceMappingURL=RadioWidget.js.map