@open-formulieren/formio-builder/lib/esm/components/formio/number.js

An opinionated Formio webform builder for Open Forms

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import clsx from 'clsx';
import { Field, useFormikContext } from 'formik';
import { useValidationErrors } from '../../utils/errors';
import Affix from './affix';
import Component from './component';
import Description from './description';
export const NumberField = (_a) => {
    var { name, label, required = false, tooltip = '', description = '', prefix = '', suffix = '' } = _a, props = __rest(_a, ["name", "label", "required", "tooltip", "description", "prefix", "suffix"]);
    const { getFieldProps, getFieldHelpers } = useFormikContext();
    const { hasErrors } = useValidationErrors(name);
    // ensure that the empty string is normalized to 'undefined' for number fields.
    const { value, onChange: formikOnChange } = getFieldProps(name);
    const { setValue } = getFieldHelpers(name);
    const htmlId = `editform-${name}`;
    return (_jsxs(Component, Object.assign({ type: "number", field: name, required: required, htmlId: htmlId, label: label, tooltip: tooltip }, { children: [_jsx("div", { children: _jsx(Wrapper, Object.assign({ suffix: suffix, prefix: prefix }, { children: _jsx(Field, Object.assign({ name: name, id: htmlId, as: "input", type: "number", className: clsx('form-control', { 'is-invalid': hasErrors }), "data-testid": `input-${name}` }, props, { value: value !== null && value !== void 0 ? value : '', onChange: (event) => {
                            const { value } = event.target;
                            formikOnChange(event);
                            // normalize to be *not* a string in the state. React & browsers follow the
                            // HTML which states that the value must be an empty string for empty inputs,
                            // even if it's a number input.
                            if (value === '') {
                                setValue(undefined);
                            }
                        } })) })) }), description && _jsx(Description, { text: description })] })));
};
const Wrapper = ({ prefix, suffix, children }) => {
    if (!(prefix || suffix))
        return _jsx(_Fragment, { children: children });
    return (_jsxs("div", Object.assign({ className: "input-group" }, { children: [prefix && (_jsx("div", Object.assign({ className: "input-group-prepend" }, { children: _jsx(Affix, Object.assign({ className: "input-group-text" }, { children: prefix })) }))), children, suffix && (_jsx("div", Object.assign({ className: "input-group-append" }, { children: _jsx(Affix, Object.assign({ className: "input-group-text" }, { children: suffix })) })))] })));
};
export default NumberField;