@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
59 lines (58 loc) • 3.49 kB
JavaScript
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, useLayoutEffect, useRef } from 'react';
import { RenderContext } from '../../context';
import CharCount from '../../utils/charcount';
import { ErrorList, useValidationErrors } from '../../utils/errors';
import Component from './component';
import Description from './description';
import { withMultiple } from './multiple';
export const TextArea = (_a) => {
var { name, label, required = false, tooltip = '', description = '', showCharCount = false, autoExpand = false, onChange } = _a, props = __rest(_a, ["name", "label", "required", "tooltip", "description", "showCharCount", "autoExpand", "onChange"]);
const { getFieldProps, getFieldMeta } = useFormikContext();
const { value, onChange: formikOnChange } = getFieldProps(name);
const { touched } = getFieldMeta(name);
const { errors, hasErrors } = useValidationErrors(name);
const inputRef = useRef(null);
const { bareInput } = useContext(RenderContext);
useLayoutEffect(() => {
const node = inputRef.current;
if (autoExpand && node) {
const computedStyle = window.getComputedStyle(node);
node.style.height = 'inherit';
node.style.height = `calc(${node.scrollHeight}px + ${computedStyle.borderTopWidth} + ${computedStyle.borderBottomWidth})`;
}
}, [autoExpand, inputRef, value]);
const htmlId = `editform-${name}`;
if (value === undefined && props.value === undefined) {
props = Object.assign(Object.assign({}, props), { value: '' });
}
const inputField = (_jsx(Field, Object.assign({ innerRef: inputRef, name: name, id: htmlId, as: "textarea", type: "textarea", 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)));
const hasFocus = inputRef.current === document.activeElement;
const charCount = showCharCount && (touched || hasFocus) && value && _jsx(CharCount, { value: value });
// '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: "textarea", field: name, required: required, htmlId: htmlId, label: label, tooltip: tooltip }, { children: [_jsx("div", { children: inputField }), charCount, description && _jsx(Description, { text: description })] })));
};
// make the TextArea component 'multiple' capable
export const TextAreaMultiple = withMultiple(TextArea, '');
export default TextAreaMultiple;