@ttoss/google-maps 0.7.0 → 0.9.0

package/README.md

@@ -1,8 +1,4 @@
-<h1 align="center">
-
-`@ttoss/google-maps`
-
-</h1>
+# @ttoss/google-maps
 
 ## 📚 About
 
@@ -10,18 +6,235 @@
 
 ## 🚀 Get Started
 
-- Install Dependencies
+### Install @ttoss/google-maps
 
-```sh
-$ yarn
+```shell
+$ yarn add
+# or
+$ npm install @ttoss/google-maps
 ```
 
-- Build @ttoss/google-maps
+## 📄 Examples of use
 
-```sh
-$ yarn build
-# or
-$ npm run build
+### Map
+
+```tsx
+export type MapProps = {
+  width?: number | string;
+  height?: number | string;
+  image?: Omit<MapImageOptions, 'map'>;
+  options?: google.maps.MapOptions;
+};
+
+const Map = ({ height, width, image, options }: MapProps) => {
+  const { googleMaps } = useGoogleMaps();
+
+  const [mapDivRef, setMapDivRef] = React.useState<HTMLDivElement | null>(null);
+
+  const map = React.useMemo(() => {
+    if (googleMaps && mapDivRef) {
+      const googleMapsMap = new googleMaps.Map(mapDivRef, defaultOptions);
+      return googleMapsMap;
+    }
+
+    return null;
+  }, [googleMaps, mapDivRef]);
+
+  React.useEffect(() => {
+    if (map && options?.center) {
+      map.setCenter(options.center);
+    }
+  }, [map, options?.center]);
+
+  return (
+    <div id="google-maps" ref={(r) => setMapDivRef(r)} sx={{ width, height }} />
+  );
+};
+
+Map.defaultProps = {
+  width: 400,
+  height: 300,
+} as MapProps;
+
+export default Map;
+```
+
+### Latitude and Longitude
+
+```ts
+import { useGeocoder } from '@ttoss/google-maps';
+
+type MapGeocoderResult = google.maps.GeocoderResult;
+type MapGeocoderStatus = google.maps.GeocoderStatus;
+
+export type LatLng = {
+  lat: number;
+  lng: number;
+};
+
+export const useGeocoding = () => {
+  const { geocoder } = useGeocoder();
+
+  const getLatLong = ({ address }: { address: string }): Promise<LatLng> => {
+    return new Promise((resolve, reject) => {
+      if (!geocoder) {
+        return reject(new Error('Geocoder not defined'));
+      }
+
+      geocoder.geocode(
+        { address },
+        (results: MapGeocoderResult[] | null, status: MapGeocoderStatus) => {
+          if (results && status === window.google.maps.GeocoderStatus.OK) {
+            const lat = results[0].geometry.location.lat();
+            const lng = results[0].geometry.location.lng();
+
+            return resolve({
+              lat,
+              lng,
+            });
+          } else {
+            console.log(
+              'Geocode was not successful for the following reason: ',
+              status
+            );
+            return reject(new Error('Result not found'));
+          }
+        }
+      );
+    });
+  };
+
+  return { getLatLong };
+};
+```
+
+### Providers
+
+```tsx
+import * as React from 'react';
+
+import { GoogleMapsProvider } from '@ttoss/google-maps';
+
+const Providers: React.FC = ({ children }) => {
+  const apiKey = 'YOUR_API_KEY';
+
+  if (!apiKey) {
+    return <>{children}</>;
+  }
+
+  return (
+    <GoogleMapsProvider apiKey={apiKey} libraries={['places']}>
+      {children}
+    </GoogleMapsProvider>
+  );
+};
+
+export default Providers;
+```
+
+### Autocomplete
+
+```tsx
+import React from 'react';
+
+import { usePlacesAutocomplete } from '@ttoss/google-maps';
+
+const Component = () => {
+  const [text, setText] = React.useState('');
+  const clearText = () => setText('');
+
+  const apiKey = 'YOUR_API_KEY';
+
+  const {
+    ready,
+    value,
+    suggestions: { status, data },
+    setValue,
+    clearSuggestions,
+  } = usePlacesAutocomplete({
+    debounce: 300,
+    cacheKey: apiKey,
+  });
+
+  const handleInput = (e: any) => {
+    setValue(e.target.value);
+  };
+
+  const handleSelect =
+    ({ description }: { description: string }) =>
+    () => {
+      setValue(description, false);
+      clearSuggestions();
+    };
+
+  const renderSuggestions = () =>
+    data.map((suggestion) => {
+      const {
+        place_id,
+        structured_formatting: { main_text, secondary_text },
+      } = suggestion;
+
+      return (
+        <li key={place_id} onClick={() => handleSelect(suggestion)}>
+          <strong>{main_text}</strong>
+
+          <small>{secondary_text}</small>
+        </li>
+      );
+    });
+
+  return (
+    <div>
+      <input value={value} onChange={handleInput} disabled={!ready} />
+
+      {status === 'OK' && <ul>{renderSuggestions()}</ul>}
+    </div>
+  );
+};
+
+export default Component;
+```
+
+## 📘 Types
+
+```ts
+import { ScriptStatus } from '@ttoss/hooks';
+
+const useMap: (options: google.maps.MapOptions) => {
+  map: google.maps.Map | null;
+  ref: React.RefObject<HTMLDivElement>;
+  isMapInitialized: boolean;
+};
+
+const useGeocoder: () => {
+  geocoder: google.maps.Geocoder | null;
+  isGeocoderInitialized: boolean;
+};
+
+type Libraries = 'places' | 'visualization' | 'drawing' | 'geometry';
+
+type Extends<T, U extends T> = U;
+
+type LoadedMapsStatus = Extends<ScriptStatus, 'ready'>;
+
+type NotLoadedMapStatus = Extends<ScriptStatus, 'idle' | 'error' | 'loading'>;
+
+export type GoogleMaps = typeof google.maps;
+
+const GoogleMapsProvider: React.FC<{
+  apiKey: string;
+  libraries?: Libraries[] | undefined;
+}>;
+
+const useGoogleMaps: () =>
+  | {
+      status: LoadedMapsStatus;
+      googleMaps: GoogleMaps;
+    }
+  | {
+      status: NotLoadedMapStatus;
+      googleMaps: null;
+    };
 ```
 
 ---
@@ -33,5 +246,5 @@ $ npm run build
 <br/>
 
 <h4 align="center">
-    Special thanks for the inspiring <a href="https://github.com/jmarceli/react-hook-google-maps">react-hook-google-maps</a>  documentation.
+    Special thanks for the inspiring <a href="https://github.com/jmarceli/react-hook-google-maps">react-hook-google-maps</a> and <a href="https://github.com/wellyshen/use-places-autocomplete">use-places-autocomplete</a> documentation.
 </h4>

package/dist/esm/index.js

@@ -3,26 +3,21 @@ import * as React from "react";
 
 // src/GoogleMapsProvider.tsx
 import { useScript } from "@ttoss/hooks";
-import {
-  createContext,
-  createElement,
-  useContext,
-  useMemo
-} from "react";
-var GoogleMapsContext = createContext({
+import * as React2 from "react";
+var GoogleMapsContext = React2.createContext({
   status: "idle",
   googleMaps: null
 });
 var GoogleMapsProvider = ({ children, apiKey, libraries }) => {
   const src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=${libraries == null ? void 0 : libraries.join(",")}`;
   const { status } = useScript(src);
-  const googleMaps = useMemo(() => {
+  const googleMaps = React2.useMemo(() => {
     if (status === "ready" && window.google.maps) {
       return window.google.maps;
     }
     return null;
   }, [status]);
-  const value = useMemo(() => {
+  const value = React2.useMemo(() => {
     if (status === "ready" && googleMaps) {
       return {
         status,
@@ -34,21 +29,18 @@ var GoogleMapsProvider = ({ children, apiKey, libraries }) => {
       googleMaps: null
     };
   }, [googleMaps, status]);
-  return /* @__PURE__ */ createElement(GoogleMapsContext.Provider, {
+  return /* @__PURE__ */ React2.createElement(GoogleMapsContext.Provider, {
     value
   }, children);
 };
-var useGoogleMaps = () => useContext(GoogleMapsContext);
+var useGoogleMaps = () => React2.useContext(GoogleMapsContext);
 
 // src/useGeocoder.ts
-import {
-  useMemo as useMemo2,
-  useState
-} from "react";
+import * as React3 from "react";
 var useGeocoder = () => {
   const { googleMaps } = useGoogleMaps();
-  const [isGeocoderInitialized, setIsGeocoderInitialized] = useState(false);
-  const geocoder = useMemo2(() => {
+  const [isGeocoderInitialized, setIsGeocoderInitialized] = React3.useState(false);
+  const geocoder = React3.useMemo(() => {
     if (googleMaps) {
       const googleMapsGeocoder = new googleMaps.Geocoder();
       setIsGeocoderInitialized(true);
@@ -60,17 +52,13 @@ var useGeocoder = () => {
 };
 
 // src/useMap.ts
-import {
-  useMemo as useMemo3,
-  useRef,
-  useState as useState2
-} from "react";
+import * as React4 from "react";
 var useMap = (options) => {
-  const ref = useRef(null);
+  const ref = React4.useRef(null);
   const { googleMaps } = useGoogleMaps();
-  const [isMapInitialized, setIsMapInitialized] = useState2(false);
+  const [isMapInitialized, setIsMapInitialized] = React4.useState(false);
   const optionsStringify = JSON.stringify(options);
-  const map = useMemo3(() => {
+  const map = React4.useMemo(() => {
     if (googleMaps && ref.current) {
       const parsedOptions = JSON.parse(optionsStringify);
       const googleMapsMap = new googleMaps.Map(ref.current, parsedOptions);

package/dist/index.js

@@ -1,28 +1,60 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }// tsup.inject.js
-var _react = require('react'); var React = _interopRequireWildcard(_react);
-
-// src/GoogleMapsProvider.tsx
-var _hooks = require('@ttoss/hooks');
-
-
-
-
+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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  GoogleMapsProvider: () => GoogleMapsProvider,
+  useGeocoder: () => useGeocoder,
+  useGoogleMaps: () => useGoogleMaps,
+  useMap: () => useMap
+});
 
+// tsup.inject.js
+var React = __toESM(require("react"));
 
-var GoogleMapsContext = _react.createContext.call(void 0, {
+// src/GoogleMapsProvider.tsx
+var import_hooks = require("@ttoss/hooks");
+var React2 = __toESM(require("react"));
+var GoogleMapsContext = React2.createContext({
   status: "idle",
   googleMaps: null
 });
 var GoogleMapsProvider = ({ children, apiKey, libraries }) => {
   const src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=${libraries == null ? void 0 : libraries.join(",")}`;
-  const { status } = _hooks.useScript.call(void 0, src);
-  const googleMaps = _react.useMemo.call(void 0, () => {
+  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 = _react.useMemo.call(void 0, () => {
+  const value = React2.useMemo(() => {
     if (status === "ready" && googleMaps) {
       return {
         status,
@@ -34,21 +66,18 @@ var GoogleMapsProvider = ({ children, apiKey, libraries }) => {
       googleMaps: null
     };
   }, [googleMaps, status]);
-  return /* @__PURE__ */ _react.createElement.call(void 0, GoogleMapsContext.Provider, {
+  return /* @__PURE__ */ React2.createElement(GoogleMapsContext.Provider, {
     value
   }, children);
 };
-var useGoogleMaps = () => _react.useContext.call(void 0, GoogleMapsContext);
+var useGoogleMaps = () => React2.useContext(GoogleMapsContext);
 
 // src/useGeocoder.ts
-
-
-
-
+var React3 = __toESM(require("react"));
 var useGeocoder = () => {
   const { googleMaps } = useGoogleMaps();
-  const [isGeocoderInitialized, setIsGeocoderInitialized] = _react.useState.call(void 0, false);
-  const geocoder = _react.useMemo.call(void 0, () => {
+  const [isGeocoderInitialized, setIsGeocoderInitialized] = React3.useState(false);
+  const geocoder = React3.useMemo(() => {
     if (googleMaps) {
       const googleMapsGeocoder = new googleMaps.Geocoder();
       setIsGeocoderInitialized(true);
@@ -60,17 +89,13 @@ var useGeocoder = () => {
 };
 
 // src/useMap.ts
-
-
-
-
-
+var React4 = __toESM(require("react"));
 var useMap = (options) => {
-  const ref = _react.useRef.call(void 0, null);
+  const ref = React4.useRef(null);
   const { googleMaps } = useGoogleMaps();
-  const [isMapInitialized, setIsMapInitialized] = _react.useState.call(void 0, false);
+  const [isMapInitialized, setIsMapInitialized] = React4.useState(false);
   const optionsStringify = JSON.stringify(options);
-  const map = _react.useMemo.call(void 0, () => {
+  const map = React4.useMemo(() => {
     if (googleMaps && ref.current) {
       const parsedOptions = JSON.parse(optionsStringify);
       const googleMapsMap = new googleMaps.Map(ref.current, parsedOptions);
@@ -81,9 +106,11 @@ var useMap = (options) => {
   }, [googleMaps, optionsStringify]);
   return { map, ref, isMapInitialized };
 };
-
-
-
-
-
-exports.GoogleMapsProvider = GoogleMapsProvider; exports.useGeocoder = useGeocoder; exports.useGoogleMaps = useGoogleMaps; exports.useMap = useMap;
+module.exports = __toCommonJS(src_exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GoogleMapsProvider,
+  useGeocoder,
+  useGoogleMaps,
+  useMap
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/google-maps",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "author": "ttoss",
   "contributors": [
     {
@@ -31,12 +31,12 @@
     "build": "tsup"
   },
   "dependencies": {
-    "@ttoss/hooks": "^0.7.0",
+    "@ttoss/hooks": "^0.9.0",
     "@types/google.maps": "^3.45.6"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
-  "gitHead": "a30e8313b3d18efe8914133e56951cbc419d86da"
+  "gitHead": "bb45872f0106803249cb8ef1e6971ca17609cb3d"
 }