@umrashrf/preact-osm-geocoding/dist/index.js

Find address locations via OSM Nominatim

var React = require('preact');
var hooks = require('preact/hooks');

var debouncedMethod = function debouncedMethod(method, debounceTime) {
  var _this = this;

  this.invoke = function () {
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this._timeout && window.clearTimeout(_this._timeout);
    _this._timeout = window.setTimeout(function () {
      _this._method.apply(_this, args);
    }, _this._debounceTime);
  };

  this._method = method;
  this._debounceTime = debounceTime;
};

var renderResults = function renderResults(results, callback, dispatch, resultsClassNames, resultClassNames) {
  if (resultsClassNames === void 0) {
    resultsClassNames = "results";
  }

  if (resultClassNames === void 0) {
    resultClassNames = "result";
  }

  return React.createElement("div", {
    className: resultsClassNames
  }, results.map(function (result, index) {
    return React.createElement("div", {
      key: index,
      className: resultClassNames,
      onClick: function onClick() {
        if (callback) {
          callback(result);
          dispatch(false);
        }
      }
    }, result === null || result === void 0 ? void 0 : result.display_name);
  }));
};

var ReactOsmGeocoding = function ReactOsmGeocoding(_ref) {
  var _ref$id = _ref.id,
      id = _ref$id === void 0 ? "" : _ref$id,
      _ref$name = _ref.name,
      name = _ref$name === void 0 ? "" : _ref$name,
      _ref$inputValue = _ref.inputValue,
      inputValue = _ref$inputValue === void 0 ? "" : _ref$inputValue,
      _ref$placeholder = _ref.placeholder,
      placeholder = _ref$placeholder === void 0 ? "Enter address" : _ref$placeholder,
      _ref$debounce = _ref.debounce,
      debounce = _ref$debounce === void 0 ? 1000 : _ref$debounce,
      callback = _ref.callback,
      _ref$city = _ref.city,
      city = _ref$city === void 0 ? "" : _ref$city,
      _ref$countrycodes = _ref.countrycodes,
      countrycodes = _ref$countrycodes === void 0 ? "ca" : _ref$countrycodes,
      _ref$acceptLanguage = _ref.acceptLanguage,
      acceptLanguage = _ref$acceptLanguage === void 0 ? "en" : _ref$acceptLanguage,
      _ref$viewbox = _ref.viewbox,
      viewbox = _ref$viewbox === void 0 ? "" : _ref$viewbox,
      _ref$outerClassNames = _ref.outerClassNames,
      outerClassNames = _ref$outerClassNames === void 0 ? "reactOsmGeocoding" : _ref$outerClassNames,
      _ref$inputClassNames = _ref.inputClassNames,
      inputClassNames = _ref$inputClassNames === void 0 ? "" : _ref$inputClassNames,
      _ref$loaderClassNames = _ref.loaderClassNames,
      loaderClassNames = _ref$loaderClassNames === void 0 ? "loader" : _ref$loaderClassNames,
      _ref$resultsClassName = _ref.resultsClassNames,
      resultsClassNames = _ref$resultsClassName === void 0 ? "results" : _ref$resultsClassName,
      _ref$resultClassNames = _ref.resultClassNames,
      resultClassNames = _ref$resultClassNames === void 0 ? "result" : _ref$resultClassNames;

  var _useState = hooks.useState([]),
      results = _useState[0],
      setResults = _useState[1];

  var _useState2 = hooks.useState(false),
      showResults = _useState2[0],
      setShowResults = _useState2[1];

  var _useState3 = hooks.useState(false),
      showLoader = _useState3[0],
      setShowLoader = _useState3[1];

  var mainContainerRef = hooks.useRef(null);
  document.addEventListener('click', function (event) {
    var _mainContainerRef$cur;

    var isClickInside = mainContainerRef === null || mainContainerRef === void 0 ? void 0 : (_mainContainerRef$cur = mainContainerRef.current) === null || _mainContainerRef$cur === void 0 ? void 0 : _mainContainerRef$cur.contains(event.target);

    if (!isClickInside) {
      setShowResults(false);
    }
  });

  document.onkeyup = function (event) {
    if (event.key === "Escape") {
      setShowResults(false);
    }
  };

  function getGeocoding(address) {
    if (address === void 0) {
      address = "";
    }

    if (address.length === 0) return;
    setShowLoader(true);
    var url = "https://nominatim.openstreetmap.org/search?format=json&accept-language=" + acceptLanguage;

    if (city) {
      url = url + "&street=" + address + "&city=" + city;
    } else {
      url = url + "&q=" + address;
    }

    if (countrycodes) {
      url = url + "&countrycodes=" + countrycodes;
    }

    if (viewbox.length) url = url + "&viewbox=" + viewbox + "&bounded=1";
    fetch(url).then(function (response) {
      return response.json();
    }).then(function (data) {
      setResults(data);
      setShowResults(true);
    })["catch"](function (err) {
      return console.warn(err);
    })["finally"](function () {
      return setShowLoader(false);
    });
  }

  var debouncer = new debouncedMethod(function (address) {
    getGeocoding(address);
  }, debounce);
  return React.createElement("div", {
    className: outerClassNames,
    ref: mainContainerRef
  }, React.createElement("input", {
    id: id,
    name: name,
    type: "text",
    value: inputValue,
    placeholder: placeholder,
    className: inputClassNames,
    onClick: function onClick() {
      return setShowResults(true);
    },
    onKeyUp: function onKeyUp(event) {
      var target = event.target;
      debouncer.invoke(target.value);
    },
    autocomplete: "off",
    "data-1p-ignore": true,
    "data-lpignore": "true",
    "data-protonpass-ignore": "true"
  }), React.createElement("div", {
    className: showLoader ? loaderClassNames : "hidden"
  }, "Loading..."), results.length && showResults ? renderResults(results, callback, function (toggle) {
    setShowResults(toggle);

    if (!toggle) {
      setResults([]);
    }
  }, resultsClassNames, resultClassNames) : "");
};

exports.ReactOsmGeocoding = ReactOsmGeocoding;
exports.debouncedMethod = debouncedMethod;
//# sourceMappingURL=index.js.map