@itwin/geo-tools-react
Version:
React Geospatial Tools
77 lines • 4.59 kB
JavaScript
;
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.GeoAddressSearch = GeoAddressSearch;
require("./GeoAddressSearch.scss");
const React = require("react");
const appui_react_1 = require("@itwin/appui-react");
const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
const itwinui_react_1 = require("@itwin/itwinui-react");
const GeoTools_1 = require("../GeoTools");
const IModelGeoView_1 = require("../IModelGeoView");
/**
*/
function GeoAddressSearch(props) {
const { provider } = props;
const [inputValue, setInputValue] = React.useState("");
const [options, setOptions] = React.useState([]);
const [addressCache, setAddressCache] = React.useState([]);
const activeViewport = (0, appui_react_1.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_1.IModelGeoView.locatePosition(location);
}
}
catch (error) {
}
}
}
if (!locatedByPosition) {
await IModelGeoView_1.IModelGeoView.locateAddress(selected);
}
};
const getAddressesFunc = async (value) => {
const viewBBox = IModelGeoView_1.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(itwinui_react_1.ComboBox, { options: options, filterFunction: (options) => options, emptyStateMessage: GeoTools_1.GeoTools.translate("geoAddressSearch.noResults"), onHide: () => clearValue(), inputProps: {
disabled,
placeholder: disabled ? GeoTools_1.GeoTools.translate("geoAddressSearch.invalidBaseMap") : GeoTools_1.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(itwinui_react_1.IconButton, { disabled: disabled, className: "geotools-geoaddresssearch__button", onClick: clearValue, label: !inputValue ? "" : GeoTools_1.GeoTools.translate("geoAddressSearch.clearTooltip") }, !inputValue ? React.createElement(itwinui_icons_react_1.SvgSearch, { style: { opacity: 0.5 } }) : React.createElement(itwinui_icons_react_1.SvgCloseSmall, null))));
}
//# sourceMappingURL=GeoAddressSearch.js.map