@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
42 lines (41 loc) • 2.48 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;
};
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import clsx from 'clsx';
import { Field, useFormikContext } from 'formik';
import { useContext } from 'react';
import { RenderContext } from '../../context';
import { ErrorList, useValidationErrors } from '../../utils/errors';
import Component from './component';
import Description from './description';
import { withMultiple } from './multiple';
export const DateField = (_a) => {
var { name, label, required = false, tooltip = '', description = '' } = _a, props = __rest(_a, ["name", "label", "required", "tooltip", "description"]);
const { getFieldProps } = useFormikContext();
const { bareInput } = useContext(RenderContext);
const { errors, hasErrors } = 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 = (_jsx(Field, Object.assign({ name: name, id: htmlId, as: "input", type: "date", className: clsx('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 (_jsxs(_Fragment, { children: [inputField, _jsx(ErrorList, { errors: errors })] }));
}
// default-mode, wrapping the field with label, description etc.
return (_jsxs(Component, Object.assign({ type: "date", field: name, required: required, htmlId: htmlId, label: label, tooltip: tooltip }, { children: [_jsx("div", { children: inputField }), description && _jsx(Description, { text: description })] })));
};
export const DateFieldMultiple = withMultiple(DateField, '');
export default DateFieldMultiple;