@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
83 lines (82 loc) • 7.52 kB
JavaScript
"use strict";
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 formik_1 = require("formik");
const lodash_1 = require("lodash");
const react_1 = require("react");
const react_intl_1 = require("react-intl");
const useAsync_1 = __importDefault(require("react-use/esm/useAsync"));
const formio_1 = require("../../components/formio");
const context_1 = require("../../context");
const hasImageMimeType = (mimetypes) => mimetypes.some(mimeType => mimeType.startsWith('image/') || mimeType === '*');
const FileName = () => {
const intl = (0, react_intl_1.useIntl)();
const tooltip = intl.formatMessage({ id: "1pC7IP", defaultMessage: [{ type: 0, value: "Specify template for name of uploaded file(s). " }, { type: 8, value: "code", children: [{ type: 0, value: "{{ fileName }}" }] }, { type: 0, value: " contains the original filename." }] }, {
code: chunks => (0, jsx_runtime_1.jsx)("code", { children: chunks }),
}); // library doesn't narrow the type when using template fns :(
return ((0, jsx_runtime_1.jsx)(formio_1.TextField, { name: "file.name", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: '1Vvryq', defaultMessage: [{ type: 0, value: "File name template" }] }), tooltip: tooltip, placeholder: intl.formatMessage({ id: "hduHvs", defaultMessage: [{ type: 0, value: "(optional)" }] }) }));
};
const FileTypesSelect = () => {
var _a;
const { getFileTypes } = (0, react_1.useContext)(context_1.BuilderContext);
const { values, initialValues, setFieldValue } = (0, formik_1.useFormikContext)();
const initialImageConfiguration = (_a = initialValues.of) === null || _a === void 0 ? void 0 : _a.image;
const { value: options, loading, error } = (0, useAsync_1.default)(async () => await getFileTypes(), []);
if (error) {
throw error;
}
const onChange = (event) => {
var _a;
const { value: fileTypes } = event.target;
// set the filePattern 'hidden field' value - this drives the browser file picker
// filter
setFieldValue('filePattern', fileTypes.join(','));
// set the human-readable labels, used in error messages
const labels = (options || [])
.filter(option => fileTypes.includes(option.value))
.map(option => option.label);
setFieldValue('file.allowedTypesLabels', labels);
// reset the image resizing options if no image file types are allowed
const hasImages = hasImageMimeType(fileTypes);
if (!hasImages && !(0, lodash_1.isEqual)((_a = values.of) === null || _a === void 0 ? void 0 : _a.image, initialImageConfiguration)) {
setFieldValue('of.image', initialImageConfiguration);
}
};
return ((0, jsx_runtime_1.jsx)(formio_1.Select, { name: "file.type", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'Ax7r1y', defaultMessage: [{ type: 0, value: "File types" }] }), isLoading: loading, isClearable: true, isMulti: true, options: options, valueProperty: "value", onChange: onChange }));
};
const UseConfigFiletypes = () => {
const intl = (0, react_intl_1.useIntl)();
const tooltip = intl.formatMessage({ id: "RxmRzd", defaultMessage: [{ type: 0, value: "When this is checked, the filetypes configured in the global settings will be used." }] });
return ((0, jsx_runtime_1.jsx)(formio_1.Checkbox, { name: "useConfigFiletypes", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'JnAJoU', defaultMessage: [{ type: 0, value: "Use globally configured filetypes" }] }), tooltip: tooltip }));
};
const FileMaxSize = () => {
const intl = (0, react_intl_1.useIntl)();
const { serverUploadLimit } = (0, react_1.useContext)(context_1.BuilderContext);
const tooltip = intl.formatMessage({ id: "fX5VwA", defaultMessage: [{ type: 0, value: "The maximum size of a single file to upload." }] });
return ((0, jsx_runtime_1.jsx)(formio_1.TextField, { name: "fileMaxSize", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'CG/va1', defaultMessage: [{ type: 0, value: "Maximum file size" }] }), tooltip: tooltip, description: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: '2ajYIp', defaultMessage: [{ type: 0, value: "Note that the server upload limit is " }, { type: 1, value: "serverUploadLimit" }, { type: 0, value: "." }], values: { serverUploadLimit } }) }));
};
const MaxNumberOfFiles = () => {
const intl = (0, react_intl_1.useIntl)();
const tooltip = intl.formatMessage({ id: "KrJ+rN", defaultMessage: [{ type: 0, value: "The maximum number of files that can be uploaded." }] });
return ((0, jsx_runtime_1.jsx)(formio_1.NumberField, { name: "maxNumberOfFiles", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'aBADYT', defaultMessage: [{ type: 0, value: "Maximum number of files" }] }), tooltip: tooltip, min: 1, step: 1 }));
};
const ImageResizeApply = () => {
const intl = (0, react_intl_1.useIntl)();
const tooltip = intl.formatMessage({ id: "n9T2Oy", defaultMessage: [{ type: 0, value: "When this is checked, any uploaded image(s) will be resized." }] });
return ((0, jsx_runtime_1.jsx)(formio_1.Checkbox, { name: "of.image.resize.apply", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: '+e1pgl', defaultMessage: [{ type: 0, value: "Resize image" }] }), tooltip: tooltip }));
};
const ImageResizingOptions = () => {
var _a, _b, _c, _d;
const { values } = (0, formik_1.useFormikContext)();
const applyResize = (_d = (_c = (_b = (_a = values === null || values === void 0 ? void 0 : values.of) === null || _a === void 0 ? void 0 : _a.image) === null || _b === void 0 ? void 0 : _b.resize) === null || _c === void 0 ? void 0 : _c.apply) !== null && _d !== void 0 ? _d : false;
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ImageResizeApply, {}), applyResize && ((0, jsx_runtime_1.jsx)(formio_1.Component, Object.assign({ type: "columns" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "columns" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "column column--span-md" }, { children: (0, jsx_runtime_1.jsx)(formio_1.NumberField, { name: "of.image.resize.width", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'Y4oNhH', defaultMessage: [{ type: 0, value: "Maximum width" }] }), min: 0, step: 100 }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "column column--span-md" }, { children: (0, jsx_runtime_1.jsx)(formio_1.NumberField, { name: "of.image.resize.height", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'yujuQr', defaultMessage: [{ type: 0, value: "Maximum height" }] }), min: 0, step: 100 }) }))] })) })))] }));
};
const FileTabFields = () => {
const { values } = (0, formik_1.useFormikContext)();
const hasImages = hasImageMimeType(values.file.type);
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FileName, {}), (0, jsx_runtime_1.jsx)(FileTypesSelect, {}), (0, jsx_runtime_1.jsx)(UseConfigFiletypes, {}), hasImages && (0, jsx_runtime_1.jsx)(ImageResizingOptions, {}), (0, jsx_runtime_1.jsx)(FileMaxSize, {}), (0, jsx_runtime_1.jsx)(MaxNumberOfFiles, {})] }));
};
exports.default = FileTabFields;