@itwin/geo-tools-react
Version:
React Geospatial Tools
68 lines • 3.96 kB
JavaScript
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import "./GeoAddressSearch.scss";
import * as React from "react";
import { SvgCloseSmall, SvgSearch } from "@itwin/itwinui-icons-react";
import { ComboBox, IconButton } from "@itwin/itwinui-react";
import { BingAddressProvider } from "../BingAddressProvider";
import { GeoTools } from "../GeoTools";
import { IModelGeoView } from "../IModelGeoView";
export function GeoAddressSearch(props) {
const [inputValue, setInputValue] = React.useState("");
const [options, setOptions] = React.useState([]);
const [addressCache, setAddressCache] = React.useState([]);
// `React.useMemo' is used avoid creating new object on each render cycle
// Default is Bing provider, but we might want to default to Google in the future
const addressProvider = React.useMemo(() => { var _a; return (_a = props.provider) !== null && _a !== void 0 ? _a : new BingAddressProvider(); }, [props.provider]);
const onAddressSelected = async (selected) => {
setInputValue(selected);
let locatedByPosition = false;
if (addressProvider.supportsAddressLocation()) {
const address = addressCache.find((addr) => addr.formattedAddress === selected);
if (address !== undefined) {
try {
const location = await addressProvider.getLocation(address);
if (location) {
locatedByPosition = await IModelGeoView.locatePosition(location);
}
}
catch (error) {
}
}
}
if (!locatedByPosition) {
await IModelGeoView.locateAddress(selected);
}
};
const getAddressesFunc = async (value) => {
const viewBBox = IModelGeoView.getFrustumLonLatBBox();
if (viewBBox && value) {
const addr = await addressProvider.getSuggestions(value, viewBBox);
setAddressCache(addr);
return addr;
}
return [];
};
const clearValue = () => {
setInputValue("");
setOptions([]);
};
return (React.createElement("div", { className: "geotools-geoaddresssearch__container" },
React.createElement("div", { className: "geotools-geoaddresssearch__combobox" },
React.createElement(ComboBox, { options: options, filterFunction: (options) => options, emptyStateMessage: GeoTools.translate("geoAddressSearch.noResults"), onHide: () => clearValue(), inputProps: {
placeholder: GeoTools.translate("geoAddressSearch.inputPlaceHolder"),
onChange: async (event) => {
const items = await getAddressesFunc(inputValue);
setAddressCache(items);
const options = items.map((value) => { var _a, _b; return ({ label: (_a = value.formattedAddress) !== null && _a !== void 0 ? _a : "", value: (_b = value.formattedAddress) !== null && _b !== void 0 ? _b : "" }); });
setOptions(options);
setInputValue(event.target.value);
},
}, onChange: (value) => {
onAddressSelected(value);
}, value: inputValue, enableVirtualization: true })),
React.createElement(IconButton, { className: "geotools-geoaddresssearch__button", onClick: clearValue, label: !inputValue ? "" : GeoTools.translate("geoAddressSearch.clearTooltip") }, !inputValue ? React.createElement(SvgSearch, { style: { opacity: 0.5 } }) : React.createElement(SvgCloseSmall, null))));
}
//# sourceMappingURL=GeoAddressSearch.js.map