@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
23 lines (22 loc) • 2.77 kB
JavaScript
;
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_intl_1 = require("react-intl");
const formio_1 = require("../../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 ((0, jsx_runtime_1.jsxs)(formio_1.FieldSet, Object.assign({ field: key, label: label, tooltip: tooltip }, { children: [description && (0, jsx_runtime_1.jsx)(formio_1.Description, { text: description }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)('offb-addressnl-preview', `offb-addressnl-preview--${layout}`) }, { children: [(0, jsx_runtime_1.jsx)(formio_1.TextField, { name: `${key}.postcode`, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'guySt0', defaultMessage: [{ type: 0, value: "Postcode" }] }), inputMask: "9999 AA", required: required }), (0, jsx_runtime_1.jsx)(formio_1.TextField, { name: `${key}.houseNumber`, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'mf9eF+', defaultMessage: [{ type: 0, value: "House number" }] }), required: required }), (0, jsx_runtime_1.jsx)(formio_1.TextField, { name: `${key}.houseLetter`, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'b5Bxb/', defaultMessage: [{ type: 0, value: "House letter addition" }] }), inputMask: "A" }), (0, jsx_runtime_1.jsx)(formio_1.TextField, { name: `${key}.houseNumberAddition`, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'pfdsz9', defaultMessage: [{ type: 0, value: "House number addition" }] }) }), deriveAddress && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(formio_1.TextField, { name: `${key}.city`, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'osSl3z', defaultMessage: [{ type: 0, value: "City" }] }), disabled: true, required: required }), (0, jsx_runtime_1.jsx)(formio_1.TextField, { name: `${key}.streetNumber`, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'DEetjI', defaultMessage: [{ type: 0, value: "Street name" }] }), disabled: true, required: required })] }))] }))] })));
};
exports.default = Preview;