@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
66 lines (65 loc) • 4.09 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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TextAreaMultiple = exports.TextArea = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const clsx_1 = __importDefault(require("clsx"));
const formik_1 = require("formik");
const react_1 = require("react");
const context_1 = require("../../context");
const charcount_1 = __importDefault(require("../../utils/charcount"));
const errors_1 = require("../../utils/errors");
const component_1 = __importDefault(require("./component"));
const description_1 = __importDefault(require("./description"));
const multiple_1 = require("./multiple");
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 } = (0, formik_1.useFormikContext)();
const { value, onChange: formikOnChange } = getFieldProps(name);
const { touched } = getFieldMeta(name);
const { errors, hasErrors } = (0, errors_1.useValidationErrors)(name);
const inputRef = (0, react_1.useRef)(null);
const { bareInput } = (0, react_1.useContext)(context_1.RenderContext);
(0, react_1.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 = ((0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ innerRef: inputRef, name: name, id: htmlId, as: "textarea", type: "textarea", className: (0, clsx_1.default)('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 && (0, jsx_runtime_1.jsx)(charcount_1.default, { value: value });
// 'bare input' is actually a little bit more than just the input, looking at the
// vanillay formio implementation.
if (bareInput) {
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [inputField, charCount, (0, jsx_runtime_1.jsx)(errors_1.ErrorList, { errors: errors })] }));
}
// default-mode, wrapping the field with label, description etc.
return ((0, jsx_runtime_1.jsxs)(component_1.default, Object.assign({ type: "textarea", field: name, required: required, htmlId: htmlId, label: label, tooltip: tooltip }, { children: [(0, jsx_runtime_1.jsx)("div", { children: inputField }), charCount, description && (0, jsx_runtime_1.jsx)(description_1.default, { text: description })] })));
};
exports.TextArea = TextArea;
// make the TextArea component 'multiple' capable
exports.TextAreaMultiple = (0, multiple_1.withMultiple)(exports.TextArea, '');
exports.default = exports.TextAreaMultiple;