@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
50 lines (49 loc) • 3.17 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.DateTimeFieldMultiple = exports.DateTimeField = 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");
// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local
const DateTimeField = (_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: "datetime-local", 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}T\\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: "datetime", 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.DateTimeField = DateTimeField;
exports.DateTimeFieldMultiple = (0, multiple_1.withMultiple)(exports.DateTimeField, '');
exports.default = exports.DateTimeFieldMultiple;