@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
104 lines (103 loc) • 6.05 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { JSONEditor } from '@open-formulieren/monaco-json-editor';
import { useFormikContext } from 'formik';
import { useContext, useEffect, useRef, useState } from 'react';
import { FormattedMessage, defineMessage, useIntl } from 'react-intl';
import PreviewModeToggle from '../../components/PreviewModeToggle';
import { BuilderTabs, Hidden, Key, PresentationConfig, RichText, SimpleConditional, } from '../../components/builder';
import { Select, Tab, TabList, TabPanel, Tabs } from '../../components/formio';
import { BuilderContext } from '../../context';
import { useErrorChecker } from '../../utils/errors';
/**
* Form to configure a Formio 'content' type component.
*
* W/r to translations, the 'NL' language is considered the default, and the main html
* value is populated from that field (TODO: implement this).
*/
const EditForm = () => {
var _a;
const { uniquifyKey, supportedLanguageCodes, theme } = useContext(BuilderContext);
const isKeyManuallySetRef = useRef(false);
const { values, setFieldValue, setValues } = useFormikContext();
const generatedKey = uniquifyKey(values.key);
const { hasAnyError } = useErrorChecker();
const [previewMode, setPreviewMode] = useState('rich');
const defaultLanguageCode = (_a = supportedLanguageCodes[0]) !== null && _a !== void 0 ? _a : 'nl';
// Synchronize the default/first language tab value to the main `html` field.
useEffect(() => {
var _a, _b, _c;
const currentValue = (_c = (_b = (_a = values.openForms) === null || _a === void 0 ? void 0 : _a.translations) === null || _b === void 0 ? void 0 : _b[defaultLanguageCode]) === null || _c === void 0 ? void 0 : _c.html;
if (currentValue === undefined && values.html) {
// if we have a 'html' value, but no default translation -> store the default translation
setFieldValue(`openForms.translations.${defaultLanguageCode}.html`, values.html);
}
else if (values.html !== currentValue) {
// otherwise sync the value of the translation field to the main field.
setFieldValue('html', currentValue);
}
});
// the `html` property edits in the JSON edit don't behave as expected, you need to
// edit the language specific values, so remove it.
const { html } = values, jsonEditValues = __rest(values, ["html"]);
return (_jsx(_Fragment, { children: _jsxs("div", Object.assign({ className: "card panel preview-panel" }, { children: [_jsx("div", Object.assign({ className: "card-header d-flex justify-content-end" }, { children: _jsx(PreviewModeToggle, { previewMode: previewMode, setPreviewMode: setPreviewMode }) })), _jsx("div", Object.assign({ className: "card-body" }, { children: previewMode === 'JSON' ? (_jsx(JSONEditor, { height: "45vh", value: jsonEditValues, onChange: setValues, theme: theme })) : (_jsxs(_Fragment, { children: [_jsx(RichTextTranslations, {}), _jsxs(Tabs, { children: [_jsxs(TabList, { children: [_jsx(Tab, Object.assign({ hasErrors: hasAnyError('key', 'hidden', 'showInSummary', 'showInEmail', 'showInPDF', 'customClass') }, { children: _jsx(FormattedMessage, { id: 'd3V6A+', defaultMessage: [{ type: 0, value: "Display" }] }) })), _jsx(BuilderTabs.Advanced, { hasErrors: hasAnyError('conditional') })] }), _jsxs(TabPanel, { children: [_jsx(Key, { isManuallySetRef: isKeyManuallySetRef, generatedValue: generatedKey }), _jsx(Hidden, {}), _jsx(PresentationConfig, {}), _jsx(CustomClass, {})] }), _jsx(TabPanel, { children: _jsx(SimpleConditional, {}) })] })] })) }))] })) }));
};
EditForm.defaultValues = {
// Display tab
html: '',
label: '',
key: '',
hidden: false,
showInSummary: false,
showInEmail: false,
showInPDF: true,
customClass: '',
// Advanced tab
conditional: {
show: undefined,
when: '',
eq: '',
},
};
const CUSTOM_CLASS_OPTIONS = [
{
value: 'warning',
label: defineMessage({ id: "axygDt", defaultMessage: [{ type: 0, value: "Warning" }] }),
},
{
value: 'info',
label: defineMessage({ id: "XMV3t2", defaultMessage: [{ type: 0, value: "Info" }] }),
},
{
value: 'error',
label: defineMessage({ id: "uVVO4b", defaultMessage: [{ type: 0, value: "Error" }] }),
},
{
value: 'success',
label: defineMessage({ id: "ifG3sd", defaultMessage: [{ type: 0, value: "Success" }] }),
},
];
const CustomClass = () => {
const intl = useIntl();
const options = CUSTOM_CLASS_OPTIONS.map(option => ({
value: option.value,
label: intl.formatMessage(option.label),
}));
return (_jsx(Select, { name: "customClass", label: _jsx(FormattedMessage, { id: '3h215E', defaultMessage: [{ type: 0, value: "CSS class" }] }), options: options, valueProperty: "value", isClearable: true }));
};
const RichTextTranslations = () => {
const { supportedLanguageCodes } = useContext(BuilderContext);
const { hasAnyError } = useErrorChecker();
return (_jsxs(Tabs, { children: [_jsx(TabList, { children: supportedLanguageCodes.map(code => (_jsx(Tab, Object.assign({ hasErrors: hasAnyError(`openForms.translations.${code}`) }, { children: code.toUpperCase() }), code))) }), supportedLanguageCodes.map((code, index) => (_jsx(TabPanel, { children: _jsx(RichText, { name: `openForms.translations.${code}.html`, required: index === 0, supportsBackendTemplating: true }) }, code)))] }));
};
export default EditForm;