@ttoss/google-maps 2.0.2 → 2.0.4

package/README.md

@@ -7,7 +7,7 @@
 Install `@ttoss/google-maps` in your project:
 
 ```shell
-$ pnpm install @ttoss/google-maps
+$ pnpm add @ttoss/google-maps
 ```
 
 If you use TypeScript, add the following to a declaration file (generally `typings.d.ts`):
@@ -16,7 +16,9 @@ If you use TypeScript, add the following to a declaration file (generally `typin
 /// <reference types="google.maps" />
 ```
 
-## Configuring `GoogleMapsProvider`
+## How to Use
+
+### Configuring `GoogleMapsProvider`
 
 At the root of your application, configure `GoogleMapsProvider` with your Google Maps API key. This way, the whole application can access the `google` variable.
 
@@ -34,7 +36,7 @@ const App = ({ children }) => {
 };
 ```
 
-## Rendering the Map
+### Rendering the Map
 
 At the component level, render Google Maps using `useMap` hook:
 

package/dist/esm/index.js

@@ -0,0 +1,266 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+
+// src/GoogleMapsProvider.tsx
+import * as React from "react";
+import { useScript } from "@ttoss/react-hooks";
+import { jsx } from "react/jsx-runtime";
+var GoogleMapsContext = React.createContext({
+  status: "idle",
+  googleMaps: null
+});
+var GoogleMapsProvider = ({
+  children,
+  apiKey,
+  libraries,
+  language
+}) => {
+  const src = (() => {
+    let srcTemp = `https://maps.googleapis.com/maps/api/js?key=${apiKey}`;
+    if (libraries) {
+      srcTemp = srcTemp + `&libraries=${libraries.join(",")}`;
+    }
+    if (language) {
+      srcTemp = srcTemp + `&language=${language}`;
+    }
+    return srcTemp;
+  })();
+  const {
+    status
+  } = useScript(src);
+  const googleMaps = React.useMemo(() => {
+    if (status === "ready" && window.google.maps) {
+      return window.google.maps;
+    }
+    return null;
+  }, [status]);
+  const value = React.useMemo(() => {
+    if (status === "ready" && googleMaps) {
+      return {
+        status,
+        googleMaps
+      };
+    }
+    return {
+      status,
+      googleMaps: null
+    };
+  }, [googleMaps, status]);
+  return /* @__PURE__ */jsx(GoogleMapsContext.Provider, {
+    value,
+    children
+  });
+};
+var useGoogleMaps = () => {
+  return React.useContext(GoogleMapsContext);
+};
+
+// src/useGeocoder.ts
+import * as React2 from "react";
+var useGeocoder = () => {
+  const {
+    googleMaps
+  } = useGoogleMaps();
+  const [isGeocoderInitialized, setIsGeocoderInitialized] = React2.useState(false);
+  const geocoder = React2.useMemo(() => {
+    if (googleMaps) {
+      const googleMapsGeocoder = new googleMaps.Geocoder();
+      setIsGeocoderInitialized(true);
+      return googleMapsGeocoder;
+    }
+    return null;
+  }, [googleMaps]);
+  return {
+    geocoder,
+    isGeocoderInitialized
+  };
+};
+
+// src/useMap.ts
+import * as React3 from "react";
+import { useCallbackRef } from "use-callback-ref";
+var useMap = (options = {}) => {
+  const [, forceUpdate] = React3.useState(0);
+  const ref = useCallbackRef(null, () => {
+    return forceUpdate(n => {
+      return n + 1;
+    });
+  });
+  const {
+    googleMaps
+  } = useGoogleMaps();
+  const map = React3.useMemo(() => {
+    if (googleMaps && ref.current) {
+      return new googleMaps.Map(ref.current, options);
+    }
+    return null;
+  }, [googleMaps, ref.current]);
+  const optionsStringify = JSON.stringify(options);
+  React3.useEffect(() => {
+    if (map) {
+      const parsedOptions = JSON.parse(optionsStringify);
+      map.setOptions(parsedOptions);
+    }
+  }, [optionsStringify, map]);
+  return {
+    /**
+     * asss
+     */
+    map,
+    /**
+     * hhhh
+     */
+    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?.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 => {
+    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;
+      }
+    }
+    asRef?.current?.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, usePlacesAutocomplete };

package/dist/index.d.ts

@@ -0,0 +1,78 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { ScriptStatus } from '@ttoss/react-hooks';
+
+type Extends<T, U extends T> = U;
+type GoogleMaps = typeof google.maps;
+type LoadedMapsStatus = Extends<ScriptStatus, 'ready'>;
+type NotLoadedMapStatus = Extends<ScriptStatus, 'idle' | 'error' | 'loading'>;
+type Libraries = 'places' | 'visualization' | 'drawing' | 'geometry';
+declare const GoogleMapsProvider: ({ children, apiKey, libraries, language, }: {
+    children: React.ReactNode;
+    apiKey: string;
+    libraries?: Libraries[];
+    /**
+     * https://developers.google.com/maps/faq#languagesupport
+     */
+    language?: string;
+}) => react_jsx_runtime.JSX.Element;
+/**
+ *
+ * @returns param.googleMaps: GoogleMaps - returns the google maps object which
+ * provides access to the [Google Maps API](https://developers.google.com/maps/documentation/javascript/overview).
+ */
+declare const useGoogleMaps: () => {
+    status: LoadedMapsStatus;
+    googleMaps: GoogleMaps;
+} | {
+    status: NotLoadedMapStatus;
+    googleMaps: null;
+};
+
+declare const useGeocoder: () => {
+    geocoder: google.maps.Geocoder | null;
+    isGeocoderInitialized: boolean;
+};
+
+declare const useMap: (options?: google.maps.MapOptions) => {
+    /**
+     * asss
+     */
+    map: google.maps.Map | null;
+    /**
+     * hhhh
+     */
+    ref: React.MutableRefObject<HTMLDivElement | null>;
+};
+
+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;
+}
+declare const usePlacesAutocomplete: ({ requestOptions, debounce, cache, cacheKey, callbackName, defaultValue, initOnMount, }?: HookArgs) => HookReturn;
+
+export { GoogleMapsProvider, useGeocoder, useGoogleMaps, useMap, usePlacesAutocomplete };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/google-maps",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "author": "ttoss",
   "contributors": [
     "Pedro Arantes <pedro@arantespp.com> (https://arantespp.com/contact)",
@@ -23,9 +23,9 @@
     "src"
   ],
   "dependencies": {
-    "@types/google.maps": "^3.54.10",
-    "use-callback-ref": "^1.3.0",
-    "@ttoss/react-hooks": "^2.0.2"
+    "@types/google.maps": "^3.58.1",
+    "use-callback-ref": "^1.3.2",
+    "@ttoss/react-hooks": "^2.0.3"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -36,8 +36,8 @@
     "jest": "^29.7.0",
     "react": "^18.3.1",
     "tsup": "^8.3.0",
-    "@ttoss/config": "^1.33.0",
-    "@ttoss/test-utils": "^2.1.15"
+    "@ttoss/test-utils": "^2.1.16",
+    "@ttoss/config": "^1.34.0"
   },
   "keywords": [
     "Google",