@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
36 lines (35 loc) • 2.4 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 clsx_1 = __importDefault(require("clsx"));
const react_1 = require("react");
const react_intl_1 = require("react-intl");
const ModeToggle_1 = __importDefault(require("../../components/ModeToggle"));
/**
* Show a formio columns component preview.
*/
const Preview = ({ component }) => {
const [viewportMode, setViewportMode] = (0, react_1.useState)('desktop');
const { columns } = component;
const isMobile = viewportMode === 'mobile';
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "d-flex justify-content-end align-items-center" }, { children: (0, jsx_runtime_1.jsx)(ModeToggle_1.default, { name: "previewViewport", currentMode: viewportMode, btnClassName: "btn-light", onToggle: setViewportMode, modes: [
{
value: 'desktop',
label: ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'XWsNZ9', defaultMessage: [{ type: 0, value: "Default" }] })),
},
{
value: 'mobile',
label: ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'hwsnj9', defaultMessage: [{ type: 0, value: "Mobile" }] })),
},
] }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, clsx_1.default)('offb-columns-panel-preview', {
'offb-columns-panel-preview--mobile': isMobile,
}) }, { children: columns.map((column, index) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "offb-columns-panel-preview__column", style: {
'--_col-preview-span': `${isMobile ? column.sizeMobile : column.size}`,
} }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'wVYRMC', defaultMessage: [{ type: 0, value: "Column " }, { type: 1, value: "number" }], values: {
number: index + 1,
} }) }), `column-${index}`))) }))] }));
};
exports.default = Preview;