@luomus/laji-form 15.1.0 → 15.1.1

package/lib/components/fields/ImageArrayField.js

@@ -1,697 +0,0 @@
-"use strict";
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Thumbnail = exports.MediaArrayField = void 0;
-const React = require("react");
-const PropTypes = require("prop-types");
-const immutability_helper_1 = require("immutability-helper");
-const Context_1 = require("../../Context");
-const react_dropzone_1 = require("react-dropzone");
-const components_1 = require("../components");
-const LajiForm_1 = require("../LajiForm");
-const utils_1 = require("../../utils");
-const BaseComponent_1 = require("../BaseComponent");
-const Spinner = require("react-spinner");
-const exif = require("exif-js");
-const utils_2 = require("@luomus/laji-map/lib/utils");
-const moment = require("moment");
-const ReactContext_1 = require("../../ReactContext");
-const utils_3 = require("@rjsf/utils");
-function toDecimal(number) {
-    if (!number)
-        return undefined;
-    return number[0].numerator + number[1].numerator /
-        (60 * number[1].denominator) + number[2].numerator / (3600 * number[2].denominator);
-}
-let mediaUuid = 0;
-let ImageArrayField = class ImageArrayField extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.ALLOWED_FILE_TYPES = ["image/jpeg", "image/png", "image/bmp", "image/tiff", "image/gif"];
-        this.ACCEPT_FILE_TYPES = ["image/*"];
-        this.MAX_FILE_SIZE = 20000000;
-        this.KEY = "IMAGE";
-        this.ENDPOINT = "images";
-        this.GLYPH = "camera";
-        this.TRANSLATION_TAKE_NEW = "TakeNewPhoto";
-        this.TRANSLATION_SELECT_FILE = "SelectPhoto";
-        this.TRANSLATION_NO_MEDIA = "NoPhoto";
-        this.CONTAINER_CLASS = "images-container";
-        this.METADATA_FORM_ID = "JX.111712";
-        this.renderMedia = (id) => React.createElement(Thumbnail, { id: id, apiClient: this.props.formContext.apiClient });
-        this.renderLoadingMedia = (id) => React.createElement(Thumbnail, { dataURL: id, loading: true, apiClient: this.props.formContext.apiClient });
-        this.onMediaClick = (i) => this.openModalFor(i);
-        this.renderModalMedia = () => React.createElement("img", { src: this.state.modalMediaSrc });
-    }
-    formatValue(value, options, props) {
-        const { translations } = props.formContext;
-        return value && value.length
-            ? `${value.length} ${translations.HowManyPhotos}`
-            : null;
-    }
-};
-ImageArrayField = __decorate([
-    MediaArrayField
-], ImageArrayField);
-exports.default = ImageArrayField;
-function MediaArrayField(ComposedComponent) {
-    let MediaArrayField = class MediaArrayField extends ComposedComponent {
-        constructor(...args) {
-            super(...args);
-            this.deprecatedOptions = {
-                imageAddModal: "addModal",
-                autoOpenImageAddModal: "autoOpenAddModal"
-            };
-            this.addMediaContainerRef = React.createRef();
-            this.getOptions = (uiSchema) => {
-                let options = utils_1.getUiOptions(uiSchema);
-                Object.keys(this.deprecatedOptions).forEach(deprecated => {
-                    if (options[deprecated] !== undefined) {
-                        options = Object.assign(Object.assign({}, options), { [this.deprecatedOptions[deprecated]]: options[deprecated] });
-                    }
-                });
-                return options;
-            };
-            this.onDragEnter = () => { this.setState({ dragging: true }); };
-            this.onDragLeave = () => { this.setState({ dragging: false }); };
-            this.onDrop = (files) => {
-                this.state.dragging && this.setState({ dragging: false });
-                this.onFileFormChange(files);
-            };
-            this.defaultOnClick = () => {
-                const { addModal } = utils_1.getUiOptions(this.props.uiSchema);
-                this.setState({ addModal });
-            };
-            this.onKeyDown = this.props.formContext.utils.keyboardClick(() => {
-                var _a;
-                const input = (_a = this.addMediaContainerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("input");
-                const { addModal } = utils_1.getUiOptions(this.props.uiSchema);
-                addModal ? this.defaultOnClick() : input === null || input === void 0 ? void 0 : input.click();
-            });
-            this.renderMedias = () => {
-                const { disabled, readonly } = this.props;
-                const { deleteConfirmPlacement = "top" } = utils_1.getUiOptions(this.props.uiSchema);
-                return (this.props.formData || []).map((item, i) => (React.createElement("div", { key: i, className: "media-container" },
-                    React.createElement("a", { onClick: this.onMediaClick(i) }, this.renderMedia(item, i)),
-                    React.createElement(components_1.DeleteButton, { corner: true, confirm: true, confirmPlacement: deleteConfirmPlacement, translations: this.props.formContext.translations, onClick: this.onMediaRmClick(i), disabled: disabled || readonly, id: `${this.props.idSchema.$id}_${i}` }))));
-            };
-            this.renderLoadingMedias = () => {
-                const containerId = this.getContainerId();
-                return (this.state.tmpMedias || []).map((item, i) => {
-                    const medias = this._context.tmpMedias[containerId];
-                    if (!medias || !medias[item])
-                        return null;
-                    return (React.createElement("div", { key: i, className: "media-container" },
-                        React.createElement("a", null, this.renderLoadingMedia(medias[item]))));
-                });
-            };
-            this.openModalFor = (i) => () => {
-                const item = this.props.formData[i];
-                this.setState({ metadataModalOpen: i });
-                this.fetching = item;
-                this.apiClient.fetch(`/${this.ENDPOINT}/${item}`).then((response) => {
-                    if (response.id !== this.fetching)
-                        return;
-                    this._context.metadatas[item] = response;
-                    this.setState({ modalIdx: i, modalMediaSrc: response.fullURL, modalMetadata: this._context.metadatas[item] });
-                });
-            };
-            this.onMediaRmClick = (i) => () => {
-                const id = this.props.formData[i];
-                this.props.onChange(immutability_helper_1.default(this.props.formData, { $splice: [[i, 1]] }));
-                this.apiClient.fetch(`/${this.ENDPOINT}/${id}`, undefined, {
-                    method: "DELETE",
-                    failSilently: true
-                });
-            };
-            this.hideMetadataModal = () => this.setState({ metadataModalOpen: false, metadataSaveSuccess: undefined });
-            this.onMetadataFormChange = (formData) => this.setState({ modalMetadata: formData });
-            this.renderMetadataModal = () => {
-                const { metadataModalOpen, modalIdx, modalMetadata, metadataSaveSuccess } = this.state;
-                const { lang, translations } = this.props.registry.formContext;
-                const metadataForm = this.state.metadataForm || {};
-                if (typeof metadataModalOpen === "number" && !this.state.metadataForm) {
-                    this.apiClient.fetchCached(`/forms/${this.METADATA_FORM_ID}`, { lang, format: "schema" })
-                        .then(metadataForm => {
-                        if (this.mounted) {
-                            this.setState({ metadataForm });
-                        }
-                    });
-                }
-                const { Previous, Next } = this.props.formContext.translations;
-                const isOpen = modalIdx === metadataModalOpen && modalMetadata && metadataForm.schema;
-                const uiSchema = isOpen ? Object.assign(Object.assign({}, metadataForm.uiSchema), { "ui:shortcuts": Object.assign(Object.assign({}, (metadataForm.uiSchema["ui:shorcuts"] || {})), this.props.formContext.services.keyHandler.shortcuts), "ui:disabled": this.props.disabled, "ui:readonly": this.props.readonly }) : undefined;
-                const { metadataModal = true } = utils_1.getUiOptions(this.props.uiSchema);
-                const { Modal, Alert, Pager } = this.context.theme;
-                return typeof metadataModalOpen === "number" ?
-                    React.createElement(Modal, { dialogClassName: "laji-form media-modal", show: true, onHide: this.hideMetadataModal },
-                        React.createElement(Modal.Header, { closeButton: true },
-                            React.createElement("br", null),
-                            React.createElement(Pager, null,
-                                React.createElement(Pager.Item, { previous: true, onClick: this.openModalFor(metadataModalOpen - 1), disabled: metadataModalOpen <= 0 },
-                                    "\u2190 ",
-                                    Previous),
-                                React.createElement(Pager.Item, { next: true, onClick: this.openModalFor(metadataModalOpen + 1), disabled: metadataModalOpen >= this.props.formData.length - 1 },
-                                    Next,
-                                    " \u2192"))),
-                        React.createElement(Modal.Body, null,
-                            React.createElement("div", { className: `laji-form${metadataModal ? " media-modal-content" : ""}` }, isOpen
-                                ? React.createElement(React.Fragment, null,
-                                    this.renderModalMedia(modalIdx),
-                                    metadataModal && React.createElement(LajiForm_1.default, Object.assign({}, metadataForm, { uiSchema: uiSchema, formData: modalMetadata, onChange: this.onMetadataFormChange, onSubmit: this.onMediaMetadataUpdate, submitText: translations.Save, lang: lang, apiClient: this.props.formContext.apiClient.apiClient, uiSchemaContext: this.props.formContext.uiSchemaContext, showShortcutButton: false }), (metadataSaveSuccess !== undefined) ? (React.createElement(Alert, { variant: metadataSaveSuccess ? "success" : "danger" }, translations[metadataSaveSuccess ? "SaveSuccess" : "SaveFail"])) : null))
-                                : React.createElement(Spinner, null)))) : null;
-            };
-            this.onHideMediaAddModal = () => this.setState({ addModal: undefined }, () => {
-                this.parseExif([]);
-            });
-            this.renderMediaAddModal = () => {
-                const { disabled, readonly } = this.props;
-                const { addModal } = this.state;
-                const { labels: { cancel } = { cancel: undefined } } = (utils_1.isObject(addModal) ? addModal : {});
-                const { translations } = this.props.formContext;
-                if (!addModal)
-                    return null;
-                const { Modal } = this.context.theme;
-                return (React.createElement(Modal, { dialogClassName: "laji-form media-add-modal", show: true, onHide: this.onHideMediaAddModal },
-                    React.createElement(Modal.Header, { closeButton: true }),
-                    React.createElement(Modal.Body, null,
-                        [
-                            ["environment",
-                                this.TRANSLATION_TAKE_NEW
-                            ],
-                            [
-                                undefined,
-                                this.TRANSLATION_SELECT_FILE
-                            ]
-                        ].map(([captureMethod, label]) => React.createElement(react_dropzone_1.default, { key: captureMethod || "", accept: this.ACCEPT_FILE_TYPES, onDrop: this.onDrop, disabled: readonly || disabled }, ({ getRootProps, getInputProps }) => {
-                            return (React.createElement("div", Object.assign({ className: "btn-block" }, getRootProps()),
-                                React.createElement("input", Object.assign({}, getInputProps(), { capture: captureMethod })),
-                                React.createElement(components_1.Button, { block: true, disabled: readonly || disabled }, label ? translations[label] : undefined)));
-                        })),
-                        React.createElement(components_1.Button, { className: "cancel", block: true, onClick: this.onHideMediaAddModal }, cancel || translations[this.TRANSLATION_NO_MEDIA]))));
-            };
-            this.onAlertOk = () => {
-                this.setState({ alert: false, alertMsg: undefined });
-            };
-            this.parseExif = (files) => {
-                const { exifParsers = [] } = utils_1.getUiOptions(this.props.uiSchema);
-                if (!exifParsers)
-                    return;
-                const found = exifParsers.reduce((found, { parse }) => {
-                    found[parse] = false;
-                    return found;
-                }, {});
-                return files.reduce((promise, file) => {
-                    if (Object.keys(found).every(k => found[k])) {
-                        return promise;
-                    }
-                    return promise.then(found => new Promise(resolve => {
-                        exif.getData(file, function () {
-                            if ("geometry" in found)
-                                try {
-                                    const coordinates = ["GPSLongitude", "GPSLatitude"].map(tag => toDecimal(exif.getTag(this, tag)));
-                                    const rawDatum = exif.getTag(this, "GPSMapDatum");
-                                    const datum = typeof rawDatum === "string"
-                                        ? rawDatum.trim().toUpperCase()
-                                        : undefined;
-                                    if ((!datum || datum === "WGS-84" || datum === "WGS84") && utils_2.validateLatLng(coordinates, utils_2.wgs84Validator)) {
-                                        found.geometry = {
-                                            type: "Point",
-                                            coordinates
-                                        };
-                                    }
-                                }
-                                catch (e) {
-                                    console.info("Reading GPS from EXIF failed", e);
-                                }
-                            const readDateFromFile = () => {
-                                if (file.lastModified) {
-                                    const momentDate = moment(file.lastModified);
-                                    if (momentDate.isValid()) {
-                                        const date = momentDate.format("YYYY-MM-DDTHH:mm");
-                                        if (date) {
-                                            found.date = date;
-                                        }
-                                    }
-                                }
-                            };
-                            if ("date" in found) {
-                                try {
-                                    const rawDate = exif.getTag(this, "DateTimeOriginal");
-                                    const momentDate = moment(rawDate, "YYYY:MM:DD HH:mm:ss");
-                                    if (momentDate.isValid()) {
-                                        found.date = momentDate.format("YYYY-MM-DDTHH:mm");
-                                    }
-                                    else {
-                                        readDateFromFile();
-                                    }
-                                }
-                                catch (e) {
-                                    console.info("Reading date from EXIF failed, trying to read from file", e);
-                                    readDateFromFile();
-                                }
-                            }
-                            else {
-                                readDateFromFile();
-                            }
-                            resolve(found);
-                        });
-                    }));
-                }, Promise.resolve(found)).then((found) => {
-                    let { registry } = this.props;
-                    const lajiFormInstance = this.props.formContext.services.rootInstance;
-                    const schema = lajiFormInstance.getSchema();
-                    let formData = lajiFormInstance.getFormData();
-                    exifParsers.filter((f) => f.type === "event" || found[f.parse]).forEach(({ field, parse, type, eventName }) => {
-                        if (type === "mutate") {
-                            formData = utils_1.updateFormDataWithJSONPointer({ formData, schema, registry }, found[parse], field);
-                        }
-                        if (type === "event") {
-                            this.props.formContext.services.customEvents.send(`root_${utils_1.JSONPointerToId(field)}`, eventName, found[parse], undefined, { bubble: false });
-                        }
-                    });
-                    return formData;
-                });
-            };
-            this.sideEffects = (formData) => {
-                const lajiFormInstance = this.props.formContext.services.rootInstance;
-                const schema = lajiFormInstance.getSchema();
-                const lajiFormFormData = lajiFormInstance.getFormData();
-                const { sideEffects } = utils_1.getUiOptions(this.props.uiSchema);
-                if (sideEffects) {
-                    const thisPath = utils_1.idSchemaIdToJSONPointer(this.props.idSchema.$id);
-                    const containerPath = thisPath.replace(/^(\/.*)\/.*$/, "$1");
-                    const parseRelativePaths = (path, containerPath) => {
-                        while ((path.match(/\/\.\./g) || []).length > 1) {
-                            containerPath = containerPath.replace(/^(\/.*)\/.*$/, "$1");
-                            path = path.replace(/^(.*)\/\.\.(.*)/, "$1$2");
-                        }
-                        return path.replace(/^(.*)\/\.\.(.*)/, `$1${containerPath}$2`);
-                    };
-                    formData = Object.keys(sideEffects).reduce((formData, field) => {
-                        const jsonPointer = parseRelativePaths(field, containerPath);
-                        return !utils_1.isDefaultData(utils_1.parseJSONPointer(formData, jsonPointer), utils_1.parseSchemaFromFormDataPointer(schema, jsonPointer))
-                            ? formData
-                            : utils_1.updateFormDataWithJSONPointer({ schema, registry: this.props.registry, formData }, sideEffects[field], parseRelativePaths(field, containerPath));
-                    }, formData);
-                }
-                if (formData !== lajiFormFormData) {
-                    lajiFormInstance.onChange(formData);
-                }
-            };
-            this.onFileFormChange = (files) => {
-                var _a;
-                if (this.state.addModal) {
-                    this.setState({ addModal: undefined });
-                }
-                (_a = this.parseExif(files)) === null || _a === void 0 ? void 0 : _a.then(this.sideEffects);
-                const id = this.getContainerId();
-                const lajiFormInstance = this.props.formContext.services.rootInstance;
-                const saveAndOnChange = () => this.saveMedias(files).then(mediaIds => {
-                    if (!lajiFormInstance.isMounted() || !mediaIds) {
-                        return;
-                    }
-                    let pointer = this.props.formContext.services.ids.getJSONPointerFromLajiFormIdAndFormDataAndIdSchemaId(this.props.idSchema.$id, id);
-                    if (!this.mounted && !pointer) {
-                        return;
-                    }
-                    const newFormData = [
-                        ...(this.mounted
-                            ? this.props.formData || []
-                            : utils_1.parseJSONPointer(lajiFormInstance.getFormData(), pointer) || []),
-                        ...mediaIds
-                    ];
-                    if (!lajiFormInstance.isMounted())
-                        return;
-                    if ((this.mounted || id === "root") && id === this.getContainerId()) {
-                        this.props.onChange(newFormData);
-                        // Settimeout because the resource is undefined 404 if fetched right away.
-                        setTimeout(() => {
-                            if (!this.mounted)
-                                return;
-                            const { autoOpenMetadataModal = false } = utils_1.getUiOptions(this.props.uiSchema);
-                            let shouldOpenMetadataModal = autoOpenMetadataModal;
-                            if (shouldOpenMetadataModal) {
-                                this.openModalFor(newFormData.length - mediaIds.length)();
-                            }
-                        }, 0);
-                        return;
-                    }
-                    pointer = this.props.formContext.services.ids.getJSONPointerFromLajiFormIdAndFormDataAndIdSchemaId(this.props.idSchema.$id, id);
-                    lajiFormInstance.onChange(utils_1.updateSafelyWithJSONPointer(lajiFormInstance.getFormData(), newFormData, pointer));
-                });
-                this.props.formContext.services.submitHooks.add(this.props, saveAndOnChange);
-            };
-            this.getContainerId = () => {
-                const { _parentLajiFormId = "root" } = this.props.formContext;
-                return _parentLajiFormId;
-            };
-            this.addNameToDataURL = (dataURL, name) => {
-                return dataURL.replace(";base64", `;name=${name};base64`);
-            };
-            this.processFiles = (files) => {
-                return Promise.all([].map.call(files, this.processFile));
-            };
-            this.processFile = (file) => {
-                const { name, size, type } = file;
-                return new Promise(resolve => {
-                    const reader = new window.FileReader();
-                    reader.onload = event => {
-                        var _a;
-                        resolve({
-                            dataURL: this.addNameToDataURL((_a = event.target) === null || _a === void 0 ? void 0 : _a.result, name),
-                            name,
-                            size,
-                            type
-                        });
-                    };
-                    reader.readAsDataURL(file);
-                });
-            };
-            this.onMediaMetadataUpdate = ({ formData }) => {
-                this.props.formContext.services.blocker.push();
-                this.apiClient.fetch(`/${this.ENDPOINT}/${formData.id}`, undefined, {
-                    method: "PUT",
-                    headers: {
-                        "accept": "application/json",
-                        "content-type": "application/json"
-                    },
-                    body: JSON.stringify(formData)
-                }).then(() => {
-                    this.props.formContext.services.blocker.pop();
-                    const notify = () => this.props.formContext.notifier.success(this.props.formContext.translations.SaveSuccess);
-                    if (this.mounted) {
-                        this.setState({ metadataModalOpen: false }, notify);
-                    }
-                    else {
-                        notify();
-                    }
-                }).catch(() => {
-                    this.props.formContext.services.blocker.pop();
-                    this.mounted && this.setState({ metadataSaveSuccess: false });
-                });
-            };
-            this.getMetadataPromise = () => {
-                let mediaMetadata = this.props.formContext.mediaMetadata
-                    || { intellectualRights: "MZ.intellectualRightsARR" };
-                const MACode = this.props.formContext.uiSchemaContext.creator;
-                return ("capturerVerbatim" in mediaMetadata)
-                    ? Promise.resolve(Object.assign(Object.assign({}, mediaMetadata), { capturerVerbatim: [mediaMetadata.capturerVerbatim] }))
-                    : MACode
-                        ? this.apiClient.fetchCached(`/person/by-id/${MACode}`).then(({ fullName = MACode }) => (Object.assign(Object.assign({ capturerVerbatim: Array.isArray(fullName) ? fullName : [fullName] }, mediaMetadata), { intellectualOwner: fullName }))).catch(() => Promise.resolve(mediaMetadata))
-                        : Promise.resolve(mediaMetadata);
-            };
-            this.getMaxFileSizeAsString = () => {
-                let maxSize = this.MAX_FILE_SIZE.toString().substring(0, this.MAX_FILE_SIZE.toString().length - 6);
-                return maxSize + " " + `${this.props.formContext.translations.Mb}`;
-            };
-            this.getAllowedMediaFormatsAsString = () => {
-                let formats = "";
-                for (let i = 0; i < this.ALLOWED_FILE_TYPES.length; i++) {
-                    formats += this.ALLOWED_FILE_TYPES[i].split("/")[1];
-                    if (i < this.ALLOWED_FILE_TYPES.length - 2) {
-                        formats += ", ";
-                    }
-                    else if (i === this.ALLOWED_FILE_TYPES.length - 2) {
-                        formats += ` ${this.props.formContext.translations.and} `;
-                    }
-                }
-                return formats;
-            };
-            const [props] = args;
-            ["ALLOWED_FILE_TYPES",
-                "MAX_FILE_SIZE",
-                "KEY",
-                "ENDPOINT",
-                "GLYPH",
-                "renderMedia",
-                "renderLoadingMedia",
-                "onMediaClick",
-                "formatValue",
-                "TRANSLATION_TAKE_NEW",
-                "TRANSLATION_SELECT_FILE",
-                "TRANSLATION_NO_MEDIA",
-                "CONTAINER_CLASS"
-            ].forEach(prop => {
-                if (this[prop] === undefined) {
-                    throw new Error(`${utils_1.getReactComponentName(ComposedComponent)} doesn't implement MediaArrayField ${prop}`);
-                }
-            });
-            const options = this.getOptions(props.uiSchema);
-            Object.keys(this.deprecatedOptions).forEach(deprecated => {
-                if (options[deprecated] !== undefined) {
-                    console.warn(`laji-form warning: ${utils_1.getReactComponentName(ComposedComponent)} ui:option '${deprecated}' is deprecated. Use '${this.deprecatedOptions[deprecated]}' instead!`);
-                }
-            });
-            this.apiClient = props.formContext.apiClient;
-            this._context = Context_1.default(`${this.KEY}_ARRAY_FIELD`);
-            if (!this._context.metadatas)
-                this._context.metadatas = {};
-            if (!this._context.tmpMedias)
-                this._context.tmpMedias = {};
-            this.state = { tmpMedias: Object.keys(this._context.tmpMedias[this.getContainerId()] || {}).map(i => +i) };
-            const { addModal, autoOpenAddModal } = options;
-            if (addModal
-                && autoOpenAddModal
-                && (props.formData || []).length === 0
-                && !props.formContext.uiSchemaContext.isEdit) {
-                this.state.addModal = addModal; // eslint-disable-line react/no-direct-mutation-state
-            }
-        }
-        componentDidMount() {
-            this.mounted = true;
-        }
-        componentWillUnmount() {
-            this.mounted = false;
-        }
-        render() {
-            const { schema, uiSchema, idSchema, name, formContext, readonly, disabled } = this.props;
-            const { translations } = formContext;
-            const { description, addModal } = utils_1.getUiOptions(uiSchema);
-            const title = (schema.title === undefined) ? name : schema.title;
-            const TitleFieldTemplate = utils_3.getTemplate("TitleFieldTemplate", this.props.registry, utils_1.getUiOptions(this.props.uiSchema));
-            const { OverlayTrigger, Tooltip, Glyphicon } = this.context.theme;
-            const tooltip = (React.createElement(Tooltip, { id: `${this.props.idSchema.$id}-drop-zone-tooltip` },
-                React.createElement("span", null,
-                    translations.DropOrSelectFiles,
-                    ". "),
-                React.createElement("span", null,
-                    translations.AllowedFileFormats,
-                    " ",
-                    this.getAllowedMediaFormatsAsString(),
-                    " ",
-                    translations.and,
-                    " ",
-                    translations.allowedFileSize,
-                    " ",
-                    this.getMaxFileSizeAsString(),
-                    ".")));
-            const { dragging } = this.state;
-            const { Row, Col } = this.context.theme;
-            const { DescriptionFieldTemplate } = this.props.registry.templates;
-            return (React.createElement(Row, null,
-                React.createElement(Col, { xs: 12 },
-                    React.createElement(TitleFieldTemplate, { title: title, schema: schema, uiSchema: uiSchema, id: idSchema.$id, registry: this.props.registry }),
-                    description !== undefined ? React.createElement(DescriptionFieldTemplate, { description: description, schema: schema, id: idSchema.$id, registry: this.props.registry }) : null,
-                    React.createElement("div", { className: `laji-form-medias ${this.CONTAINER_CLASS}` },
-                        this.renderMedias(),
-                        this.renderLoadingMedias(),
-                        React.createElement(OverlayTrigger, { overlay: tooltip },
-                            React.createElement(react_dropzone_1.default, { accept: this.ACCEPT_FILE_TYPES, onDragEnter: this.onDragEnter, onDragLeave: this.onDragLeave, onDrop: this.onDrop, disabled: readonly || disabled, noKeyboard: true }, ({ getRootProps, getInputProps }) => {
-                                const _a = getRootProps(), { onClick: _onClick } = _a, rootProps = __rest(_a, ["onClick"]);
-                                const onClick = addModal ? this.defaultOnClick : _onClick;
-                                return (React.createElement("div", Object.assign({ className: utils_1.classNames("laji-form-drop-zone", dragging && "dragging", (readonly || disabled) && " disabled"), onClick: onClick, role: "button", tabIndex: 0 }, rootProps, { onKeyDown: this.onKeyDown, ref: this.addMediaContainerRef }),
-                                    React.createElement("input", Object.assign({}, getInputProps())),
-                                    React.createElement(Glyphicon, { glyph: this.GLYPH })));
-                            })),
-                        this.renderMetadataModal(),
-                        this.renderMediaAddModal()))));
-        }
-        saveMedias(files) {
-            const containerId = this.getContainerId();
-            let tmpMedias;
-            const fail = (translationKey, additionalInfo = "") => {
-                const translation = (Array.isArray(translationKey) ? translationKey : [translationKey])
-                    .map((key) => this.props.formContext.translations[key])
-                    .join(". ");
-                throw `${translation} ${additionalInfo}`;
-            };
-            return this.processFiles(files).then(processedFiles => {
-                let invalidFile = (files.length <= 0);
-                let fileTooLarge = false;
-                let noValidData = true;
-                if (!this._context.tmpMedias[containerId]) {
-                    this._context.tmpMedias[containerId] = {};
-                }
-                tmpMedias = processedFiles.map(f => {
-                    mediaUuid++;
-                    this._context.tmpMedias[containerId][mediaUuid] = f.dataURL;
-                    return mediaUuid;
-                });
-                this.mounted && this.setState({ tmpMedias: [...(this.state.tmpMedias || []), ...tmpMedias] });
-                const formDataBody = files.reduce((body, file) => {
-                    if (!this.ALLOWED_FILE_TYPES.includes(file.type)) {
-                        invalidFile = true;
-                    }
-                    else if (file.size > this.MAX_FILE_SIZE) {
-                        fileTooLarge = true;
-                    }
-                    else {
-                        body.append("data", file);
-                        noValidData = false;
-                    }
-                    return body;
-                }, new FormData());
-                if (noValidData && invalidFile) {
-                    fail("AllowedFileFormats", this.getAllowedMediaFormatsAsString() + ".");
-                    return;
-                }
-                else if (noValidData && fileTooLarge) {
-                    fail("AllowedFileSize", this.getMaxFileSizeAsString() + ".");
-                    return;
-                }
-                else {
-                    return this.apiClient.fetchRaw(`/${this.ENDPOINT}`, undefined, {
-                        method: "POST",
-                        body: formDataBody
-                    });
-                }
-            }).then(response => {
-                if (!response)
-                    return;
-                if (response.status < 400) {
-                    return response.json();
-                }
-                else if (response.status === 400) {
-                    fail("InvalidFile");
-                }
-                else if (response.status === 503) {
-                    fail("InsufficientSpace");
-                }
-                else {
-                    fail(["SomethingWentWrong", "TryAgainLater"]);
-                }
-            }).then(response => {
-                if (!response)
-                    return;
-                return this.getMetadataPromise().then(mediaMetadata => {
-                    return Promise.all(response.map((item) => {
-                        return this.apiClient.fetchRaw(`/${this.ENDPOINT}/${item.id}`, undefined, {
-                            method: "POST",
-                            headers: {
-                                "accept": "application/json",
-                                "content-type": "application/json"
-                            },
-                            body: JSON.stringify(mediaMetadata)
-                        }).then(response => {
-                            if (response.status < 400) {
-                                return response.json();
-                            }
-                        });
-                    }));
-                });
-            }).then(response => {
-                if (!response)
-                    return;
-                const ids = response.map((item) => item ? item.id : undefined).filter(item => item !== undefined);
-                tmpMedias.forEach(id => {
-                    delete this._context.tmpMedias[containerId][id];
-                });
-                this.mounted && this.setState({ tmpMedias: this.state.tmpMedias.filter(id => !tmpMedias.includes(id)) });
-                return ids;
-            }).catch((e) => {
-                if (tmpMedias) {
-                    tmpMedias.forEach(id => {
-                        delete this._context.tmpMedias[containerId][id];
-                    });
-                    this.mounted && this.setState({ tmpMedias: this.state.tmpMedias.filter(id => !tmpMedias.includes(id)) });
-                }
-                throw e;
-            });
-        }
-    };
-    MediaArrayField.contextType = ReactContext_1.default;
-    MediaArrayField.propTypes = {
-        uiSchema: PropTypes.shape({
-            "ui:options": PropTypes.shape({
-                titleClassName: PropTypes.string,
-                addModal: PropTypes.oneOfType([
-                    PropTypes.bool,
-                    PropTypes.shape({
-                        labels: PropTypes.shape({
-                            cancel: PropTypes.string
-                        })
-                    })
-                ]),
-                autoOpenAddModal: PropTypes.bool,
-                autoOpenMetadataModal: PropTypes.bool,
-                sideEffects: PropTypes.object,
-                exifParsers: PropTypes.arrayOf(PropTypes.object)
-            })
-        }),
-        schema: PropTypes.shape({
-            type: PropTypes.oneOf(["array"]),
-            items: PropTypes.shape({
-                type: PropTypes.oneOf(["string"]).isRequired
-            }).isRequired
-        }).isRequired,
-        formData: PropTypes.array
-    };
-    MediaArrayField.displayName = utils_1.getReactComponentName(ComposedComponent);
-    MediaArrayField = __decorate([
-        BaseComponent_1.default
-    ], MediaArrayField);
-    return MediaArrayField;
-}
-exports.MediaArrayField = MediaArrayField;
-class Thumbnail extends React.PureComponent {
-    constructor(props) {
-        super(props);
-        this.updateURL = ({ id, apiClient, apiEndpoint = "images" }) => {
-            if (!id)
-                return;
-            apiClient.fetchCached(`/${apiEndpoint}/${id}`, undefined, { failSilently: true }).then((response) => {
-                if (!this.mounted)
-                    return;
-                this.setState({ url: response.squareThumbnailURL });
-            });
-        };
-        this.state = {};
-        this.updateURL(props);
-    }
-    componentDidMount() {
-        this.mounted = true;
-    }
-    componentWillUnmount() {
-        this.mounted = false;
-    }
-    UNSAFE_componentWillReceiveProps(props) {
-        this.updateURL(props);
-    }
-    render() {
-        const url = this.state.url || this.props.dataURL;
-        const img = url ? React.createElement("img", { src: url }) : null;
-        return (!url || this.props.loading)
-            ? React.createElement("div", { className: "media-loading" },
-                img,
-                React.createElement(Spinner, null))
-            : img;
-    }
-}
-exports.Thumbnail = Thumbnail;