@luomus/laji-form 15.1.57 → 15.1.59

package/lib/components/fields/MapField.js

@@ -420,14 +420,21 @@ class MobileEditorMap extends React.Component {
                 this.onClose();
             }
         };
+        this.activateLocate = () => {
+            this.handleLocateToggle(true);
+        };
+        this.handleLocateToggle = (bool) => {
+            this.setState({ locateActive: bool, hasLocated: false });
+            this.map.setOption("locate", { on: bool });
+        };
         this.onLocate = (latlng) => {
-            if (!latlng || this.state.located) {
+            if (!latlng || this.state.hasLocated) {
                 return;
             }
             this.map.map.setView({ lng: latlng.lng, lat: latlng.lat }, 12);
             this.setMarkerLatLng(latlng);
-            if (!this.state.located) {
-                this.setState({ located: true });
+            if (!this.state.hasLocated) {
+                this.setState({ hasLocated: true });
             }
             if (!this.props.moved) {
                 this.props.setMoved(true);
@@ -439,12 +446,14 @@ class MobileEditorMap extends React.Component {
         const { geometry } = this.props;
         this.state = {
             geometry: [{ geoData: geometry }],
-            located: false
+            locateActive: false,
+            hasLocated: false
         };
     }
     componentDidMount() {
         this.mounted = true;
         this.okButtonElem.focus();
+        this.map.setLocateOff();
         if (this.props.geometry) {
             const [lng, lat] = this.props.geometry.coordinates;
             this.setMarkerLatLng({ lng, lat });
@@ -475,7 +484,7 @@ class MobileEditorMap extends React.Component {
         const { userLocation } = this.props;
         const { translations } = this.props.formContext;
         const mapComponentProps = Object.assign(Object.assign(Object.assign({}, options), (this.props.options || {})), { locate: {
-                on: false,
+                on: this.state.locateActive,
                 userLocation,
                 onLocationFound: this.onLocate,
                 panOnFound: false
@@ -483,8 +492,9 @@ class MobileEditorMap extends React.Component {
                 panelTextContent: this.props.formContext.translations.MobileMapInstructions
             } });
         return (React.createElement(components_1.Fullscreen, { onKeyDown: this.onKeyDown, tabIndex: -1, ref: this.setContainerRef, formContext: this.props.formContext },
-            React.createElement(MapArrayField_1.MapComponent, Object.assign({}, mapComponentProps)),
+            React.createElement(MapArrayField_1.MapComponent, Object.assign({}, mapComponentProps, { onLocateToggle: this.handleLocateToggle })),
             React.createElement("div", { className: "floating-buttons-container" },
-                React.createElement(components_1.Button, { block: true, onClick: this.onChange, className: "choose-location-button", variant: "primary", ref: this.setOkButtonRef, disabled: !this.props.moved }, translations.ChooseThisLocation))));
+                React.createElement(components_1.Button, { block: true, onClick: this.onChange, className: "choose-location-button", variant: "primary", ref: this.setOkButtonRef, disabled: !this.props.moved }, translations.ChooseThisLocation),
+                React.createElement(components_1.Button, { block: true, onClick: this.activateLocate, className: "locate-me-button", variant: "default", disabled: this.state.locateActive }, translations.LocateMe))));
     }
 }

package/lib/components/fields/MultiTagArrayField.js

@@ -118,7 +118,7 @@ let MultiTagArrayField = class MultiTagArrayField extends React.Component {
                     React.createElement("div", { className: "btn-group-vertical" }, buttons.map((btnProps, idx) => (React.createElement(components_1.Button, { key: idx, onClick: this.onButtonClick(idx), variant: btnProps.operation === "delete" ? "outline-danger" : "default", className: utils_1.classNames(btnProps.className, activeButtonIdx === idx ? "active" : ""), disabled: disabled || readonly }, btnProps.label)))))),
             React.createElement(Col, { xs: 9, sm: 9, md: 10, lg: 10, className: "laji-form-multi-tag-array-field-content" }, propertyKeys.map(key => {
                 var _a, _b;
-                return (React.createElement(SchemaField, Object.assign({}, this.props, { key: key, schema: Object.assign({ title: "" }, schema.properties[key]), uiSchema: Object.assign(Object.assign({ "ui:field": "TagArrayField" }, uiSchema[key]), { "ui:options": Object.assign(Object.assign(Object.assign({}, uiOptions), { buttons: undefined, onTagClick: this.onTagClick(key) }), (_a = uiSchema[key]) === null || _a === void 0 ? void 0 : _a["ui:options"]) }), errorSchema: errorSchema[key] || {}, idSchema: idSchema[key], formData: formData[key] || [], required: ((_b = uiSchema[key]) === null || _b === void 0 ? void 0 : _b["ui:required"]) || false, onChange: this.onChange(key) })));
+                return (React.createElement(SchemaField, Object.assign({}, this.props, { key: key, schema: Object.assign({ title: "" }, schema.properties[key]), uiSchema: Object.assign(Object.assign({ "ui:field": "TagArrayField" }, uiSchema[key]), { "ui:options": Object.assign(Object.assign(Object.assign({}, uiOptions), { buttons: undefined, onTagClick: this.onTagClick(key) }), (_a = uiSchema[key]) === null || _a === void 0 ? void 0 : _a["ui:options"]) }), errorSchema: errorSchema[key] || {}, idSchema: idSchema[key], formData: formData[key] || [], required: ((_b = uiSchema[key]) === null || _b === void 0 ? void 0 : _b["ui:required"]) || false, onChange: this.onChange(key), onBlur: this.props.onBlur, onFocus: this.props.onFocus, disabled: this.props.disabled, readonly: this.props.readonly, name: this.props.name })));
             }))));
     }
 };

package/lib/components/fields/NamedPlaceChooserField/NamedPlaceChooser.d.ts

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { ByLang, FormContext } from "../../LajiForm";
+import { NamedPlace } from "@luomus/laji-schema";
+import memoize from "memoizee";
+declare type Props = {
+    places: NamedPlace[];
+    failed?: boolean;
+    formContext: FormContext;
+    onSelected: (place: NamedPlace) => void;
+    onDeleted: (place: NamedPlace, callback: () => void) => void;
+};
+declare type State = {
+    deleting?: boolean;
+    popupIdx?: number;
+};
+export declare class NamedPlaceChooser extends React.Component<Props, State> {
+    static contextType: React.Context<import("../../../ReactContext").ContextProps>;
+    popupRef: React.RefObject<{
+        elem: HTMLElement;
+        button: HTMLElement;
+    }>;
+    popupContainerRef: React.RefObject<HTMLDivElement>;
+    mapRef: React.RefObject<any>;
+    idxToLayer?: Record<string, any>;
+    geometryCollectionData?: {
+        geoData: any;
+    };
+    constructor(props: Props);
+    onPlaceSelected: (place: NamedPlace) => void;
+    onPlaceDeleted: (place: NamedPlace) => void;
+    onSelectChange: (idx: number | undefined) => void;
+    componentDidUpdate(_: Props, prevState: State): void;
+    getFeatureStyle: (data: any) => {
+        color: string;
+        fillColor: string;
+    };
+    getPopup: ({ feature }: any, givePopupToLajiMap: (element: HTMLElement) => void) => void;
+    onPopupClose: () => void;
+    getEnumOptions: ((places: NamedPlace[], translations: ByLang) => {
+        placeholder: string;
+        enumOptions: {
+            value: number;
+            label: string;
+        }[];
+    }) & memoize.Memoized<(places: NamedPlace[], translations: ByLang) => {
+        placeholder: string;
+        enumOptions: {
+            value: number;
+            label: string;
+        }[];
+    }>;
+    render(): JSX.Element;
+}
+export {};

package/lib/components/fields/NamedPlaceChooserField/NamedPlaceChooser.js

@@ -0,0 +1,169 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NamedPlaceChooser = void 0;
+const React = __importStar(require("react"));
+const react_dom_1 = require("react-dom");
+const react_spinner_1 = __importDefault(require("react-spinner"));
+const ReactContext_1 = __importDefault(require("../../../ReactContext"));
+const MapArrayField_1 = require("../MapArrayField");
+const globals_1 = require("@luomus/laji-map/lib/globals");
+const SelectWidget_1 = require("../../widgets/SelectWidget");
+const Popup_1 = require("./Popup");
+const memoizee_1 = __importDefault(require("memoizee"));
+class NamedPlaceChooser extends React.Component {
+    constructor(props) {
+        super(props);
+        this.popupRef = React.createRef();
+        this.popupContainerRef = React.createRef();
+        this.mapRef = React.createRef();
+        this.onPlaceSelected = (place) => {
+            this.props.onSelected(place);
+        };
+        this.onPlaceDeleted = (place) => {
+            const onDelete = () => {
+                this.mapRef.current.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.mapRef.current;
+            const layers = this.idxToLayer[idx];
+            const [layer] = layers;
+            const bounds = map.getBoundsForLayers(layers);
+            const center = bounds.getCenter();
+            map.fitBounds(bounds, { animate: false });
+            layer.fire("click", { latlng: center });
+        };
+        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.getPopup = ({ feature }, givePopupToLajiMap) => {
+            const { elem, button } = this.popupRef.current;
+            const { idx } = feature.properties;
+            this.setState({ popupIdx: idx });
+            givePopupToLajiMap(elem);
+            this.props.formContext.setTimeout(() => react_dom_1.findDOMNode(button).focus());
+        };
+        this.onPopupClose = () => {
+            this.popupContainerRef.current.appendChild(react_dom_1.findDOMNode(this.popupRef.current.elem));
+        };
+        this.getEnumOptions = memoizee_1.default((places, translations) => ({
+            placeholder: `${translations.SelectPlaceFromList}...`,
+            enumOptions: (places || []).map((place, idx) => {
+                return { value: idx, label: place.name };
+            })
+        }));
+        this.state = {};
+    }
+    componentDidUpdate(_, prevState) {
+        const { map } = this.mapRef.current;
+        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 { Alert } = this.context.theme;
+        if (failed) {
+            return React.createElement(Alert, { variant: "danger" }, `${translations.NamedPlacesFetchFail} ${translations.TryAgainLater}`);
+        }
+        else {
+            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: this.getPopup,
+                        highlightOnHover: true
+                    };
+                    pointer++;
+                }
+                else {
+                    if (!data[0])
+                        data[0] = {
+                            geoData: { type: "FeatureCollection", features: [] },
+                            getFeatureStyle: this.getFeatureStyle,
+                            getPopup: this.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.SearchableDrowndown, { value: this.state.popupIdx, disabled: !places, options: this.getEnumOptions(places, translations), onChange: this.onSelectChange, selectOnChange: false, includeEmpty: true, id: "named-place-chooser-select", formContext: this.props.formContext }),
+                React.createElement(MapArrayField_1.Map, { ref: this.mapRef, data: data, markerPopupOffset: 45, featurePopupOffset: 5, controls: { draw: false }, lang: this.props.formContext.lang, bodyAsDialogRoot: false, formContext: this.props.formContext, onPopupClose: this.onPopupClose }),
+                (!places) ? React.createElement(react_spinner_1.default, null) : null,
+                React.createElement("div", { style: { display: "none" }, ref: this.popupContainerRef },
+                    React.createElement(Popup_1.Popup, { ref: this.popupRef, place: (places || [])[this.state.popupIdx], onPlaceSelected: this.onPlaceSelected, onPlaceDeleted: this.onPlaceDeleted, deleting: this.state.deleting, translations: translations }))));
+        }
+    }
+}
+exports.NamedPlaceChooser = NamedPlaceChooser;
+NamedPlaceChooser.contextType = ReactContext_1.default;

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

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { FieldProps, JSONSchemaArray, JSONSchemaObject } from "../../../types";
+import { NamedPlace } from "@luomus/laji-schema";
+declare type Props = FieldProps<NamedPlace, JSONSchemaObject | JSONSchemaArray<JSONSchemaObject>>;
+declare type State = {
+    show?: boolean;
+    failed?: string;
+    buttonDefinition?: any;
+    places?: NamedPlace[];
+};
+/** Compatible only with gatherings array and gathering object */
+export default class NamedPlaceChooserField extends React.Component<Props, State> {
+    static contextType: React.Context<import("../../../ReactContext").ContextProps>;
+    removeIds: Record<string, boolean>;
+    mounted: boolean;
+    state: State;
+    getUiSchema: (props: Props, buttonDefinition: any) => import("../../../types").UiSchema<any> | {
+        "ui:options": any;
+        "ui:ArrayFieldTemplate"?: React.ComponentType<import("@rjsf/utils").ArrayFieldTemplateProps<any, any, import("../../LajiForm").FormContext>> | undefined;
+        "ui:ArrayFieldDescriptionTemplate"?: React.ComponentType<import("@rjsf/utils").ArrayFieldDescriptionProps<any, any, import("../../LajiForm").FormContext>> | undefined;
+        "ui:ArrayFieldItemTemplate"?: React.ComponentType<import("@rjsf/utils").ArrayFieldTemplateItemType<any, any, import("../../LajiForm").FormContext>> | undefined;
+        "ui:ArrayFieldTitleTemplate"?: React.ComponentType<import("@rjsf/utils").ArrayFieldTitleProps<any, any, import("../../LajiForm").FormContext>> | undefined;
+        "ui:BaseInputTemplate"?: React.ComponentType<import("@rjsf/utils").WidgetProps<any, any, import("../../LajiForm").FormContext>> | undefined;
+        "ui:DescriptionFieldTemplate"?: React.ComponentType<import("@rjsf/utils").DescriptionFieldProps<any, any, import("../../LajiForm").FormContext>> | undefined;
+        "ui:ErrorListTemplate"?: React.ComponentType<import("@rjsf/utils").ErrorListProps<any, any, import("../../LajiForm").FormContext>> | undefined;
+        "ui:FieldErrorTemplate"?: React.ComponentType<import("@rjsf/utils").FieldErrorProps<any, any, import("../../LajiForm").FormContext>> | undefined;
+        "ui:FieldHelpTemplate"?: React.ComponentType<import("@rjsf/utils").FieldHelpProps<any, any, import("../../LajiForm").FormContext>> | undefined;
+        "ui:FieldTemplate"?: React.ComponentType<import("@rjsf/utils").FieldTemplateProps<any, any, import("../../LajiForm").FormContext>> | undefined;
+        "ui:ObjectFieldTemplate"?: React.ComponentType<import("@rjsf/utils").ObjectFieldTemplateProps<any, any, import("../../LajiForm").FormContext>> | undefined;
+        "ui:TitleFieldTemplate"?: React.ComponentType<import("@rjsf/utils").TitleFieldProps<any, any, import("../../LajiForm").FormContext>> | undefined;
+        "ui:UnsupportedFieldTemplate"?: React.ComponentType<import("@rjsf/utils").UnsupportedFieldProps<any, any, import("../../LajiForm").FormContext>> | undefined;
+        "ui:WrapIfAdditionalTemplate"?: React.ComponentType<import("@rjsf/utils").WrapIfAdditionalTemplateProps<any, any, import("../../LajiForm").FormContext>> | undefined;
+        "ui:classNames"?: string | undefined;
+        "ui:style"?: React.StyleHTMLAttributes<any> | undefined;
+        "ui:title"?: string | undefined;
+        "ui:description"?: string | undefined;
+        "ui:placeholder"?: string | undefined;
+        "ui:help"?: string | undefined;
+        "ui:autofocus"?: boolean | undefined;
+        "ui:autocomplete"?: string | undefined;
+        "ui:disabled"?: boolean | undefined;
+        "ui:emptyValue"?: any;
+        "ui:enumDisabled"?: (string | number | boolean)[] | undefined;
+        "ui:hideError"?: boolean | undefined;
+        "ui:readonly"?: boolean | undefined;
+        "ui:order"?: string[] | undefined;
+        "ui:addable"?: boolean | undefined;
+        "ui:orderable"?: boolean | undefined;
+        "ui:removable"?: boolean | undefined;
+        "ui:inline"?: boolean | undefined;
+        "ui:inputType"?: string | undefined;
+        "ui:label"?: boolean | undefined;
+        "ui:rows"?: number | undefined;
+        "ui:submitButtonOptions"?: import("@rjsf/utils").UISchemaSubmitButtonOptions | undefined;
+        "ui:widget"?: string | import("@rjsf/utils").Widget<any, any, import("../../LajiForm").FormContext> | undefined;
+        "ui:duplicateKeySuffixSeparator"?: string | undefined;
+        "ui:rootFieldId"?: string | undefined;
+        "ui:field"?: string | import("@rjsf/utils").Field<any, any, import("../../LajiForm").FormContext> | undefined;
+        "ui:fieldReplacesAnyOrOneOf"?: boolean | undefined;
+    };
+    isGatheringsArray: (schema: JSONSchemaObject | JSONSchemaArray<JSONSchemaObject>) => schema is JSONSchemaArray<JSONSchemaObject, never>;
+    onPlaceSelected: (place: NamedPlace) => void;
+    onPlaceDeleted: (place: NamedPlace, success: () => void) => void;
+    onButtonClick: () => () => void;
+    updatePlaces: () => void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    onHide: () => void;
+    render(): JSX.Element;
+}
+export {};

package/lib/components/fields/NamedPlaceChooserField/NamedPlaceChooserField.js

@@ -0,0 +1,193 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const ReactContext_1 = __importDefault(require("../../../ReactContext"));
+const utils_1 = require("../../../utils");
+const Context_1 = __importDefault(require("../../../Context"));
+const NamedPlaceChooser_1 = require("./NamedPlaceChooser");
+const PLACE_WHITELIST = [
+    "geometry",
+    "country",
+    "administrativeProvince",
+    "biologicalProvince",
+    "municipality",
+    "locality",
+    "localityDescription",
+    "habitat",
+    "habitatDescription"
+];
+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 */
+class NamedPlaceChooserField extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.removeIds = {};
+        this.mounted = false;
+        this.state = {};
+        this.getUiSchema = (props, buttonDefinition) => {
+            if (buttonDefinition) {
+                buttonDefinition = Object.assign(Object.assign({}, 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: [
+                            buttonDefinition,
+                            ...(options.buttons || [])
+                        ] }) });
+            }
+            else {
+                return utils_1.getInnerUiSchema(props.uiSchema);
+            }
+        };
+        this.isGatheringsArray = (schema) => schema.type === "array";
+        this.onPlaceSelected = (place) => {
+            const getGathering = (schema) => {
+                let gathering = utils_1.getDefaultFormState(schema);
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                const placeGathering = place.prepopulatedDocument.gatherings[0];
+                PLACE_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;
+                const { schema } = this.props;
+                if (this.isGatheringsArray(schema)) {
+                    gathering = getGathering(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(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.props.formContext.apiClient.fetchRaw(`/named-places/${place.id}`, undefined, { method: "DELETE" }).then(response => {
+                if (response.status < 400) {
+                    // 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.props.formContext.apiClient.invalidateCachePath("/named-places");
+                    setTimeout(() => this.props.formContext.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.props.formContext.apiClient.fetchCached("/named-places", { includePublic: false, pageSize: 100000 }).then(response => {
+                var _a;
+                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 (!((_a = response.results) === null || _a === void 0 ? void 0 : _a.length)) {
+                    return;
+                }
+                const 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.props.schema)) {
+                    buttonDefinition.rules = { canAdd: true };
+                }
+                else {
+                    buttonDefinition.position = "top";
+                }
+                state.buttonDefinition = buttonDefinition;
+                this.setState(state);
+            }).catch(() => {
+                this.setState({ failed: PLACES_FETCH_FAIL });
+            });
+        };
+        this.onHide = () => this.setState({ show: false });
+    }
+    componentDidMount() {
+        this.mounted = true;
+        this.updatePlaces();
+        this.props.formContext.apiClient.onCachePathInvalidation("/named-places", this.updatePlaces);
+    }
+    componentWillUnmount() {
+        this.mounted = false;
+        this.props.formContext.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.getUiSchema(this.props, this.state.buttonDefinition) })),
+            this.state.places && 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_1.NamedPlaceChooser, { places: this.state.places, failed: failed === PLACES_FETCH_FAIL ? true : false, formContext: formContext, onSelected: this.onPlaceSelected, onDeleted: this.onPlaceDeleted })))) : null);
+    }
+}
+exports.default = NamedPlaceChooserField;
+NamedPlaceChooserField.contextType = ReactContext_1.default;
+Context_1.default("SCHEMA_FIELD_WRAPPERS").NamedPlaceChooserField = true;

package/lib/components/fields/NamedPlaceChooserField/Popup.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { NamedPlace } from "@luomus/laji-schema";
+import { FormContext } from "src/components/LajiForm";
+declare type Props = {
+    onPlaceSelected: (place: NamedPlace) => void;
+    onPlaceDeleted: (place: NamedPlace) => void;
+    place: NamedPlace;
+    translations: FormContext["translations"];
+    deleting?: boolean;
+};
+export declare const Popup: React.ForwardRefExoticComponent<Props & React.RefAttributes<any>>;
+export {};

package/lib/components/fields/NamedPlaceChooserField/Popup.js

@@ -0,0 +1,67 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Popup = void 0;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const react_spinner_1 = __importDefault(require("react-spinner"));
+const utils_1 = require("../../../utils");
+const components_1 = require("../../../components/components");
+exports.Popup = react_1.forwardRef((props, ref) => {
+    const { onPlaceSelected, onPlaceDeleted, place, translations, deleting } = props;
+    const _onPlaceSelected = react_1.useCallback(() => {
+        onPlaceSelected(place);
+    }, [onPlaceSelected, place]);
+    const _onPlaceDeleted = react_1.useCallback(() => {
+        onPlaceDeleted(place);
+    }, [onPlaceDeleted, place]);
+    const containerRef = react_1.useRef(null);
+    const buttonRef = react_1.useRef(null);
+    react_1.useImperativeHandle(ref, () => ({
+        elem: containerRef.current,
+        button: buttonRef.current,
+    }));
+    return (React.createElement("div", { className: "named-place-popup", ref: containerRef },
+        !place
+            ? React.createElement(react_spinner_1.default, null)
+            : 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, disabled: !place, ref: buttonRef, onClick: _onPlaceSelected }, translations.UseThisPlace),
+        React.createElement(components_1.DeleteButton, { block: true, onClick: _onPlaceDeleted, disabled: deleting, glyphButton: false, confirm: true, confirmStyle: "browser", translations: translations },
+            translations.Remove,
+            " ",
+            deleting && React.createElement(react_spinner_1.default, null))));
+});

package/lib/components/fields/NamedPlaceChooserField/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./NamedPlaceChooserField";

package/lib/components/fields/NamedPlaceChooserField/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var NamedPlaceChooserField_1 = require("./NamedPlaceChooserField");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(NamedPlaceChooserField_1).default; } });