@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
14 lines (13 loc) • 1.43 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { FormattedMessage } from 'react-intl';
import ContentPlaceholder from '../../components/ContentPlaceholder';
import { Component, Description } from '../../components/formio';
/**
* Show a formio fieldset component preview.
*/
const Preview = ({ component }) => {
const { label, key, description, validate = {}, tooltip, groupLabel, hideLabel } = component;
const { required = false } = validate;
return (_jsxs(Component, Object.assign({ type: "editgrid", field: key, required: required, htmlId: `editform-${key}`, label: hideLabel ? undefined : label, tooltip: tooltip }, { children: [_jsxs("div", Object.assign({ style: { display: 'flex', flexDirection: 'column', gap: '1em' } }, { children: [_jsx(ContentPlaceholder, { children: _jsx(FormattedMessage, { id: '7qqbU9', defaultMessage: [{ type: 1, value: "groupLabel" }, { type: 0, value: " 1" }], values: { groupLabel } }) }), _jsx(ContentPlaceholder, { children: _jsx(FormattedMessage, { id: '0TGt4t', defaultMessage: [{ type: 1, value: "groupLabel" }, { type: 0, value: " 2" }], values: { groupLabel } }) }), _jsx(ContentPlaceholder, { children: _jsx(FormattedMessage, { id: 'smPv/m', defaultMessage: [{ type: 1, value: "groupLabel" }, { type: 0, value: " 3" }], values: { groupLabel } }) })] })), description && _jsx(Description, { text: description })] })));
};
export default Preview;