@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
22 lines (21 loc) • 2.36 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { FormattedMessage } from 'react-intl';
import { Component, Description } from '../../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 (_jsxs(Component, Object.assign({ type: "file", field: key, required: required, htmlId: `editform-${key}`, label: label, tooltip: tooltip }, { children: [_jsx("ul", Object.assign({ className: "list-group list-group-striped" }, { children: _jsx("li", Object.assign({ className: "list-group-item list-group-header hidden-xs hidden-sm" }, { children: _jsxs("div", Object.assign({ className: "row" }, { children: [_jsx("div", { className: "col-md-1" }), _jsx("div", Object.assign({ className: "col-md-9" }, { children: _jsx("strong", { children: _jsx(FormattedMessage, { id: 'XXRiTx', defaultMessage: [{ type: 0, value: "File name" }] }) }) })), _jsx("div", Object.assign({ className: "col-md-2" }, { children: _jsx("strong", { children: _jsx(FormattedMessage, { id: 'Y8cmP1', defaultMessage: [{ type: 0, value: "Size" }] }) }) }))] })) })) })), _jsxs("div", Object.assign({ className: "fileSelector" }, { children: [_jsx("i", { className: "fa fa-cloud-upload" }), _jsx(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 => (_jsx("a", Object.assign({ href: "#", className: "browser", onClick: e => {
e.preventDefault();
alert('Uploading is disabled in preview mode.');
} }, { children: nodes }))),
} }), _jsx("div", Object.assign({ className: "loader-wrapper" }, { children: _jsx("div", { className: "loader text-center" }) }))] })), description && _jsx(Description, { text: description })] })));
};
export default Preview;