@luomus/laji-form 15.1.4 → 15.1.6

package/lib/components/fields/NamedPlaceChooserField.js

@@ -0,0 +1,380 @@
+"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 react_dom_1 = require("react-dom");
+const PropTypes = require("prop-types");
+const utils_1 = require("../../utils");
+const components_1 = require("../components");
+const Spinner = require("react-spinner");
+const Context_1 = require("../../Context");
+const ReactContext_1 = require("../../ReactContext");
+const BaseComponent_1 = require("../BaseComponent");
+const MapArrayField_1 = require("./MapArrayField");
+const globals_1 = require("@luomus/laji-map/lib/globals");
+const SelectWidget_1 = require("../widgets/SelectWidget");
+const PLACES_FETCH_FAIL = "PLACES_FETCH_FAIL";
+const PLACE_USE_FAIL = "PLACE_USE_FAIL";
+const PLACE_DELETE_FAIL = "PLACE_DELETE_FAIL";
+/**
+ * Compatible only with gatherings array and gathering object.
+ */
+let NamedPlaceChooserField = class NamedPlaceChooserField extends React.Component {
+    constructor(props) {
+        super(props);
+        this.getUiSchema = (props) => {
+            if (this.buttonDefinition) {
+                this.buttonDefinition = Object.assign(Object.assign({}, this.buttonDefinition), { label: props.formContext.translations.ChooseFromNamedPlace });
+                const innerUiSchema = utils_1.getInnerUiSchema(props.uiSchema);
+                const options = utils_1.getUiOptions(innerUiSchema);
+                return Object.assign(Object.assign({}, innerUiSchema), { "ui:options": Object.assign(Object.assign({}, options), { buttons: [
+                            this.buttonDefinition,
+                            ...(options.buttons || [])
+                        ] }) });
+            }
+            else {
+                return utils_1.getInnerUiSchema(props.uiSchema);
+            }
+        };
+        this.isGatheringsArray = () => this.props.schema.type === "array";
+        this.onPlaceSelected = (place) => {
+            const getGathering = (schema) => {
+                const whitelist = ["geometry", "country", "administrativeProvince", "biologicalProvince", "municipality", "locality", "localityDescription", "habitat", "habitatDescription"];
+                let gathering = utils_1.getDefaultFormState(schema);
+                const placeGathering = place.prepopulatedDocument.gatherings[0];
+                whitelist.forEach(prop => {
+                    if (prop in placeGathering && prop in schema.properties) {
+                        gathering[prop] = placeGathering[prop];
+                    }
+                });
+                gathering.namedPlaceID = place.id;
+                const tmpIdTree = this.props.formContext.services.ids.getRelativeTmpIdTree(this.props.idSchema.$id);
+                const [withLajiFormIds] = utils_1.addLajiFormIds(gathering, tmpIdTree, false);
+                return withLajiFormIds;
+            };
+            try {
+                let targetId, gathering, newFormData, zoomToData;
+                if (this.isGatheringsArray()) {
+                    gathering = getGathering(this.props.schema.items);
+                    newFormData = [
+                        ...(this.props.formData || []),
+                        gathering
+                    ];
+                    this.setState({ show: false });
+                    targetId = this.props.idSchema.$id;
+                    this.props.formContext.services.customEvents.send(targetId, "activeIdx", (this.props.formData || []).length);
+                }
+                else { // gathering object
+                    gathering = getGathering(this.props.schema);
+                    gathering.namedPlaceID = place.id;
+                    newFormData = Object.assign(Object.assign({}, this.props.formData), gathering);
+                    this.setState({ show: false });
+                    const splits = this.props.idSchema.$id.split("_");
+                    splits.pop();
+                    targetId = splits.join("_");
+                    zoomToData = true;
+                }
+                this.props.onChange(newFormData);
+                if (zoomToData)
+                    this.props.formContext.services.customEvents.send(targetId, "zoomToData", undefined);
+            }
+            catch (e) {
+                this.setState({ failed: PLACE_USE_FAIL });
+            }
+        };
+        this.onPlaceDeleted = (place, success) => {
+            this.apiClient.fetchRaw(`/named-places/${place.id}`, undefined, { method: "DELETE" }).then(response => {
+                if (response.status === 204) {
+                    // It takes a while for API to remove the place, so we remove it locally and then invalidate again after some time.
+                    this.removeIds[place.id] = true;
+                    this.apiClient.invalidateCachePath("/named-places");
+                    setTimeout(() => this.apiClient.invalidateCachePath("/named-places"), 2000);
+                    success();
+                }
+            }).catch(() => {
+                this.setState({ failed: PLACE_DELETE_FAIL });
+                this.props.formContext.notifier.error(this.props.formContext.translations.PlaceRemovalFailed);
+            });
+        };
+        this.onButtonClick = () => () => {
+            this.setState({ show: true });
+        };
+        this.updatePlaces = () => {
+            this.buttonDefinition = undefined;
+            this.apiClient.fetchCached("/named-places", { includePublic: false, pageSize: 100000 }).then(response => {
+                if (!this.mounted)
+                    return;
+                const state = { places: response.results.filter(p => !this.removeIds[p.id]).sort((a, b) => {
+                        if (a.name < b.name)
+                            return -1;
+                        if (a.name > b.name)
+                            return 1;
+                        return 0;
+                    }) };
+                if (response.results && response.results.length) {
+                    this.buttonDefinition = {
+                        fn: this.onButtonClick,
+                        fnName: "addNamedPlace",
+                        glyph: "map-marker",
+                        label: this.props.formContext.translations.ChooseFromNamedPlace,
+                        id: this.props.idSchema.$id,
+                        changesFormData: true,
+                        variant: "primary"
+                    };
+                    if (this.isGatheringsArray()) {
+                        this.buttonDefinition.rules = { canAdd: true };
+                    }
+                    else {
+                        this.buttonDefinition.position = "top";
+                    }
+                    const uiSchema = this.getUiSchema(this.props);
+                    state.uiSchema = uiSchema;
+                }
+                this.setState(state);
+            }).catch(() => {
+                this.setState({ failed: PLACES_FETCH_FAIL });
+            });
+        };
+        this.onHide = () => this.setState({ show: false });
+        this.apiClient = props.formContext.apiClient;
+        this.removeIds = {};
+    }
+    getStateFromProps(props) {
+        return { uiSchema: this.getUiSchema(props) };
+    }
+    componentDidMount() {
+        this.mounted = true;
+        this.updatePlaces();
+        this.apiClient.onCachePathInvalidation("/named-places", this.updatePlaces);
+    }
+    componentWillUnmount() {
+        this.mounted = false;
+        this.apiClient.removeOnCachePathInvalidation("/named-places", this.updatePlaces);
+    }
+    render() {
+        const { registry: { fields: { SchemaField } }, formContext } = this.props;
+        const { translations } = formContext;
+        const { failed } = this.state;
+        const { Modal, Alert } = this.context.theme;
+        return (React.createElement(React.Fragment, null,
+            React.createElement(SchemaField, Object.assign({}, this.props, { uiSchema: this.state.uiSchema })),
+            this.state.show ? (React.createElement(Modal, { dialogClassName: "laji-form map-dialog named-place-chooser-modal", show: true, onHide: this.onHide },
+                React.createElement(Modal.Header, { closeButton: true }, translations.ChooseNamedPlace),
+                React.createElement(Modal.Body, null,
+                    failed === PLACE_USE_FAIL && React.createElement(Alert, { variant: "danger" }, translations.NamedPlacesUseFail),
+                    failed === PLACES_FETCH_FAIL && React.createElement(Alert, { variant: "danger" }, translations.NamedPlacesFetchFail),
+                    React.createElement(NamedPlaceChooser, { places: this.state.places, failed: failed === PLACES_FETCH_FAIL ? true : false, formContext: formContext, onSelected: this.onPlaceSelected, onDeleted: this.onPlaceDeleted })))) : null));
+    }
+};
+NamedPlaceChooserField.contextType = ReactContext_1.default;
+NamedPlaceChooserField.propTypes = {
+    schema: PropTypes.shape({
+        type: PropTypes.oneOf(["object", "array"])
+    }).isRequired,
+    formData: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
+};
+NamedPlaceChooserField = __decorate([
+    BaseComponent_1.default
+], NamedPlaceChooserField);
+exports.default = NamedPlaceChooserField;
+class NamedPlaceChooser extends React.Component {
+    constructor(props) {
+        super(props);
+        this.onPlaceSelected = (place) => {
+            this.props.onSelected(place);
+        };
+        this.onPlaceDeleted = (place) => {
+            const onDelete = () => {
+                if (this.popupContainerElem && this.popupElem) {
+                    this.popupContainerElem.appendChild(react_dom_1.findDOMNode(this.popupElem));
+                }
+                this.mapElem.map.map.closePopup();
+                this.setState({ deleting: false, popupIdx: undefined });
+            };
+            this.setState({ deleting: true });
+            this.props.onDeleted(place, onDelete);
+        };
+        this.onSelectChange = (idx) => {
+            if (idx === undefined) {
+                return;
+            }
+            const { map } = this.mapElem;
+            const layers = this.idxToLayer[idx];
+            const [layer] = layers;
+            const bounds = map.getBoundsForLayers(layers);
+            const center = bounds.getCenter();
+            map.fitBounds(bounds, { animate: false });
+            this.props.formContext.setTimeout(() => layer.fire("click", { latlng: center }), 10);
+        };
+        this.onMapChange = (events) => {
+            events.some(({ type, idx }) => {
+                if (type === "active") {
+                    this.setState({ popupIdx: idx });
+                    const { map } = this.mapElem;
+                    if (this.geometryCollectionData) {
+                        map.setData();
+                    }
+                    this.geometryCollectionData = {
+                        geoData: this.props.places[idx].geometry
+                    };
+                    map.setData(this.geometryCollectionData);
+                    return true;
+                }
+            });
+        };
+        this.getFeatureStyle = (data) => {
+            const { feature = {} } = data || {};
+            function getColor(idx) {
+                const r = globals_1.NORMAL_COLOR.substring(1, 3);
+                const g = globals_1.NORMAL_COLOR.substring(3, 5);
+                const b = globals_1.NORMAL_COLOR.substring(5, 7);
+                return [r, g, b].reduce((rgb, hex) => {
+                    const decimal = parseInt(hex, 16);
+                    const amount = 40;
+                    const _decimal = (idx % 2) ? decimal : Math.min(decimal + amount, 255);
+                    return rgb + _decimal.toString(16);
+                }, "#");
+            }
+            const { idx } = feature.properties || {};
+            const color = idx === this.state.popupIdx ? globals_1.ACTIVE_COLOR : getColor(idx);
+            return { color, fillColor: color };
+        };
+        this.setPopupContainerRef = (elem) => {
+            this.popupContainerElem = elem;
+        };
+        this.state = {};
+    }
+    componentDidUpdate(prevProps, prevState) {
+        const { map } = this.mapElem;
+        this.idxToLayer = map.data.reduce((idxToLayer, item) => {
+            const layerGroup = item.group;
+            layerGroup.eachLayer(layer => {
+                if (!idxToLayer[layer.feature.properties.idx]) {
+                    idxToLayer[layer.feature.properties.idx] = [];
+                }
+                idxToLayer[layer.feature.properties.idx].push(layer);
+            });
+            return idxToLayer;
+        }, {});
+        if (this.state.popupIdx !== prevState.popupIdx) {
+            const prevLayers = this.idxToLayer[prevState.popupIdx] || [];
+            const layers = this.idxToLayer[this.state.popupIdx] || [];
+            [prevLayers, layers].forEach(layers => {
+                layers.forEach(layer => {
+                    if (layer) {
+                        map.setLayerStyle(layer, this.getFeatureStyle({ feature: layer.feature }));
+                    }
+                });
+            });
+        }
+    }
+    render() {
+        const { places, failed, formContext: { translations } } = this.props;
+        const that = this;
+        function getPopupRef(elem) {
+            that.popupElem = elem;
+        }
+        function getMapRef(elem) {
+            that.mapElem = elem;
+        }
+        function getPopup({ feature }, callback) {
+            const { idx } = feature.properties;
+            that.setState({ popupIdx: idx });
+            callback(react_dom_1.findDOMNode(that.popupElem));
+        }
+        const { Alert } = this.context.theme;
+        if (failed) {
+            return React.createElement(Alert, { variant: "danger" }, `${translations.NamedPlacesFetchFail} ${translations.TryAgainLater}`);
+        }
+        else {
+            const enums = (places || []).map((place, idx) => {
+                return { value: idx, label: place.name };
+            });
+            let pointer = 1;
+            const data = (places || []).reduce((data, place, i) => {
+                const { geometry } = place;
+                let isCollection = false;
+                if (geometry.type === "GeometryCollection") {
+                    isCollection = true;
+                }
+                if (isCollection) {
+                    data[pointer] = {
+                        geoData: { type: "FeatureCollection", features: geometry.geometries.map(geom => { return { type: "Feature", geometry: geom, properties: { idx: i } }; }) },
+                        getFeatureStyle: this.getFeatureStyle,
+                        getPopup,
+                        highlightOnHover: true
+                    };
+                    pointer++;
+                }
+                else {
+                    if (!data[0])
+                        data[0] = {
+                            geoData: { type: "FeatureCollection", features: [] },
+                            getFeatureStyle: this.getFeatureStyle,
+                            getPopup,
+                            cluster: true,
+                            highlightOnHover: true
+                        };
+                    data[0].geoData.features.push({ type: "Feature", geometry, properties: { idx: i } });
+                }
+                return data;
+            }, []);
+            return (React.createElement("div", { style: { height: "inherit" } },
+                React.createElement(SelectWidget_1.default, { disabled: !places, options: { enumOptions: enums, placeholder: `${translations.SelectPlaceFromList}...` }, onChange: this.onSelectChange, selectOnChange: false, schema: {}, id: "named-place-chooser-select", formContext: this.props.formContext }),
+                React.createElement(MapArrayField_1.Map, { ref: getMapRef, data: data, markerPopupOffset: 45, featurePopupOffset: 5, controls: { draw: false }, lang: this.props.formContext.lang, bodyAsDialogRoot: false, formContext: this.props.formContext }),
+                (!places) ? React.createElement(Spinner, null) : null,
+                React.createElement("div", { style: { display: "none" }, ref: this.setPopupContainerRef },
+                    React.createElement(Popup, { ref: getPopupRef, place: (places || [])[this.state.popupIdx], onPlaceSelected: this.onPlaceSelected, onPlaceDeleted: this.onPlaceDeleted, deleting: this.state.deleting, formContext: this.props.formContext, translations: translations }))));
+        }
+    }
+}
+NamedPlaceChooser.contextType = ReactContext_1.default;
+class Popup extends React.Component {
+    constructor() {
+        super(...arguments);
+        this._onPlaceSelected = () => {
+            this.props.onPlaceSelected(this.props.place);
+        };
+        this._onPlaceDeleted = () => {
+            this.props.onPlaceDeleted(this.props.place);
+        };
+        this.getButtonRef = (elem) => {
+            this.buttonElem = elem;
+        };
+    }
+    componentDidUpdate() {
+        this.props.formContext.setTimeout(() => {
+            if (this.buttonElem)
+                react_dom_1.findDOMNode(this.buttonElem).focus();
+        });
+    }
+    render() {
+        const { place, translations, deleting } = this.props;
+        return place ? (React.createElement("div", { className: "named-place-popup" },
+            React.createElement("table", null,
+                React.createElement("tbody", null, [
+                    ["Name", "name"],
+                    ["Notes", "notes"]
+                ].reduce((fieldset, [translationKey, fieldName], i) => {
+                    if (!utils_1.isEmptyString(place[fieldName]))
+                        fieldset.push(React.createElement("tr", { key: i },
+                            React.createElement("td", null,
+                                React.createElement("b", null,
+                                    translations[translationKey],
+                                    ": ")),
+                            React.createElement("td", null, place[fieldName])));
+                    return fieldset;
+                }, []))),
+            React.createElement(components_1.Button, { block: true, ref: this.getButtonRef, onClick: this._onPlaceSelected }, translations.UseThisPlace),
+            React.createElement(components_1.DeleteButton, { block: true, onClick: this._onPlaceDeleted, disabled: deleting, glyphButton: false, confirm: true, confirmStyle: "browser", translations: translations },
+                translations.Remove,
+                " ",
+                deleting && React.createElement(Spinner, null)))) : React.createElement(Spinner, null);
+    }
+}
+Context_1.default("SCHEMA_FIELD_WRAPPERS").NamedPlaceChooserField = true;

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

@@ -0,0 +1,29 @@
+/**
+ * Compatible only with gathering field.
+ */
+export default class NamedPlaceSaverField extends React.Component<any, any, any> {
+    static contextType: React.Context<import("../../ReactContext").ContextProps>;
+    static propTypes: {
+        schema: PropTypes.Validator<PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+        }>>;
+        formData: PropTypes.Requireable<object>;
+    };
+    constructor(props: any);
+    constructor(props: any, context: any);
+    getStateFromProps(props: any): {
+        uiSchema: any;
+    };
+    getButton(props: any): {
+        label: any;
+        fn: () => () => void;
+        glyph: string;
+        position: string;
+        disabled: boolean;
+    };
+    onButtonClick: () => () => void;
+    onSave: (place: any) => void;
+    onHide: () => void;
+}
+import * as React from "react";
+import * as PropTypes from "prop-types";

package/lib/components/fields/NamedPlaceSaverField.js

@@ -0,0 +1,237 @@
+"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 });
+const React = require("react");
+const react_dom_1 = require("react-dom");
+const PropTypes = require("prop-types");
+const utils_1 = require("../../utils");
+const components_1 = require("../components");
+const Context_1 = require("../../Context");
+const ReactContext_1 = require("../../ReactContext");
+const BaseComponent_1 = require("../BaseComponent");
+const Spinner = require("react-spinner");
+const MapArrayField_1 = require("./MapArrayField");
+const SAVE = "SAVE", FETCH = "FETCH";
+/**
+ * Compatible only with gathering field.
+ */
+let NamedPlaceSaverField = class NamedPlaceSaverField extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.onButtonClick = () => () => {
+            this.setState({ show: !this.state.show });
+        };
+        this.onSave = (place) => {
+            this.setState({ show: false }, () => {
+                this.props.onChange(Object.assign(Object.assign({}, (this.props.formData || {})), { namedPlaceID: place.id }));
+            });
+        };
+        this.onHide = () => this.setState({ show: false });
+    }
+    getStateFromProps(props) {
+        const innerUiSchema = utils_1.getInnerUiSchema(props.uiSchema);
+        const 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)
+                ] }) });
+        return { uiSchema };
+    }
+    getButton(props) {
+        return {
+            label: props.formContext.translations.SaveNamedPlace,
+            fn: this.onButtonClick,
+            glyph: "floppy-disk",
+            position: "top",
+            disabled: !MapArrayField_1.parseGeometries((props.formData || {}).geometry).length
+        };
+    }
+    componentDidUpdate(prevProps, prevState) {
+        if (prevState.show !== this.state.show)
+            this.setState(this.getStateFromProps(this.props));
+    }
+    render() {
+        const { registry: { fields: { SchemaField } }, formContext } = this.props;
+        const { uiSchema } = this.state;
+        const { Modal } = this.context.theme;
+        return (React.createElement("div", null,
+            React.createElement(SchemaField, Object.assign({}, this.props, { uiSchema: uiSchema })),
+            this.state && this.state.show
+                ? (React.createElement(Modal, { dialogClassName: "laji-form", show: true, onHide: this.onHide },
+                    React.createElement(Modal.Header, null,
+                        React.createElement(Modal.Title, null, formContext.translations.NamedPlaces)),
+                    React.createElement(Modal.Body, null,
+                        React.createElement(PlaceSaverDialog, { formContext: formContext, onSave: this.onSave, gathering: this.props.formData || {} })))) : null));
+    }
+};
+NamedPlaceSaverField.contextType = ReactContext_1.default;
+NamedPlaceSaverField.propTypes = {
+    schema: PropTypes.shape({
+        type: PropTypes.oneOf(["object"])
+    }).isRequired,
+    formData: PropTypes.object
+};
+NamedPlaceSaverField = __decorate([
+    BaseComponent_1.default
+], NamedPlaceSaverField);
+exports.default = NamedPlaceSaverField;
+class PlaceSaverDialog extends React.Component {
+    constructor(props) {
+        super(props);
+        this.onInputChange = ({ target: { value } }) => {
+            this.setState({ value });
+        };
+        this.getGathering = () => {
+            return ["geometry", "country", "administrativeProvince", "biologicalProvince", "municipality", "locality", "localityDescription", "habitat", "habitatDescription", "coordinateRadius"].reduce((gathering, key) => {
+                gathering[key] = this.props.gathering[key];
+                return gathering;
+            }, {});
+        };
+        this.onSaveNew = (e) => {
+            e.preventDefault();
+            const _a = this.getGathering(), { namedPlaceID } = _a, gathering = __rest(_a, ["namedPlaceID"]); //eslint-disable-line @typescript-eslint/no-unused-vars
+            this.onSave({
+                name: this.state.value,
+                prepopulatedDocument: { gatherings: [gathering] }
+            });
+        };
+        this.onOverwriteCurrent = () => {
+            const { namedPlaceID } = this.props.gathering;
+            const gathering = this.getGathering(); //eslint-disable-line no-unused-vars
+            this.onSave(Object.assign(Object.assign({}, this.state.placeIdsToPlaces[namedPlaceID]), { name: this.state.value, prepopulatedDocument: { gatherings: [gathering] } }));
+        };
+        this.onOverwriteSelected = (place) => () => {
+            const gathering = this.getGathering(); //eslint-disable-line no-unused-vars
+            this.onSave(Object.assign(Object.assign({}, place), { name: this.state.value, prepopulatedDocument: { gatherings: [gathering] } }));
+        };
+        this.onOverwriteExisting = () => {
+            this.onOverwriteSelected(this.state.placeNamesToPlaces[this.state.value])();
+        };
+        // Hack that fixed autofocus cursor position
+        this.onFocus = (e) => {
+            var val = e.target.value;
+            e.target.value = "";
+            e.target.value = val;
+        };
+        this.onSubmit = (e) => {
+            e.preventDefault();
+        };
+        this.setInputRef = (elem) => {
+            this.inputRef = elem;
+        };
+        const { namedPlaceID, locality = "" } = props.gathering;
+        this.state = { value: locality };
+        if (namedPlaceID) {
+            this.state = { value: "", loading: true };
+        }
+        this.apiClient = props.formContext.apiClient;
+    }
+    componentWillUnmount() {
+        this.mounted = false;
+    }
+    componentDidMount() {
+        this.mounted = true;
+        this.apiClient.fetchCached("/named-places", { includePublic: false, pageSize: 1000 }).then(response => {
+            if (!this.mounted)
+                return;
+            const state = {
+                places: response.results,
+                placeIdsToPlaces: response.results.reduce((idsToPlaces, place) => {
+                    idsToPlaces[place.id] = place;
+                    return idsToPlaces;
+                }, {}),
+                placeNamesToPlaces: response.results.reduce((namesToPlaces, place) => {
+                    if (!namesToPlaces[place.name])
+                        namesToPlaces[place.name] = [];
+                    namesToPlaces[place.name].push(place);
+                    return namesToPlaces;
+                }, {})
+            };
+            const { namedPlaceID } = this.props.gathering;
+            if (namedPlaceID) {
+                state.value = state.placeIdsToPlaces[namedPlaceID].name;
+                state.loading = false;
+            }
+            this.setState(state, () => {
+                if (namedPlaceID) {
+                    react_dom_1.findDOMNode(this.inputRef).focus();
+                }
+            });
+        }).catch(() => {
+            this.setState({ failed: FETCH });
+        });
+    }
+    onSave(place) {
+        place = Object.assign(Object.assign({}, place), { geometry: place.prepopulatedDocument.gatherings[0].geometry });
+        this.props.formContext.services.blocker.push();
+        this.apiClient.fetchRaw(`/named-places${place.id ? `/${place.id}` : ""}`, undefined, {
+            method: place.id ? "PUT" : "POST",
+            headers: {
+                "accept": "application/json",
+                "content-type": "application/json"
+            },
+            body: JSON.stringify(place)
+        }).then(response => {
+            this.props.formContext.services.blocker.pop();
+            this.apiClient.invalidateCachePath("/named-places");
+            return response.json();
+        }).then(this.props.onSave)
+            .catch(() => {
+            this.props.formContext.services.blocker.pop();
+            this.setState({ failed: SAVE });
+        });
+    }
+    render() {
+        const { value, placeNamesToPlaces = {}, loading } = this.state;
+        const { translations } = this.props.formContext;
+        const existingPlaces = (placeNamesToPlaces[value] || []).filter(place => {
+            return (place.owners || []).includes(this.props.formContext.uiSchemaContext.creator);
+        });
+        const getButton = (onClick, text) => {
+            return React.createElement(components_1.Button, { small: true, onClick: onClick, disabled: loading || utils_1.isEmptyString(value) }, text);
+        };
+        const { Panel, FormGroup, FormControl, ListGroup, ListGroupItem, Alert, Form, ControlLabel } = this.context.theme;
+        return this.state.failed ? (React.createElement(Alert, { variant: "danger" }, `${translations[`NamedPlaces${this.state.failed === FETCH ? "Fetch" : "Save"}Fail`]} ${translations.TryAgainLater}`)) : (React.createElement("div", { className: "place-saver-dialog" },
+            React.createElement(Form, { inline: true, onSubmit: this.onSubmit },
+                React.createElement(FormGroup, null,
+                    React.createElement(ControlLabel, null,
+                        translations.Name,
+                        ": "),
+                    " ",
+                    React.createElement(FormControl, { type: "text", value: value, onChange: this.onInputChange, autoFocus: true, onFocus: this.onFocus, disabled: loading, ref: this.setInputRef }),
+                    " ",
+                    !existingPlaces.length ?
+                        getButton(this.onSaveNew, `${translations.Save} ${translations.new}`) : null,
+                    " ",
+                    this.props.gathering.namedPlaceID ?
+                        getButton(this.onOverwriteCurrent, translations.SaveCurrentOverwrite) : null,
+                    existingPlaces.length === 1 && !this.props.gathering.namedPlaceID ?
+                        getButton(this.onOverwriteExisting, translations.SaveExistingOverwrite) : null),
+                loading ? React.createElement("div", { className: "pull-right" },
+                    React.createElement(Spinner, null)) : null),
+            !this.props.gathering.namedPlaceID && existingPlaces.length ?
+                React.createElement(Alert, { variant: "warning" }, `${translations.Warning}: ${translations.UsedNamedPlaceName}.${existingPlaces.length > 1 ? ` ${translations.UsedNamedPlaceNameMultiple}.` : ""}`)
+                : null,
+            existingPlaces.length > 1 ? (React.createElement(FormGroup, null,
+                React.createElement(Panel, null,
+                    React.createElement(Panel.Heading, null, translations.ClickPlaceToOverwrite),
+                    React.createElement(ListGroup, { fill: "fill" }, existingPlaces.map(place => React.createElement(ListGroupItem, { header: place.name, key: place.id, onClick: loading ? undefined : this.onOverwriteSelected(place), disabled: loading }, place.notes)))))) : null));
+    }
+}
+PlaceSaverDialog.contextType = ReactContext_1.default;
+Context_1.default("SCHEMA_FIELD_WRAPPERS").NamedPlaceSaverField = true;