@ttoss/google-maps 1.20.0 → 1.20.3

package/dist/esm/index.js

@@ -0,0 +1,242 @@
+"use strict";
+
+// tsup.inject.js
+import * as React from "react";
+
+// src/GoogleMapsProvider.tsx
+import * as React2 from "react";
+import { useScript } from "@ttoss/hooks";
+var GoogleMapsContext = React2.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 = React2.useMemo(() => {
+    if (status === "ready" && window.google.maps) {
+      return window.google.maps;
+    }
+    return null;
+  }, [status]);
+  const value = React2.useMemo(() => {
+    if (status === "ready" && googleMaps) {
+      return {
+        status,
+        googleMaps
+      };
+    }
+    return {
+      status,
+      googleMaps: null
+    };
+  }, [googleMaps, status]);
+  return /* @__PURE__ */ React2.createElement(GoogleMapsContext.Provider, {
+    value
+  }, children);
+};
+var useGoogleMaps = () => React2.useContext(GoogleMapsContext);
+
+// src/useGeocoder.ts
+import * as React3 from "react";
+var useGeocoder = () => {
+  const { googleMaps } = useGoogleMaps();
+  const [isGeocoderInitialized, setIsGeocoderInitialized] = React3.useState(false);
+  const geocoder = React3.useMemo(() => {
+    if (googleMaps) {
+      const googleMapsGeocoder = new googleMaps.Geocoder();
+      setIsGeocoderInitialized(true);
+      return googleMapsGeocoder;
+    }
+    return null;
+  }, [googleMaps]);
+  return { geocoder, isGeocoderInitialized };
+};
+
+// src/useMap.ts
+import * as React4 from "react";
+import { useCallbackRef } from "use-callback-ref";
+var useMap = (options = {}) => {
+  const [, forceUpdate] = React4.useState(0);
+  const ref = useCallbackRef(null, () => forceUpdate((n) => n + 1));
+  const { googleMaps } = useGoogleMaps();
+  const map = React4.useMemo(() => {
+    if (googleMaps && ref.current) {
+      return new googleMaps.Map(ref.current, options);
+    }
+    return null;
+  }, [googleMaps, ref.current]);
+  const optionsStringify = JSON.stringify(options);
+  React4.useEffect(() => {
+    if (map) {
+      const parsedOptions = JSON.parse(optionsStringify);
+      map.setOptions(parsedOptions);
+    }
+  }, [optionsStringify, map]);
+  return {
+    map,
+    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,
+  usePlacesAutocomplete
+};

package/dist/index.d.ts

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { ScriptStatus } from '@ttoss/hooks';
+
+declare type Extends<T, U extends T> = U;
+declare type GoogleMaps = typeof google.maps;
+declare type LoadedMapsStatus = Extends<ScriptStatus, 'ready'>;
+declare type NotLoadedMapStatus = Extends<ScriptStatus, 'idle' | 'error' | 'loading'>;
+declare type Libraries = 'places' | 'visualization' | 'drawing' | 'geometry';
+declare const GoogleMapsProvider: ({ children, apiKey, libraries, language, }: {
+    children: React.ReactNode;
+    apiKey: string;
+    libraries?: Libraries[] | undefined;
+    /**
+     * https://developers.google.com/maps/faq#languagesupport
+     */
+    language?: string | undefined;
+}) => 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;
+}
+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

@@ -0,0 +1,274 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  GoogleMapsProvider: () => GoogleMapsProvider,
+  useGeocoder: () => useGeocoder,
+  useGoogleMaps: () => useGoogleMaps,
+  useMap: () => useMap,
+  usePlacesAutocomplete: () => usePlacesAutocomplete
+});
+module.exports = __toCommonJS(src_exports);
+
+// tsup.inject.js
+var React = __toESM(require("react"));
+
+// src/GoogleMapsProvider.tsx
+var React2 = __toESM(require("react"));
+var import_hooks = require("@ttoss/hooks");
+var GoogleMapsContext = React2.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 } = (0, import_hooks.useScript)(src);
+  const googleMaps = React2.useMemo(() => {
+    if (status === "ready" && window.google.maps) {
+      return window.google.maps;
+    }
+    return null;
+  }, [status]);
+  const value = React2.useMemo(() => {
+    if (status === "ready" && googleMaps) {
+      return {
+        status,
+        googleMaps
+      };
+    }
+    return {
+      status,
+      googleMaps: null
+    };
+  }, [googleMaps, status]);
+  return /* @__PURE__ */ React2.createElement(GoogleMapsContext.Provider, {
+    value
+  }, children);
+};
+var useGoogleMaps = () => React2.useContext(GoogleMapsContext);
+
+// src/useGeocoder.ts
+var React3 = __toESM(require("react"));
+var useGeocoder = () => {
+  const { googleMaps } = useGoogleMaps();
+  const [isGeocoderInitialized, setIsGeocoderInitialized] = React3.useState(false);
+  const geocoder = React3.useMemo(() => {
+    if (googleMaps) {
+      const googleMapsGeocoder = new googleMaps.Geocoder();
+      setIsGeocoderInitialized(true);
+      return googleMapsGeocoder;
+    }
+    return null;
+  }, [googleMaps]);
+  return { geocoder, isGeocoderInitialized };
+};
+
+// src/useMap.ts
+var React4 = __toESM(require("react"));
+var import_use_callback_ref = require("use-callback-ref");
+var useMap = (options = {}) => {
+  const [, forceUpdate] = React4.useState(0);
+  const ref = (0, import_use_callback_ref.useCallbackRef)(null, () => forceUpdate((n) => n + 1));
+  const { googleMaps } = useGoogleMaps();
+  const map = React4.useMemo(() => {
+    if (googleMaps && ref.current) {
+      return new googleMaps.Map(ref.current, options);
+    }
+    return null;
+  }, [googleMaps, ref.current]);
+  const optionsStringify = JSON.stringify(options);
+  React4.useEffect(() => {
+    if (map) {
+      const parsedOptions = JSON.parse(optionsStringify);
+      map.setOptions(parsedOptions);
+    }
+  }, [optionsStringify, map]);
+  return {
+    map,
+    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,
+  usePlacesAutocomplete
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/google-maps",
-  "version": "1.20.0",
+  "version": "1.20.3",
   "author": "ttoss",
   "contributors": [
     {
@@ -31,8 +31,8 @@
     "build": "tsup"
   },
   "dependencies": {
-    "@ttoss/hooks": "^1.20.0",
-    "@types/google.maps": "^3.48.6",
+    "@ttoss/hooks": "^1.20.2",
+    "@types/google.maps": "^3.49.2",
     "use-callback-ref": "^1.3.0"
   },
   "devDependencies": {
@@ -43,5 +43,5 @@
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
-  "gitHead": "bea31ace95128d57607156807e402a793b0c46e4"
+  "gitHead": "6b9d0569f6dd6738005d338adea301308454ab0a"
 }

package/src/usePlacesAutocomplete/index.ts

@@ -1,8 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { useGoogleMaps } from './../GoogleMapsProvider';
-
 import { useCallback, useEffect, useRef, useState } from 'react';
-
+import { useGoogleMaps } from './../GoogleMapsProvider';
 import _debounce from './debounce';
 import useLatest from './useLatest';
 
@@ -166,7 +164,10 @@ export const usePlacesAutocomplete = ({
   );
 
   useEffect(() => {
-    if (!initOnMount) return () => null;
+    if (!initOnMount) {
+      // eslint-disable-next-line react/display-name
+      return () => null;
+    }
 
     if (!googleMapsRef.current && !googleMaps && callbackName) {
       (window as any)[callbackName] = init;