@ttoss/google-maps 2.0.5 → 2.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/google-maps",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "license": "MIT",
   "author": "ttoss",
   "contributors": [
@@ -20,13 +20,12 @@
     }
   },
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "dependencies": {
     "@types/google.maps": "^3.58.1",
     "use-callback-ref": "^1.3.2",
-    "@ttoss/react-hooks": "^2.0.3"
+    "@ttoss/react-hooks": "^2.0.4"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -37,8 +36,8 @@
     "jest": "^29.7.0",
     "react": "^18.3.1",
     "tsup": "^8.3.0",
-    "@ttoss/test-utils": "^2.1.16",
-    "@ttoss/config": "^1.34.0"
+    "@ttoss/config": "^1.34.1",
+    "@ttoss/test-utils": "^2.1.17"
   },
   "keywords": [
     "Google",

package/src/GoogleMapsProvider.tsx

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

package/src/index.ts

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

package/src/typings.d.ts

@@ -1 +0,0 @@
-/// <reference types="google.maps" />

package/src/useGeocoder.ts

@@ -1,21 +0,0 @@
-import * as React from 'react';
-import { useGoogleMaps } from './useGoogleMaps';
-
-export const useGeocoder = () => {
-  const { google } = useGoogleMaps();
-
-  const [isGeocoderInitialized, setIsGeocoderInitialized] =
-    React.useState(false);
-
-  const geocoder = React.useMemo(() => {
-    if (google.maps) {
-      const googleMapsGeocoder = new google.maps.Geocoder();
-      setIsGeocoderInitialized(true);
-      return googleMapsGeocoder;
-    }
-
-    return null;
-  }, [google.maps]);
-
-  return { geocoder, isGeocoderInitialized };
-};

package/src/useGoogleMaps.ts

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { GoogleMapsContext } from './GoogleMapsProvider';
-
-/**
- * Returns the status of the Google Maps API and the google object which
- * provides access to the [Google Maps API](https://developers.google.com/maps/documentation/javascript/overview).
- *
- * @returns An object containing the API status and the google object.
- */
-export const useGoogleMaps = () => {
-  const { status, google } = React.useContext(GoogleMapsContext);
-  return {
-    status,
-    google,
-    /**
-     * @deprecated Use google.maps instead.
-     */
-    googleMaps: google.maps,
-  };
-};

package/src/useMap.ts

@@ -1,56 +0,0 @@
-import * as React from 'react';
-import { useCallbackRef } from 'use-callback-ref';
-import { useGoogleMaps } from './useGoogleMaps';
-
-export const useMap = (options: google.maps.MapOptions = {}) => {
-  /**
-   * Read here for more details about the useCallbackRef hook:
-   * https://github.com/theKashey/use-callback-ref#usecallbackref---to-replace-reactuseref
-   */
-  const [, forceUpdate] = React.useState(0);
-
-  const ref = useCallbackRef<HTMLDivElement>(null, () => {
-    return forceUpdate((n) => {
-      return n + 1;
-    });
-  });
-
-  const { google } = useGoogleMaps();
-
-  const map = React.useMemo(() => {
-    if (google?.maps && ref.current) {
-      return new google.maps.Map(ref.current, options);
-    }
-
-    return null;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [google?.maps, ref.current]);
-
-  /**
-   * To avoid re-initializing the map because shallow object comparison.
-   * https://stackoverflow.com/a/62409962/8786986
-   */
-  const optionsStringify = JSON.stringify(options);
-
-  /**
-   * Update options but not reinitialize the map.
-   */
-  React.useEffect(() => {
-    if (map) {
-      const parsedOptions = JSON.parse(optionsStringify);
-      map.setOptions(parsedOptions);
-    }
-  }, [optionsStringify, map]);
-
-  return {
-    /**
-     * Returns the map object which provides access to the [Google Maps API](https://developers.google.com/maps/documentation/javascript/overview).
-     */
-    map,
-    /**
-     * Returns the ref object which provides access to the HTMLDivElement element
-     * that the map is rendered in.
-     */
-    ref,
-  };
-};

package/src/usePlacesAutocomplete/debounce.ts

@@ -1,20 +0,0 @@
-/* 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

@@ -1,208 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import * as React from 'react';
-import { useGoogleMaps } from './../useGoogleMaps';
-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] = React.useState(false);
-  const [value, setVal] = React.useState(defaultValue);
-  const [suggestions, setSuggestions] = React.useState<Suggestions>({
-    loading: false,
-    status: '',
-    data: [],
-  });
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const asRef = React.useRef<any>(null);
-  const requestOptionsRef = useLatest(requestOptions);
-  const { google } = useGoogleMaps();
-
-  const googleMapsRef = useLatest(google.maps);
-
-  const upaCacheKey = cacheKey ? `upa-${cacheKey}` : 'upa';
-
-  const init = React.useCallback(() => {
-    if (asRef.current) {
-      return;
-    }
-
-    if (!google.maps) {
-      return;
-    }
-
-    const { current: gMaps } = googleMapsRef;
-    const placesLib = gMaps?.places || google.maps.places;
-
-    if (!placesLib) {
-      return;
-    }
-
-    asRef.current = new placesLib.AutocompleteService();
-    setReady(true);
-  }, [google.maps]);
-
-  const clearSuggestions = React.useCallback(() => {
-    setSuggestions({ loading: false, status: '', data: [] });
-  }, []);
-
-  const clearCache = React.useCallback(() => {
-    try {
-      sessionStorage.removeItem(upaCacheKey);
-    } catch (error) {
-      // Skip exception
-    }
-  }, []);
-
-  const fetchPredictions = React.useCallback(
-    _debounce((val: string) => {
-      if (!val) {
-        clearSuggestions();
-        return;
-      }
-
-      setSuggestions((prevState) => {
-        return { ...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 = React.useCallback(
-    (val, shouldFetchData = true) => {
-      setVal(val);
-      if (asRef.current && shouldFetchData) {
-        fetchPredictions(val);
-      }
-    },
-    [fetchPredictions]
-  );
-
-  React.useEffect(() => {
-    if (!initOnMount) {
-      // eslint-disable-next-line react/display-name
-      return () => {
-        return null;
-      };
-    }
-
-    if (!googleMapsRef.current && !google.maps && callbackName) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (window as any)[callbackName] = init;
-    } else {
-      init();
-    }
-
-    return () => {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      if ((window as any)[callbackName as string]) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        delete (window as any)[callbackName as string];
-      }
-    };
-  }, [callbackName, init]);
-
-  return {
-    ready,
-    value,
-    suggestions,
-    setValue,
-    clearSuggestions,
-    clearCache,
-    init,
-  };
-};

package/src/usePlacesAutocomplete/useLatest.ts

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