@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
69 lines (68 loc) • 4.46 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.TextFieldMultiple = exports.TextField = 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 inputmask_1 = require("../../utils/inputmask");
const component_1 = __importDefault(require("./component"));
const description_1 = __importDefault(require("./description"));
const multiple_1 = require("./multiple");
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 } = (0, formik_1.useFormikContext)();
const { value, onChange: formikOnChange } = getFieldProps(name);
const { touched } = getFieldMeta(name);
const { errors, hasErrors } = (0, errors_1.useValidationErrors)(name);
// const [{value}, {touched}] = useField<string | undefined>(name);
const inputRef = (0, react_1.useRef)(null);
const { bareInput } = (0, react_1.useContext)(context_1.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 = (0, inputmask_1.applyInputMask)('', inputMask);
}
const inputField = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ innerRef: inputRef, name: name, id: htmlId, as: "input", type: "text", 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)), childrenAfterField] }));
const hasFocus = inputRef.current === document.activeElement;
const charCount = showCharCount && (touched || hasFocus) && value && ((0, jsx_runtime_1.jsx)(charcount_1.default, { 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 ((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: "textfield", 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.TextField = TextField;
// make the TextField component 'multiple' capable
exports.TextFieldMultiple = (0, multiple_1.withMultiple)(exports.TextField, '');
exports.default = exports.TextFieldMultiple;