@open-formulieren/formio-builder/lib/esm/registry/addressNL/preview.js

An opinionated Formio webform builder for Open Forms

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import clsx from 'clsx';
import { FormattedMessage } from 'react-intl';
import { Description, FieldSet, TextField } from '../../components/formio';
/**
 * Show a formio address component preview.
 *
 * NOTE: for the time being, this is rendered in the default Formio bootstrap style,
 * however at some point this should use the components of
 * @open-formulieren/formio-renderer instead for a more accurate preview.
 */
const Preview = ({ component }) => {
    const { key, label, description, tooltip, validate = {}, deriveAddress, layout } = component;
    const { required = false } = validate;
    return (_jsxs(FieldSet, Object.assign({ field: key, label: label, tooltip: tooltip }, { children: [description && _jsx(Description, { text: description }), _jsxs("div", Object.assign({ className: clsx('offb-addressnl-preview', `offb-addressnl-preview--${layout}`) }, { children: [_jsx(TextField, { name: `${key}.postcode`, label: _jsx(FormattedMessage, { id: 'guySt0', defaultMessage: [{ type: 0, value: "Postcode" }] }), inputMask: "9999 AA", required: required }), _jsx(TextField, { name: `${key}.houseNumber`, label: _jsx(FormattedMessage, { id: 'mf9eF+', defaultMessage: [{ type: 0, value: "House number" }] }), required: required }), _jsx(TextField, { name: `${key}.houseLetter`, label: _jsx(FormattedMessage, { id: 'b5Bxb/', defaultMessage: [{ type: 0, value: "House letter addition" }] }), inputMask: "A" }), _jsx(TextField, { name: `${key}.houseNumberAddition`, label: _jsx(FormattedMessage, { id: 'pfdsz9', defaultMessage: [{ type: 0, value: "House number addition" }] }) }), deriveAddress && (_jsxs(_Fragment, { children: [_jsx(TextField, { name: `${key}.city`, label: _jsx(FormattedMessage, { id: 'osSl3z', defaultMessage: [{ type: 0, value: "City" }] }), disabled: true, required: required }), _jsx(TextField, { name: `${key}.streetNumber`, label: _jsx(FormattedMessage, { id: 'DEetjI', defaultMessage: [{ type: 0, value: "Street name" }] }), disabled: true, required: required })] }))] }))] })));
};
export default Preview;