@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
90 lines (87 loc) • 4.89 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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { JSONEditor } from '@open-formulieren/monaco-json-editor';
import { useFormikContext } from 'formik';
import { useContext, useEffect, useRef, useState } from 'react';
import PreviewModeToggle from '../../components/PreviewModeToggle';
import { Key, RichText } from '../../components/builder';
import { 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 [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, {}), _jsx(Key, { isManuallySetRef: isKeyManuallySetRef, generatedValue: generatedKey })] })) }))] })) }));
};
const DEFAULT_CONTENT_NL = `
<p>
<strong>Je hebt niet alle velden ingevuld</strong>
<br>
Het lijkt erop dat niet alle verplichte velden ingevuld zijn. Als je deze velden
niet van een antwoord voorziet, dan kan je aanvraag mogelijk niet worden behandeld.
En, als gevolg daarvan, krijg je ook de eventuele kosten die je hebt betaald voor
de aanvraag niet terug. Zorg er dus voor dat je alle verplichte velden invult.
</p>
<p>Dit zijn de velden die nog geen antwoord hebben:</p>
{{ missingFields }}
<p>Wil je doorgaan met de aanvraag?</p>
`;
EditForm.defaultValues = {
// Display tab
html: DEFAULT_CONTENT_NL,
label: '',
key: '',
openForms: {
translations: {
nl: {
html: DEFAULT_CONTENT_NL,
},
en: {
html: '',
},
},
},
};
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 }) }, code)))] }));
};
export default EditForm;