@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
77 lines (76 loc) • 4.82 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useFormikContext } from 'formik';
import { FormattedMessage, useIntl } from 'react-intl';
import { AutoComplete, BuilderTabs, ClearOnHide, Description, Hidden, IsSensitiveData, Key, Label, Multiple, PresentationConfig, Registration, SimpleConditional, Tooltip, Translations, Validate, useDeriveComponentKey, } from '../../components/builder';
import { LABELS } from '../../components/builder/messages';
import { Checkbox, TabList, TabPanel, Tabs, TextField } from '../../components/formio';
import { useErrorChecker } from '../../utils/errors';
/**
* Form to configure a Formio 'email' type component.
*/
const EditForm = () => {
const intl = useIntl();
const [isKeyManuallySetRef, generatedKey] = useDeriveComponentKey();
const { values } = useFormikContext();
const { hasAnyError } = useErrorChecker();
Validate.useManageValidatorsTranslations(['required']);
return (_jsxs(Tabs, { children: [_jsxs(TabList, { children: [_jsx(BuilderTabs.Basic, { hasErrors: hasAnyError('label', 'key', 'description', 'tooltip', 'showInSummary', 'showInEmail', 'showInPDF', 'multiple', 'hidden', 'clearOnHide', 'isSensitiveData', 'defaultValue', 'autocomplete') }), _jsx(BuilderTabs.Advanced, { hasErrors: hasAnyError('conditional') }), _jsx(BuilderTabs.Validation, { hasErrors: hasAnyError('validate') }), _jsx(BuilderTabs.Registration, { hasErrors: hasAnyError('registration') }), _jsx(BuilderTabs.Translations, { hasErrors: hasAnyError('openForms.translations') })] }), _jsxs(TabPanel, { children: [_jsx(Label, {}), _jsx(Key, { isManuallySetRef: isKeyManuallySetRef, generatedValue: generatedKey }), _jsx(Description, {}), _jsx(Tooltip, {}), _jsx(PresentationConfig, {}), _jsx(Multiple, {}), _jsx(Hidden, {}), _jsx(ClearOnHide, {}), _jsx(IsSensitiveData, {}), _jsx(DefaultValue, { multiple: !!values.multiple }), _jsx(AutoComplete, {}), _jsx(IsConfirmationRecipient, {})] }), _jsx(TabPanel, { children: _jsx(SimpleConditional, {}) }), _jsxs(TabPanel, { children: [_jsx(Validate.Required, {}), _jsx(RequireVerification, {}), _jsx(Validate.ValidatorPluginSelect, {}), _jsx(Validate.ValidationErrorTranslations, {})] }), _jsx(TabPanel, { children: _jsx(Registration.RegistrationAttributeSelect, {}) }), _jsx(TabPanel, { children: _jsx(Translations.ComponentTranslations, { propertyLabels: {
label: intl.formatMessage(LABELS.label),
description: intl.formatMessage(LABELS.description),
tooltip: intl.formatMessage(LABELS.tooltip),
} }) })] }));
};
EditForm.defaultValues = {
// basic tab
label: '',
key: '',
description: '',
showInSummary: true,
showInEmail: false,
showInPDF: true,
multiple: false,
hidden: false,
clearOnHide: true,
isSensitiveData: true,
defaultValue: '',
autocomplete: 'email',
confirmationRecipient: false,
// Advanced tab
conditional: {
show: undefined,
when: '',
eq: '',
},
// Validation tab
validate: {
required: false,
plugins: [],
},
translatedErrors: {},
registration: {
attribute: '',
},
// openForms extensions
openForms: {
translations: {},
requireVerification: false,
},
// fixed but not editable
validateOn: 'blur',
};
const DefaultValue = ({ multiple }) => {
const intl = useIntl();
const tooltip = intl.formatMessage({ id: "FffJxu", defaultMessage: [{ type: 0, value: "This will be the initial value for this field before user interaction." }] });
return (_jsx(TextField, { name: "defaultValue", type: "email", label: intl.formatMessage(LABELS.defaultValue), tooltip: tooltip, multiple: multiple }));
};
const IsConfirmationRecipient = () => {
const intl = useIntl();
const tooltip = intl.formatMessage({ id: "ewzHfR", defaultMessage: [{ type: 0, value: "Email-address in this field will receive the confirmation email." }] });
return (_jsx(Checkbox, { name: "confirmationRecipient", label: _jsx(FormattedMessage, { id: '0OP7ho', defaultMessage: [{ type: 0, value: "Receives confirmation email" }] }), tooltip: tooltip }));
};
const RequireVerification = () => {
const intl = useIntl();
const tooltip = intl.formatMessage({ id: "205QX5", defaultMessage: [{ type: 0, value: "When email address verification is enabled, the user must verify their email address before they can submit the form. This proves the email address exists and that they have access to the account." }] });
return (_jsx(Checkbox, { name: "openForms.requireVerification", label: _jsx(FormattedMessage, { id: 'Wb+QGm', defaultMessage: [{ type: 0, value: "Require verification" }] }), tooltip: tooltip }));
};
export default EditForm;