@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
31 lines (30 loc) • 1.94 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import clsx from 'clsx';
import { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import ModeToggle from '../../components/ModeToggle';
/**
* Show a formio columns component preview.
*/
const Preview = ({ component }) => {
const [viewportMode, setViewportMode] = useState('desktop');
const { columns } = component;
const isMobile = viewportMode === 'mobile';
return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: "d-flex justify-content-end align-items-center" }, { children: _jsx(ModeToggle, { name: "previewViewport", currentMode: viewportMode, btnClassName: "btn-light", onToggle: setViewportMode, modes: [
{
value: 'desktop',
label: (_jsx(FormattedMessage, { id: 'XWsNZ9', defaultMessage: [{ type: 0, value: "Default" }] })),
},
{
value: 'mobile',
label: (_jsx(FormattedMessage, { id: 'hwsnj9', defaultMessage: [{ type: 0, value: "Mobile" }] })),
},
] }) })), _jsx("div", Object.assign({ className: clsx('offb-columns-panel-preview', {
'offb-columns-panel-preview--mobile': isMobile,
}) }, { children: columns.map((column, index) => (_jsx("div", Object.assign({ className: "offb-columns-panel-preview__column", style: {
'--_col-preview-span': `${isMobile ? column.sizeMobile : column.size}`,
} }, { children: _jsx(FormattedMessage, { id: 'wVYRMC', defaultMessage: [{ type: 0, value: "Column " }, { type: 1, value: "number" }], values: {
number: index + 1,
} }) }), `column-${index}`))) }))] }));
};
export default Preview;