UNPKG

@rjsf/mui

Version:

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

22 lines 1.61 kB
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime"; import FormLabel from '@mui/material/FormLabel'; import Slider from '@mui/material/Slider'; import { ariaDescribedByIds, labelValue, rangeSpec, } from '@rjsf/utils'; import { getMuiProps } from '../util.js'; /** The `RangeWidget` component uses the `BaseInputTemplate` changing the type to `range` and wrapping the result * in a div, with the value along side it. * * @param props - The `WidgetProps` for this component */ export default function RangeWidget(props) { const { value, readonly, disabled, onBlur, onFocus, options, schema, onChange, required, label, hideLabel, id } = props; const sliderProps = { value, label, id, name: id, ...rangeSpec(schema) }; const _onChange = (_, value) => { onChange(value !== null && value !== void 0 ? value : options.emptyValue); }; const _onBlur = ({ target }) => onBlur(id, target && target.value); const _onFocus = ({ target }) => onFocus(id, target && target.value); const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(options); return (_jsxs(_Fragment, { children: [labelValue(_jsx(FormLabel, { required: required, htmlFor: id, children: label || undefined }), hideLabel), _jsx(Slider, { disabled: disabled || readonly, onChange: _onChange, onBlur: _onBlur, onFocus: _onFocus, valueLabelDisplay: 'auto', ...otherMuiProps, ...muiSlotProps === null || muiSlotProps === void 0 ? void 0 : muiSlotProps.slider, ...sliderProps, "aria-describedby": ariaDescribedByIds(id) })] })); } //# sourceMappingURL=RangeWidget.js.map