@itwin/geo-tools-react
Version:
React Geospatial Tools
74 lines • 4.29 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 { useActiveViewport } from "@itwin/appui-react";
import { SvgCloseSmall, SvgSearch } from "@itwin/itwinui-icons-react";
import { ComboBox, IconButton } from "@itwin/itwinui-react";
import { GeoTools } from "../GeoTools";
import { IModelGeoView } from "../IModelGeoView";
/**
*/
export function GeoAddressSearch(props) {
const { provider } = props;
const [inputValue, setInputValue] = React.useState("");
const [options, setOptions] = React.useState([]);
const [addressCache, setAddressCache] = React.useState([]);
const activeViewport = useActiveViewport(); // Hook to ensure the component re-renders when the active viewport changes
const [disabled, setDisabled] = React.useState(() => provider.isDisabled({ viewport: activeViewport }));
React.useEffect(() => {
return activeViewport === null || activeViewport === void 0 ? void 0 : activeViewport.onDisplayStyleChanged.addListener((vp) => { setDisabled(provider === null || provider === void 0 ? void 0 : provider.isDisabled({ viewport: vp })); });
}, [activeViewport]);
const onAddressSelected = async (selected) => {
setInputValue(selected);
let locatedByPosition = false;
if (provider.supportsAddressLocation()) {
const address = addressCache.find((addr) => addr.formattedAddress === selected);
if (address !== undefined) {
try {
const location = await provider.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 provider.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: {
disabled,
placeholder: disabled ? GeoTools.translate("geoAddressSearch.invalidBaseMap") : 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, { disabled: disabled, 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