@ttoss/google-maps 1.16.1 → 1.20.1

package/dist/esm/index.js

@@ -1,3 +1,5 @@
+"use strict";
+
 // tsup.inject.js
 import * as React from "react";
 
@@ -90,9 +92,151 @@ var useMap = (options = {}) => {
     ref
   };
 };
+
+// src/usePlacesAutocomplete/index.ts
+import { useCallback, useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
+
+// src/usePlacesAutocomplete/debounce.ts
+var debounce = (fn, delay) => {
+  let timer;
+  function debounceFn(...args) {
+    if (timer !== null) {
+      clearTimeout(timer);
+      timer = null;
+    }
+    timer = setTimeout(() => fn.apply(this, args), delay);
+  }
+  return debounceFn;
+};
+var debounce_default = debounce;
+
+// src/usePlacesAutocomplete/useLatest.ts
+import { useRef } from "react";
+var useLatest_default = (val) => {
+  const ref = useRef(val);
+  ref.current = val;
+  return ref;
+};
+
+// src/usePlacesAutocomplete/index.ts
+var usePlacesAutocomplete = ({
+  requestOptions,
+  debounce: debounce2 = 200,
+  cache = 24 * 60 * 60,
+  cacheKey,
+  callbackName,
+  defaultValue = "",
+  initOnMount = true
+} = {}) => {
+  const [ready, setReady] = useState3(false);
+  const [value, setVal] = useState3(defaultValue);
+  const [suggestions, setSuggestions] = useState3({
+    loading: false,
+    status: "",
+    data: []
+  });
+  const asRef = useRef2(null);
+  const requestOptionsRef = useLatest_default(requestOptions);
+  const { googleMaps } = useGoogleMaps();
+  const googleMapsRef = useLatest_default(googleMaps);
+  const upaCacheKey = cacheKey ? `upa-${cacheKey}` : "upa";
+  const init = useCallback(() => {
+    if (asRef.current)
+      return;
+    if (!googleMaps) {
+      return;
+    }
+    const { current: gMaps } = googleMapsRef;
+    const placesLib = (gMaps == null ? void 0 : gMaps.places) || googleMaps.places;
+    if (!placesLib) {
+      return;
+    }
+    asRef.current = new placesLib.AutocompleteService();
+    setReady(true);
+  }, [googleMaps]);
+  const clearSuggestions = useCallback(() => {
+    setSuggestions({ loading: false, status: "", data: [] });
+  }, []);
+  const clearCache = useCallback(() => {
+    try {
+      sessionStorage.removeItem(upaCacheKey);
+    } catch (error) {
+    }
+  }, []);
+  const fetchPredictions = useCallback(debounce_default((val) => {
+    var _a;
+    if (!val) {
+      clearSuggestions();
+      return;
+    }
+    setSuggestions((prevState) => ({ ...prevState, loading: true }));
+    let cachedData = {};
+    try {
+      cachedData = JSON.parse(sessionStorage.getItem(upaCacheKey) || "{}");
+    } catch (error) {
+    }
+    if (cache) {
+      cachedData = Object.keys(cachedData).reduce((acc, key) => {
+        if (cachedData[key].maxAge - Date.now() >= 0)
+          acc[key] = cachedData[key];
+        return acc;
+      }, {});
+      if (cachedData[val]) {
+        setSuggestions({
+          loading: false,
+          status: "OK",
+          data: cachedData[val].data
+        });
+        return;
+      }
+    }
+    (_a = asRef == null ? void 0 : asRef.current) == null ? void 0 : _a.getPlacePredictions({ ...requestOptionsRef.current, input: val }, (data, status) => {
+      setSuggestions({ loading: false, status, data: data || [] });
+      if (cache && status === "OK") {
+        cachedData[val] = {
+          data,
+          maxAge: Date.now() + cache * 1e3
+        };
+        try {
+          sessionStorage.setItem(upaCacheKey, JSON.stringify(cachedData));
+        } catch (error) {
+        }
+      }
+    });
+  }, debounce2), [debounce2, clearSuggestions]);
+  const setValue = useCallback((val, shouldFetchData = true) => {
+    setVal(val);
+    if (asRef.current && shouldFetchData)
+      fetchPredictions(val);
+  }, [fetchPredictions]);
+  useEffect2(() => {
+    if (!initOnMount) {
+      return () => null;
+    }
+    if (!googleMapsRef.current && !googleMaps && callbackName) {
+      window[callbackName] = init;
+    } else {
+      init();
+    }
+    return () => {
+      if (window[callbackName])
+        delete window[callbackName];
+    };
+  }, [callbackName, init]);
+  return {
+    ready,
+    value,
+    suggestions,
+    setValue,
+    clearSuggestions,
+    clearCache,
+    init
+  };
+};
 export {
   GoogleMapsProvider,
   useGeocoder,
   useGoogleMaps,
-  useMap
+  useMap,
+  usePlacesAutocomplete
 };

package/dist/index.d.ts

@@ -44,4 +44,34 @@ declare const useMap: (options?: google.maps.MapOptions) => {
     ref: React.MutableRefObject<HTMLDivElement | null>;
 };
 
-export { GoogleMapsProvider, useGeocoder, useGoogleMaps, useMap };
+interface HookArgs {
+    requestOptions?: Omit<google.maps.places.AutocompletionRequest, 'input'>;
+    debounce?: number;
+    cache?: number | false;
+    cacheKey?: string;
+    callbackName?: string;
+    defaultValue?: string;
+    initOnMount?: boolean;
+}
+declare type Suggestion = google.maps.places.AutocompletePrediction;
+declare type Status = `${google.maps.places.PlacesServiceStatus}` | '';
+interface Suggestions {
+    readonly loading: boolean;
+    readonly status: Status;
+    data: Suggestion[];
+}
+interface SetValue {
+    (val: string, shouldFetchData?: boolean): void;
+}
+interface HookReturn {
+    ready: boolean;
+    value: string;
+    suggestions: Suggestions;
+    setValue: SetValue;
+    clearSuggestions: () => void;
+    clearCache: () => void;
+    init: () => void;
+}
+declare const usePlacesAutocomplete: ({ requestOptions, debounce, cache, cacheKey, callbackName, defaultValue, initOnMount, }?: HookArgs) => HookReturn;
+
+export { GoogleMapsProvider, useGeocoder, useGoogleMaps, useMap, usePlacesAutocomplete };

package/dist/index.js

@@ -1,3 +1,4 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -25,7 +26,8 @@ __export(src_exports, {
   GoogleMapsProvider: () => GoogleMapsProvider,
   useGeocoder: () => useGeocoder,
   useGoogleMaps: () => useGoogleMaps,
-  useMap: () => useMap
+  useMap: () => useMap,
+  usePlacesAutocomplete: () => usePlacesAutocomplete
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -121,10 +123,152 @@ var useMap = (options = {}) => {
     ref
   };
 };
+
+// src/usePlacesAutocomplete/index.ts
+var import_react2 = require("react");
+
+// src/usePlacesAutocomplete/debounce.ts
+var debounce = (fn, delay) => {
+  let timer;
+  function debounceFn(...args) {
+    if (timer !== null) {
+      clearTimeout(timer);
+      timer = null;
+    }
+    timer = setTimeout(() => fn.apply(this, args), delay);
+  }
+  return debounceFn;
+};
+var debounce_default = debounce;
+
+// src/usePlacesAutocomplete/useLatest.ts
+var import_react = require("react");
+var useLatest_default = (val) => {
+  const ref = (0, import_react.useRef)(val);
+  ref.current = val;
+  return ref;
+};
+
+// src/usePlacesAutocomplete/index.ts
+var usePlacesAutocomplete = ({
+  requestOptions,
+  debounce: debounce2 = 200,
+  cache = 24 * 60 * 60,
+  cacheKey,
+  callbackName,
+  defaultValue = "",
+  initOnMount = true
+} = {}) => {
+  const [ready, setReady] = (0, import_react2.useState)(false);
+  const [value, setVal] = (0, import_react2.useState)(defaultValue);
+  const [suggestions, setSuggestions] = (0, import_react2.useState)({
+    loading: false,
+    status: "",
+    data: []
+  });
+  const asRef = (0, import_react2.useRef)(null);
+  const requestOptionsRef = useLatest_default(requestOptions);
+  const { googleMaps } = useGoogleMaps();
+  const googleMapsRef = useLatest_default(googleMaps);
+  const upaCacheKey = cacheKey ? `upa-${cacheKey}` : "upa";
+  const init = (0, import_react2.useCallback)(() => {
+    if (asRef.current)
+      return;
+    if (!googleMaps) {
+      return;
+    }
+    const { current: gMaps } = googleMapsRef;
+    const placesLib = (gMaps == null ? void 0 : gMaps.places) || googleMaps.places;
+    if (!placesLib) {
+      return;
+    }
+    asRef.current = new placesLib.AutocompleteService();
+    setReady(true);
+  }, [googleMaps]);
+  const clearSuggestions = (0, import_react2.useCallback)(() => {
+    setSuggestions({ loading: false, status: "", data: [] });
+  }, []);
+  const clearCache = (0, import_react2.useCallback)(() => {
+    try {
+      sessionStorage.removeItem(upaCacheKey);
+    } catch (error) {
+    }
+  }, []);
+  const fetchPredictions = (0, import_react2.useCallback)(debounce_default((val) => {
+    var _a;
+    if (!val) {
+      clearSuggestions();
+      return;
+    }
+    setSuggestions((prevState) => ({ ...prevState, loading: true }));
+    let cachedData = {};
+    try {
+      cachedData = JSON.parse(sessionStorage.getItem(upaCacheKey) || "{}");
+    } catch (error) {
+    }
+    if (cache) {
+      cachedData = Object.keys(cachedData).reduce((acc, key) => {
+        if (cachedData[key].maxAge - Date.now() >= 0)
+          acc[key] = cachedData[key];
+        return acc;
+      }, {});
+      if (cachedData[val]) {
+        setSuggestions({
+          loading: false,
+          status: "OK",
+          data: cachedData[val].data
+        });
+        return;
+      }
+    }
+    (_a = asRef == null ? void 0 : asRef.current) == null ? void 0 : _a.getPlacePredictions({ ...requestOptionsRef.current, input: val }, (data, status) => {
+      setSuggestions({ loading: false, status, data: data || [] });
+      if (cache && status === "OK") {
+        cachedData[val] = {
+          data,
+          maxAge: Date.now() + cache * 1e3
+        };
+        try {
+          sessionStorage.setItem(upaCacheKey, JSON.stringify(cachedData));
+        } catch (error) {
+        }
+      }
+    });
+  }, debounce2), [debounce2, clearSuggestions]);
+  const setValue = (0, import_react2.useCallback)((val, shouldFetchData = true) => {
+    setVal(val);
+    if (asRef.current && shouldFetchData)
+      fetchPredictions(val);
+  }, [fetchPredictions]);
+  (0, import_react2.useEffect)(() => {
+    if (!initOnMount) {
+      return () => null;
+    }
+    if (!googleMapsRef.current && !googleMaps && callbackName) {
+      window[callbackName] = init;
+    } else {
+      init();
+    }
+    return () => {
+      if (window[callbackName])
+        delete window[callbackName];
+    };
+  }, [callbackName, init]);
+  return {
+    ready,
+    value,
+    suggestions,
+    setValue,
+    clearSuggestions,
+    clearCache,
+    init
+  };
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   GoogleMapsProvider,
   useGeocoder,
   useGoogleMaps,
-  useMap
+  useMap,
+  usePlacesAutocomplete
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/google-maps",
-  "version": "1.16.1",
+  "version": "1.20.1",
   "author": "ttoss",
   "contributors": [
     {
@@ -31,13 +31,17 @@
     "build": "tsup"
   },
   "dependencies": {
-    "@ttoss/hooks": "^1.16.1",
-    "@types/google.maps": "^3.48.6",
+    "@ttoss/hooks": "^1.20.0",
+    "@types/google.maps": "^3.49.2",
     "use-callback-ref": "^1.3.0"
   },
+  "devDependencies": {
+    "@ttoss/config": "^1.17.0",
+    "@ttoss/test-utils": "^1.16.6"
+  },
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
-  "gitHead": "d4caf53cd81bff99f232c6908a78e243ab9ed322"
+  "gitHead": "587a0fa017ce16add11728db7365a41e9650685d"
 }

package/src/index.spec.ts

@@ -5,4 +5,5 @@ test('should export all methods', () => {
   expect(googleMaps.useGeocoder).toBeDefined();
   expect(googleMaps.useGoogleMaps).toBeDefined();
   expect(googleMaps.useMap).toBeDefined();
+  expect(googleMaps.usePlacesAutocomplete).toBeDefined();
 });

package/src/index.ts

@@ -1,3 +1,4 @@
 export { GoogleMapsProvider, useGoogleMaps } from './GoogleMapsProvider';
 export { useGeocoder } from './useGeocoder';
 export { useMap } from './useMap';
+export { usePlacesAutocomplete } from './usePlacesAutocomplete';

package/src/usePlacesAutocomplete/debounce.ts

@@ -0,0 +1,20 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const debounce = <F extends (...args: any[]) => void>(
+  fn: F,
+  delay: number
+): ((this: ThisParameterType<F>, ...args: Parameters<F>) => void) => {
+  let timer: ReturnType<typeof setTimeout> | null;
+
+  function debounceFn(this: ThisParameterType<F>, ...args: Parameters<F>) {
+    if (timer !== null) {
+      clearTimeout(timer);
+      timer = null;
+    }
+
+    timer = setTimeout(() => fn.apply(this, args), delay);
+  }
+
+  return debounceFn;
+};
+
+export default debounce;

package/src/usePlacesAutocomplete/index.ts

@@ -0,0 +1,193 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useGoogleMaps } from './../GoogleMapsProvider';
+import _debounce from './debounce';
+import useLatest from './useLatest';
+
+export interface HookArgs {
+  requestOptions?: Omit<google.maps.places.AutocompletionRequest, 'input'>;
+  debounce?: number;
+  cache?: number | false;
+  cacheKey?: string;
+  callbackName?: string;
+  defaultValue?: string;
+  initOnMount?: boolean;
+}
+
+type Suggestion = google.maps.places.AutocompletePrediction;
+
+type Status = `${google.maps.places.PlacesServiceStatus}` | '';
+
+interface Suggestions {
+  readonly loading: boolean;
+  readonly status: Status;
+  data: Suggestion[];
+}
+
+interface SetValue {
+  (val: string, shouldFetchData?: boolean): void;
+}
+
+interface HookReturn {
+  ready: boolean;
+  value: string;
+  suggestions: Suggestions;
+  setValue: SetValue;
+  clearSuggestions: () => void;
+  clearCache: () => void;
+  init: () => void;
+}
+
+export const loadApiErr = '💡 Google Maps Places API library must be loaded.';
+
+export const usePlacesAutocomplete = ({
+  requestOptions,
+  debounce = 200,
+  cache = 24 * 60 * 60,
+  cacheKey,
+  callbackName,
+  defaultValue = '',
+  initOnMount = true,
+}: HookArgs = {}): HookReturn => {
+  const [ready, setReady] = useState(false);
+  const [value, setVal] = useState(defaultValue);
+  const [suggestions, setSuggestions] = useState<Suggestions>({
+    loading: false,
+    status: '',
+    data: [],
+  });
+  const asRef = useRef<any>(null);
+  const requestOptionsRef = useLatest(requestOptions);
+  const { googleMaps } = useGoogleMaps();
+
+  const googleMapsRef = useLatest(googleMaps);
+
+  const upaCacheKey = cacheKey ? `upa-${cacheKey}` : 'upa';
+
+  const init = useCallback(() => {
+    if (asRef.current) return;
+
+    if (!googleMaps) {
+      return;
+    }
+
+    const { current: gMaps } = googleMapsRef;
+    const placesLib = gMaps?.places || googleMaps.places;
+
+    if (!placesLib) {
+      return;
+    }
+
+    asRef.current = new placesLib.AutocompleteService();
+    setReady(true);
+  }, [googleMaps]);
+
+  const clearSuggestions = useCallback(() => {
+    setSuggestions({ loading: false, status: '', data: [] });
+  }, []);
+
+  const clearCache = useCallback(() => {
+    try {
+      sessionStorage.removeItem(upaCacheKey);
+    } catch (error) {
+      // Skip exception
+    }
+  }, []);
+
+  const fetchPredictions = useCallback(
+    _debounce((val: string) => {
+      if (!val) {
+        clearSuggestions();
+        return;
+      }
+
+      setSuggestions((prevState) => ({ ...prevState, loading: true }));
+
+      let cachedData: Record<string, { data: Suggestion[]; maxAge: number }> =
+        {};
+
+      try {
+        cachedData = JSON.parse(sessionStorage.getItem(upaCacheKey) || '{}');
+      } catch (error) {
+        // Skip exception
+      }
+
+      if (cache) {
+        cachedData = Object.keys(cachedData).reduce(
+          (acc: typeof cachedData, key) => {
+            if (cachedData[key].maxAge - Date.now() >= 0)
+              acc[key] = cachedData[key];
+            return acc;
+          },
+          {}
+        );
+
+        if (cachedData[val]) {
+          setSuggestions({
+            loading: false,
+            status: 'OK',
+            data: cachedData[val].data,
+          });
+          return;
+        }
+      }
+
+      asRef?.current?.getPlacePredictions(
+        { ...requestOptionsRef.current, input: val },
+        (data: Suggestion[] | null, status: Status) => {
+          setSuggestions({ loading: false, status, data: data || [] });
+
+          if (cache && status === 'OK') {
+            cachedData[val] = {
+              data: data as Suggestion[],
+              maxAge: Date.now() + cache * 1000,
+            };
+
+            try {
+              sessionStorage.setItem(upaCacheKey, JSON.stringify(cachedData));
+            } catch (error) {
+              // Skip exception
+            }
+          }
+        }
+      );
+    }, debounce),
+    [debounce, clearSuggestions]
+  );
+
+  const setValue: SetValue = useCallback(
+    (val, shouldFetchData = true) => {
+      setVal(val);
+      if (asRef.current && shouldFetchData) fetchPredictions(val);
+    },
+    [fetchPredictions]
+  );
+
+  useEffect(() => {
+    if (!initOnMount) {
+      // eslint-disable-next-line react/display-name
+      return () => null;
+    }
+
+    if (!googleMapsRef.current && !googleMaps && callbackName) {
+      (window as any)[callbackName] = init;
+    } else {
+      init();
+    }
+
+    return () => {
+      if ((window as any)[callbackName as string])
+        delete (window as any)[callbackName as string];
+    };
+  }, [callbackName, init]);
+
+  return {
+    ready,
+    value,
+    suggestions,
+    setValue,
+    clearSuggestions,
+    clearCache,
+    init,
+  };
+};

package/src/usePlacesAutocomplete/useLatest.ts

@@ -0,0 +1,7 @@
+import { RefObject, useRef } from 'react';
+
+export default <T>(val: T): RefObject<T> => {
+  const ref = useRef(val);
+  ref.current = val;
+  return ref;
+};