@rjsf/fluent-ui/lib/RangeWidget/RangeWidget.js

Fluent UI theme, fields and widgets for react-jsonschema-form

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Slider } from '@fluentui/react';
import { ariaDescribedByIds, labelValue, rangeSpec, } from '@rjsf/utils';
import _pick from 'lodash/pick';
import FluentLabel from '../FluentLabel/FluentLabel.js';
// Keys of ISliderProps from @fluentui/react
const allowedProps = [
    'componentRef',
    'styles?',
    'theme',
    'label',
    'defaultValue',
    'value',
    'min',
    'max',
    'step',
    'showValue',
    'onChange',
    'ariaLabel',
    'ariaValueText',
    'vertical',
    'disabled',
    'snapToStep',
    'className',
    'buttonProps',
    'valueFormat',
    'originFromZero',
];
export default function RangeWidget({ value, readonly, disabled, options, schema, onChange, required, label, hideLabel, id, }) {
    const sliderProps = { value, label, id, ...rangeSpec(schema) };
    const _onChange = (value) => onChange(value);
    const uiProps = { id, ..._pick(options.props || {}, allowedProps) };
    return (_jsxs(_Fragment, { children: [labelValue(_jsx(FluentLabel, { label: label || undefined, required: required, id: id }), hideLabel), _jsx(Slider, { disabled: disabled || readonly, min: sliderProps.min, max: sliderProps.max, step: sliderProps.step, onChange: _onChange, snapToStep: true, ...uiProps, "aria-describedby": ariaDescribedByIds(id) })] }));
}
//# sourceMappingURL=RangeWidget.js.map