wix-style-react/dist/es/src/providers/usePlacesAutocomplete/usePlacesAutocomplete.js

wix-style-react

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _regeneratorRuntime from "@babel/runtime/regenerator";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

import { useState, useCallback, useRef } from 'react';
import _debounce from 'lodash/debounce';
import useIsMounted from '../useIsMounted';
import useDebouncedCallback from '../useDebouncedCallback/useDebouncedCallback';
var initialFetchState = {
  loading: false,
  predictions: []
};
/** A hook for fetching place predictions based on input value */

var usePlacesAutocomplete = function usePlacesAutocomplete(_ref) {
  var client = _ref.client,
      _ref$debounceMs = _ref.debounceMs,
      debounceMs = _ref$debounceMs === void 0 ? 200 : _ref$debounceMs,
      _ref$debounceFn = _ref.debounceFn,
      debounceFn = _ref$debounceFn === void 0 ? _debounce : _ref$debounceFn,
      onError = _ref.onError;

  var _useState = useState(initialFetchState),
      _useState2 = _slicedToArray(_useState, 2),
      _useState2$ = _useState2[0],
      loading = _useState2$.loading,
      predictions = _useState2$.predictions,
      setFetchState = _useState2[1];

  var predictionsRequestId = useRef(0); // id of latest request to avoid race conditions

  var isMounted = useIsMounted(); // checks whether component is still mounted

  var clearPredictions = useCallback(function () {
    // Increase request id counter
    predictionsRequestId.current++;
    setFetchState(initialFetchState);
  }, []);
  var updatePredictions = useDebouncedCallback( /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(value, requestOptions) {
      var ready, fetchPredictions, requestId, newPredictions, isMostRecentRequest;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              ready = client.ready, fetchPredictions = client.fetchPredictions;

              if (!(!ready || !isMounted())) {
                _context.next = 3;
                break;
              }

              return _context.abrupt("return");

            case 3:
              if (value) {
                _context.next = 6;
                break;
              }

              clearPredictions();
              return _context.abrupt("return");

            case 6:
              // Increase request id counter
              requestId = ++predictionsRequestId.current;
              setFetchState(function (state) {
                return _objectSpread(_objectSpread({}, state), {}, {
                  loading: true
                });
              });
              _context.prev = 8;
              _context.next = 11;
              return fetchPredictions(value, requestOptions);

            case 11:
              newPredictions = _context.sent;
              _context.next = 17;
              break;

            case 14:
              _context.prev = 14;
              _context.t0 = _context["catch"](8);

              // failed to fetch predictions
              if (onError) {
                onError(_context.t0);
              }

            case 17:
              _context.prev = 17;
              // check if no new fetch request has been initiated
              isMostRecentRequest = requestId === predictionsRequestId.current;

              if (isMounted() && isMostRecentRequest) {
                setFetchState(function (state) {
                  return {
                    loading: false,
                    // set new predictions if fetched properly, else keep current predictions
                    predictions: newPredictions || state.predictions
                  };
                });
              }

              return _context.finish(17);

            case 21:
            case "end":
              return _context.stop();
          }
        }
      }, _callee, null, [[8, 14, 17, 21]]);
    }));

    return function (_x, _x2) {
      return _ref2.apply(this, arguments);
    };
  }(), [client, onError], debounceMs, debounceFn);
  return {
    /** array of prediction results */
    predictions: predictions,

    /** whether fetch request is ongoing */
    loading: loading,

    /** (value: string, requestOptions?: RequestOptions) => void
     * fetches predictions for given value from client (debounced)
     * and sets results to prediction state.
     *
     * Can also receive requestOptions,
     * which are client specific options to pass to the request */
    updatePredictions: updatePredictions,

    /** function that clears predictions array and sets loading state to false */
    clearPredictions: clearPredictions
  };
};

export default usePlacesAutocomplete;