@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
45 lines (44 loc) • 3.3 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { JSONEditor } from '@open-formulieren/monaco-json-editor';
import clsx from 'clsx';
import { Formik } from 'formik';
import { useContext, useState } from 'react';
import { FormattedMessage } from 'react-intl';
import PreviewModeToggle from '../components/PreviewModeToggle';
import { BuilderContext } from '../context';
import { getRegistryEntry } from '../registry';
import { hasOwnProperty } from '../types';
const ComponentPreviewWrapper = ({ component, initialValues, onComponentChange, children, }) => {
const [previewMode, setPreviewMode] = useState('rich');
const builderContext = useContext(BuilderContext);
return (_jsxs("div", Object.assign({ className: "card panel preview-panel" }, { children: [_jsxs("div", Object.assign({ className: "card-header d-flex justify-content-between align-items-center" }, { children: [_jsx("h4", Object.assign({ className: "card-title mb-0" }, { children: _jsx(FormattedMessage, { id: 'Qjl92W', defaultMessage: [{ type: 0, value: "Preview" }] }) })), _jsx(PreviewModeToggle, { previewMode: previewMode, setPreviewMode: setPreviewMode })] })), previewMode === 'JSON' ? (_jsx(JSONEditor, { wrapperProps: { className: 'json-editor' }, value: component, onChange: onComponentChange, theme: builderContext.theme })) : (_jsx("div", Object.assign({ className: "card-body" }, { children: _jsx(Formik, Object.assign({ enableReinitialize: true, initialValues: initialValues, onSubmit: () => {
throw new Error("Can't submit preview form");
} }, { children: _jsx("div", Object.assign({ className: clsx('component-preview', `component-preview--${component.type}`), "data-testid": "componentPreview" }, { children: children })) })) })))] })));
};
/**
* Generic preview
*
* The preview component looks at the component.type and looks up the type-specific preview
* component to render it, all while wrapping it in some builder-specific markup. It also
* exposes controls to toggle between "WYSWIWYG" and JSON mode.
*
* It is also responsible for handling the `multiple: true` variants in a generic way.
*/
const GenericComponentPreview = ({ component, onComponentChange, }) => {
const { key } = component;
const entry = getRegistryEntry(component);
const { preview: { panel: PanelPreviewComponent }, defaultValue = '', } = entry;
if (PanelPreviewComponent === null) {
return null;
}
const isMultiple = hasOwnProperty(component, 'multiple') ? component.multiple : false;
const componentDefaultValue = hasOwnProperty(component, 'defaultValue')
? component.defaultValue
: defaultValue;
const previewDefaultValue = isMultiple
? componentDefaultValue !== null && componentDefaultValue !== void 0 ? componentDefaultValue : []
: componentDefaultValue !== null && componentDefaultValue !== void 0 ? componentDefaultValue : defaultValue;
const initialValues = key ? { [key]: previewDefaultValue } : {};
return (_jsx(ComponentPreviewWrapper, Object.assign({ onComponentChange: onComponentChange, component: component, initialValues: initialValues }, { children: _jsx(PanelPreviewComponent, { component: component }) })));
};
export default GenericComponentPreview;