@open-formulieren/formio-builder/lib/esm/components/ComponentConfiguration.js

An opinionated Formio webform builder for Open Forms

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { JSONEditor } from '@open-formulieren/monaco-json-editor';
import { FormattedMessage } from 'react-intl';
import { BuilderContext } from '../context';
import { isKnownComponentType } from '../registry';
import ComponentEditForm from './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 (!isKnownComponentType(component)) {
        return _jsx(Fallback, { theme: theme, component: component });
    }
    return (_jsx(BuilderContext.Provider, Object.assign({ value: {
            uniquifyKey,
            supportedLanguageCodes,
            richTextColors,
            getMapTileLayers,
            theme,
            getFormComponents,
            getValidatorPlugins,
            getRegistrationAttributes,
            getServices,
            getReferenceListsTables,
            getReferenceListsTableItems,
            getPrefillPlugins,
            getPrefillAttributes,
            getFileTypes,
            serverUploadLimit,
            getDocumentTypes,
            getConfidentialityLevels,
            getAuthPlugins,
        } }, { children: _jsx(ComponentEditForm, { isNew: isNew, component: component, builderInfo: builderInfo, onCancel: onCancel, onRemove: onRemove, onSubmit: onSubmit }) })));
};
const Fallback = ({ component, theme }) => {
    var _a;
    return (_jsxs(_Fragment, { children: [_jsx(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 => _jsx("code", { children: chunks }),
                } }), _jsx(JSONEditor, { wrapperProps: { className: 'json-editor' }, value: component, onChange: () => alert('Editing is not possible in unknown components.'), theme: theme, readOnly: true })] }));
};
export default ComponentConfiguration;