@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
24 lines (23 loc) • 2.79 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_intl_1 = require("react-intl");
const formio_1 = require("../../components/formio");
/**
* Show a formio file 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 = {} } = component;
const { required = false } = validate;
return ((0, jsx_runtime_1.jsxs)(formio_1.Component, Object.assign({ type: "file", field: key, required: required, htmlId: `editform-${key}`, label: label, tooltip: tooltip }, { children: [(0, jsx_runtime_1.jsx)("ul", Object.assign({ className: "list-group list-group-striped" }, { children: (0, jsx_runtime_1.jsx)("li", Object.assign({ className: "list-group-item list-group-header hidden-xs hidden-sm" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "row" }, { children: [(0, jsx_runtime_1.jsx)("div", { className: "col-md-1" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-md-9" }, { children: (0, jsx_runtime_1.jsx)("strong", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'XXRiTx', defaultMessage: [{ type: 0, value: "File name" }] }) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-md-2" }, { children: (0, jsx_runtime_1.jsx)("strong", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'Y8cmP1', defaultMessage: [{ type: 0, value: "Size" }] }) }) }))] })) })) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "fileSelector" }, { children: [(0, jsx_runtime_1.jsx)("i", { className: "fa fa-cloud-upload" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: '4HBnrF', defaultMessage: [{ type: 0, value: "Drag or " }, { type: 8, value: "browse", children: [{ type: 0, value: "select" }] }, { type: 0, value: " files to upload." }], values: {
browse: nodes => ((0, jsx_runtime_1.jsx)("a", Object.assign({ href: "#", className: "browser", onClick: e => {
e.preventDefault();
alert('Uploading is disabled in preview mode.');
} }, { children: nodes }))),
} }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "loader-wrapper" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "loader text-center" }) }))] })), description && (0, jsx_runtime_1.jsx)(formio_1.Description, { text: description })] })));
};
exports.default = Preview;