@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
62 lines (61 loc) • 4.17 kB
JavaScript
;
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 react_intl_1 = require("react-intl");
const context_1 = require("../context");
const registry_1 = require("../registry");
const ComponentEditForm_1 = __importDefault(require("./ComponentEditForm"));
/**
* The main entrypoint to edit a component in the builder modal.
*
* This component wraps around the context provider to expose Formio builder helper
* functions and utilities down to the low-level components used to render the
* configuration form.
*
* @param options.uniquifyKey Function to make component key unique in the context of all existing components.
* @param options.getFormComponents Function returning all other Formio components in the builder context.
* @param options.isNew Whether the Formio component is a new component being added or an existing being edited.
* @param options.component The (starter) schema of the Formio component being edited.
* @param options.builderInfo Meta information from the builder configuration for the Formio component.
* @param options.onCancel Callback to invoke when the 'cancel' button is clicked.
* @param options.onRemove Callback to invoke when the 'remove' button is clicked.
* @param options.onSubmit Callback to invoke when the form is saved. Receives the component
* configuration JSON object.
*/
const ComponentConfiguration = ({ uniquifyKey, supportedLanguageCodes = ['nl', 'en'], richTextColors, getMapTileLayers, theme, getFormComponents, getValidatorPlugins, getRegistrationAttributes, getServices, getReferenceListsTables, getReferenceListsTableItems, getPrefillPlugins, getPrefillAttributes, getFileTypes, serverUploadLimit, getDocumentTypes, getConfidentialityLevels, getAuthPlugins, isNew, component, builderInfo, onCancel, onRemove, onSubmit, }) => {
if (!(0, registry_1.isKnownComponentType)(component)) {
return (0, jsx_runtime_1.jsx)(Fallback, { theme: theme, component: component });
}
return ((0, jsx_runtime_1.jsx)(context_1.BuilderContext.Provider, Object.assign({ value: {
uniquifyKey,
supportedLanguageCodes,
richTextColors,
getMapTileLayers,
theme,
getFormComponents,
getValidatorPlugins,
getRegistrationAttributes,
getServices,
getReferenceListsTables,
getReferenceListsTableItems,
getPrefillPlugins,
getPrefillAttributes,
getFileTypes,
serverUploadLimit,
getDocumentTypes,
getConfidentialityLevels,
getAuthPlugins,
} }, { children: (0, jsx_runtime_1.jsx)(ComponentEditForm_1.default, { isNew: isNew, component: component, builderInfo: builderInfo, onCancel: onCancel, onRemove: onRemove, onSubmit: onSubmit }) })));
};
const Fallback = ({ component, theme }) => {
var _a;
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'ISVTEk', defaultMessage: [{ type: 0, value: "The component type " }, { type: 8, value: "code", children: [{ type: 1, value: "type" }] }, { type: 0, value: " is unknown. We can only display the JSON definition." }], tagName: "p", values: {
type: (_a = component.type) !== null && _a !== void 0 ? _a : '-',
code: chunks => (0, jsx_runtime_1.jsx)("code", { children: chunks }),
} }), (0, jsx_runtime_1.jsx)(monaco_json_editor_1.JSONEditor, { wrapperProps: { className: 'json-editor' }, value: component, onChange: () => alert('Editing is not possible in unknown components.'), theme: theme, readOnly: true })] }));
};
exports.default = ComponentConfiguration;