@geoapify/react-geocoder-autocomplete
Version:
React component for the Geoapify Geocoder Autocomplete field
333 lines (329 loc) • 15.5 kB
JavaScript
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
var geocoderAutocomplete = require('@geoapify/geocoder-autocomplete');
var GeoapifyApiKey = React__default.createContext('');
var GeoapifyContext = function GeoapifyContext(props) {
return React__default.createElement(GeoapifyApiKey.Provider, {
value: props.apiKey
}, props.children);
};
var GeoapifyGeocoderAutocomplete = function GeoapifyGeocoderAutocomplete(_ref) {
var placeholderValue = _ref.placeholder,
typeValue = _ref.type,
langValue = _ref.lang,
limitValue = _ref.limit,
valueValue = _ref.value,
filterByCountryCodeValue = _ref.filterByCountryCode,
filterByCircleValue = _ref.filterByCircle,
filterByRectValue = _ref.filterByRect,
filterByPlaceValue = _ref.filterByPlace,
biasByCountryCodeValue = _ref.biasByCountryCode,
biasByCircleValue = _ref.biasByCircle,
biasByRectValue = _ref.biasByRect,
biasByProximityValue = _ref.biasByProximity,
positionValue = _ref.position,
countryCodesValue = _ref.countryCodes,
debounceDelayValue = _ref.debounceDelay,
skipIconsValue = _ref.skipIcons,
skipSelectionOnArrowKeyValue = _ref.skipSelectionOnArrowKey,
allowNonVerifiedHouseNumberValue = _ref.allowNonVerifiedHouseNumber,
allowNonVerifiedStreetValue = _ref.allowNonVerifiedStreet,
addDetailsValue = _ref.addDetails,
addCategorySearchValue = _ref.addCategorySearch,
showPlacesByCategoryListValue = _ref.showPlacesByCategoryList,
hidePlacesByCategoryListAfterSelectValue = _ref.hidePlacesByCategoryListAfterSelect,
enablePlacesByCategoryLazyLoadingValue = _ref.enablePlacesByCategoryLazyLoading,
placesByCategoryLimitValue = _ref.placesByCategoryLimit,
placesByCategoryFilterValue = _ref.placesByCategoryFilter,
placesByCategoryBiasValue = _ref.placesByCategoryBias,
sendPlacesByCategoryRequestFuncValue = _ref.sendPlacesByCategoryRequestFunc,
preprocessHookValue = _ref.preprocessHook,
postprocessHookValue = _ref.postprocessHook,
suggestionsFilterValue = _ref.suggestionsFilter,
sendGeocoderRequestFuncValue = _ref.sendGeocoderRequestFunc,
sendPlaceDetailsRequestFuncValue = _ref.sendPlaceDetailsRequestFunc,
placeSelectCallback = _ref.placeSelect,
suggestionsChangeCallback = _ref.suggestionsChange,
userInputCallback = _ref.onUserInput,
openCallback = _ref.onOpen,
closeCallback = _ref.onClose,
requestStartCallback = _ref.onRequestStart,
requestEndCallback = _ref.onRequestEnd,
placesByCategoryChangeCallback = _ref.onPlacesByCategoryChange,
placesByCategoryRequestStartCallback = _ref.onPlacesByCategoryRequestStart,
placesByCategoryRequestEndCallback = _ref.onPlacesByCategoryRequestEnd,
placeDetailsRequestStartCallback = _ref.onPlaceDetailsRequestStart,
placeDetailsRequestEndCallback = _ref.onPlaceDetailsRequestEnd,
placeByCategorySelectCallback = _ref.onPlaceByCategorySelect,
clearCallback = _ref.onClear;
var apiKey = React__default.useContext(GeoapifyApiKey);
var geocoderContainer;
var geocoderAutocomplete$1 = React.useRef(undefined);
var placeSelectCallbackRef = React.useRef(undefined);
var suggestionsChangeCallbackRef = React.useRef(undefined);
var userInputCallbackRef = React.useRef(undefined);
var openCallbackRef = React.useRef(undefined);
var closeCallbackRef = React.useRef(undefined);
var requestStartCallbackRef = React.useRef(undefined);
var requestEndCallbackRef = React.useRef(undefined);
var placesByCategoryChangeCallbackRef = React.useRef(undefined);
var placesByCategoryRequestStartCallbackRef = React.useRef(undefined);
var placesByCategoryRequestEndCallbackRef = React.useRef(undefined);
var placeDetailsRequestStartCallbackRef = React.useRef(undefined);
var placeDetailsRequestEndCallbackRef = React.useRef(undefined);
var placeByCategorySelectCallbackRef = React.useRef(undefined);
var clearCallbackRef = React.useRef(undefined);
placeSelectCallbackRef.current = placeSelectCallback;
suggestionsChangeCallbackRef.current = suggestionsChangeCallback;
userInputCallbackRef.current = userInputCallback;
openCallbackRef.current = openCallback;
closeCallbackRef.current = closeCallback;
requestStartCallbackRef.current = requestStartCallback;
requestEndCallbackRef.current = requestEndCallback;
placesByCategoryChangeCallbackRef.current = placesByCategoryChangeCallback;
placesByCategoryRequestStartCallbackRef.current = placesByCategoryRequestStartCallback;
placesByCategoryRequestEndCallbackRef.current = placesByCategoryRequestEndCallback;
placeDetailsRequestStartCallbackRef.current = placeDetailsRequestStartCallback;
placeDetailsRequestEndCallbackRef.current = placeDetailsRequestEndCallback;
placeByCategorySelectCallbackRef.current = placeByCategorySelectCallback;
clearCallbackRef.current = clearCallback;
var onSelect = React__default.useCallback(function (value) {
if (placeSelectCallbackRef.current) {
placeSelectCallbackRef.current(value);
}
}, []);
var onSuggestions = React__default.useCallback(function (value) {
if (suggestionsChangeCallbackRef.current) {
suggestionsChangeCallbackRef.current(value);
}
}, []);
var onUserInput = React__default.useCallback(function (input) {
if (userInputCallbackRef.current) {
userInputCallbackRef.current(input);
}
}, []);
var onOpen = React__default.useCallback(function (opened) {
if (openCallbackRef.current) {
openCallbackRef.current(opened);
}
}, []);
var onClose = React__default.useCallback(function (opened) {
if (closeCallbackRef.current) {
closeCallbackRef.current(opened);
}
}, []);
var onRequestStart = React__default.useCallback(function (value) {
if (requestStartCallbackRef.current) {
requestStartCallbackRef.current(value);
}
}, []);
var onRequestEnd = React__default.useCallback(function (success, data, error) {
if (requestEndCallbackRef.current) {
requestEndCallbackRef.current(success, data, error);
}
}, []);
var onPlacesByCategoryChange = React__default.useCallback(function (places) {
if (placesByCategoryChangeCallbackRef.current) {
placesByCategoryChangeCallbackRef.current(places);
}
}, []);
var onPlacesByCategoryRequestStart = React__default.useCallback(function (category) {
if (placesByCategoryRequestStartCallbackRef.current) {
placesByCategoryRequestStartCallbackRef.current(category);
}
}, []);
var onPlacesByCategoryRequestEnd = React__default.useCallback(function (success, data, error) {
if (placesByCategoryRequestEndCallbackRef.current) {
placesByCategoryRequestEndCallbackRef.current(success, data, error);
}
}, []);
var onPlaceDetailsRequestStart = React__default.useCallback(function (feature) {
if (placeDetailsRequestStartCallbackRef.current) {
placeDetailsRequestStartCallbackRef.current(feature);
}
}, []);
var onPlaceDetailsRequestEnd = React__default.useCallback(function (success, data, error) {
if (placeDetailsRequestEndCallbackRef.current) {
placeDetailsRequestEndCallbackRef.current(success, data, error);
}
}, []);
var onPlaceByCategorySelect = React__default.useCallback(function (value) {
if (placeByCategorySelectCallbackRef.current) {
placeByCategorySelectCallbackRef.current(value);
}
}, []);
var onClear = React__default.useCallback(function (type) {
if (clearCallbackRef.current) {
clearCallbackRef.current(type);
}
}, []);
React.useEffect(function () {
if (!geocoderAutocomplete$1.current) {
geocoderAutocomplete$1.current = new geocoderAutocomplete.GeocoderAutocomplete(geocoderContainer, apiKey, {
placeholder: placeholderValue || "",
addDetails: addDetailsValue,
skipIcons: skipIconsValue,
skipSelectionOnArrowKey: skipSelectionOnArrowKeyValue,
allowNonVerifiedHouseNumber: allowNonVerifiedHouseNumberValue,
allowNonVerifiedStreet: allowNonVerifiedStreetValue,
debounceDelay: debounceDelayValue || 100,
addCategorySearch: addCategorySearchValue,
showPlacesList: showPlacesByCategoryListValue,
hidePlacesListAfterSelect: hidePlacesByCategoryListAfterSelectValue,
enablePlacesLazyLoading: enablePlacesByCategoryLazyLoadingValue,
placesLimit: placesByCategoryLimitValue,
placesFilter: placesByCategoryFilterValue,
placesBias: placesByCategoryBiasValue
});
}
geocoderAutocomplete$1.current.on("select", onSelect);
geocoderAutocomplete$1.current.on("suggestions", onSuggestions);
geocoderAutocomplete$1.current.on("input", onUserInput);
geocoderAutocomplete$1.current.on("close", onClose);
geocoderAutocomplete$1.current.on("open", onOpen);
geocoderAutocomplete$1.current.on("request_start", onRequestStart);
geocoderAutocomplete$1.current.on("request_end", onRequestEnd);
geocoderAutocomplete$1.current.on("places", onPlacesByCategoryChange);
geocoderAutocomplete$1.current.on("places_request_start", onPlacesByCategoryRequestStart);
geocoderAutocomplete$1.current.on("places_request_end", onPlacesByCategoryRequestEnd);
geocoderAutocomplete$1.current.on("place_details_request_start", onPlaceDetailsRequestStart);
geocoderAutocomplete$1.current.on("place_details_request_end", onPlaceDetailsRequestEnd);
geocoderAutocomplete$1.current.on("place_select", onPlaceByCategorySelect);
geocoderAutocomplete$1.current.on("clear", onClear);
if (sendGeocoderRequestFuncValue) {
geocoderAutocomplete$1.current.setSendGeocoderRequestFunc(sendGeocoderRequestFuncValue);
}
if (sendPlacesByCategoryRequestFuncValue) {
geocoderAutocomplete$1.current.setSendPlacesRequestFunc(sendPlacesByCategoryRequestFuncValue);
}
return function () {
if (geocoderAutocomplete$1.current) {
geocoderAutocomplete$1.current.off("select", onSelect);
geocoderAutocomplete$1.current.off("suggestions", onSuggestions);
geocoderAutocomplete$1.current.off("input", onUserInput);
geocoderAutocomplete$1.current.off("close", onClose);
geocoderAutocomplete$1.current.off("open", onOpen);
geocoderAutocomplete$1.current.off("request_start", onRequestStart);
geocoderAutocomplete$1.current.off("request_end", onRequestEnd);
geocoderAutocomplete$1.current.off("places", onPlacesByCategoryChange);
geocoderAutocomplete$1.current.off("places_request_start", onPlacesByCategoryRequestStart);
geocoderAutocomplete$1.current.off("places_request_end", onPlacesByCategoryRequestEnd);
geocoderAutocomplete$1.current.off("place_details_request_start", onPlaceDetailsRequestStart);
geocoderAutocomplete$1.current.off("place_details_request_end", onPlaceDetailsRequestEnd);
geocoderAutocomplete$1.current.off("place_select", onPlaceByCategorySelect);
geocoderAutocomplete$1.current.off("clear", onClear);
}
};
}, []);
React.useEffect(function () {
if (geocoderAutocomplete$1.current) {
geocoderAutocomplete$1.current.setType(typeValue);
}
}, [typeValue]);
React.useEffect(function () {
if (geocoderAutocomplete$1.current) {
geocoderAutocomplete$1.current.setLang(langValue);
}
}, [langValue]);
React.useEffect(function () {
if (geocoderAutocomplete$1.current && positionValue) {
console.warn("WARNING! Obsolete function called. The 'position' input has been deprecated, please use the new 'biasByLocation' input instead!");
geocoderAutocomplete$1.current.addBiasByProximity(positionValue);
}
}, [positionValue]);
React.useEffect(function () {
if (geocoderAutocomplete$1.current && countryCodesValue) {
console.warn("WARNING! Obsolete function called. The 'countryCodes' input has been deprecated, please use the new 'filterByCountryCode' input instead!");
geocoderAutocomplete$1.current.addFilterByCountry(countryCodesValue);
}
}, [countryCodesValue]);
React.useEffect(function () {
if (geocoderAutocomplete$1.current) {
geocoderAutocomplete$1.current.setLimit(limitValue);
}
}, [limitValue]);
React.useEffect(function () {
if (geocoderAutocomplete$1.current) {
geocoderAutocomplete$1.current.setValue(valueValue || "");
}
}, [valueValue]);
React.useEffect(function () {
if (geocoderAutocomplete$1.current) {
geocoderAutocomplete$1.current.addFilterByCountry(filterByCountryCodeValue);
}
}, [filterByCountryCodeValue]);
React.useEffect(function () {
if (geocoderAutocomplete$1.current) {
geocoderAutocomplete$1.current.addFilterByCircle(filterByCircleValue);
}
}, [filterByCircleValue]);
React.useEffect(function () {
if (geocoderAutocomplete$1.current) {
geocoderAutocomplete$1.current.addFilterByRect(filterByRectValue);
}
}, [filterByRectValue]);
React.useEffect(function () {
if (geocoderAutocomplete$1.current) {
geocoderAutocomplete$1.current.addFilterByPlace(filterByPlaceValue);
}
}, [filterByPlaceValue]);
React.useEffect(function () {
if (geocoderAutocomplete$1.current) {
geocoderAutocomplete$1.current.addBiasByCountry(biasByCountryCodeValue);
}
}, [biasByCountryCodeValue]);
React.useEffect(function () {
if (geocoderAutocomplete$1.current) {
geocoderAutocomplete$1.current.addBiasByCircle(biasByCircleValue);
}
}, [biasByCircleValue]);
React.useEffect(function () {
if (geocoderAutocomplete$1.current) {
geocoderAutocomplete$1.current.addBiasByRect(biasByRectValue);
}
}, [biasByRectValue]);
React.useEffect(function () {
if (geocoderAutocomplete$1.current) {
geocoderAutocomplete$1.current.addBiasByProximity(biasByProximityValue);
}
}, [biasByProximityValue]);
React.useEffect(function () {
if (geocoderAutocomplete$1.current) {
geocoderAutocomplete$1.current.setPreprocessHook(preprocessHookValue);
}
}, [preprocessHookValue]);
React.useEffect(function () {
if (geocoderAutocomplete$1.current) {
geocoderAutocomplete$1.current.setPostprocessHook(postprocessHookValue);
}
}, [postprocessHookValue]);
React.useEffect(function () {
if (geocoderAutocomplete$1.current) {
geocoderAutocomplete$1.current.setSuggestionsFilter(suggestionsFilterValue);
}
}, [suggestionsFilterValue]);
React.useEffect(function () {
if (geocoderAutocomplete$1.current && sendGeocoderRequestFuncValue) {
geocoderAutocomplete$1.current.setSendGeocoderRequestFunc(sendGeocoderRequestFuncValue);
}
}, [sendGeocoderRequestFuncValue]);
React.useEffect(function () {
if (geocoderAutocomplete$1.current && sendPlaceDetailsRequestFuncValue) {
geocoderAutocomplete$1.current.setSendPlaceDetailsRequestFunc(sendPlaceDetailsRequestFuncValue);
}
}, [sendPlaceDetailsRequestFuncValue]);
return React__default.createElement("div", {
className: "geocoder-container",
style: {
position: "relative"
},
ref: function ref(el) {
geocoderContainer = el;
}
});
};
exports.GeoapifyApiKey = GeoapifyApiKey;
exports.GeoapifyContext = GeoapifyContext;
exports.GeoapifyGeocoderAutocomplete = GeoapifyGeocoderAutocomplete;
//# sourceMappingURL=index.js.map