@itwin/geo-tools-react
Version:
React Geospatial Tools
52 lines • 3.17 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;
const React = require("react");
const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
const itwinui_react_1 = require("@itwin/itwinui-react");
const AddressProvider_1 = require("../AddressProvider");
const IModelGeoView_1 = require("../IModelGeoView");
const GeoTools_1 = require("../GeoTools");
require("./GeoAddressSearch.scss");
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 AddressProvider_1.BingAddressProvider(); }, [props.provider]);
const onAddressSelected = (selected) => {
setInputValue(selected);
IModelGeoView_1.IModelGeoView.locateAddress(selected);
};
const getAddressesFunc = async (value) => {
const viewBBox = IModelGeoView_1.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(itwinui_react_1.ComboBox, { options: options, inputProps: {
placeholder: GeoTools_1.GeoTools.translate("geoAddressSearch.inputPlaceHolder"),
onChange: (event) => {
setInputValue(event.target.value);
},
}, onChange: (value) => {
onAddressSelected(value);
}, value: inputValue, enableVirtualization: true })),
React.createElement(itwinui_react_1.IconButton, { 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