@luomus/laji-form 15.1.4 → 15.1.6

package/lib/components/fields/MultiArrayField.js

@@ -0,0 +1,224 @@
+"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 ConditionalUiSchemaField_1 = require("./ConditionalUiSchemaField");
+const FilterArrayField_1 = require("./FilterArrayField");
+const utils_1 = require("../../utils");
+const BaseComponent_1 = require("../BaseComponent");
+const Context_1 = require("../../Context");
+const ArrayFieldTemplate_1 = require("../templates/ArrayFieldTemplate");
+let MultiArrayField = class MultiArrayField extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.itemIds = {};
+        this.onChange = (idx) => (formData) => {
+            let offset = 0;
+            for (let i = 0; i < idx; i++) {
+                offset += Object.keys(this.groupedItems[i]).length;
+            }
+            let { persistenceKey } = utils_1.getUiOptions(this.props.uiSchema);
+            const lengthChange = formData.length - this.groupedItems[idx].length;
+            const context = Context_1.default(`${persistenceKey}_MULTI`);
+            // Fix idxs map for items after this group.
+            if (lengthChange && context.nonGroupedMap) {
+                const changes = {};
+                const changeFrom = {};
+                for (let i = offset + Object.keys(this.groupedItems[idx]).length; i < (this.props.formData || []).length; i++) {
+                    if (context.nonGroupedMap[i]) {
+                        changes[i + lengthChange] = context.nonGroupedMap[i];
+                        changeFrom[i] = true;
+                    }
+                }
+                context.nonGroupedMap = Object.assign(Object.assign({}, context.nonGroupedMap), changes);
+                Object.keys(changeFrom).filter(idx => !(idx in changes)).forEach(idx => {
+                    delete context.nonGroupedMap[idx];
+                });
+            }
+            if (typeof persistenceKey === "string" && formData.length !== this.groupedItems[idx].length) {
+                if (!context.nonGroupedMap) {
+                    context.nonGroupedMap = {};
+                }
+                context.nonGroupedMap[offset + formData.length - 1] = idx;
+            }
+            formData.forEach(item => {
+                this.groupItemIds[idx][utils_1.getUUID(item)] = true;
+            });
+            const newFormData = this.groupedItems.reduce((flat, groupItems, _idx) => {
+                if (_idx === idx)
+                    return [...flat, ...formData];
+                return [...flat, ...groupItems];
+            }, []);
+            this.props.onChange(newFormData);
+        };
+    }
+    render() {
+        const { props } = this;
+        let { groups, cache = true, arrayMerge, persistByParent, persistenceKey, renderNonGrouped = false, nonGroupedOperations } = utils_1.getUiOptions(this.props.uiSchema);
+        if (groups.length && !this.cache) {
+            this.cache = Array(groups.length).fill(undefined).map(_ => ({})); // eslint-disable-line @typescript-eslint/no-unused-vars
+        }
+        if (groups.length) {
+            this.arrayKeyFunctions = Array(groups.length + 1).fill(undefined).map((_, idx) => getArrayKeyFunctions(this, idx));
+        }
+        if (groups.length && !this.groupItemIds) {
+            const getGroupItemIds = () => Array(groups.length + 1).fill(undefined).map(_ => ({})); // eslint-disable-line @typescript-eslint/no-unused-vars
+            if (persistByParent) {
+                const parentId = this.props.formContext._parentLajiFormId;
+                const context = Context_1.default(`${parentId}_MULTI`);
+                this.groupItemIds = context.groupItemIds || getGroupItemIds();
+                context.groupItemIds = this.groupItemIds;
+            }
+            else if (typeof persistenceKey === "string") {
+                const context = Context_1.default(`${persistenceKey}_MULTI`);
+                this.groupItemIds = context.groupItemIds || getGroupItemIds();
+                context.groupItemIds = this.groupItemIds;
+            }
+            else {
+                this.groupItemIds = getGroupItemIds();
+            }
+        }
+        const itemGroups = Array(groups.length + 1).fill(undefined).map(_ => []); // eslint-disable-line @typescript-eslint/no-unused-vars
+        const addToGroup = (idx, item) => {
+            const id = utils_1.getUUID(item);
+            itemGroups[idx].push(item);
+            this.groupItemIds[idx][id] = true;
+            this.itemIds[id] = true;
+            return true;
+        };
+        (props.formData || []).forEach(item => {
+            this.groupItemIds.forEach((_, groupIdx) => {
+                if (this.groupItemIds[groupIdx][utils_1.getUUID(item)]) {
+                    addToGroup(groupIdx, item);
+                }
+            });
+        });
+        const nonGrouped = [];
+        const groupedItems = (props.formData || []).reduce((itemGroups, item, idx) => {
+            const addedToGroup = groups.some((group, groupIdx) => {
+                if (this.itemIds[utils_1.getUUID(item)]) {
+                    return true;
+                }
+                const { rules = [] } = group;
+                let passes;
+                if (cache) {
+                    const check = utils_1.checkArrayRules(rules, { formData: props.formData || [] }, idx, this.cache[groupIdx]);
+                    const { cache } = check;
+                    passes = check.passes;
+                    this.cache[groupIdx] = cache;
+                }
+                else {
+                    passes = utils_1.checkArrayRules(rules, { formData: props.formData || [] }, idx);
+                }
+                if (passes) {
+                    return addToGroup(groupIdx, item);
+                }
+            });
+            if (!addedToGroup) {
+                nonGrouped.push([item, idx]);
+            }
+            return itemGroups;
+        }, itemGroups);
+        nonGrouped.forEach(([item, idx]) => {
+            const context = Context_1.default(`${persistenceKey}_MULTI`);
+            const groupIdx = this.groupItemIds.length - 1;
+            if (typeof persistenceKey === "string" && (context.nonGroupedMap || {})[idx] !== undefined && this.groupItemIds[groupIdx]) {
+                addToGroup(context.nonGroupedMap[idx], item);
+            }
+            else {
+                addToGroup(groupIdx, item);
+            }
+        });
+        this.groupedItems = groupedItems;
+        const withoutNonGrouped = [...groupedItems];
+        withoutNonGrouped.pop();
+        let offset = 0;
+        const offsets = (renderNonGrouped ? groupedItems : withoutNonGrouped).map((group, idx) => {
+            let idxOffsets;
+            if (!idx) {
+                idxOffsets = {};
+            }
+            else {
+                idxOffsets = group.reduce((g, i, _idx) => {
+                    g[_idx] = offset;
+                    return g;
+                }, {});
+            }
+            offset += group.length;
+            return idxOffsets;
+        }, []);
+        return (renderNonGrouped ? groupedItems : withoutNonGrouped).map((items, idx) => {
+            const operations = renderNonGrouped && idx === groupedItems.length - 1
+                ? nonGroupedOperations
+                : groups[idx].operations;
+            const innerUiSchema = utils_1.getInnerUiSchema(props.uiSchema);
+            let uiSchema = operations
+                ? ConditionalUiSchemaField_1.computeUiSchema(innerUiSchema, operations, arrayMerge)
+                : innerUiSchema;
+            uiSchema = utils_1.updateSafelyWithJSONPointer(uiSchema, this.arrayKeyFunctions[idx], "/ui:options/arrayKeyFunctions");
+            uiSchema = utils_1.updateSafelyWithJSONPointer(uiSchema, offsets[idx], "/ui:options/idxOffsets");
+            let offset = 0;
+            for (let i = 0; i < idx; i++) {
+                offset += this.groupedItems[i].length;
+            }
+            uiSchema = Object.assign(Object.assign({}, uiSchema), { "ui:options": Object.assign(Object.assign({}, utils_1.getUiOptions(uiSchema)), { startIdx: offset }) });
+            const errorSchema = {};
+            for (const key in props.errorSchema) {
+                if (key >= offset && key < offset + this.groupedItems[idx].length) {
+                    errorSchema[key - offset] = Object.assign({}, props.errorSchema[key]);
+                }
+            }
+            const { SchemaField } = this.props.registry.fields;
+            return (React.createElement(SchemaField, Object.assign({ key: idx }, props, { uiSchema: uiSchema, errorSchema: errorSchema, formData: items, onChange: this.onChange(idx) })));
+        });
+    }
+};
+MultiArrayField.propTypes = {
+    uiSchema: PropTypes.shape({
+        "ui:options": PropTypes.shape({
+            rules: FilterArrayField_1.arrayRulesPropType,
+            itemsOperations: PropTypes.oneOfType([
+                ConditionalUiSchemaField_1.operationPropType,
+                PropTypes.arrayOf(ConditionalUiSchemaField_1.operationPropType)
+            ]),
+            cache: PropTypes.boolean
+        })
+    }),
+    schema: PropTypes.shape({
+        type: PropTypes.oneOf(["array"])
+    }).isRequired,
+    formData: PropTypes.array
+};
+MultiArrayField = __decorate([
+    BaseComponent_1.default
+], MultiArrayField);
+exports.default = MultiArrayField;
+const getArrayKeyFunctions = (that) => {
+    const { arrayKeyFunctions: optionsArrayKeyFunctions } = utils_1.getUiOptions(that.props.uiSchema);
+    const _arrayKeyFunctions = optionsArrayKeyFunctions || ArrayFieldTemplate_1.arrayKeyFunctions;
+    return Object.assign(Object.assign({}, _arrayKeyFunctions), { insert: (e, _props) => {
+            const props = _props.getProps();
+            const inputElem = utils_1.findNearestParentTabbableElem(document.activeElement);
+            if (!inputElem) {
+                return false;
+            }
+            if (!inputElem.id.startsWith(props.idSchema.$id)) {
+                return false;
+            }
+            const itemIdx = inputElem.id.replace(props.idSchema.$id, "").replace(/^_?([0-9]+).*$/, "$1");
+            const { startIdx } = utils_1.getUiOptions(props.uiSchema);
+            if (itemIdx < startIdx || itemIdx >= startIdx + (props.formData || []).length) {
+                return false;
+            }
+            return _arrayKeyFunctions.insert(e, _props);
+        }, navigateArray: (e, options) => {
+            const _options = Object.assign(Object.assign({}, options), { getProps: () => (Object.assign(Object.assign({}, options.getProps()), { formData: that.props.formData })) });
+            return _arrayKeyFunctions.navigateArray(e, _options);
+        } });
+};

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

@@ -0,0 +1,13 @@
+export default class MultiLanguageField extends React.Component<any, any, any> {
+    static propTypes: {
+        uiSchema: PropTypes.Requireable<any>;
+        schema: PropTypes.Validator<PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+        }>>;
+        formData: PropTypes.Requireable<object>;
+    };
+    constructor(props: any);
+    onChange: (lang: any) => (formData: any) => void;
+}
+import * as React from "react";
+import * as PropTypes from "prop-types";

package/lib/components/fields/MultiLanguageField.js

@@ -0,0 +1,52 @@
+"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 BaseComponent_1 = require("../BaseComponent");
+const PropTypes = require("prop-types");
+const utils_1 = require("../../utils");
+let MultiLanguageField = class MultiLanguageField extends React.Component {
+    constructor(props) {
+        super(props);
+        this.onChange = (lang) => (formData) => {
+            const newFormData = Object.assign(Object.assign({}, this.props.formData), { [lang]: formData });
+            this.props.onChange(newFormData);
+        };
+    }
+    render() {
+        const SchemaField = this.props.registry.fields.SchemaField;
+        const { Label, lang } = this.props.formContext;
+        const { schema, uiSchema, idSchema, errorSchema, formData = {}, required } = this.props;
+        const uiOptions = utils_1.getUiOptions(uiSchema);
+        const languages = Object.keys(schema.properties).sort((a, b) => {
+            const sortA = Number(a !== lang);
+            const sortB = Number(b !== lang);
+            return sortA - sortB;
+        });
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Label, { label: schema.title || "", required: required || uiSchema["ui:required"], uiSchema: uiSchema }),
+            languages.map(_lang => {
+                var _a;
+                return (React.createElement(SchemaField, Object.assign({}, this.props, { key: _lang, schema: Object.assign({ title: "" }, schema.properties[_lang]), uiSchema: {
+                        "ui:widget": "InputGroupWidget",
+                        "ui:options": Object.assign({ "inputGroupText": _lang, "className": "multi-lang-input-group" }, uiOptions)
+                    }, errorSchema: errorSchema[_lang] || {}, idSchema: idSchema[_lang], formData: formData[_lang] || "", required: ((_a = uiSchema[_lang]) === null || _a === void 0 ? void 0 : _a["ui:required"]) || false, onChange: this.onChange(_lang) })));
+            })));
+    }
+};
+MultiLanguageField.propTypes = {
+    uiSchema: PropTypes.any,
+    schema: PropTypes.shape({
+        type: PropTypes.oneOf(["object"])
+    }).isRequired,
+    formData: PropTypes.object
+};
+MultiLanguageField = __decorate([
+    BaseComponent_1.default
+], MultiLanguageField);
+exports.default = MultiLanguageField;

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

@@ -0,0 +1,36 @@
+import * as React from "react";
+import * as PropTypes from "prop-types";
+import { FieldProps } from "../LajiForm";
+import { ReactInstance } from "react";
+import * as memoize from "memoizee";
+interface State {
+    activeButtonIdx?: number;
+}
+export default class MultiTagArrayField extends React.Component<FieldProps, State> {
+    static contextType: React.Context<import("../../ReactContext").ContextProps>;
+    static propTypes: {
+        uiSchema: PropTypes.Requireable<PropTypes.InferProps<{
+            "ui:options": PropTypes.Requireable<PropTypes.InferProps<{
+                buttons: PropTypes.Requireable<(PropTypes.InferProps<{
+                    operation: PropTypes.Requireable<string>;
+                    label: PropTypes.Requireable<string>;
+                    className: PropTypes.Requireable<string>;
+                }> | null | undefined)[]>;
+            }>>;
+        }>>;
+        schema: PropTypes.Validator<PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+        }>>;
+        formData: PropTypes.Requireable<object>;
+    };
+    state: State;
+    private affixContainerElem;
+    setAffixContainer: (ref: ReactInstance) => void;
+    getAffixContainer: () => Element | null;
+    componentDidUpdate(prevProps: FieldProps): void;
+    render(): JSX.Element;
+    onChange: ((key: string) => (formData: any) => void) & memoize.Memoized<(key: string) => (formData: any) => void>;
+    onButtonClick: ((idx: number) => () => void) & memoize.Memoized<(idx: number) => () => void>;
+    onTagClick: ((fromField: string) => (idx: number) => void) & memoize.Memoized<(fromField: string) => (idx: number) => void>;
+}
+export {};

package/lib/components/fields/MultiTagArrayField.js

@@ -0,0 +1,142 @@
+"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 BaseComponent_1 = require("../BaseComponent");
+const utils_1 = require("../../utils");
+const ReactContext_1 = require("../../ReactContext");
+const components_1 = require("../components");
+const immutability_helper_1 = require("immutability-helper");
+const memoize = require("memoizee");
+const react_dom_1 = require("react-dom");
+const equals = require("deep-equal");
+let MultiTagArrayField = class MultiTagArrayField extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = { activeButtonIdx: undefined };
+        this.affixContainerElem = null;
+        this.setAffixContainer = (ref) => {
+            this.affixContainerElem = react_dom_1.findDOMNode(ref);
+        };
+        this.getAffixContainer = () => {
+            return this.affixContainerElem;
+        };
+        this.onChange = memoize((key) => (formData) => {
+            const newFormData = Object.assign(Object.assign({}, this.props.formData), { [key]: formData });
+            this.props.onChange(newFormData);
+        });
+        this.onButtonClick = memoize((idx) => () => {
+            const { activeButtonIdx } = this.state;
+            if (activeButtonIdx === idx) {
+                this.setState({ activeButtonIdx: undefined });
+                return;
+            }
+            const { buttons = [] } = utils_1.getUiOptions(this.props.uiSchema);
+            const options = buttons[idx];
+            const { operation } = options;
+            if (operation === "moveAll") {
+                const { toField, fromField } = options;
+                const toFieldNewValue = (this.props.formData[toField] || []).concat(this.props.formData[fromField] || []);
+                const newFormData = Object.assign(Object.assign({}, this.props.formData), { [fromField]: [], [toField]: toFieldNewValue });
+                this.props.onChange(newFormData);
+            }
+            else if (operation === "move" || operation === "delete") {
+                this.setState({ activeButtonIdx: idx });
+            }
+        });
+        this.onTagClick = memoize((fromField) => (idx) => {
+            const { activeButtonIdx } = this.state;
+            if (activeButtonIdx === undefined) {
+                return;
+            }
+            const { buttons = [] } = utils_1.getUiOptions(this.props.uiSchema);
+            const options = buttons[activeButtonIdx];
+            const { operation } = options;
+            if (operation === "move" || operation === "delete") {
+                let formData = this.props.formData;
+                if (operation === "move") {
+                    const { toField } = options;
+                    if (fromField === toField) {
+                        return;
+                    }
+                    const value = formData[fromField][idx];
+                    formData = immutability_helper_1.default(formData, {
+                        [fromField]: { $splice: [[idx, 1]] },
+                        [toField]: { $apply: (values) => [...(values || []), value] }
+                    });
+                }
+                else {
+                    formData = immutability_helper_1.default(formData, { [fromField]: { $splice: [[idx, 1]] } });
+                }
+                this.props.onChange(formData);
+            }
+        });
+    }
+    componentDidUpdate(prevProps) {
+        if (this.state.activeButtonIdx !== undefined) {
+            const prevButtons = utils_1.getUiOptions(prevProps.uiSchema).buttons;
+            const currentButtons = utils_1.getUiOptions(this.props.uiSchema).buttons;
+            if (!equals(prevButtons, currentButtons)) {
+                this.setState({ activeButtonIdx: undefined });
+            }
+        }
+    }
+    render() {
+        const SchemaField = this.props.registry.fields.SchemaField;
+        const { Row, Col } = this.context.theme;
+        const { schema, uiSchema, idSchema, errorSchema, formData = {}, disabled, readonly } = this.props;
+        const uiOptions = utils_1.getUiOptions(uiSchema);
+        const { buttons = [] } = uiOptions;
+        const { activeButtonIdx } = this.state;
+        const propertyKeys = Object.keys(schema.properties);
+        return (React.createElement(Row, { className: utils_1.classNames("laji-form-multi-tag-array-field", activeButtonIdx !== undefined && "laji-form-multi-tag-array-field-active"), ref: this.setAffixContainer },
+            React.createElement(Col, { xs: 3, sm: 3, md: 2, lg: 2, className: "laji-form-multi-tag-array-field-buttons" },
+                React.createElement(components_1.Affix, { getContainer: this.getAffixContainer, topOffset: this.props.formContext.topOffset + 15, bottomOffset: this.props.formContext.bottomOffset },
+                    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) })));
+            }))));
+    }
+};
+MultiTagArrayField.contextType = ReactContext_1.default;
+MultiTagArrayField.propTypes = {
+    uiSchema: PropTypes.shape({
+        "ui:options": PropTypes.shape({
+            buttons: PropTypes.arrayOf(PropTypes.oneOfType([
+                PropTypes.shape({
+                    operation: PropTypes.oneOf(["moveAll"]),
+                    fromField: PropTypes.string.isRequired,
+                    toField: PropTypes.string.isRequired,
+                    label: PropTypes.string,
+                    className: PropTypes.string
+                }),
+                PropTypes.shape({
+                    operation: PropTypes.oneOf(["move"]),
+                    toField: PropTypes.string.isRequired,
+                    label: PropTypes.string,
+                    className: PropTypes.string
+                }),
+                PropTypes.shape({
+                    operation: PropTypes.oneOf(["delete"]),
+                    label: PropTypes.string,
+                    className: PropTypes.string
+                })
+            ]))
+        })
+    }),
+    schema: PropTypes.shape({
+        type: PropTypes.oneOf(["object"])
+    }).isRequired,
+    formData: PropTypes.object
+};
+MultiTagArrayField = __decorate([
+    BaseComponent_1.default
+], MultiTagArrayField);
+exports.default = MultiTagArrayField;

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

@@ -0,0 +1,29 @@
+/**
+ * Compatible only with gatherings array and gathering object.
+ */
+export default class NamedPlaceChooserField 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);
+    apiClient: any;
+    removeIds: {};
+    getStateFromProps(props: any): {
+        uiSchema: any;
+    };
+    getUiSchema: (props: any) => any;
+    buttonDefinition: any;
+    isGatheringsArray: () => boolean;
+    onPlaceSelected: (place: any) => void;
+    onPlaceDeleted: (place: any, success: any) => void;
+    onButtonClick: () => () => void;
+    updatePlaces: () => void;
+    mounted: boolean | undefined;
+    onHide: () => void;
+}
+import * as React from "react";
+import * as PropTypes from "prop-types";