@teknim/rjsf-mantine/lib/widgets/RangeWidget.js

Mantine theme, fields and widgets for react-jsonschema-form

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback } from 'react';
import { ariaDescribedByIds, rangeSpec, titleId, } from '@rjsf/utils';
import { Slider, Input } from '@mantine/core';
import { cleanupOptions } from '../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 { id, name, value, required, disabled, readonly, autofocus, label, hideLabel, rawErrors, options, onChange, onBlur, onFocus, schema, } = props;
    const themeProps = cleanupOptions(options);
    const { min, max, step } = rangeSpec(schema);
    const handleChange = useCallback((nextValue) => {
        if (!disabled && !readonly && onChange) {
            onChange(nextValue);
        }
    }, [onChange, disabled, readonly]);
    const handleBlur = () => onBlur && onBlur(id, value);
    const handleFocus = () => onFocus && onFocus(id, value);
    return (_jsxs(_Fragment, { children: [!hideLabel && !!label && (_jsx(Input.Label, { id: titleId(id), required: required, children: label })), (options === null || options === void 0 ? void 0 : options.description) && _jsx(Input.Description, { children: options.description }), _jsx(Slider, { id: id, name: name, value: value, max: max, min: min, step: step, disabled: disabled || readonly, autoFocus: autofocus, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, ...themeProps, "aria-describedby": ariaDescribedByIds(id) }), rawErrors &&
                (rawErrors === null || rawErrors === void 0 ? void 0 : rawErrors.length) > 0 &&
                rawErrors.map((error, index) => (_jsx(Input.Error, { children: error }, `range-widget-input-errors-${index}`)))] }));
}
//# sourceMappingURL=RangeWidget.js.map