@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
119 lines (118 loc) • 8.49 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const formik_1 = require("formik");
const lodash_1 = require("lodash");
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_1 = require("../../components/formio");
const errors_1 = require("../../utils/errors");
const helpers_1 = require("./helpers");
/**
* Form to configure a Formio 'selectboxes' type component.
*/
const EditForm = () => {
const intl = (0, react_intl_1.useIntl)();
const [isKeyManuallySetRef, generatedKey] = (0, builder_1.useDeriveComponentKey)();
const { values, setFieldValue } = (0, formik_1.useFormikContext)();
const { hasAnyError } = (0, errors_1.useErrorChecker)();
const { openForms: { dataSrc }, defaultValue, } = values;
builder_1.Validate.useManageValidatorsTranslations([
'required',
'minSelectedCount',
'maxSelectedCount',
]);
const isManualOptions = (0, helpers_1.checkIsManualOptions)(values);
const options = isManualOptions ? values.values || [] : [];
// Ensure that form state is reset if the values source changes.
(0, react_1.useLayoutEffect)(() => {
if (dataSrc !== 'variable' || (0, lodash_1.isEqual)(defaultValue, {}))
return;
setFieldValue('defaultValue', {});
}, [dataSrc]);
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', 'hidden', 'clearOnHide', 'isSensitiveData', 'openForms.dataSrc', 'openForms.itemsExpression', 'values', 'defaultValue') }), (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_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.Hidden, {}), (0, jsx_runtime_1.jsx)(builder_1.ClearOnHide, {}), (0, jsx_runtime_1.jsx)(builder_1.IsSensitiveData, {}), (0, jsx_runtime_1.jsx)(builder_1.ValuesConfig, { name: "values", withOptionDescription: true }), isManualOptions && (0, jsx_runtime_1.jsx)(DefaultValue, { options: options })] }), (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)(MinSelectedCheckboxes, {}), (0, jsx_runtime_1.jsx)(MaxSelectedCheckboxes, {}), (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.Translations.ComponentTranslations, Object.assign({ propertyLabels: {
label: intl.formatMessage(messages_1.LABELS.label),
description: intl.formatMessage(messages_1.LABELS.description),
tooltip: intl.formatMessage(messages_1.LABELS.tooltip),
} }, { children: (0, jsx_runtime_1.jsx)(builder_1.ValuesTranslations, { name: "values", withOptionDescription: true }) })) })] }));
};
EditForm.defaultValues = {
// basic tab
label: '',
key: '',
description: '',
tooltip: '',
showInSummary: true,
showInEmail: false,
showInPDF: true,
hidden: false,
clearOnHide: true,
isSensitiveData: false,
openForms: {
dataSrc: 'manual',
translations: {},
},
values: [{ value: '', label: '' }],
// TODO: check that the initial values are set based on component.values
// TODO: at some point we can allow an itemsExpression for this too
defaultValue: {},
// Advanced tab
conditional: {
show: undefined,
when: '',
eq: '',
},
// Validation tab
validate: {
required: false,
plugins: [],
},
translatedErrors: {},
registration: {
attribute: '',
},
};
const DefaultValue = ({ options }) => {
const intl = (0, react_intl_1.useIntl)();
const { getFieldProps, setFieldValue } = (0, formik_1.useFormikContext)();
const { value = {} } = getFieldProps('defaultValue');
const tooltip = intl.formatMessage({ id: "FffJxu", defaultMessage: [{ type: 0, value: "This will be the initial value for this field before user interaction." }] });
// This layout effect uses a non-primitive dependency. It works *because of Formik*
// implementation details, wich uses refs internally and changes the identity of the
// options field only when mutations are made to it (add, change items, re-ordering...)
(0, react_1.useLayoutEffect)(() => {
const optionValues = options.map(opt => opt.value);
const defaultValueKeys = new Set(Object.keys(value));
// if all the option values are present in the default value map, there is nothing
// to do and we bail early to prevent further form state mutations.
if (defaultValueKeys === new Set(optionValues))
return;
// If no default value is present for an option, make it explicitly false.
// Checking/unchecking persist the state either way, so we only need to do this once
// if an option is present yet.
//
// Additionally, we start with an empty object so that we can drop/discard any default
// values for options that were removed.
const explicitDefaults = {};
optionValues.forEach(optionValue => {
// if a value is specified already in the form state, use it, otherwise default to "unchecked".
const defaultForOption = value.hasOwnProperty(optionValue) ? value[optionValue] : false;
explicitDefaults[optionValue] = defaultForOption;
});
setFieldValue('defaultValue', explicitDefaults);
}, [options]);
return ((0, jsx_runtime_1.jsx)(formio_1.SelectBoxes, { name: "defaultValue", options: options, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, Object.assign({}, messages_1.LABELS.defaultValue)), tooltip: tooltip }));
};
const MinSelectedCheckboxes = () => {
const intl = (0, react_intl_1.useIntl)();
const tooltip = intl.formatMessage({ id: "BVuE94", defaultMessage: [{ type: 0, value: "If specified, the user must check at least this many options." }] });
return ((0, jsx_runtime_1.jsx)(formio_1.NumberField, { name: "validate.minSelectedCount", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'dbAJfK', defaultMessage: [{ type: 0, value: "Minimum selected checkboxes" }] }), placeholder: intl.formatMessage({ id: "oGBVo2", defaultMessage: [{ type: 0, value: "Minimum selected checkboxes (e.g. 1)" }] }), tooltip: tooltip, min: 1, step: 1 }));
};
const MaxSelectedCheckboxes = () => {
const intl = (0, react_intl_1.useIntl)();
const tooltip = intl.formatMessage({ id: "sR9GVQ", defaultMessage: [{ type: 0, value: "If specified, the user must check at most this many options." }] });
return ((0, jsx_runtime_1.jsx)(formio_1.NumberField, { name: "validate.maxSelectedCount", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'aWwaAq', defaultMessage: [{ type: 0, value: "Maximum selected checkboxes" }] }), placeholder: intl.formatMessage({ id: "VNGD7o", defaultMessage: [{ type: 0, value: "Maximum selected checkboxes (e.g. 1)" }] }), tooltip: tooltip, min: 1, step: 1 }));
};
exports.default = EditForm;