@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
102 lines (100 loc) • 8.41 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const formik_1 = require("formik");
const react_intl_1 = require("react-intl");
const builder_1 = require("../../components/builder");
const messages_1 = require("../../components/builder/messages");
const formio_1 = require("../../components/formio");
const errors_1 = require("../../utils/errors");
/**
* Form to configure a Formio 'textfield' type component.
*/
const EditForm = () => {
const intl = (0, react_intl_1.useIntl)();
const [isKeyManuallySetRef, generatedKey] = (0, builder_1.useDeriveComponentKey)();
const { values } = (0, formik_1.useFormikContext)();
const { hasAnyError } = (0, errors_1.useErrorChecker)();
builder_1.Validate.useManageValidatorsTranslations([
'required',
'maxLength',
'pattern',
]);
return ((0, jsx_runtime_1.jsxs)(formio_1.Tabs, { children: [(0, jsx_runtime_1.jsxs)(formio_1.TabList, { children: [(0, jsx_runtime_1.jsx)(builder_1.BuilderTabs.Basic, { hasErrors: hasAnyError('label', 'key', 'description', 'tooltip', 'showInSummary', 'showInEmail', 'showInPDF', 'multiple', 'hidden', 'clearOnHide', 'isSensitiveData', 'defaultValue', 'autocomplete', 'disabled', 'placeholder', 'showCharCount') }), (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.Prefill, { hasErrors: hasAnyError('prefill') }), (0, jsx_runtime_1.jsx)(formio_1.Tab, Object.assign({ hasErrors: hasAnyError('deriveStreetName', 'deriveCity', 'derivePostcode', 'deriveHouseNumber') }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: '4/cCvG', defaultMessage: [{ type: 0, value: "Location" }] }) })), (0, jsx_runtime_1.jsx)(builder_1.BuilderTabs.Translations, { hasErrors: hasAnyError('openForms.translations') })] }), (0, jsx_runtime_1.jsxs)(formio_1.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)(builder_1.Multiple, {}), (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)(DefaultValue, { multiple: !!values.multiple }), (0, jsx_runtime_1.jsx)(builder_1.AutoComplete, {}), (0, jsx_runtime_1.jsx)(builder_1.ReadOnly, {}), (0, jsx_runtime_1.jsx)(builder_1.Placeholder, {}), (0, jsx_runtime_1.jsx)(builder_1.ShowCharCount, {})] }), (0, jsx_runtime_1.jsx)(formio_1.TabPanel, { children: (0, jsx_runtime_1.jsx)(builder_1.SimpleConditional, {}) }), (0, jsx_runtime_1.jsxs)(formio_1.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.MaxLength, {}), (0, jsx_runtime_1.jsx)(builder_1.Validate.RegexValidation, {}), (0, jsx_runtime_1.jsx)(builder_1.Validate.ValidationErrorTranslations, {})] }), (0, jsx_runtime_1.jsx)(formio_1.TabPanel, { children: (0, jsx_runtime_1.jsx)(builder_1.Registration.RegistrationAttributeSelect, {}) }), (0, jsx_runtime_1.jsx)(formio_1.TabPanel, { children: (0, jsx_runtime_1.jsx)(builder_1.Prefill.PrefillConfiguration, {}) }), (0, jsx_runtime_1.jsxs)(formio_1.TabPanel, { children: [(0, jsx_runtime_1.jsxs)("p", { children: [(0, jsx_runtime_1.jsx)("i", { className: "fa fa-circle-info" }), "\u00A0", (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'fGTdJz', defaultMessage: [{ type: 0, value: "Deriving the location via text fields is deprecated. Use the AddressNL component instead." }] })] }), (0, jsx_runtime_1.jsxs)(formio_1.Panel, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'V2/ceD', defaultMessage: [{ type: 0, value: "Configuration (deprecated)" }] }), collapsible: true, initialCollapsed: true }, { children: [(0, jsx_runtime_1.jsx)(DeriveStreetName, {}), (0, jsx_runtime_1.jsx)(DeriveCity, {}), (0, jsx_runtime_1.jsx)(DerivePostcode, {}), (0, jsx_runtime_1.jsx)(DeriveHouseNumber, {})] }))] }), (0, jsx_runtime_1.jsx)(formio_1.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),
placeholder: intl.formatMessage(messages_1.LABELS.placeholder),
} }) })] }));
};
/*
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,
multiple: false,
hidden: false,
clearOnHide: true,
isSensitiveData: false,
defaultValue: '',
autocomplete: '',
disabled: false,
placeholder: '',
showCharCount: false,
// location tab
deriveStreetName: false,
deriveCity: false,
derivePostcode: '',
deriveHouseNumber: '',
// Advanced tab
conditional: {
show: undefined,
when: '',
eq: '',
},
// Validation tab
validate: {
required: false,
plugins: [],
maxLength: 1000,
pattern: '',
},
translatedErrors: {},
registration: {
attribute: '',
},
prefill: {
plugin: '',
attribute: '',
identifierRole: 'main',
},
};
const DefaultValue = ({ multiple }) => {
const intl = (0, react_intl_1.useIntl)();
const tooltip = intl.formatMessage({ id: "FffJxu", defaultMessage: [{ type: 0, value: "This will be the initial value for this field before user interaction." }] });
return ((0, jsx_runtime_1.jsx)(formio_1.TextField, { name: "defaultValue", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, Object.assign({}, messages_1.LABELS.defaultValue)), tooltip: tooltip, multiple: multiple }));
};
const DeriveStreetName = () => {
const intl = (0, react_intl_1.useIntl)();
const tooltip = intl.formatMessage({ id: "W4PizY", defaultMessage: [{ type: 0, value: "If the postcode and house number are entered this field will autofill with the street name" }] });
return ((0, jsx_runtime_1.jsx)(formio_1.Checkbox, { name: "deriveStreetName", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'asZV7t', defaultMessage: [{ type: 0, value: "Derive street name" }] }), tooltip: tooltip }));
};
const DeriveCity = () => {
const intl = (0, react_intl_1.useIntl)();
const tooltip = intl.formatMessage({ id: "V6ClU9", defaultMessage: [{ type: 0, value: "If the postcode and house number are entered this field will autofill with the city" }] });
return ((0, jsx_runtime_1.jsx)(formio_1.Checkbox, { name: "deriveCity", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'H4sILo', defaultMessage: [{ type: 0, value: "Derive city" }] }), tooltip: tooltip }));
};
const DerivePostcode = () => ((0, jsx_runtime_1.jsx)(builder_1.ComponentSelect, { name: "derivePostcode", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'Uv58uI', defaultMessage: [{ type: 0, value: "Postcode component" }] }), isSearchable: true, isClearable: true }));
const DeriveHouseNumber = () => ((0, jsx_runtime_1.jsx)(builder_1.ComponentSelect, { name: "deriveHouseNumber", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'jLg5l6', defaultMessage: [{ type: 0, value: "House number component" }] }), isSearchable: true, isClearable: true }));
exports.default = EditForm;