@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
95 lines (92 loc) • 5.51 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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const monaco_json_editor_1 = require("@open-formulieren/monaco-json-editor");
const formik_1 = require("formik");
const react_1 = require("react");
const PreviewModeToggle_1 = __importDefault(require("../../components/PreviewModeToggle"));
const builder_1 = require("../../components/builder");
const formio_1 = require("../../components/formio");
const context_1 = require("../../context");
const errors_1 = require("../../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 } = (0, react_1.useContext)(context_1.BuilderContext);
const isKeyManuallySetRef = (0, react_1.useRef)(false);
const { values, setFieldValue, setValues } = (0, formik_1.useFormikContext)();
const generatedKey = uniquifyKey(values.key);
const [previewMode, setPreviewMode] = (0, react_1.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.
(0, react_1.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 ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card panel preview-panel" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card-header d-flex justify-content-end" }, { children: (0, jsx_runtime_1.jsx)(PreviewModeToggle_1.default, { previewMode: previewMode, setPreviewMode: setPreviewMode }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card-body" }, { children: previewMode === 'JSON' ? ((0, jsx_runtime_1.jsx)(monaco_json_editor_1.JSONEditor, { height: "45vh", value: jsonEditValues, onChange: setValues, theme: theme })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RichTextTranslations, {}), (0, jsx_runtime_1.jsx)(builder_1.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 } = (0, react_1.useContext)(context_1.BuilderContext);
const { hasAnyError } = (0, errors_1.useErrorChecker)();
return ((0, jsx_runtime_1.jsxs)(formio_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(formio_1.TabList, { children: supportedLanguageCodes.map(code => ((0, jsx_runtime_1.jsx)(formio_1.Tab, Object.assign({ hasErrors: hasAnyError(`openForms.translations.${code}`) }, { children: code.toUpperCase() }), code))) }), supportedLanguageCodes.map((code, index) => ((0, jsx_runtime_1.jsx)(formio_1.TabPanel, { children: (0, jsx_runtime_1.jsx)(builder_1.RichText, { name: `openForms.translations.${code}.html`, required: index === 0 }) }, code)))] }));
};
exports.default = EditForm;