@itwin/geo-tools-react
Version:
React Geospatial Tools
49 lines • 2.91 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 * as React from "react";
import { SvgCloseSmall, SvgSearch } from "@itwin/itwinui-icons-react";
import { ComboBox, IconButton } from "@itwin/itwinui-react";
import { BingAddressProvider } from "../AddressProvider";
import { IModelGeoView } from "../IModelGeoView";
import { GeoTools } from "../GeoTools";
import "./GeoAddressSearch.scss";
export function GeoAddressSearch(props) {
const [inputValue, setInputValue] = React.useState("");
const [options, setOptions] = React.useState([]);
// `React.useMemo' is used avoid creating new object on each render cycle
const addressProvider = React.useMemo(() => { var _a; return (_a = props.provider) !== null && _a !== void 0 ? _a : new BingAddressProvider(); }, [props.provider]);
const onAddressSelected = (selected) => {
setInputValue(selected);
IModelGeoView.locateAddress(selected);
};
const getAddressesFunc = async (value) => {
const viewBBox = IModelGeoView.getFrustumLonLatBBox();
if (viewBBox && value) {
return await addressProvider.getAddresses(value, viewBBox);
}
return [];
};
React.useEffect(() => {
void (async () => {
const items = await getAddressesFunc(inputValue);
setOptions(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 : "" }); }));
})();
}, [inputValue]);
const clearValue = () => {
setInputValue("");
};
return (React.createElement("div", { className: "geotools-geoaddresssearch__container" },
React.createElement("div", { className: "geotools-geoaddresssearch__combobox" },
React.createElement(ComboBox, { options: options, inputProps: {
placeholder: GeoTools.translate("geoAddressSearch.inputPlaceHolder"),
onChange: (event) => {
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