@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
108 lines (106 loc) • 9.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SubcomponentValidation = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const formio_1 = require("../../components/formio");
const react_1 = require("react");
const react_intl_1 = require("react-intl");
const builder_1 = require("../../components/builder");
const messages_1 = require("../../components/builder/messages");
const formio_2 = require("../../components/formio");
const formio_3 = require("../../components/formio");
const formio_4 = require("../../components/formio");
const context_1 = require("../../context");
const errors_1 = require("../../utils/errors");
const SubcomponentValidation = ({ prefix, component, label, tooltip, placeholder, }) => {
const { supportedLanguageCodes } = (0, react_1.useContext)(context_1.BuilderContext);
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(formio_1.TextField, { name: `${prefix}.${component}.validate.pattern`, label: label, tooltip: tooltip, placeholder: placeholder }), (0, jsx_runtime_1.jsxs)(formio_3.Tabs, { children: [(0, jsx_runtime_1.jsx)(formio_3.TabList, { children: supportedLanguageCodes.map(code => ((0, jsx_runtime_1.jsx)(formio_3.Tab, { children: code.toUpperCase() }, code))) }), supportedLanguageCodes.map(code => ((0, jsx_runtime_1.jsx)(formio_3.TabPanel, { children: (0, jsx_runtime_1.jsx)(formio_3.DataMap, { name: `${prefix}.${component}.translatedErrors.${code}`, keyLabel: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'OlPsaw', defaultMessage: [{ type: 0, value: "Error code" }] }), ariaLabelMessage: (0, react_intl_1.defineMessage)({ id: "hEVgKd", defaultMessage: [{ type: 0, value: "Error message for \"" }, { type: 1, value: "key" }, { type: 0, value: "\"" }] }), valueComponent: (0, jsx_runtime_1.jsx)(formio_1.TextField, { name: "message", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'k9tAyW', defaultMessage: [{ type: 0, value: "Error message" }] }) }) }) }, code)))] })] }));
};
exports.SubcomponentValidation = SubcomponentValidation;
const DeriveAddress = () => {
const intl = (0, react_intl_1.useIntl)();
const tooltip = intl.formatMessage({ id: "2sbkGI", defaultMessage: [{ type: 0, value: "When enabled, the street name and city are derived from the entered postcode and house number." }] });
return ((0, jsx_runtime_1.jsx)(formio_2.Checkbox, { name: "deriveAddress", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'toTZ0C', defaultMessage: [{ type: 0, value: "Derive address" }] }), tooltip: tooltip }));
};
const ColumnsLayout = () => {
const intl = (0, react_intl_1.useIntl)();
const singleColumn = intl.formatMessage({ id: "GsAN0n", defaultMessage: [{ type: 0, value: "Single column" }] });
const doubleColumn = intl.formatMessage({ id: "T2dCIS", defaultMessage: [{ type: 0, value: "Double column" }] });
return ((0, jsx_runtime_1.jsx)(formio_4.Select, { name: "layout", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'Tw9+0D', defaultMessage: [{ type: 0, value: "Layout" }] }), options: [
{ value: 'singleColumn', label: singleColumn },
{ value: 'doubleColumn', label: doubleColumn },
], isClearable: true }));
};
/**
* Form to configure a Formio 'address' type component.
*/
const EditForm = () => {
const intl = (0, react_intl_1.useIntl)();
const [isKeyManuallySetRef, generatedKey] = (0, builder_1.useDeriveComponentKey)();
const { hasAnyError } = (0, errors_1.useErrorChecker)();
builder_1.Validate.useManageValidatorsTranslations(['required']);
builder_1.Validate.useManageValidatorsTranslations(['pattern'], `openForms.components.postcode`);
builder_1.Validate.useManageValidatorsTranslations(['pattern'], `openForms.components.city`);
return ((0, jsx_runtime_1.jsxs)(formio_3.Tabs, { children: [(0, jsx_runtime_1.jsxs)(formio_3.TabList, { children: [(0, jsx_runtime_1.jsx)(builder_1.BuilderTabs.Basic, { hasErrors: hasAnyError('label', 'key', 'description', 'tooltip', 'hidden', 'clearOnHide', 'isSensitiveData', 'showInSummary', 'showInEmail', 'showInPDF') }), (0, jsx_runtime_1.jsx)(builder_1.BuilderTabs.Advanced, { hasErrors: hasAnyError('conditional') }), (0, jsx_runtime_1.jsx)(builder_1.BuilderTabs.Validation, { hasErrors: hasAnyError('validate') }), (0, jsx_runtime_1.jsx)(builder_1.BuilderTabs.Registration, { hasErrors: hasAnyError('registration') }), (0, jsx_runtime_1.jsx)(builder_1.BuilderTabs.Translations, { hasErrors: hasAnyError('openForms.translations') })] }), (0, jsx_runtime_1.jsxs)(formio_3.TabPanel, { children: [(0, jsx_runtime_1.jsx)(builder_1.Label, {}), (0, jsx_runtime_1.jsx)(builder_1.Key, { isManuallySetRef: isKeyManuallySetRef, generatedValue: generatedKey }), (0, jsx_runtime_1.jsx)(builder_1.Description, {}), (0, jsx_runtime_1.jsx)(builder_1.Tooltip, {}), (0, jsx_runtime_1.jsx)(builder_1.PresentationConfig, {}), (0, jsx_runtime_1.jsx)(ColumnsLayout, {}), (0, jsx_runtime_1.jsx)(DeriveAddress, {}), (0, jsx_runtime_1.jsx)(builder_1.Hidden, {}), (0, jsx_runtime_1.jsx)(builder_1.ClearOnHide, {}), (0, jsx_runtime_1.jsx)(builder_1.IsSensitiveData, {})] }), (0, jsx_runtime_1.jsx)(formio_3.TabPanel, { children: (0, jsx_runtime_1.jsx)(builder_1.SimpleConditional, {}) }), (0, jsx_runtime_1.jsxs)(formio_3.TabPanel, { children: [(0, jsx_runtime_1.jsx)(builder_1.Validate.Required, {}), (0, jsx_runtime_1.jsx)(builder_1.Validate.ValidatorPluginSelect, {}), (0, jsx_runtime_1.jsx)(builder_1.Validate.ValidationErrorTranslations, {}), (0, jsx_runtime_1.jsx)(formio_3.Panel, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'rW1edF', defaultMessage: [{ type: 0, value: "Postcode" }] }), tooltip: intl.formatMessage({ id: "0FD2pY", defaultMessage: [{ type: 0, value: "Validation for the postcode field" }] }), collapsible: true, initialCollapsed: true }, { children: (0, jsx_runtime_1.jsx)(exports.SubcomponentValidation, { prefix: "openForms.components", component: "postcode", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: '4DrI94', defaultMessage: [{ type: 0, value: "Regular expression for postcode" }] }), tooltip: intl.formatMessage({ id: "WxwqZJ", defaultMessage: [{ type: 0, value: "The regular expression pattern test that the postcode field value must pass before the form can be submitted." }] }), placeholder: intl.formatMessage({ id: "dD9O3Q", defaultMessage: [{ type: 0, value: "Regular expression for postcode" }] }) }) })), (0, jsx_runtime_1.jsx)(formio_3.Panel, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'fhVFUY', defaultMessage: [{ type: 0, value: "City" }] }), tooltip: intl.formatMessage({ id: "mck25o", defaultMessage: [{ type: 0, value: "Validation for the city field" }] }), collapsible: true, initialCollapsed: true }, { children: (0, jsx_runtime_1.jsx)(exports.SubcomponentValidation, { prefix: "openForms.components", component: "city", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'swKpQE', defaultMessage: [{ type: 0, value: "Regular expression for city" }] }), tooltip: intl.formatMessage({ id: "osl4X2", defaultMessage: [{ type: 0, value: "The regular expression pattern test that the city field value must pass before the form can be submitted." }] }), placeholder: intl.formatMessage({ id: "0D+m56", defaultMessage: [{ type: 0, value: "Regular expression for city" }] }) }) }))] }), (0, jsx_runtime_1.jsx)(formio_3.TabPanel, { children: (0, jsx_runtime_1.jsx)(builder_1.Registration.RegistrationAttributeSelect, {}) }), (0, jsx_runtime_1.jsx)(formio_3.TabPanel, { children: (0, jsx_runtime_1.jsx)(builder_1.Translations.ComponentTranslations, { propertyLabels: {
label: intl.formatMessage(messages_1.LABELS.label),
description: intl.formatMessage(messages_1.LABELS.description),
tooltip: intl.formatMessage(messages_1.LABELS.tooltip),
} }) })] }));
};
/*
Making this introspected or declarative doesn't seem advisable, as React is calling
React.Children and related API's legacy API - this may get removed in future
versions.
Explicitly specifying the schema and default values is therefore probbaly best, at
the cost of some repetition.
*/
EditForm.defaultValues = {
// basic tab
label: '',
key: '',
description: '',
tooltip: '',
showInSummary: true,
showInEmail: false,
showInPDF: true,
hidden: false,
clearOnHide: true,
isSensitiveData: true,
deriveAddress: false,
layout: 'doubleColumn',
defaultValue: {
postcode: '',
houseNumber: '',
houseLetter: '',
houseNumberAddition: '',
},
// Advanced tab
conditional: {
show: undefined,
when: '',
eq: '',
},
// Validation tab
validate: {
required: false,
plugins: [],
},
translatedErrors: {},
registration: {
attribute: '',
},
openForms: {
translations: {},
components: {
postcode: {
validate: { pattern: '' },
translatedErrors: {},
},
city: {
validate: { pattern: '' },
translatedErrors: {},
},
},
},
};
exports.default = EditForm;