@rjsf/antd
Version:
Ant Design theme, fields and widgets for react-jsonschema-form
26 lines • 1.6 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { Slider } from 'antd';
import { ariaDescribedByIds, rangeSpec, } from '@rjsf/utils';
/** 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 { autofocus, disabled, formContext, id, onBlur, onChange, onFocus, options, placeholder, readonly, schema, value, } = props;
const { readonlyAsDisabled = true } = formContext;
const { min, max, step } = rangeSpec(schema);
const emptyValue = options.emptyValue || '';
const handleChange = (nextValue) => onChange(nextValue === '' ? emptyValue : nextValue);
const handleBlur = () => onBlur(id, value);
const handleFocus = () => onFocus(id, value);
// Antd's typescript definitions do not contain the following props that are actually necessary and, if provided,
// they are used, so hacking them in via by spreading `extraProps` on the component to avoid typescript errors
const extraProps = {
placeholder,
onBlur: !readonly ? handleBlur : undefined,
onFocus: !readonly ? handleFocus : undefined,
};
return (_jsx(Slider, { autoFocus: autofocus, disabled: disabled || (readonlyAsDisabled && readonly), id: id, max: max, min: min, onChange: !readonly ? handleChange : undefined, range: false, step: step, value: value, ...extraProps, "aria-describedby": ariaDescribedByIds(id) }));
}
//# sourceMappingURL=index.js.map