@luomus/laji-form 15.1.4 → 15.1.6

package/lib/components/fields/GeocoderField.js

@@ -0,0 +1,372 @@
+"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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,32 @@
+"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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,11 @@
+"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

@@ -0,0 +1,172 @@
+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 {};