@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
90 lines (88 loc) • 5.08 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, Placeholder, PresentationConfig, ReadOnly, ShowCharCount, SimpleConditional, Tooltip, Translations, Validate, useDeriveComponentKey, } from '../../components/builder';
import { LABELS } from '../../components/builder/messages';
import { Checkbox, NumberField, TabList, TabPanel, Tabs, TextArea } from '../../components/formio';
import { useErrorChecker } from '../../utils/errors';
/**
* Form to configure a Formio 'textarea' type component.
*/
const EditForm = () => {
const intl = useIntl();
const [isKeyManuallySetRef, generatedKey] = useDeriveComponentKey();
const { values } = useFormikContext();
const { hasAnyError } = useErrorChecker();
Validate.useManageValidatorsTranslations([
'required',
'maxLength',
'pattern',
]);
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', 'disabled', 'placeholder', 'showCharCount', 'autoExpand', 'rows') }), _jsx(BuilderTabs.Advanced, { hasErrors: hasAnyError('conditional') }), _jsx(BuilderTabs.Validation, { hasErrors: hasAnyError('validate') }), _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(ReadOnly, {}), _jsx(Placeholder, {}), _jsx(ShowCharCount, {}), _jsx(AutoExpand, {}), _jsx(NumberOfRows, {})] }), _jsx(TabPanel, { children: _jsx(SimpleConditional, {}) }), _jsxs(TabPanel, { children: [_jsx(Validate.Required, {}), _jsx(Validate.ValidatorPluginSelect, {}), _jsx(Validate.MaxLength, {}), _jsx(Validate.RegexValidation, {}), _jsx(Validate.ValidationErrorTranslations, {})] }), _jsx(TabPanel, { children: _jsx(Translations.ComponentTranslations, { propertyLabels: {
label: intl.formatMessage(LABELS.label),
description: intl.formatMessage(LABELS.description),
tooltip: intl.formatMessage(LABELS.tooltip),
placeholder: intl.formatMessage(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: '',
autoExpand: false,
showCharCount: false,
rows: 3,
// Advanced tab
conditional: {
show: undefined,
when: '',
eq: '',
},
// Validation tab
validate: {
required: false,
plugins: [],
maxLength: 10000,
pattern: '',
},
translatedErrors: {},
registration: {
attribute: '',
},
};
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(TextArea, { name: "defaultValue", label: _jsx(FormattedMessage, Object.assign({}, LABELS.defaultValue)), tooltip: tooltip, multiple: multiple }));
};
const AutoExpand = () => {
const intl = useIntl();
const tooltip = intl.formatMessage({ id: "jV58dA", defaultMessage: [{ type: 0, value: "This will make the text area auto expand its height as the user is typing into the area." }] });
return (_jsx(Checkbox, { name: "autoExpand", label: _jsx(FormattedMessage, { id: 'LJckD5', defaultMessage: [{ type: 0, value: "Auto Expand" }] }), tooltip: tooltip }));
};
const NumberOfRows = () => {
const intl = useIntl();
const tooltip = intl.formatMessage({ id: "KwatvH", defaultMessage: [{ type: 0, value: "The number of rows for this text area." }] });
return (_jsx(NumberField, { name: "rows", label: _jsx(FormattedMessage, { id: 'pDVNSf', defaultMessage: [{ type: 0, value: "Number of rows" }] }), tooltip: tooltip }));
};
export default EditForm;