@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
109 lines (108 loc) • 7.04 kB
JavaScript
"use strict";
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 react_intl_1 = require("react-intl");
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 { hasAnyError } = (0, errors_1.useErrorChecker)();
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.jsxs)(formio_1.Tabs, { children: [(0, jsx_runtime_1.jsxs)(formio_1.TabList, { children: [(0, jsx_runtime_1.jsx)(formio_1.Tab, Object.assign({ hasErrors: hasAnyError('key', 'hidden', 'showInSummary', 'showInEmail', 'showInPDF', 'customClass') }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'd3V6A+', defaultMessage: [{ type: 0, value: "Display" }] }) })), (0, jsx_runtime_1.jsx)(builder_1.BuilderTabs.Advanced, { hasErrors: hasAnyError('conditional') })] }), (0, jsx_runtime_1.jsxs)(formio_1.TabPanel, { children: [(0, jsx_runtime_1.jsx)(builder_1.Key, { isManuallySetRef: isKeyManuallySetRef, generatedValue: generatedKey }), (0, jsx_runtime_1.jsx)(builder_1.Hidden, {}), (0, jsx_runtime_1.jsx)(builder_1.PresentationConfig, {}), (0, jsx_runtime_1.jsx)(CustomClass, {})] }), (0, jsx_runtime_1.jsx)(formio_1.TabPanel, { children: (0, jsx_runtime_1.jsx)(builder_1.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: (0, react_intl_1.defineMessage)({ id: "axygDt", defaultMessage: [{ type: 0, value: "Warning" }] }),
},
{
value: 'info',
label: (0, react_intl_1.defineMessage)({ id: "XMV3t2", defaultMessage: [{ type: 0, value: "Info" }] }),
},
{
value: 'error',
label: (0, react_intl_1.defineMessage)({ id: "uVVO4b", defaultMessage: [{ type: 0, value: "Error" }] }),
},
{
value: 'success',
label: (0, react_intl_1.defineMessage)({ id: "ifG3sd", defaultMessage: [{ type: 0, value: "Success" }] }),
},
];
const CustomClass = () => {
const intl = (0, react_intl_1.useIntl)();
const options = CUSTOM_CLASS_OPTIONS.map(option => ({
value: option.value,
label: intl.formatMessage(option.label),
}));
return ((0, jsx_runtime_1.jsx)(formio_1.Select, { name: "customClass", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: '3h215E', defaultMessage: [{ type: 0, value: "CSS class" }] }), options: options, valueProperty: "value", isClearable: true }));
};
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, supportsBackendTemplating: true }) }, code)))] }));
};
exports.default = EditForm;