@open-formulieren/formio-builder/lib/esm/components/formio/textfield.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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import clsx from 'clsx';
import { Field, useFormikContext } from 'formik';
import { useContext, useRef } from 'react';
import { RenderContext } from '../../context';
import CharCount from '../../utils/charcount';
import { ErrorList, useValidationErrors } from '../../utils/errors';
import { applyInputMask } from '../../utils/inputmask';
import Component from './component';
import Description from './description';
import { withMultiple } from './multiple';
export const TextField = (_a) => {
    var { name, label, required = false, tooltip = '', description = '', showCharCount = false, inputMask, onChange, childrenAfterField } = _a, props = __rest(_a, ["name", "label", "required", "tooltip", "description", "showCharCount", "inputMask", "onChange", "childrenAfterField"]);
    const { getFieldProps, getFieldMeta } = useFormikContext();
    const { value, onChange: formikOnChange } = getFieldProps(name);
    const { touched } = getFieldMeta(name);
    const { errors, hasErrors } = useValidationErrors(name);
    // const [{value}, {touched}] = useField<string | undefined>(name);
    const inputRef = useRef(null);
    const { bareInput } = useContext(RenderContext);
    const htmlId = `editform-${name}`;
    if (value === undefined && props.value === undefined) {
        props = Object.assign(Object.assign({}, props), { value: '' });
    }
    // XXX: this is only accepted in the form builder to get to (close to) vanilla form
    // builder feature parity - setting the value with mask placeholders is bad for
    // accessibility.
    //
    // It also turns out to be too much effort to get the masking working for preview
    // purposes, so that is deliberately "not working".
    if (!props.value && inputMask && !props.placeholder) {
        props.placeholder = applyInputMask('', inputMask);
    }
    const inputField = (_jsxs(_Fragment, { children: [_jsx(Field, Object.assign({ innerRef: inputRef, name: name, id: htmlId, as: "input", type: "text", className: clsx('form-control', { 'is-invalid': hasErrors }), "data-testid": `input-${name}`, onChange: (event) => {
                    formikOnChange(event);
                    onChange === null || onChange === void 0 ? void 0 : onChange(event);
                } }, props)), childrenAfterField] }));
    const hasFocus = inputRef.current === document.activeElement;
    const charCount = showCharCount && (touched || hasFocus) && value && (_jsx(CharCount, { value: value, maxLength: props.maxLength }));
    // 'bare input' is actually a little bit more than just the input, looking at the
    // vanillay formio implementation.
    if (bareInput) {
        return (_jsxs(_Fragment, { children: [inputField, charCount, _jsx(ErrorList, { errors: errors })] }));
    }
    // default-mode, wrapping the field with label, description etc.
    return (_jsxs(Component, Object.assign({ type: "textfield", field: name, required: required, htmlId: htmlId, label: label, tooltip: tooltip }, { children: [_jsx("div", { children: inputField }), charCount, description && _jsx(Description, { text: description })] })));
};
// make the TextField component 'multiple' capable
export const TextFieldMultiple = withMultiple(TextField, '');
export default TextFieldMultiple;