UNPKG

@open-formulieren/formio-builder

Version:

An opinionated Formio webform builder for Open Forms

49 lines (48 loc) 3.02 kB
"use strict"; 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.DateFieldMultiple = exports.DateField = 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 errors_1 = require("../../utils/errors"); const component_1 = __importDefault(require("./component")); const description_1 = __importDefault(require("./description")); const multiple_1 = require("./multiple"); const DateField = (_a) => { var { name, label, required = false, tooltip = '', description = '' } = _a, props = __rest(_a, ["name", "label", "required", "tooltip", "description"]); const { getFieldProps } = (0, formik_1.useFormikContext)(); const { bareInput } = (0, react_1.useContext)(context_1.RenderContext); const { errors, hasErrors } = (0, errors_1.useValidationErrors)(name); const htmlId = `editform-${name}`; const { value } = getFieldProps(name); // let's not bother with date pickers - use the native browser date input instead. const inputField = ((0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, id: htmlId, as: "input", type: "date", className: (0, clsx_1.default)('form-control', { 'is-invalid': hasErrors }), "data-testid": `input-${name}`, // text fallback - use ISO-8601 pattern: "\\d{4}-\\d{2}-\\d{2}", value: value !== null && value !== void 0 ? value : '' }, props))); // '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, (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: "date", field: name, required: required, htmlId: htmlId, label: label, tooltip: tooltip }, { children: [(0, jsx_runtime_1.jsx)("div", { children: inputField }), description && (0, jsx_runtime_1.jsx)(description_1.default, { text: description })] }))); }; exports.DateField = DateField; exports.DateFieldMultiple = (0, multiple_1.withMultiple)(exports.DateField, ''); exports.default = exports.DateFieldMultiple;