@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
51 lines (50 loc) • 3.8 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.NumberField = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const clsx_1 = __importDefault(require("clsx"));
const formik_1 = require("formik");
const errors_1 = require("../../utils/errors");
const affix_1 = __importDefault(require("./affix"));
const component_1 = __importDefault(require("./component"));
const description_1 = __importDefault(require("./description"));
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 } = (0, formik_1.useFormikContext)();
const { hasErrors } = (0, errors_1.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 ((0, jsx_runtime_1.jsxs)(component_1.default, Object.assign({ type: "number", field: name, required: required, htmlId: htmlId, label: label, tooltip: tooltip }, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Wrapper, Object.assign({ suffix: suffix, prefix: prefix }, { children: (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, id: htmlId, as: "input", type: "number", className: (0, clsx_1.default)('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 && (0, jsx_runtime_1.jsx)(description_1.default, { text: description })] })));
};
exports.NumberField = NumberField;
const Wrapper = ({ prefix, suffix, children }) => {
if (!(prefix || suffix))
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "input-group" }, { children: [prefix && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "input-group-prepend" }, { children: (0, jsx_runtime_1.jsx)(affix_1.default, Object.assign({ className: "input-group-text" }, { children: prefix })) }))), children, suffix && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "input-group-append" }, { children: (0, jsx_runtime_1.jsx)(affix_1.default, Object.assign({ className: "input-group-text" }, { children: suffix })) })))] })));
};
exports.default = exports.NumberField;