UNPKG

wix-style-react

Version:
161 lines (126 loc) • 6.26 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports["default"] = void 0; var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator")); var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator")); var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray")); var _react = require("react"); var _debounce2 = _interopRequireDefault(require("lodash/debounce")); var _useIsMounted = _interopRequireDefault(require("../useIsMounted")); var _useDebouncedCallback = _interopRequireDefault(require("../useDebouncedCallback/useDebouncedCallback")); 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) { (0, _defineProperty2["default"])(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; } 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 ? _debounce2["default"] : _ref$debounceFn, onError = _ref.onError; var _useState = (0, _react.useState)(initialFetchState), _useState2 = (0, _slicedToArray2["default"])(_useState, 2), _useState2$ = _useState2[0], loading = _useState2$.loading, predictions = _useState2$.predictions, setFetchState = _useState2[1]; var predictionsRequestId = (0, _react.useRef)(0); // id of latest request to avoid race conditions var isMounted = (0, _useIsMounted["default"])(); // checks whether component is still mounted var clearPredictions = (0, _react.useCallback)(function () { // Increase request id counter predictionsRequestId.current++; setFetchState(initialFetchState); }, []); var updatePredictions = (0, _useDebouncedCallback["default"])( /*#__PURE__*/function () { var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(value, requestOptions) { var ready, fetchPredictions, requestId, newPredictions, isMostRecentRequest; return _regenerator["default"].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 }; }; var _default = usePlacesAutocomplete; exports["default"] = _default;