@ttoss/google-maps 2.0.4 → 2.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -674
- package/README.md +25 -2
- package/dist/esm/index.js +87 -52
- package/dist/index.d.ts +22 -18
- package/package.json +2 -1
- package/src/GoogleMapsProvider.tsx +21 -20
- package/src/index.ts +2 -1
- package/src/useGeocoder.ts +5 -5
- package/src/useGoogleMaps.ts +20 -0
- package/src/useMap.ts +8 -7
- package/src/usePlacesAutocomplete/index.ts +39 -24
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* eslint-disable react-hooks/exhaustive-deps */
|
|
2
|
-
import
|
|
3
|
-
import { useGoogleMaps } from './../
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { useGoogleMaps } from './../useGoogleMaps';
|
|
4
4
|
import _debounce from './debounce';
|
|
5
5
|
import useLatest from './useLatest';
|
|
6
6
|
|
|
@@ -49,30 +49,34 @@ export const usePlacesAutocomplete = ({
|
|
|
49
49
|
defaultValue = '',
|
|
50
50
|
initOnMount = true,
|
|
51
51
|
}: HookArgs = {}): HookReturn => {
|
|
52
|
-
const [ready, setReady] = useState(false);
|
|
53
|
-
const [value, setVal] = useState(defaultValue);
|
|
54
|
-
const [suggestions, setSuggestions] = useState<Suggestions>({
|
|
52
|
+
const [ready, setReady] = React.useState(false);
|
|
53
|
+
const [value, setVal] = React.useState(defaultValue);
|
|
54
|
+
const [suggestions, setSuggestions] = React.useState<Suggestions>({
|
|
55
55
|
loading: false,
|
|
56
56
|
status: '',
|
|
57
57
|
data: [],
|
|
58
58
|
});
|
|
59
|
-
|
|
59
|
+
|
|
60
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
61
|
+
const asRef = React.useRef<any>(null);
|
|
60
62
|
const requestOptionsRef = useLatest(requestOptions);
|
|
61
|
-
const {
|
|
63
|
+
const { google } = useGoogleMaps();
|
|
62
64
|
|
|
63
|
-
const googleMapsRef = useLatest(
|
|
65
|
+
const googleMapsRef = useLatest(google.maps);
|
|
64
66
|
|
|
65
67
|
const upaCacheKey = cacheKey ? `upa-${cacheKey}` : 'upa';
|
|
66
68
|
|
|
67
|
-
const init = useCallback(() => {
|
|
68
|
-
if (asRef.current)
|
|
69
|
+
const init = React.useCallback(() => {
|
|
70
|
+
if (asRef.current) {
|
|
71
|
+
return;
|
|
72
|
+
}
|
|
69
73
|
|
|
70
|
-
if (!
|
|
74
|
+
if (!google.maps) {
|
|
71
75
|
return;
|
|
72
76
|
}
|
|
73
77
|
|
|
74
78
|
const { current: gMaps } = googleMapsRef;
|
|
75
|
-
const placesLib = gMaps?.places ||
|
|
79
|
+
const placesLib = gMaps?.places || google.maps.places;
|
|
76
80
|
|
|
77
81
|
if (!placesLib) {
|
|
78
82
|
return;
|
|
@@ -80,13 +84,13 @@ export const usePlacesAutocomplete = ({
|
|
|
80
84
|
|
|
81
85
|
asRef.current = new placesLib.AutocompleteService();
|
|
82
86
|
setReady(true);
|
|
83
|
-
}, [
|
|
87
|
+
}, [google.maps]);
|
|
84
88
|
|
|
85
|
-
const clearSuggestions = useCallback(() => {
|
|
89
|
+
const clearSuggestions = React.useCallback(() => {
|
|
86
90
|
setSuggestions({ loading: false, status: '', data: [] });
|
|
87
91
|
}, []);
|
|
88
92
|
|
|
89
|
-
const clearCache = useCallback(() => {
|
|
93
|
+
const clearCache = React.useCallback(() => {
|
|
90
94
|
try {
|
|
91
95
|
sessionStorage.removeItem(upaCacheKey);
|
|
92
96
|
} catch (error) {
|
|
@@ -94,14 +98,16 @@ export const usePlacesAutocomplete = ({
|
|
|
94
98
|
}
|
|
95
99
|
}, []);
|
|
96
100
|
|
|
97
|
-
const fetchPredictions = useCallback(
|
|
101
|
+
const fetchPredictions = React.useCallback(
|
|
98
102
|
_debounce((val: string) => {
|
|
99
103
|
if (!val) {
|
|
100
104
|
clearSuggestions();
|
|
101
105
|
return;
|
|
102
106
|
}
|
|
103
107
|
|
|
104
|
-
setSuggestions((prevState) =>
|
|
108
|
+
setSuggestions((prevState) => {
|
|
109
|
+
return { ...prevState, loading: true };
|
|
110
|
+
});
|
|
105
111
|
|
|
106
112
|
let cachedData: Record<string, { data: Suggestion[]; maxAge: number }> =
|
|
107
113
|
{};
|
|
@@ -115,8 +121,9 @@ export const usePlacesAutocomplete = ({
|
|
|
115
121
|
if (cache) {
|
|
116
122
|
cachedData = Object.keys(cachedData).reduce(
|
|
117
123
|
(acc: typeof cachedData, key) => {
|
|
118
|
-
if (cachedData[key].maxAge - Date.now() >= 0)
|
|
124
|
+
if (cachedData[key].maxAge - Date.now() >= 0) {
|
|
119
125
|
acc[key] = cachedData[key];
|
|
126
|
+
}
|
|
120
127
|
return acc;
|
|
121
128
|
},
|
|
122
129
|
{}
|
|
@@ -155,29 +162,37 @@ export const usePlacesAutocomplete = ({
|
|
|
155
162
|
[debounce, clearSuggestions]
|
|
156
163
|
);
|
|
157
164
|
|
|
158
|
-
const setValue: SetValue = useCallback(
|
|
165
|
+
const setValue: SetValue = React.useCallback(
|
|
159
166
|
(val, shouldFetchData = true) => {
|
|
160
167
|
setVal(val);
|
|
161
|
-
if (asRef.current && shouldFetchData)
|
|
168
|
+
if (asRef.current && shouldFetchData) {
|
|
169
|
+
fetchPredictions(val);
|
|
170
|
+
}
|
|
162
171
|
},
|
|
163
172
|
[fetchPredictions]
|
|
164
173
|
);
|
|
165
174
|
|
|
166
|
-
useEffect(() => {
|
|
175
|
+
React.useEffect(() => {
|
|
167
176
|
if (!initOnMount) {
|
|
168
177
|
// eslint-disable-next-line react/display-name
|
|
169
|
-
return () =>
|
|
178
|
+
return () => {
|
|
179
|
+
return null;
|
|
180
|
+
};
|
|
170
181
|
}
|
|
171
182
|
|
|
172
|
-
if (!googleMapsRef.current && !
|
|
183
|
+
if (!googleMapsRef.current && !google.maps && callbackName) {
|
|
184
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
173
185
|
(window as any)[callbackName] = init;
|
|
174
186
|
} else {
|
|
175
187
|
init();
|
|
176
188
|
}
|
|
177
189
|
|
|
178
190
|
return () => {
|
|
179
|
-
|
|
191
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
192
|
+
if ((window as any)[callbackName as string]) {
|
|
193
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
180
194
|
delete (window as any)[callbackName as string];
|
|
195
|
+
}
|
|
181
196
|
};
|
|
182
197
|
}, [callbackName, init]);
|
|
183
198
|
|