@luomus/laji-form 15.1.0 → 15.1.2

package/lib/components/fields/GeocoderField.js

@@ -1,372 +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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = require("react");
-const PropTypes = require("prop-types");
-const immutability_helper_1 = require("immutability-helper");
-const equals = require("deep-equal");
-const utils_1 = require("../../utils");
-const BaseComponent_1 = require("../BaseComponent");
-const fetch = require("isomorphic-fetch");
-const Context_1 = require("../../Context");
-const ReactContext_1 = require("../../ReactContext");
-const components_1 = require("../components");
-const Spinner = require("react-spinner");
-const globals_1 = require("@luomus/laji-map/lib/globals");
-const cache = {};
-let GeocoderField = class GeocoderField extends React.Component {
-    constructor(props) {
-        super(props);
-        this.onLocate = (geometry) => {
-            this.updateForGeometry(this.props, undefined, this.normalizeGeometry(geometry));
-        };
-        this.getOptions = (props) => {
-            return Object.assign({ updateOnlyEmpty: false, button: false, fields: ["country", "municipality", "biologicalProvince", "biogeographicalProvince", "administrativeProvince"] }, utils_1.getUiOptions((props || this.props).uiSchema));
-        };
-        this.onButtonClick = () => () => {
-            this.mounted ? this.setState(this.getStateFromProps(this.props, true), () => {
-                this.update(this.props, (failed = false) => {
-                    this.fetchedButton = this.fetchedButton ? this.fetchedButton + 1 : 1;
-                    this.mounted && this.setState(Object.assign(Object.assign({}, this.getStateFromProps(this.props, false)), { timeout: failed }));
-                });
-            }) :
-                this.update(this.props, (failed = false) => {
-                    this.mounted && this.setState(Object.assign(Object.assign({}, this.getStateFromProps(this.props, false)), { timeout: failed }));
-                });
-        };
-        this.getGeometry = (props) => {
-            const { uiSchema, formData = {} } = props;
-            const { geometryField = "geometry" } = utils_1.getUiOptions(uiSchema);
-            let geometry = this.normalizeGeometry(formData[geometryField]);
-            // TODO misses geometry collections
-            if (formData.units)
-                formData.units.forEach(({ unitGathering }) => {
-                    if (unitGathering && unitGathering.geometry && unitGathering.geometry.coordinates) {
-                        geometry = immutability_helper_1.default(geometry, { geometries: { $push: [unitGathering.geometry] } });
-                    }
-                });
-            return geometry;
-        };
-        this.normalizeGeometry = (geometry) => {
-            if (!geometry || !geometry.type) {
-                geometry = { type: "GeometryCollection", geometries: [] };
-            }
-            else if ("type" in geometry && geometry.type !== "GeometryCollection") {
-                geometry = { type: "GeometryCollection", geometries: [geometry] };
-            }
-            return geometry;
-        };
-        this.fetch = (url) => {
-            cache[url] = cache[url] || fetch(url).then(response => {
-                if (response.status >= 400) {
-                    throw new Error(this.props.formContext.translations.RequestFailed);
-                }
-                return response.json();
-            }).catch(() => {
-                delete cache[url];
-                throw new Error(this.props.formContext.translations.RequestFailed);
-            });
-            return cache[url];
-        };
-        this.update = (props, callback) => {
-            const geometry = this.getGeometry(props);
-            this.updateForGeometry(props, callback, geometry);
-        };
-        this.getComponentContext = () => {
-            return Context_1.default(`${this.props.formContext.contextId}_${utils_1.getFieldUUID(this.props)}_GEOCODERFIELD`);
-        };
-        this.updateForGeometry = (props, callback, geometry) => {
-            const { fields } = this.getOptions();
-            const fieldByKeys = fields.reduce((_fields, option) => {
-                _fields[option] = true;
-                return _fields;
-            }, {});
-            if (!geometry || !geometry.geometries || !geometry.geometries.length) {
-                this.mounted && this.setState(this.getStateFromProps(props, false));
-                return;
-            }
-            const bounds = L.geoJson({
-                type: "FeatureCollection",
-                features: geometry.geometries.map(geometry => {
-                    return { type: "Feature", properties: {}, geometry };
-                })
-            }).getBounds();
-            const center = bounds.getCenter();
-            const { lat, lng } = center;
-            const join = (oldValue, value) => utils_1.isEmptyString(oldValue) ? value : `${oldValue}, ${value}`;
-            const lajiFormInstance = props.formContext.services.rootInstance;
-            const timestamp = Date.now();
-            this.promiseTimestamp = timestamp;
-            const doAsync = () => {
-                this.getComponentContext().hook = props.formContext.services.submitHooks.add(props, () => new Promise((resolve, reject) => {
-                    const afterFetch = (callback, timeout = false) => {
-                        if (this.getComponentContext().fetching) {
-                            if (callback)
-                                callback(timeout);
-                        }
-                        this.getComponentContext().fetching = false;
-                        if (this.getComponentContext().resetRemountedState)
-                            this.getComponentContext().resetRemountedState(false);
-                    };
-                    const success = (callback, timeout) => {
-                        afterFetch(callback, timeout);
-                        resolve();
-                    };
-                    const fail = (e, callback, timeout) => {
-                        afterFetch(callback, timeout);
-                        reject(e);
-                    };
-                    const handleResponse = (country, ...fields) => (response) => {
-                        fields = fields.reduce((_fields, field) => {
-                            _fields[field] = true;
-                            return _fields;
-                        }, {});
-                        const changes = {};
-                        if (fieldByKeys.biologicalProvince) {
-                            changes.biologicalProvince = undefined;
-                        }
-                        if (fieldByKeys.biogeographicalProvince) {
-                            changes.biogeographicalProvince = undefined;
-                        }
-                        if (fieldByKeys.administrativeProvince) {
-                            changes.administrativeProvince = undefined;
-                        }
-                        const parsers = {
-                            country: {
-                                type: ["country"],
-                                responseField: "long_name"
-                            },
-                            administrativeProvince: {
-                                type: ["administrative_area_level_1"],
-                                responseField: "long_name"
-                            },
-                            municipality: {
-                                type: ["municipality", "administrative_area_level_3", "administrative_area_level_2"],
-                                responseField: "long_name"
-                            },
-                            biologicalProvince: {
-                                type: ["biogeographicalProvince"],
-                                responseField: "long_name"
-                            },
-                            biogeographicalProvince: {
-                                type: ["biogeographicalProvince"],
-                                responseField: "long_name"
-                            }
-                        };
-                        if (response.status === "OK") {
-                            const found = {};
-                            Object.keys(parsers).forEach(field => {
-                                const parser = parsers[field];
-                                parser.type.some((type, typeIdx) => {
-                                    response.results.forEach(result => result.address_components.forEach(addressComponent => {
-                                        if (addressComponent.types.includes(type)) {
-                                            if (!found[field])
-                                                found[field] = {};
-                                            if (!found[field][typeIdx])
-                                                found[field][typeIdx] = {};
-                                            const responseField = addressComponent[parser.responseField] ? parser.responseField : "short_name";
-                                            found[field][typeIdx][addressComponent[responseField]] = true;
-                                        }
-                                    }));
-                                    return found[field] && found[field][typeIdx];
-                                });
-                            });
-                            Object.keys(parsers).forEach(field => {
-                                if (!fieldByKeys[field] || !this.props.schema.properties[field]) {
-                                    return;
-                                }
-                                if (found[field]) {
-                                    const keys = Object.keys(found[field]);
-                                    const responseForField = found[field][keys[0]];
-                                    Object.keys(responseForField).forEach(value => {
-                                        // If target field is array.
-                                        if (this.props.schema.properties[field].type === "array") {
-                                            const temp = Array.from((this.props.formData || {})[field] || []);
-                                            // Find correct enum from fieldOptions.
-                                            const fieldOptions = this.props.uiSchema["ui:options"].fieldOptions;
-                                            const enumField = fieldOptions[fieldOptions.findIndex(element => {
-                                                return element.field === field;
-                                            })].enum;
-                                            // Find enum value from key (eg. municipalityName --> municipalityId).
-                                            const _enum = this.props.formContext.uiSchemaContext[enumField].oneOf;
-                                            const enumValue = _enum.find(item => item.title === value).const;
-                                            // Push enum value to changes.
-                                            if (enumValue !== undefined) {
-                                                !temp.includes(enumValue) && temp.push(enumValue);
-                                                changes[field] = temp;
-                                            }
-                                        }
-                                        else {
-                                            changes[field] = join(changes[field], value);
-                                        }
-                                    });
-                                }
-                                else {
-                                    changes[field] = utils_1.getDefaultFormState(this.props.schema.properties[field]);
-                                }
-                            });
-                            if (country && this.props.schema.properties.country && fieldByKeys.country)
-                                changes.country = country;
-                            success(() => {
-                                if (timestamp !== this.promiseTimestamp)
-                                    return;
-                                if (this.mounted) {
-                                    this.props.onChange(Object.assign(Object.assign({}, (this.props.formData || {})), changes));
-                                }
-                                else {
-                                    const pointer = this.props.formContext.services.ids.getJSONPointerFromLajiFormIdAndFormDataAndIdSchemaId(this.props.idSchema.$id, utils_1.getFieldUUID(this.props));
-                                    const newFormData = Object.assign(Object.assign({}, utils_1.parseJSONPointer(lajiFormInstance.getFormData(), pointer)), changes);
-                                    lajiFormInstance.onChange(utils_1.updateSafelyWithJSONPointer(lajiFormInstance.getFormData(), newFormData, pointer));
-                                }
-                                if (callback)
-                                    callback();
-                            });
-                        }
-                        else if (country) {
-                            fetchForeign();
-                        }
-                    };
-                    const fetchForeign = () => {
-                        if (!props.formContext.googleApiKey)
-                            return fail("No Google API key", callback);
-                        this.fetch(`https://maps.googleapis.com/maps/api/geocode/json\
-					?latlng=${lat},${lng}\
-					&key=${props.formContext.googleApiKey}\
-					&language=en\
-					&filter=country|administrative_area_level_1|administrative_area_level_2|administrative_area_level_3`).then(handleResponse(undefined, "country", "municipality", "administrativeProvince")).catch((e) => {
-                            fail(e.message, callback, !!"failed");
-                        });
-                    };
-                    this.getComponentContext().fetching = true;
-                    this.props.formContext.setTimeout(() => {
-                        if (timestamp !== this.promiseTimestamp)
-                            return;
-                        if (this.getComponentContext().fetching) {
-                            fail(this.props.formContext.translations.GeocodingTimeout);
-                            this.mounted && this.setState({ timeout: true }, () => {
-                                this.mounted && this.setState(this.getStateFromProps(this.props, false));
-                            });
-                        }
-                    }, 30 * 1000);
-                    !bounds.overlaps(globals_1.FINLAND_BOUNDS)
-                        ? fetchForeign()
-                        : this.props.formContext.apiClient.fetchRaw("/coordinates/location", undefined, {
-                            method: "POST",
-                            headers: {
-                                "accept": "application/json",
-                                "content-type": "application/json"
-                            },
-                            body: JSON.stringify(geometry)
-                        }).then(response => response.json()).then(handleResponse(props.formContext.translations.Finland, "municipality", "biologicalProvince", "biogeographicalProvince")).catch((e) => {
-                            fail(e.message);
-                        });
-                }));
-            };
-            if (this.getComponentContext().hook) {
-                this.props.formContext.services.submitHooks.remove(utils_1.getFieldUUID(this.props), this.getComponentContext().hook).then(doAsync);
-            }
-            else {
-                doAsync();
-            }
-        };
-        const loading = this.getComponentContext().fetching;
-        this.state = this.getStateFromProps(props, loading);
-    }
-    static getName() { return "GeocoderField"; }
-    UNSAFE_componentWillReceiveProps(props) {
-        const geometryUpdated = equals(this.getGeometry(props), this.getGeometry(this.props)) ? false : undefined;
-        this.setState(this.getStateFromProps(props, geometryUpdated));
-    }
-    componentDidMount() {
-        this.mounted = true;
-        this.componentDidUpdate();
-        this.props.formContext.services.customEvents.add(this.props.idSchema.$id, "locate", this.onLocate);
-        this.getComponentContext().resetRemountedState = (loading) => this.setState(this.getStateFromProps(this.props, loading));
-    }
-    componentWillUnmount() {
-        this.mounted = false;
-        this.props.formContext.services.customEvents.remove(this.props.idSchema.$id, "locate", this.onLocate);
-        delete this.getComponentContext().resetRemountedState;
-    }
-    componentDidUpdate(prevProps) {
-        const { updateOnlyEmpty, button, fields } = this.getOptions(this.props);
-        const hasData = fields.some(field => !utils_1.isEmptyString((this.props.formData || {})[field]));
-        const geometry = this.getGeometry(this.props);
-        const geometriesEqual = prevProps && equals(this.getGeometry(prevProps), geometry);
-        const geometryEmpty = geometry && geometry.geometries && geometry.geometries.length === 0;
-        if (updateOnlyEmpty && !geometryEmpty && hasData) {
-            return;
-        }
-        if (!prevProps && hasData) {
-            return;
-        }
-        if ((geometryEmpty && prevProps && !geometriesEqual) // was emptied
-            ||
-                (((this.state.loading === undefined && !this.state && geometry) || !geometriesEqual))) {
-            button ? this.onButtonClick()() : this.update(this.props);
-        }
-    }
-    getStateFromProps(props, loading) {
-        const state = { loading };
-        const { button } = this.getOptions(props);
-        const innerUiSchema = utils_1.getInnerUiSchema(props.uiSchema);
-        if (button) {
-            state.uiSchema = Object.assign(Object.assign({}, innerUiSchema), { "ui:options": Object.assign(Object.assign({}, utils_1.getUiOptions(innerUiSchema)), { buttons: [
-                        ...(utils_1.getUiOptions(innerUiSchema).buttons || []),
-                        this.getButton(props, loading)
-                    ] }) });
-        }
-        else {
-            state.uiSchema = innerUiSchema;
-        }
-        return state;
-    }
-    getButton(props, loading) {
-        // Button is disabled when loading is false 
-        // (it is false only after fetch and no formData updates, otherwise it will be true/undefined.
-        const geometry = this.getGeometry(props);
-        return {
-            fn: this.onButtonClick,
-            position: "top",
-            key: loading,
-            render: onClick => (React.createElement(components_1.Button, { key: "geolocate", onClick: onClick, disabled: loading || props.disabled || props.readonly || !this.state.timeout && (loading === false || !geometry || !geometry.geometries || geometry.geometries.length === 0), className: "geocoder-btn" },
-                loading ? React.createElement(Spinner, null) : React.createElement(ReactContext_1.default.Consumer, null, ({ theme: { Glyphicon } }) => React.createElement(Glyphicon, { glyph: "globe" })),
-                " ",
-                props.formContext.translations.Geolocate))
-        };
-    }
-    render() {
-        const { SchemaField } = this.props.registry.fields;
-        return React.createElement(SchemaField, Object.assign({}, this.props, { uiSchema: this.state.uiSchema }));
-    }
-};
-GeocoderField.propTypes = {
-    uiSchema: PropTypes.shape({
-        "ui:options": PropTypes.shape({
-            updateOnlyEmpty: PropTypes.bool,
-            button: PropTypes.bool,
-            fields: PropTypes.arrayOf(PropTypes.oneOf((["country", "municipality",
-                "biologicalProvince", "biogeographicalProvince", "administrativeProvince"]))),
-            geometryField: PropTypes.string,
-            "fieldOptions": PropTypes.arrayOf(PropTypes.shape({
-                field: PropTypes.string,
-                enum: PropTypes.string
-            }))
-        }),
-        uiSchema: PropTypes.object
-    }).isRequired,
-    schema: PropTypes.shape({
-        type: PropTypes.oneOf(["object"])
-    }).isRequired,
-    formData: PropTypes.object
-};
-GeocoderField.contextType = ReactContext_1.default;
-GeocoderField = __decorate([
-    BaseComponent_1.default
-], GeocoderField);
-exports.default = GeocoderField;

package/lib/components/fields/GridLayoutField.d.ts

@@ -1,18 +0,0 @@
-export default GridLayoutField;
-declare function GridLayoutField(props: any): JSX.Element;
-declare namespace GridLayoutField {
-    namespace propTypes {
-        const uiSchema: PropTypes.Requireable<PropTypes.InferProps<{
-            "ui:grid": PropTypes.Requireable<PropTypes.InferProps<{
-                lg: PropTypes.Requireable<number | object>;
-                md: PropTypes.Requireable<number | object>;
-                sm: PropTypes.Requireable<number | object>;
-                xs: PropTypes.Requireable<number | object>;
-            }>>;
-        }>>;
-        const schema: PropTypes.Validator<PropTypes.InferProps<{
-            type: PropTypes.Requireable<string>;
-        }>>;
-    }
-}
-import * as PropTypes from "prop-types";

package/lib/components/fields/GridLayoutField.js

@@ -1,32 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = require("react");
-const PropTypes = require("prop-types");
-const utils_1 = require("../../utils");
-const GridLayoutField = (props) => {
-    let { schema, uiSchema } = props;
-    const { SchemaField } = props.registry.fields;
-    uiSchema = Object.assign(Object.assign({}, uiSchema), { "ui:grid": uiSchema["ui:options"] });
-    delete uiSchema["ui:field"];
-    if (utils_1.getUiOptions(uiSchema).label === false) {
-        Object.keys(schema.properties).forEach(propertyName => {
-            const propertyUiSchema = (uiSchema[propertyName] || {});
-            uiSchema[propertyName] = Object.assign(Object.assign({}, propertyUiSchema), { "ui:options": Object.assign(Object.assign({}, (propertyUiSchema["ui:options"] || {})), { label: false }) });
-        });
-    }
-    return React.createElement(SchemaField, Object.assign({}, props, { schema: schema, uiSchema: uiSchema }));
-};
-GridLayoutField.propTypes = {
-    uiSchema: PropTypes.shape({
-        "ui:grid": PropTypes.shape({
-            lg: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
-            md: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
-            sm: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
-            xs: PropTypes.oneOfType([PropTypes.number, PropTypes.object])
-        })
-    }),
-    schema: PropTypes.shape({
-        type: PropTypes.oneOf(["object"])
-    }).isRequired
-};
-exports.default = GridLayoutField;

package/lib/components/fields/HiddenField.d.ts

@@ -1,10 +0,0 @@
-export default HiddenField;
-declare function HiddenField(): JSX.Element;
-declare namespace HiddenField {
-    namespace propTypes {
-        const schema: PropTypes.Validator<PropTypes.InferProps<{
-            type: PropTypes.Requireable<string>;
-        }>>;
-    }
-}
-import * as PropTypes from "prop-types";

package/lib/components/fields/HiddenField.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = require("react");
-const PropTypes = require("prop-types");
-const HiddenField = () => { return React.createElement("div", null); };
-HiddenField.propTypes = {
-    schema: PropTypes.shape({
-        type: PropTypes.oneOf(["object", "array", "string", "number", "boolean", "integer"])
-    }).isRequired
-};
-exports.default = HiddenField;

package/lib/components/fields/ImageArrayField.d.ts

@@ -1,172 +0,0 @@
-import * as React from "react";
-import * as PropTypes from "prop-types";
-import { FieldProps } from "../LajiForm";
-import ApiClient from "../../ApiClient";
-interface ProcessedFile {
-    dataURL: string;
-    name: string;
-    size: number;
-    type: File["type"];
-}
-interface ImageArrayFieldState extends MediaArrayState {
-    modalMediaSrc: string;
-}
-interface MediaMetadataSchema {
-    capturerVerbatim?: string[];
-    intellectualOwner?: string;
-    intellectualRights?: string;
-}
-export default class ImageArrayField extends React.Component<FieldProps, ImageArrayFieldState> {
-    ALLOWED_FILE_TYPES: string[];
-    ACCEPT_FILE_TYPES: string[];
-    MAX_FILE_SIZE: number;
-    KEY: string;
-    ENDPOINT: string;
-    GLYPH: string;
-    TRANSLATION_TAKE_NEW: string;
-    TRANSLATION_SELECT_FILE: string;
-    TRANSLATION_NO_MEDIA: string;
-    CONTAINER_CLASS: string;
-    METADATA_FORM_ID: string;
-    renderMedia: (id: string) => JSX.Element;
-    renderLoadingMedia: (id: string) => JSX.Element;
-    onMediaClick: (i: number) => any;
-    renderModalMedia: () => JSX.Element;
-    formatValue(value: string[], options: any, props: FieldProps): string | null;
-}
-export interface MediaArrayState {
-    tmpMedias: number[];
-    addModal?: any;
-    dragging?: boolean;
-    metadataModalOpen?: number | false;
-    modalIdx?: number;
-    modalMediaSrc?: string;
-    modalMetadata?: any;
-    metadataSaveSuccess?: string | false;
-    metadataForm?: any;
-    alert?: boolean;
-    alertMsg?: string;
-}
-declare type Constructor<LFC> = new (...args: any[]) => LFC;
-export declare function MediaArrayField<LFC extends Constructor<React.Component<FieldProps, MediaArrayState>>>(ComposedComponent: LFC): {
-    new (...args: any[]): {
-        ALLOWED_FILE_TYPES: string[];
-        ACCEPT_FILE_TYPES: string[];
-        MAX_FILE_SIZE: number;
-        KEY: string;
-        ENDPOINT: string;
-        GLYPH: string;
-        TRANSLATION_TAKE_NEW: string;
-        TRANSLATION_SELECT_FILE: string;
-        TRANSLATION_NO_MEDIA: string;
-        CONTAINER_CLASS: string;
-        METADATA_FORM_ID: string;
-        deprecatedOptions: {
-            imageAddModal: string;
-            autoOpenImageAddModal: string;
-        };
-        apiClient: ApiClient;
-        _context: any;
-        mounted: boolean;
-        fetching: any;
-        addMediaContainerRef: React.RefObject<HTMLInputElement>;
-        getOptions: (uiSchema: any) => any;
-        componentDidMount(): void;
-        componentWillUnmount(): void;
-        onDragEnter: () => void;
-        onDragLeave: () => void;
-        onDrop: (files: File[]) => void;
-        defaultOnClick: () => void;
-        render(): JSX.Element;
-        onKeyDown: (e: KeyboardEvent | React.KeyboardEvent<Element>) => void;
-        renderMedias: () => any;
-        renderLoadingMedias: () => (JSX.Element | null)[];
-        openModalFor: (i: number) => () => void;
-        onMediaRmClick: (i: number) => () => void;
-        hideMetadataModal: () => void;
-        onMetadataFormChange: (formData: any) => void;
-        renderMetadataModal: () => JSX.Element | null;
-        onHideMediaAddModal: () => void;
-        renderMediaAddModal: () => JSX.Element | null;
-        onAlertOk: () => void;
-        parseExif: (files: File[]) => undefined | Promise<any>;
-        sideEffects: (formData: any) => void;
-        onFileFormChange: (files: File[]) => void;
-        getContainerId: () => number | "root";
-        saveMedias(files: File[]): Promise<any[] | undefined>;
-        addNameToDataURL: (dataURL: string, name: string) => string;
-        processFiles: (files: File[]) => Promise<ProcessedFile[]>;
-        processFile: (file: File) => Promise<ProcessedFile>;
-        onMediaMetadataUpdate: ({ formData }: {
-            formData: any;
-        }) => void;
-        getMetadataPromise: () => Promise<MediaMetadataSchema>;
-        getMaxFileSizeAsString: () => string;
-        getAllowedMediaFormatsAsString: () => string;
-        context: any;
-        setState<K extends keyof MediaArrayState>(state: MediaArrayState | ((prevState: Readonly<MediaArrayState>, props: Readonly<FieldProps>) => MediaArrayState | Pick<MediaArrayState, K> | null) | Pick<MediaArrayState, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<FieldProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
-        state: Readonly<MediaArrayState>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<FieldProps>, nextState: Readonly<MediaArrayState>, nextContext: any): boolean;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<FieldProps>, prevState: Readonly<MediaArrayState>): any;
-        componentDidUpdate?(prevProps: Readonly<FieldProps>, prevState: Readonly<MediaArrayState>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<FieldProps>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<FieldProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<FieldProps>, nextState: Readonly<MediaArrayState>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<FieldProps>, nextState: Readonly<MediaArrayState>, nextContext: any): void;
-    };
-    contextType: React.Context<import("../../ReactContext").ContextProps>;
-    propTypes: {
-        uiSchema: PropTypes.Requireable<PropTypes.InferProps<{
-            "ui:options": PropTypes.Requireable<PropTypes.InferProps<{
-                titleClassName: PropTypes.Requireable<string>;
-                addModal: PropTypes.Requireable<boolean | PropTypes.InferProps<{
-                    labels: PropTypes.Requireable<PropTypes.InferProps<{
-                        cancel: PropTypes.Requireable<string>;
-                    }>>;
-                }>>;
-                autoOpenAddModal: PropTypes.Requireable<boolean>;
-                autoOpenMetadataModal: PropTypes.Requireable<boolean>;
-                sideEffects: PropTypes.Requireable<object>;
-                exifParsers: PropTypes.Requireable<(object | null | undefined)[]>;
-            }>>;
-        }>>;
-        schema: PropTypes.Validator<PropTypes.InferProps<{
-            type: PropTypes.Requireable<string>;
-            items: PropTypes.Validator<PropTypes.InferProps<{
-                type: PropTypes.Validator<string>;
-            }>>;
-        }>>;
-        formData: PropTypes.Requireable<any[]>;
-    };
-    displayName: string;
-} & LFC;
-interface ThumbnailProps {
-    id?: string;
-    apiClient: ApiClient;
-    apiEndpoint?: string;
-    dataURL?: string;
-    loading?: boolean;
-}
-interface ThumbnailState {
-    url?: string;
-}
-export declare class Thumbnail extends React.PureComponent<ThumbnailProps, ThumbnailState> {
-    mounted: boolean;
-    constructor(props: ThumbnailProps);
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    UNSAFE_componentWillReceiveProps(props: ThumbnailProps): void;
-    updateURL: ({ id, apiClient, apiEndpoint }: ThumbnailProps) => void;
-    render(): JSX.Element | null;
-}
-export {};