@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
111 lines (110 loc) • 6.22 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useFormikContext } from 'formik';
import { isEqual } from 'lodash';
import { useEffect, useLayoutEffect } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import { BuilderTabs, ClearOnHide, Description, Hidden, IsSensitiveData, Key, Label, Multiple, PresentationConfig, Registration, SimpleConditional, Tooltip, Translations, Validate, ValuesConfig, ValuesTranslations, useDeriveComponentKey, } from '../../components/builder';
import { LABELS } from '../../components/builder/messages';
import { Select, TabList, TabPanel, Tabs } from '../../components/formio';
import { useErrorChecker } from '../../utils/errors';
import { checkIsManualOptions } from './helpers';
/**
* Form to configure a Formio 'select' type component.
*/
const EditForm = () => {
var _a;
const intl = useIntl();
const [isKeyManuallySetRef, generatedKey] = useDeriveComponentKey();
const { values, setFieldValue } = useFormikContext();
const { hasAnyError } = useErrorChecker();
const { openForms: { dataSrc }, defaultValue, multiple, } = values;
useEffect(() => {
var _a;
if (defaultValue === undefined)
return;
let newDefaultValue;
if (multiple) {
// `defaultValue` can either be:
// - an non-empty string, meaning the user provided a value for it
// - `''` or `null`: no default value was provided. Ideally, this should only
// be `''`, but Formio is overridding it to `null` :/. That's why we check
// for a truthy value here:
newDefaultValue = defaultValue ? [defaultValue] : [];
}
else {
if (Array.isArray(defaultValue)) {
// if switching from multiple=true->false
newDefaultValue = (_a = defaultValue[0]) !== null && _a !== void 0 ? _a : '';
}
else {
// if the component just got rendered. In this case, `defaultValue`
// can be `null` or a string (empty or not).
newDefaultValue = defaultValue || '';
}
// `defaultValue` is guaranteed to be a an (empty) array thanks to the `if` branch above
}
setFieldValue('defaultValue', newDefaultValue);
}, [multiple]);
Validate.useManageValidatorsTranslations(['required']);
const isManualOptions = checkIsManualOptions(values);
const options = isManualOptions ? ((_a = values.data) === null || _a === void 0 ? void 0 : _a.values) || [] : [];
// Ensure that form state is reset if the values source changes.
useLayoutEffect(() => {
const emptyDefaultValue = multiple ? [] : '';
if (dataSrc !== 'variable' || isEqual(defaultValue, emptyDefaultValue))
return;
setFieldValue('defaultValue', emptyDefaultValue);
}, [dataSrc]);
return (_jsxs(Tabs, { children: [_jsxs(TabList, { children: [_jsx(BuilderTabs.Basic, { hasErrors: hasAnyError('label', 'key', 'description', 'tooltip', 'showInSummary', 'showInEmail', 'showInPDF', 'multiple', 'hidden', 'clearOnHide', 'isSensitiveData', 'openForms.dataSrc', 'openForms.itemsExpression', 'data.values', 'defaultValue') }), _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, { updateDefaultValue: false }), _jsx(Hidden, {}), _jsx(ClearOnHide, {}), _jsx(IsSensitiveData, {}), _jsx(ValuesConfig, { name: "data.values" }), isManualOptions && _jsx(DefaultValue, { options: options, multiple: !!values.multiple })] }), _jsx(TabPanel, { children: _jsx(SimpleConditional, {}) }), _jsxs(TabPanel, { children: [_jsx(Validate.Required, {}), _jsx(Validate.ValidatorPluginSelect, {}), _jsx(Validate.ValidationErrorTranslations, {})] }), _jsx(TabPanel, { children: _jsx(Registration.RegistrationAttributeSelect, {}) }), _jsx(TabPanel, { children: _jsx(Translations.ComponentTranslations, Object.assign({ propertyLabels: {
label: intl.formatMessage(LABELS.label),
description: intl.formatMessage(LABELS.description),
tooltip: intl.formatMessage(LABELS.tooltip),
} }, { children: _jsx(ValuesTranslations, { name: "data.values" }) })) })] }));
};
EditForm.defaultValues = {
// basic tab
label: '',
key: '',
description: '',
tooltip: '',
showInSummary: true,
showInEmail: false,
showInPDF: true,
hidden: false,
clearOnHide: true,
isSensitiveData: false,
openForms: {
dataSrc: 'manual',
translations: {},
},
// fixed, this is what itemsExpression results in via the backend. Do not confuse with
// openForms.dataSrc!
dataSrc: 'values',
dataType: 'string',
data: { values: [{ value: '', label: '' }] },
// TODO: at some point we can allow an itemsExpression for this too
// Note: Formio will override this to `null`! So be careful when dealing with
// the default values of the form
defaultValue: '',
// Advanced tab
conditional: {
show: undefined,
when: '',
eq: '',
},
// Validation tab
validate: {
required: false,
plugins: [],
},
translatedErrors: {},
registration: {
attribute: '',
},
};
const DefaultValue = ({ options, 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(Select, { name: "defaultValue", options: options, label: _jsx(FormattedMessage, Object.assign({}, LABELS.defaultValue)), tooltip: tooltip, isMulti: multiple }));
};
export default EditForm;