@rjsf/fluent-ui/lib/UpDownWidget/UpDownWidget.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 { SpinButton } from '@fluentui/react';
import { ariaDescribedByIds, labelValue, rangeSpec, TranslatableString, } from '@rjsf/utils';
import _pick from 'lodash/pick';
import FluentLabel from '../FluentLabel/FluentLabel.js';
// Keys of ISpinButtonProps from @fluentui/react
const allowedProps = [
    'ariaDescribedBy',
    'ariaLabel',
    'ariaPositionInSet',
    'ariaSetSize',
    'ariaValueNow',
    'ariaValueText',
    'className',
    'componentRef',
    'decrementButtonAriaLabel',
    'decrementButtonIcon',
    'defaultValue',
    'disabled',
    'downArrowButtonStyles',
    /* Backward compatibility with fluentui v7 */
    'getClassNames',
    'iconButtonProps',
    'iconProps',
    'incrementButtonAriaLabel',
    'incrementButtonIcon',
    'inputProps',
    'keytipProps',
    'label',
    'labelPosition',
    'max',
    'min',
    'onBlur',
    'onDecrement',
    'onFocus',
    'onIncrement',
    'onValidate',
    'precision',
    'step',
    'styles',
    'theme',
    'title',
    'upArrowButtonStyles',
    'value',
];
export default function UpDownWidget({ id, required, readonly, disabled, label, hideLabel, value, onChange, onBlur, onFocus, options, schema, registry, }) {
    const { translateString } = registry;
    const _onChange = (ev, newValue) => {
        if (newValue) {
            onChange(Number(newValue));
        }
        else if ('value' in ev.target) {
            /* Backward compatibility with fluentui v7 */
            onChange(Number(ev.target.value));
        }
    };
    let { min, max, step } = rangeSpec(schema);
    if (min === undefined) {
        min = -1 * Infinity;
    }
    if (max === undefined) {
        max = Infinity;
    }
    if (step === undefined) {
        step = 1;
    }
    const _onIncrement = (value) => {
        if (Number(value) + step <= max) {
            onChange(Number(value) + step);
        }
    };
    const _onDecrement = (value) => {
        if (Number(value) - step >= min) {
            onChange(Number(value) - step);
        }
    };
    const _onBlur = ({ target }) => onBlur(id, target && target.value);
    const _onFocus = ({ target }) => onFocus(id, target && target.value);
    const uiProps = _pick(options.props || {}, allowedProps);
    return (_jsxs(_Fragment, { children: [labelValue(_jsx(FluentLabel, { label: label || undefined, required: required, id: id }), hideLabel), _jsx(SpinButton, { id: id, min: min, max: max, step: step, incrementButtonAriaLabel: translateString(TranslatableString.IncrementAriaLabel), decrementButtonAriaLabel: translateString(TranslatableString.DecrementAriaLabel), disabled: disabled || readonly, value: value || value === 0 ? value : '', onBlur: _onBlur, onFocus: _onFocus, onChange: _onChange, onIncrement: _onIncrement, onDecrement: _onDecrement, ...uiProps, "aria-describedby": ariaDescribedByIds(id) })] }));
}
//# sourceMappingURL=UpDownWidget.js.map