@paraboly/react-osm-geocoding/dist/index.js

Find address locations via OSM Nominatim

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);

var styles = {"reactOsmGeocoding":"_3Ewis","results":"_3lFwG","result":"_36cXF","loader":"_3qqrl","spin":"_1sp4O"};

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, setShowResults) {
  return React__default.createElement("div", {
    className: styles.results
  }, results.map(function (result, index) {
    return React__default.createElement("div", {
      key: index,
      className: styles.result,
      onClick: function onClick() {
        if (callback) {
          callback(result);
          setShowResults(false);
        }
      }
    }, result === null || result === void 0 ? void 0 : result.display_name);
  }));
};

var ReactOsmGeocoding = function ReactOsmGeocoding(_ref) {
  var _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,
      _ref$iconUrl = _ref.iconUrl,
      iconUrl = _ref$iconUrl === void 0 ? "https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/search-512.png" : _ref$iconUrl,
      callback = _ref.callback,
      _ref$city = _ref.city,
      city = _ref$city === void 0 ? "Konya" : _ref$city,
      _ref$countrycodes = _ref.countrycodes,
      countrycodes = _ref$countrycodes === void 0 ? "tr" : _ref$countrycodes,
      _ref$acceptLanguage = _ref.acceptLanguage,
      acceptLanguage = _ref$acceptLanguage === void 0 ? "tr" : _ref$acceptLanguage,
      _ref$viewbox = _ref.viewbox,
      viewbox = _ref$viewbox === void 0 ? "" : _ref$viewbox;

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

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

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

  var mainContainerRef = React.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&q=" + address + "&city=" + city + "&countrycodes=" + countrycodes + "&accept-language=" + acceptLanguage;
    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__default.createElement("div", {
    className: styles.reactOsmGeocoding,
    ref: mainContainerRef
  }, React__default.createElement("input", {
    type: "text",
    name: "geocoding",
    id: "geocoding",
    placeholder: placeholder,
    onClick: function onClick() {
      return setShowResults(true);
    },
    onChange: function onChange(event) {
      return debouncer.invoke(event.target.value);
    }
  }), React__default.createElement("img", {
    src: iconUrl,
    width: "30px",
    height: "30px"
  }), showLoader && React__default.createElement("div", {
    className: styles.loader
  }), results.length && showResults ? renderResults(results, callback, setShowResults) : "");
};

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