@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
78 lines (77 loc) • 6.38 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useFormikContext } from 'formik';
import { isEqual } from 'lodash';
import { useContext } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import useAsync from 'react-use/esm/useAsync';
import { Checkbox, Component, NumberField, Select, TextField } from '../../components/formio';
import { BuilderContext } from '../../context';
const hasImageMimeType = (mimetypes) => mimetypes.some(mimeType => mimeType.startsWith('image/') || mimeType === '*');
const FileName = () => {
const intl = 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 => _jsx("code", { children: chunks }),
}); // library doesn't narrow the type when using template fns :(
return (_jsx(TextField, { name: "file.name", label: _jsx(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 } = useContext(BuilderContext);
const { values, initialValues, setFieldValue } = useFormikContext();
const initialImageConfiguration = (_a = initialValues.of) === null || _a === void 0 ? void 0 : _a.image;
const { value: options, loading, error } = useAsync(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 && !isEqual((_a = values.of) === null || _a === void 0 ? void 0 : _a.image, initialImageConfiguration)) {
setFieldValue('of.image', initialImageConfiguration);
}
};
return (_jsx(Select, { name: "file.type", label: _jsx(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 = 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 (_jsx(Checkbox, { name: "useConfigFiletypes", label: _jsx(FormattedMessage, { id: 'JnAJoU', defaultMessage: [{ type: 0, value: "Use globally configured filetypes" }] }), tooltip: tooltip }));
};
const FileMaxSize = () => {
const intl = useIntl();
const { serverUploadLimit } = useContext(BuilderContext);
const tooltip = intl.formatMessage({ id: "fX5VwA", defaultMessage: [{ type: 0, value: "The maximum size of a single file to upload." }] });
return (_jsx(TextField, { name: "fileMaxSize", label: _jsx(FormattedMessage, { id: 'CG/va1', defaultMessage: [{ type: 0, value: "Maximum file size" }] }), tooltip: tooltip, description: _jsx(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 = useIntl();
const tooltip = intl.formatMessage({ id: "KrJ+rN", defaultMessage: [{ type: 0, value: "The maximum number of files that can be uploaded." }] });
return (_jsx(NumberField, { name: "maxNumberOfFiles", label: _jsx(FormattedMessage, { id: 'aBADYT', defaultMessage: [{ type: 0, value: "Maximum number of files" }] }), tooltip: tooltip, min: 1, step: 1 }));
};
const ImageResizeApply = () => {
const intl = useIntl();
const tooltip = intl.formatMessage({ id: "n9T2Oy", defaultMessage: [{ type: 0, value: "When this is checked, any uploaded image(s) will be resized." }] });
return (_jsx(Checkbox, { name: "of.image.resize.apply", label: _jsx(FormattedMessage, { id: '+e1pgl', defaultMessage: [{ type: 0, value: "Resize image" }] }), tooltip: tooltip }));
};
const ImageResizingOptions = () => {
var _a, _b, _c, _d;
const { values } = 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 (_jsxs(_Fragment, { children: [_jsx(ImageResizeApply, {}), applyResize && (_jsx(Component, Object.assign({ type: "columns" }, { children: _jsxs("div", Object.assign({ className: "columns" }, { children: [_jsx("div", Object.assign({ className: "column column--span-md" }, { children: _jsx(NumberField, { name: "of.image.resize.width", label: _jsx(FormattedMessage, { id: 'Y4oNhH', defaultMessage: [{ type: 0, value: "Maximum width" }] }), min: 0, step: 100 }) })), _jsx("div", Object.assign({ className: "column column--span-md" }, { children: _jsx(NumberField, { name: "of.image.resize.height", label: _jsx(FormattedMessage, { id: 'yujuQr', defaultMessage: [{ type: 0, value: "Maximum height" }] }), min: 0, step: 100 }) }))] })) })))] }));
};
const FileTabFields = () => {
const { values } = useFormikContext();
const hasImages = hasImageMimeType(values.file.type);
return (_jsxs(_Fragment, { children: [_jsx(FileName, {}), _jsx(FileTypesSelect, {}), _jsx(UseConfigFiletypes, {}), hasImages && _jsx(ImageResizingOptions, {}), _jsx(FileMaxSize, {}), _jsx(MaxNumberOfFiles, {})] }));
};
export default FileTabFields;