@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
88 lines (87 loc) • 4.05 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { FormattedMessage, useIntl } from 'react-intl';
import { BuilderTabs, ClearOnHide, Description, Hidden, IsSensitiveData, Key, Label, Multiple, PresentationConfig, SimpleConditional, Tooltip, Translations, Validate, useDeriveComponentKey, } from '../../components/builder';
import { LABELS } from '../../components/builder/messages';
import { Tab, TabList, TabPanel, Tabs } from '../../components/formio';
import { useErrorChecker } from '../../utils/errors';
import FileTabFields from './file-tab';
import RegistrationTabFields from './registration-tab';
/**
* Form to configure a Formio 'file' type component.
*/
const EditForm = () => {
const intl = useIntl();
const [isKeyManuallySetRef, generatedKey] = useDeriveComponentKey();
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') }), _jsx(BuilderTabs.Advanced, { hasErrors: hasAnyError('conditional') }), _jsx(BuilderTabs.Validation, { hasErrors: hasAnyError('validate') }), _jsx(Tab, Object.assign({ hasErrors: hasAnyError('file', 'useConfigFiletypes', 'of', 'fileMaxSize', 'maxNumberOfFiles') }, { children: _jsx(FormattedMessage, { id: 'UxTJsK', defaultMessage: [{ type: 0, value: "File" }] }) })), _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(TabPanel, { children: _jsx(SimpleConditional, {}) }), _jsxs(TabPanel, { children: [_jsx(Validate.Required, {}), _jsx(Validate.SoftRequired, {}), _jsx(Validate.ValidationErrorTranslations, {})] }), _jsx(TabPanel, { children: _jsx(FileTabFields, {}) }), _jsx(TabPanel, { children: _jsx(RegistrationTabFields, {}) }), _jsx(TabPanel, { children: _jsx(Translations.ComponentTranslations, { propertyLabels: {
label: intl.formatMessage(LABELS.label),
description: intl.formatMessage(LABELS.description),
tooltip: intl.formatMessage(LABELS.tooltip),
} }) })] }));
};
/**
*
* @todo options.withCredentials: true seems to be set somewhere -> session cookie
* needs to be sent by the SDK/client!
*/
EditForm.defaultValues = {
storage: 'url',
url: '',
options: { withCredentials: true },
webcam: false,
// basic tab
label: '',
key: '',
description: '',
tooltip: '',
showInSummary: true,
showInEmail: false,
showInPDF: true,
multiple: false,
hidden: false,
clearOnHide: true,
isSensitiveData: true,
// Advanced tab
conditional: {
show: undefined,
when: '',
eq: '',
},
// Validation tab
validate: {
required: false,
},
translatedErrors: {},
openForms: {
softRequired: false,
translations: {},
},
// file tab
file: {
name: '',
type: [],
allowedTypesLabels: [],
},
filePattern: '*',
useConfigFiletypes: true,
of: {
image: {
resize: {
apply: false,
width: 2000,
height: 2000,
},
},
},
fileMaxSize: '10MB',
maxNumberOfFiles: null,
// registration tab
registration: {
informatieobjecttype: '',
bronorganisatie: '',
docVertrouwelijkheidaanduiding: '',
titel: '',
},
};
export default EditForm;