@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
50 lines (49 loc) • 3.88 kB
JavaScript
"use strict";
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 clsx_1 = __importDefault(require("clsx"));
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 context_1 = require("../context");
const registry_1 = require("../registry");
const types_1 = require("../types");
const ComponentPreviewWrapper = ({ component, initialValues, onComponentChange, children, }) => {
const [previewMode, setPreviewMode] = (0, react_1.useState)('rich');
const builderContext = (0, react_1.useContext)(context_1.BuilderContext);
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card panel preview-panel" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card-header d-flex justify-content-between align-items-center" }, { children: [(0, jsx_runtime_1.jsx)("h4", Object.assign({ className: "card-title mb-0" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'Qjl92W', defaultMessage: [{ type: 0, value: "Preview" }] }) })), (0, jsx_runtime_1.jsx)(PreviewModeToggle_1.default, { previewMode: previewMode, setPreviewMode: setPreviewMode })] })), previewMode === 'JSON' ? ((0, jsx_runtime_1.jsx)(monaco_json_editor_1.JSONEditor, { wrapperProps: { className: 'json-editor' }, value: component, onChange: onComponentChange, theme: builderContext.theme })) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card-body" }, { children: (0, jsx_runtime_1.jsx)(formik_1.Formik, Object.assign({ enableReinitialize: true, initialValues: initialValues, onSubmit: () => {
throw new Error("Can't submit preview form");
} }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, clsx_1.default)('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 = (0, registry_1.getRegistryEntry)(component);
const { preview: { panel: PanelPreviewComponent }, defaultValue = '', } = entry;
if (PanelPreviewComponent === null) {
return null;
}
const isMultiple = (0, types_1.hasOwnProperty)(component, 'multiple') ? component.multiple : false;
const componentDefaultValue = (0, types_1.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 ((0, jsx_runtime_1.jsx)(ComponentPreviewWrapper, Object.assign({ onComponentChange: onComponentChange, component: component, initialValues: initialValues }, { children: (0, jsx_runtime_1.jsx)(PanelPreviewComponent, { component: component }) })));
};
exports.default = GenericComponentPreview;