@sanity/google-maps-input 2.29.3 → 2.29.4-purple-unicorn.651
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/diff/resolver.js +7 -0
- package/input/GeopointInput.js +7 -0
- package/lib/_Marker-353730d0.js +301 -0
- package/lib/_Marker-353730d0.js.map +1 -0
- package/lib/_Marker-ee551fa7.cjs +330 -0
- package/lib/_Marker-ee551fa7.cjs.map +1 -0
- package/lib/_reExport.js +19 -0
- package/lib/diff/resolver.cjs +203 -0
- package/lib/diff/resolver.cjs.map +1 -0
- package/lib/diff/resolver.js +168 -17
- package/lib/diff/resolver.js.map +1 -0
- package/{dist/dts → lib/dts/src}/diff/GeopointArrayDiff.d.ts +4 -4
- package/lib/dts/src/diff/GeopointArrayDiff.d.ts.map +1 -0
- package/lib/dts/src/diff/GeopointArrayDiff.js +36 -0
- package/lib/dts/src/diff/GeopointArrayDiff.js.map +1 -0
- package/{dist/dts → lib/dts/src}/diff/GeopointFieldDiff.d.ts +4 -4
- package/lib/dts/src/diff/GeopointFieldDiff.d.ts.map +1 -0
- package/lib/dts/src/diff/GeopointFieldDiff.js +51 -0
- package/lib/dts/src/diff/GeopointFieldDiff.js.map +1 -0
- package/{dist/dts → lib/dts/src}/diff/GeopointFieldDiff.styles.d.ts +1 -1
- package/lib/dts/src/diff/GeopointFieldDiff.styles.d.ts.map +1 -0
- package/lib/dts/src/diff/GeopointFieldDiff.styles.js +20 -0
- package/lib/dts/src/diff/GeopointFieldDiff.styles.js.map +1 -0
- package/{dist/dts → lib/dts/src}/diff/GeopointMove.d.ts +12 -12
- package/lib/dts/src/diff/GeopointMove.d.ts.map +1 -0
- package/lib/dts/src/diff/GeopointMove.js +16 -0
- package/lib/dts/src/diff/GeopointMove.js.map +1 -0
- package/lib/dts/src/diff/resolver.d.ts +4 -0
- package/lib/dts/src/diff/resolver.d.ts.map +1 -0
- package/lib/dts/src/diff/resolver.js +15 -0
- package/lib/dts/src/diff/resolver.js.map +1 -0
- package/lib/dts/src/input/GeopointInput.d.ts +26 -0
- package/lib/dts/src/input/GeopointInput.d.ts.map +1 -0
- package/lib/dts/src/input/GeopointInput.js +97 -0
- package/lib/dts/src/input/GeopointInput.js.map +1 -0
- package/{dist/dts → lib/dts/src}/input/GeopointInput.styles.d.ts +2 -2
- package/lib/dts/src/input/GeopointInput.styles.d.ts.map +1 -0
- package/lib/dts/src/input/GeopointInput.styles.js +11 -0
- package/lib/dts/src/input/GeopointInput.styles.js.map +1 -0
- package/{dist/dts → lib/dts/src}/input/GeopointSelect.d.ts +27 -27
- package/lib/dts/src/input/GeopointSelect.d.ts.map +1 -0
- package/lib/dts/src/input/GeopointSelect.js +44 -0
- package/lib/dts/src/input/GeopointSelect.js.map +1 -0
- package/{dist/dts → lib/dts/src}/loader/GoogleMapsLoadProxy.d.ts +13 -13
- package/lib/dts/src/loader/GoogleMapsLoadProxy.d.ts.map +1 -0
- package/lib/dts/src/loader/GoogleMapsLoadProxy.js +39 -0
- package/lib/dts/src/loader/GoogleMapsLoadProxy.js.map +1 -0
- package/{dist/dts → lib/dts/src}/loader/LoadError.d.ts +9 -9
- package/lib/dts/src/loader/LoadError.d.ts.map +1 -0
- package/lib/dts/src/loader/LoadError.js +22 -0
- package/lib/dts/src/loader/LoadError.js.map +1 -0
- package/{dist/dts → lib/dts/src}/loader/loadGoogleMapsApi.d.ts +17 -17
- package/lib/dts/src/loader/loadGoogleMapsApi.d.ts.map +1 -0
- package/lib/dts/src/loader/loadGoogleMapsApi.js +49 -0
- package/lib/dts/src/loader/loadGoogleMapsApi.js.map +1 -0
- package/{dist/dts → lib/dts/src}/map/Arrow.d.ts +28 -28
- package/lib/dts/src/map/Arrow.d.ts.map +1 -0
- package/lib/dts/src/map/Arrow.js +53 -0
- package/lib/dts/src/map/Arrow.js.map +1 -0
- package/{dist/dts → lib/dts/src}/map/Map.d.ts +36 -36
- package/lib/dts/src/map/Map.d.ts.map +1 -0
- package/lib/dts/src/map/Map.js +87 -0
- package/lib/dts/src/map/Map.js.map +1 -0
- package/{dist/dts → lib/dts/src}/map/Map.styles.d.ts +1 -1
- package/lib/dts/src/map/Map.styles.d.ts.map +1 -0
- package/lib/dts/src/map/Map.styles.js +10 -0
- package/lib/dts/src/map/Map.styles.js.map +1 -0
- package/{dist/dts → lib/dts/src}/map/Marker.d.ts +33 -35
- package/lib/dts/src/map/Marker.d.ts.map +1 -0
- package/lib/dts/src/map/Marker.js +94 -0
- package/lib/dts/src/map/Marker.js.map +1 -0
- package/{dist/dts → lib/dts/src}/map/SearchInput.d.ts +15 -15
- package/lib/dts/src/map/SearchInput.d.ts.map +1 -0
- package/lib/dts/src/map/SearchInput.js +37 -0
- package/lib/dts/src/map/SearchInput.js.map +1 -0
- package/{dist/dts → lib/dts/src}/map/SearchInput.styles.d.ts +1 -1
- package/lib/dts/src/map/SearchInput.styles.d.ts.map +1 -0
- package/lib/dts/src/map/SearchInput.styles.js +8 -0
- package/lib/dts/src/map/SearchInput.styles.js.map +1 -0
- package/{dist/dts → lib/dts/src}/map/util.d.ts +3 -3
- package/lib/dts/src/map/util.d.ts.map +1 -0
- package/lib/dts/src/map/util.js +8 -0
- package/lib/dts/src/map/util.js.map +1 -0
- package/lib/dts/src/types.d.ts +17 -0
- package/lib/dts/src/types.d.ts.map +1 -0
- package/lib/dts/src/types.js +2 -0
- package/lib/dts/src/types.js.map +1 -0
- package/lib/dts/tsconfig.tsbuildinfo +1 -0
- package/lib/input/GeopointInput.cjs +212 -0
- package/lib/input/GeopointInput.cjs.map +1 -0
- package/lib/input/GeopointInput.js +182 -190
- package/lib/input/GeopointInput.js.map +1 -0
- package/package.json +46 -12
- package/src/@types/css.d.ts +4 -0
- package/src/diff/GeopointArrayDiff.tsx +83 -0
- package/src/diff/GeopointFieldDiff.styles.tsx +20 -0
- package/src/diff/GeopointFieldDiff.tsx +94 -0
- package/src/diff/GeopointMove.tsx +48 -0
- package/src/diff/resolver.ts +21 -0
- package/src/input/GeopointInput.styles.tsx +12 -0
- package/src/input/GeopointInput.tsx +185 -0
- package/src/input/GeopointSelect.tsx +78 -0
- package/src/loader/GoogleMapsLoadProxy.tsx +49 -0
- package/src/loader/LoadError.tsx +44 -0
- package/src/loader/loadGoogleMapsApi.ts +91 -0
- package/src/map/Arrow.tsx +76 -0
- package/src/map/Map.styles.tsx +10 -0
- package/src/map/Map.tsx +125 -0
- package/src/map/Marker.tsx +130 -0
- package/src/map/SearchInput.styles.tsx +8 -0
- package/src/map/SearchInput.tsx +56 -0
- package/src/map/util.ts +14 -0
- package/src/types.ts +19 -0
- package/.depcheckignore.json +0 -3
- package/dist/dts/diff/GeopointArrayDiff.d.ts.map +0 -1
- package/dist/dts/diff/GeopointFieldDiff.d.ts.map +0 -1
- package/dist/dts/diff/GeopointFieldDiff.styles.d.ts.map +0 -1
- package/dist/dts/diff/GeopointMove.d.ts.map +0 -1
- package/dist/dts/diff/resolver.d.ts +0 -4
- package/dist/dts/diff/resolver.d.ts.map +0 -1
- package/dist/dts/input/GeopointInput.d.ts +0 -40
- package/dist/dts/input/GeopointInput.d.ts.map +0 -1
- package/dist/dts/input/GeopointInput.styles.d.ts.map +0 -1
- package/dist/dts/input/GeopointSelect.d.ts.map +0 -1
- package/dist/dts/loader/GoogleMapsLoadProxy.d.ts.map +0 -1
- package/dist/dts/loader/LoadError.d.ts.map +0 -1
- package/dist/dts/loader/loadGoogleMapsApi.d.ts.map +0 -1
- package/dist/dts/map/Arrow.d.ts.map +0 -1
- package/dist/dts/map/Map.d.ts.map +0 -1
- package/dist/dts/map/Map.styles.d.ts.map +0 -1
- package/dist/dts/map/Marker.d.ts.map +0 -1
- package/dist/dts/map/SearchInput.d.ts.map +0 -1
- package/dist/dts/map/SearchInput.styles.d.ts.map +0 -1
- package/dist/dts/map/util.d.ts.map +0 -1
- package/dist/dts/types.d.ts +0 -14
- package/dist/dts/types.d.ts.map +0 -1
- package/lib/@types/css.d.js +0 -1
- package/lib/diff/GeopointArrayDiff.js +0 -82
- package/lib/diff/GeopointFieldDiff.js +0 -97
- package/lib/diff/GeopointFieldDiff.styles.js +0 -18
- package/lib/diff/GeopointMove.js +0 -55
- package/lib/input/GeopointInput.styles.js +0 -22
- package/lib/input/GeopointSelect.js +0 -103
- package/lib/loader/GoogleMapsLoadProxy.js +0 -70
- package/lib/loader/LoadError.js +0 -43
- package/lib/loader/loadGoogleMapsApi.js +0 -81
- package/lib/map/Arrow.js +0 -97
- package/lib/map/Map.js +0 -147
- package/lib/map/Map.styles.js +0 -18
- package/lib/map/Marker.js +0 -156
- package/lib/map/SearchInput.js +0 -77
- package/lib/map/SearchInput.styles.js +0 -18
- package/lib/map/util.js +0 -14
- package/lib/types.js +0 -5
- package/tsconfig.json +0 -20
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GeopointInput.styles.d.ts","sourceRoot":"","sources":["../../../../src/input/GeopointInput.styles.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,oEAIxB,CAAA;AAED,eAAO,MAAM,oBAAoB,oEAGhC,CAAA"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import styled from 'styled-components';
|
|
2
|
+
export const PreviewImage = styled.img `
|
|
3
|
+
width: 100%;
|
|
4
|
+
height: auto;
|
|
5
|
+
vertical-align: top;
|
|
6
|
+
`;
|
|
7
|
+
export const DialogInnerContainer = styled.div `
|
|
8
|
+
height: 40rem;
|
|
9
|
+
width: 50rem;
|
|
10
|
+
`;
|
|
11
|
+
//# sourceMappingURL=GeopointInput.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GeopointInput.styles.js","sourceRoot":"","sources":["../../../../src/input/GeopointInput.styles.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIrC,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG7C,CAAA"}
|
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
/// <reference types="googlemaps" />
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { LatLng, Geopoint } from '../types';
|
|
4
|
-
interface SelectProps {
|
|
5
|
-
api: typeof window.google.maps;
|
|
6
|
-
value?: Geopoint;
|
|
7
|
-
onChange?: (latLng: google.maps.LatLng) => void;
|
|
8
|
-
defaultLocation?: LatLng;
|
|
9
|
-
defaultZoom?: number;
|
|
10
|
-
}
|
|
11
|
-
export declare class GeopointSelect extends React.PureComponent<SelectProps> {
|
|
12
|
-
static defaultProps: {
|
|
13
|
-
defaultZoom: number;
|
|
14
|
-
defaultLocation: {
|
|
15
|
-
lng: number;
|
|
16
|
-
lat: number;
|
|
17
|
-
};
|
|
18
|
-
};
|
|
19
|
-
mapRef: React.RefObject<HTMLDivElement>;
|
|
20
|
-
getCenter(): LatLng;
|
|
21
|
-
handlePlaceChanged: (place: google.maps.places.PlaceResult) => void;
|
|
22
|
-
handleMarkerDragEnd: (event: google.maps.MapMouseEvent) => void;
|
|
23
|
-
handleMapClick: (event: google.maps.MapMouseEvent) => void;
|
|
24
|
-
setValue(geoPoint: google.maps.LatLng): void;
|
|
25
|
-
render(): JSX.Element;
|
|
26
|
-
}
|
|
27
|
-
export {};
|
|
1
|
+
/// <reference types="googlemaps" />
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { LatLng, Geopoint } from '../types';
|
|
4
|
+
interface SelectProps {
|
|
5
|
+
api: typeof window.google.maps;
|
|
6
|
+
value?: Geopoint;
|
|
7
|
+
onChange?: (latLng: google.maps.LatLng) => void;
|
|
8
|
+
defaultLocation?: LatLng;
|
|
9
|
+
defaultZoom?: number;
|
|
10
|
+
}
|
|
11
|
+
export declare class GeopointSelect extends React.PureComponent<SelectProps> {
|
|
12
|
+
static defaultProps: {
|
|
13
|
+
defaultZoom: number;
|
|
14
|
+
defaultLocation: {
|
|
15
|
+
lng: number;
|
|
16
|
+
lat: number;
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
mapRef: React.RefObject<HTMLDivElement>;
|
|
20
|
+
getCenter(): LatLng;
|
|
21
|
+
handlePlaceChanged: (place: google.maps.places.PlaceResult) => void;
|
|
22
|
+
handleMarkerDragEnd: (event: google.maps.MapMouseEvent) => void;
|
|
23
|
+
handleMapClick: (event: google.maps.MapMouseEvent) => void;
|
|
24
|
+
setValue(geoPoint: google.maps.LatLng): void;
|
|
25
|
+
render(): JSX.Element;
|
|
26
|
+
}
|
|
27
|
+
export {};
|
|
28
28
|
//# sourceMappingURL=GeopointSelect.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GeopointSelect.d.ts","sourceRoot":"","sources":["../../../../src/input/GeopointSelect.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,EAAC,MAAM,EAAE,QAAQ,EAAC,MAAM,UAAU,CAAA;AAIzC,UAAU,WAAW;IACnB,GAAG,EAAE,OAAO,MAAM,CAAC,MAAM,CAAC,IAAI,CAAA;IAC9B,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,MAAM,KAAK,IAAI,CAAA;IAC/C,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,qBAAa,cAAe,SAAQ,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC;IAClE,MAAM,CAAC,YAAY;;;;;;MAGlB;IAED,MAAM,kCAAoC;IAE1C,SAAS;IAMT,kBAAkB,UAAW,OAAO,IAAI,CAAC,MAAM,CAAC,WAAW,UAM1D;IAED,mBAAmB,UAAW,OAAO,IAAI,CAAC,aAAa,UAEtD;IAED,cAAc,UAAW,OAAO,IAAI,CAAC,aAAa,UAEjD;IAED,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,MAAM;IAMrC,MAAM;CAyBP"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { SearchInput } from '../map/SearchInput';
|
|
3
|
+
import { GoogleMap } from '../map/Map';
|
|
4
|
+
import { Marker } from '../map/Marker';
|
|
5
|
+
const fallbackLatLng = { lat: 40.7058254, lng: -74.1180863 };
|
|
6
|
+
export class GeopointSelect extends React.PureComponent {
|
|
7
|
+
constructor() {
|
|
8
|
+
super(...arguments);
|
|
9
|
+
this.mapRef = React.createRef();
|
|
10
|
+
this.handlePlaceChanged = (place) => {
|
|
11
|
+
if (!place.geometry) {
|
|
12
|
+
return;
|
|
13
|
+
}
|
|
14
|
+
this.setValue(place.geometry.location);
|
|
15
|
+
};
|
|
16
|
+
this.handleMarkerDragEnd = (event) => {
|
|
17
|
+
this.setValue(event.latLng);
|
|
18
|
+
};
|
|
19
|
+
this.handleMapClick = (event) => {
|
|
20
|
+
this.setValue(event.latLng);
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
getCenter() {
|
|
24
|
+
const { value = {}, defaultLocation = {} } = this.props;
|
|
25
|
+
const point = { ...fallbackLatLng, ...defaultLocation, ...value };
|
|
26
|
+
return point;
|
|
27
|
+
}
|
|
28
|
+
setValue(geoPoint) {
|
|
29
|
+
if (this.props.onChange) {
|
|
30
|
+
this.props.onChange(geoPoint);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
render() {
|
|
34
|
+
const { api, defaultZoom, value, onChange } = this.props;
|
|
35
|
+
return (React.createElement(GoogleMap, { api: api, location: this.getCenter(), onClick: this.handleMapClick, defaultZoom: defaultZoom }, (map) => (React.createElement(React.Fragment, null,
|
|
36
|
+
React.createElement(SearchInput, { api: api, map: map, onChange: this.handlePlaceChanged }),
|
|
37
|
+
value && (React.createElement(Marker, { api: api, map: map, position: value, onMove: onChange ? this.handleMarkerDragEnd : undefined }))))));
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
GeopointSelect.defaultProps = {
|
|
41
|
+
defaultZoom: 8,
|
|
42
|
+
defaultLocation: { lng: 10.74609, lat: 59.91273 },
|
|
43
|
+
};
|
|
44
|
+
//# sourceMappingURL=GeopointSelect.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GeopointSelect.js","sourceRoot":"","sources":["../../../../src/input/GeopointSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAC,WAAW,EAAC,MAAM,oBAAoB,CAAA;AAC9C,OAAO,EAAC,SAAS,EAAC,MAAM,YAAY,CAAA;AACpC,OAAO,EAAC,MAAM,EAAC,MAAM,eAAe,CAAA;AAGpC,MAAM,cAAc,GAAW,EAAC,GAAG,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,UAAU,EAAC,CAAA;AAUlE,MAAM,OAAO,cAAe,SAAQ,KAAK,CAAC,aAA0B;IAApE;;QAME,WAAM,GAAG,KAAK,CAAC,SAAS,EAAkB,CAAA;QAQ1C,uBAAkB,GAAG,CAAC,KAAqC,EAAE,EAAE;YAC7D,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;gBACnB,OAAM;aACP;YAED,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAA;QACxC,CAAC,CAAA;QAED,wBAAmB,GAAG,CAAC,KAAgC,EAAE,EAAE;YACzD,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;QAC7B,CAAC,CAAA;QAED,mBAAc,GAAG,CAAC,KAAgC,EAAE,EAAE;YACpD,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;QAC7B,CAAC,CAAA;IAiCH,CAAC;IArDC,SAAS;QACP,MAAM,EAAC,KAAK,GAAG,EAAE,EAAE,eAAe,GAAG,EAAE,EAAC,GAAG,IAAI,CAAC,KAAK,CAAA;QACrD,MAAM,KAAK,GAAW,EAAC,GAAG,cAAc,EAAE,GAAG,eAAe,EAAE,GAAG,KAAK,EAAC,CAAA;QACvE,OAAO,KAAK,CAAA;IACd,CAAC;IAkBD,QAAQ,CAAC,QAA4B;QACnC,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;YACvB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAA;SAC9B;IACH,CAAC;IAED,MAAM;QACJ,MAAM,EAAC,GAAG,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAC,GAAG,IAAI,CAAC,KAAK,CAAA;QACtD,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,IAAI,CAAC,SAAS,EAAE,EAC1B,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,WAAW,EAAE,WAAW,IAEvB,CAAC,GAAG,EAAE,EAAE,CAAC,CACR;YACE,oBAAC,WAAW,IAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,kBAAkB,GAAI;YACrE,KAAK,IAAI,CACR,oBAAC,MAAM,IACL,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,KAAK,EACf,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS,GACvD,CACH,CACA,CACJ,CACS,CACb,CAAA;IACH,CAAC;;AA3DM,2BAAY,GAAG;IACpB,WAAW,EAAE,CAAC;IACd,eAAe,EAAE,EAAC,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAC;CAChD,CAAA"}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Subscription } from 'rxjs';
|
|
3
|
-
import { GoogleLoadState } from './loadGoogleMapsApi';
|
|
4
|
-
interface LoadProps {
|
|
5
|
-
children: (api: typeof window.google.maps) => React.ReactElement;
|
|
6
|
-
}
|
|
7
|
-
export declare class GoogleMapsLoadProxy extends React.Component<LoadProps, GoogleLoadState> {
|
|
8
|
-
loadSubscription: Subscription | undefined;
|
|
9
|
-
constructor(props: LoadProps);
|
|
10
|
-
componentWillUnmount(): void;
|
|
11
|
-
render(): JSX.Element | null;
|
|
12
|
-
}
|
|
13
|
-
export {};
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Subscription } from 'rxjs';
|
|
3
|
+
import { GoogleLoadState } from './loadGoogleMapsApi';
|
|
4
|
+
interface LoadProps {
|
|
5
|
+
children: (api: typeof window.google.maps) => React.ReactElement;
|
|
6
|
+
}
|
|
7
|
+
export declare class GoogleMapsLoadProxy extends React.Component<LoadProps, GoogleLoadState> {
|
|
8
|
+
loadSubscription: Subscription | undefined;
|
|
9
|
+
constructor(props: LoadProps);
|
|
10
|
+
componentWillUnmount(): void;
|
|
11
|
+
render(): JSX.Element | null;
|
|
12
|
+
}
|
|
13
|
+
export {};
|
|
14
14
|
//# sourceMappingURL=GoogleMapsLoadProxy.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GoogleMapsLoadProxy.d.ts","sourceRoot":"","sources":["../../../../src/loader/GoogleMapsLoadProxy.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAC,YAAY,EAAC,MAAM,MAAM,CAAA;AACjC,OAAO,EAAoB,eAAe,EAAC,MAAM,qBAAqB,CAAA;AAGtE,UAAU,SAAS;IACjB,QAAQ,EAAE,CAAC,GAAG,EAAE,OAAO,MAAM,CAAC,MAAM,CAAC,IAAI,KAAK,KAAK,CAAC,YAAY,CAAA;CACjE;AAED,qBAAa,mBAAoB,SAAQ,KAAK,CAAC,SAAS,CAAC,SAAS,EAAE,eAAe,CAAC;IAClF,gBAAgB,EAAE,YAAY,GAAG,SAAS,CAAA;gBAE9B,KAAK,EAAE,SAAS;IAgB5B,oBAAoB;IAMpB,MAAM;CAcP"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { loadGoogleMapsApi } from './loadGoogleMapsApi';
|
|
3
|
+
import { LoadError } from './LoadError';
|
|
4
|
+
export class GoogleMapsLoadProxy extends React.Component {
|
|
5
|
+
constructor(props) {
|
|
6
|
+
super(props);
|
|
7
|
+
this.state = { loadState: 'loading' };
|
|
8
|
+
let sync = true;
|
|
9
|
+
this.loadSubscription = loadGoogleMapsApi().subscribe((loadState) => {
|
|
10
|
+
if (sync) {
|
|
11
|
+
this.state = loadState;
|
|
12
|
+
}
|
|
13
|
+
else {
|
|
14
|
+
this.setState(loadState);
|
|
15
|
+
}
|
|
16
|
+
});
|
|
17
|
+
sync = false;
|
|
18
|
+
}
|
|
19
|
+
componentWillUnmount() {
|
|
20
|
+
if (this.loadSubscription) {
|
|
21
|
+
this.loadSubscription.unsubscribe();
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
render() {
|
|
25
|
+
switch (this.state.loadState) {
|
|
26
|
+
case 'loadError':
|
|
27
|
+
return React.createElement(LoadError, { error: this.state.error, isAuthError: false });
|
|
28
|
+
case 'authError':
|
|
29
|
+
return React.createElement(LoadError, { isAuthError: true });
|
|
30
|
+
case 'loading':
|
|
31
|
+
return React.createElement("div", null, "Loading Google Maps API");
|
|
32
|
+
case 'loaded':
|
|
33
|
+
return this.props.children(this.state.api) || null;
|
|
34
|
+
default:
|
|
35
|
+
return null;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
//# sourceMappingURL=GoogleMapsLoadProxy.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GoogleMapsLoadProxy.js","sourceRoot":"","sources":["../../../../src/loader/GoogleMapsLoadProxy.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAC,iBAAiB,EAAkB,MAAM,qBAAqB,CAAA;AACtE,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAA;AAMrC,MAAM,OAAO,mBAAoB,SAAQ,KAAK,CAAC,SAAqC;IAGlF,YAAY,KAAgB;QAC1B,KAAK,CAAC,KAAK,CAAC,CAAA;QAEZ,IAAI,CAAC,KAAK,GAAG,EAAC,SAAS,EAAE,SAAS,EAAC,CAAA;QAEnC,IAAI,IAAI,GAAG,IAAI,CAAA;QACf,IAAI,CAAC,gBAAgB,GAAG,iBAAiB,EAAE,CAAC,SAAS,CAAC,CAAC,SAAS,EAAE,EAAE;YAClE,IAAI,IAAI,EAAE;gBACR,IAAI,CAAC,KAAK,GAAG,SAAS,CAAA;aACvB;iBAAM;gBACL,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAA;aACzB;QACH,CAAC,CAAC,CAAA;QACF,IAAI,GAAG,KAAK,CAAA;IACd,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAA;SACpC;IACH,CAAC;IAED,MAAM;QACJ,QAAQ,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE;YAC5B,KAAK,WAAW;gBACd,OAAO,oBAAC,SAAS,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,GAAI,CAAA;YACnE,KAAK,WAAW;gBACd,OAAO,oBAAC,SAAS,IAAC,WAAW,SAAG,CAAA;YAClC,KAAK,SAAS;gBACZ,OAAO,2DAAkC,CAAA;YAC3C,KAAK,QAAQ;gBACX,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,CAAA;YACpD;gBACE,OAAO,IAAI,CAAA;SACd;IACH,CAAC;CACF"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
declare type Props = {
|
|
3
|
-
error: Error;
|
|
4
|
-
isAuthError: false;
|
|
5
|
-
} | {
|
|
6
|
-
isAuthError: true;
|
|
7
|
-
};
|
|
8
|
-
export declare function LoadError(props: Props): JSX.Element;
|
|
9
|
-
export {};
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
declare type Props = {
|
|
3
|
+
error: Error;
|
|
4
|
+
isAuthError: false;
|
|
5
|
+
} | {
|
|
6
|
+
isAuthError: true;
|
|
7
|
+
};
|
|
8
|
+
export declare function LoadError(props: Props): JSX.Element;
|
|
9
|
+
export {};
|
|
10
10
|
//# sourceMappingURL=LoadError.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LoadError.d.ts","sourceRoot":"","sources":["../../../../src/loader/LoadError.tsx"],"names":[],"mappings":";AAGA,aAAK,KAAK,GAAG;IAAC,KAAK,EAAE,KAAK,CAAC;IAAC,WAAW,EAAE,KAAK,CAAA;CAAC,GAAG;IAAC,WAAW,EAAE,IAAI,CAAA;CAAC,CAAA;AAErE,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,eAuBrC"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Card, Box, Text, Code } from '@sanity/ui';
|
|
3
|
+
export function LoadError(props) {
|
|
4
|
+
return (React.createElement(Card, { tone: "critical", radius: 1 },
|
|
5
|
+
React.createElement(Box, { as: "header", paddingX: 4, paddingTop: 4, paddingBottom: 1 },
|
|
6
|
+
React.createElement(Text, { as: "h2", weight: "bold" }, "Google Maps failed to load")),
|
|
7
|
+
React.createElement(Box, { paddingX: 4, paddingTop: 4, paddingBottom: 1 }, props.isAuthError ? (React.createElement(AuthError, null)) : (React.createElement(React.Fragment, null,
|
|
8
|
+
React.createElement(Text, { as: "h3" }, "Error details:"),
|
|
9
|
+
React.createElement("pre", null,
|
|
10
|
+
React.createElement(Code, { size: 1 }, props.error?.message)))))));
|
|
11
|
+
}
|
|
12
|
+
function AuthError() {
|
|
13
|
+
return (React.createElement(Text, null,
|
|
14
|
+
React.createElement("p", null, "The error appears to be related to authentication"),
|
|
15
|
+
React.createElement("p", null, "Common causes include:"),
|
|
16
|
+
React.createElement("ul", null,
|
|
17
|
+
React.createElement("li", null, "Incorrect API key"),
|
|
18
|
+
React.createElement("li", null, "Referer not allowed"),
|
|
19
|
+
React.createElement("li", null, "Missing authentication scope")),
|
|
20
|
+
React.createElement("p", null, "Check the browser developer tools for more information.")));
|
|
21
|
+
}
|
|
22
|
+
//# sourceMappingURL=LoadError.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LoadError.js","sourceRoot":"","sources":["../../../../src/loader/LoadError.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,YAAY,CAAA;AAIhD,MAAM,UAAU,SAAS,CAAC,KAAY;IACpC,OAAO,CACL,oBAAC,IAAI,IAAC,IAAI,EAAC,UAAU,EAAC,MAAM,EAAE,CAAC;QAC7B,oBAAC,GAAG,IAAC,EAAE,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,aAAa,EAAE,CAAC;YAC3D,oBAAC,IAAI,IAAC,EAAE,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,iCAEpB,CACH;QAEN,oBAAC,GAAG,IAAC,QAAQ,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,aAAa,EAAE,CAAC,IAC9C,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CACnB,oBAAC,SAAS,OAAG,CACd,CAAC,CAAC,CAAC,CACF;YACE,oBAAC,IAAI,IAAC,EAAE,EAAC,IAAI,qBAAsB;YACnC;gBACE,oBAAC,IAAI,IAAC,IAAI,EAAE,CAAC,IAAG,KAAK,CAAC,KAAK,EAAE,OAAO,CAAQ,CACxC,CACL,CACJ,CACG,CACD,CACR,CAAA;AACH,CAAC;AAED,SAAS,SAAS;IAChB,OAAO,CACL,oBAAC,IAAI;QACH,mFAAwD;QACxD,wDAA6B;QAC7B;YACE,oDAA0B;YAC1B,sDAA4B;YAC5B,+DAAqC,CAClC;QACL,yFAA8D,CACzD,CACR,CAAA;AACH,CAAC"}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import { Observable } from 'rxjs';
|
|
2
|
-
export interface LoadingState {
|
|
3
|
-
loadState: 'loading';
|
|
4
|
-
}
|
|
5
|
-
export interface LoadedState {
|
|
6
|
-
loadState: 'loaded';
|
|
7
|
-
api: typeof window.google.maps;
|
|
8
|
-
}
|
|
9
|
-
export interface LoadErrorState {
|
|
10
|
-
loadState: 'loadError';
|
|
11
|
-
error: Error;
|
|
12
|
-
}
|
|
13
|
-
export interface AuthErrorState {
|
|
14
|
-
loadState: 'authError';
|
|
15
|
-
}
|
|
16
|
-
export declare type GoogleLoadState = LoadingState | LoadedState | LoadErrorState | AuthErrorState;
|
|
17
|
-
export declare function loadGoogleMapsApi(): Observable<GoogleLoadState>;
|
|
1
|
+
import { Observable } from 'rxjs';
|
|
2
|
+
export interface LoadingState {
|
|
3
|
+
loadState: 'loading';
|
|
4
|
+
}
|
|
5
|
+
export interface LoadedState {
|
|
6
|
+
loadState: 'loaded';
|
|
7
|
+
api: typeof window.google.maps;
|
|
8
|
+
}
|
|
9
|
+
export interface LoadErrorState {
|
|
10
|
+
loadState: 'loadError';
|
|
11
|
+
error: Error;
|
|
12
|
+
}
|
|
13
|
+
export interface AuthErrorState {
|
|
14
|
+
loadState: 'authError';
|
|
15
|
+
}
|
|
16
|
+
export declare type GoogleLoadState = LoadingState | LoadedState | LoadErrorState | AuthErrorState;
|
|
17
|
+
export declare function loadGoogleMapsApi(): Observable<GoogleLoadState>;
|
|
18
18
|
//# sourceMappingURL=loadGoogleMapsApi.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"loadGoogleMapsApi.d.ts","sourceRoot":"","sources":["../../../../src/loader/loadGoogleMapsApi.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,MAAM,CAAA;AAQhD,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,SAAS,CAAA;CACrB;AAED,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,QAAQ,CAAA;IACnB,GAAG,EAAE,OAAO,MAAM,CAAC,MAAM,CAAC,IAAI,CAAA;CAC/B;AAED,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,WAAW,CAAA;IACtB,KAAK,EAAE,KAAK,CAAA;CACb;AAED,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,WAAW,CAAA;CACvB;AAED,oBAAY,eAAe,GAAG,YAAY,GAAG,WAAW,GAAG,cAAc,GAAG,cAAc,CAAA;AAI1F,wBAAgB,iBAAiB,IAAI,UAAU,CAAC,eAAe,CAAC,CAoC/D"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { BehaviorSubject } from 'rxjs';
|
|
2
|
+
// @ts-expect-error TODO: update to non-parts
|
|
3
|
+
import config from 'config:@sanity/google-maps-input';
|
|
4
|
+
const callbackName = '___sanity_googleMapsApiCallback';
|
|
5
|
+
const authFailureCallbackName = 'gm_authFailure';
|
|
6
|
+
const locale = (typeof window !== 'undefined' && window.navigator.language) || 'en';
|
|
7
|
+
let subject;
|
|
8
|
+
export function loadGoogleMapsApi() {
|
|
9
|
+
const selectedLocale = config.defaultLocale || locale || 'en-US';
|
|
10
|
+
if (subject) {
|
|
11
|
+
return subject;
|
|
12
|
+
}
|
|
13
|
+
subject = new BehaviorSubject({ loadState: 'loading' });
|
|
14
|
+
window[authFailureCallbackName] = () => {
|
|
15
|
+
delete window[authFailureCallbackName];
|
|
16
|
+
subject.next({ loadState: 'authError' });
|
|
17
|
+
};
|
|
18
|
+
window[callbackName] = () => {
|
|
19
|
+
delete window[callbackName];
|
|
20
|
+
subject.next({ loadState: 'loaded', api: window.google.maps });
|
|
21
|
+
};
|
|
22
|
+
const script = document.createElement('script');
|
|
23
|
+
script.onerror = (event, source, lineno, colno, error) => subject.next({
|
|
24
|
+
loadState: 'loadError',
|
|
25
|
+
error: coeerceError(event, error),
|
|
26
|
+
});
|
|
27
|
+
script.src = `https://maps.googleapis.com/maps/api/js?key=${config.apiKey}&libraries=places&callback=${callbackName}&language=${selectedLocale}`;
|
|
28
|
+
document.getElementsByTagName('head')[0].appendChild(script);
|
|
29
|
+
return subject;
|
|
30
|
+
}
|
|
31
|
+
function coeerceError(event, error) {
|
|
32
|
+
if (error) {
|
|
33
|
+
return error;
|
|
34
|
+
}
|
|
35
|
+
if (typeof event === 'string') {
|
|
36
|
+
return new Error(event);
|
|
37
|
+
}
|
|
38
|
+
return new Error(isErrorEvent(event) ? event.message : 'Failed to load Google Maps API');
|
|
39
|
+
}
|
|
40
|
+
function isErrorEvent(event) {
|
|
41
|
+
if (typeof event !== 'object' || event === null) {
|
|
42
|
+
return false;
|
|
43
|
+
}
|
|
44
|
+
if (!('message' in event)) {
|
|
45
|
+
return false;
|
|
46
|
+
}
|
|
47
|
+
return typeof event.message === 'string';
|
|
48
|
+
}
|
|
49
|
+
//# sourceMappingURL=loadGoogleMapsApi.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"loadGoogleMapsApi.js","sourceRoot":"","sources":["../../../../src/loader/loadGoogleMapsApi.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,eAAe,EAAC,MAAM,MAAM,CAAA;AAChD,6CAA6C;AAC7C,OAAO,MAAM,MAAM,kCAAkC,CAAA;AAErD,MAAM,YAAY,GAAG,iCAAiC,CAAA;AACtD,MAAM,uBAAuB,GAAG,gBAAgB,CAAA;AAChD,MAAM,MAAM,GAAG,CAAC,OAAO,MAAM,KAAK,WAAW,IAAI,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAA;AAsBnF,IAAI,OAAyC,CAAA;AAE7C,MAAM,UAAU,iBAAiB;IAC/B,MAAM,cAAc,GAAG,MAAM,CAAC,aAAa,IAAI,MAAM,IAAI,OAAO,CAAA;IAEhE,IAAI,OAAO,EAAE;QACX,OAAO,OAAO,CAAA;KACf;IAED,OAAO,GAAG,IAAI,eAAe,CAAkB,EAAC,SAAS,EAAE,SAAS,EAAC,CAAC,CAAA;IAEtE,MAAM,CAAC,uBAAuB,CAAC,GAAG,GAAG,EAAE;QACrC,OAAO,MAAM,CAAC,uBAAuB,CAAC,CAAA;QACtC,OAAO,CAAC,IAAI,CAAC,EAAC,SAAS,EAAE,WAAW,EAAC,CAAC,CAAA;IACxC,CAAC,CAAA;IAED,MAAM,CAAC,YAAY,CAAC,GAAG,GAAG,EAAE;QAC1B,OAAO,MAAM,CAAC,YAAY,CAAC,CAAA;QAC3B,OAAO,CAAC,IAAI,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,EAAC,CAAC,CAAA;IAC9D,CAAC,CAAA;IAED,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;IAC/C,MAAM,CAAC,OAAO,GAAG,CACf,KAAqB,EACrB,MAAe,EACf,MAAe,EACf,KAAc,EACd,KAAa,EACb,EAAE,CACF,OAAO,CAAC,IAAI,CAAC;QACX,SAAS,EAAE,WAAW;QACtB,KAAK,EAAE,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC;KAChB,CAAC,CAAA;IAEtB,MAAM,CAAC,GAAG,GAAG,+CAA+C,MAAM,CAAC,MAAM,8BAA8B,YAAY,aAAa,cAAc,EAAE,CAAA;IAChJ,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAAA;IAE5D,OAAO,OAAO,CAAA;AAChB,CAAC;AAED,SAAS,YAAY,CAAC,KAAqB,EAAE,KAAa;IACxD,IAAI,KAAK,EAAE;QACT,OAAO,KAAK,CAAA;KACb;IAED,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC7B,OAAO,IAAI,KAAK,CAAC,KAAK,CAAC,CAAA;KACxB;IAED,OAAO,IAAI,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAA;AAC1F,CAAC;AAED,SAAS,YAAY,CAAC,KAAc;IAClC,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,EAAE;QAC/C,OAAO,KAAK,CAAA;KACb;IAED,IAAI,CAAC,CAAC,SAAS,IAAI,KAAK,CAAC,EAAE;QACzB,OAAO,KAAK,CAAA;KACb;IAED,OAAO,OAAQ,KAAoB,CAAC,OAAO,KAAK,QAAQ,CAAA;AAC1D,CAAC"}
|
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
/// <reference types="googlemaps" />
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
import { LatLng } from '../types';
|
|
4
|
-
interface Props {
|
|
5
|
-
api: typeof window.google.maps;
|
|
6
|
-
map: google.maps.Map;
|
|
7
|
-
from: LatLng;
|
|
8
|
-
to: LatLng;
|
|
9
|
-
color?: {
|
|
10
|
-
background: string;
|
|
11
|
-
border: string;
|
|
12
|
-
text: string;
|
|
13
|
-
};
|
|
14
|
-
zIndex?: number;
|
|
15
|
-
arrowRef?: React.MutableRefObject<google.maps.Polyline | undefined>;
|
|
16
|
-
onClick?: (event: google.maps.MapMouseEvent) => void;
|
|
17
|
-
}
|
|
18
|
-
export declare class Arrow extends React.PureComponent<Props> {
|
|
19
|
-
line: google.maps.Polyline | undefined;
|
|
20
|
-
eventHandlers: {
|
|
21
|
-
click?: google.maps.MapsEventListener;
|
|
22
|
-
};
|
|
23
|
-
componentDidMount(): void;
|
|
24
|
-
componentDidUpdate(prevProps: Props): void;
|
|
25
|
-
componentWillUnmount(): void;
|
|
26
|
-
render(): null;
|
|
27
|
-
}
|
|
28
|
-
export {};
|
|
1
|
+
/// <reference types="googlemaps" />
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { LatLng } from '../types';
|
|
4
|
+
interface Props {
|
|
5
|
+
api: typeof window.google.maps;
|
|
6
|
+
map: google.maps.Map;
|
|
7
|
+
from: LatLng;
|
|
8
|
+
to: LatLng;
|
|
9
|
+
color?: {
|
|
10
|
+
background: string;
|
|
11
|
+
border: string;
|
|
12
|
+
text: string;
|
|
13
|
+
};
|
|
14
|
+
zIndex?: number;
|
|
15
|
+
arrowRef?: React.MutableRefObject<google.maps.Polyline | undefined>;
|
|
16
|
+
onClick?: (event: google.maps.MapMouseEvent) => void;
|
|
17
|
+
}
|
|
18
|
+
export declare class Arrow extends React.PureComponent<Props> {
|
|
19
|
+
line: google.maps.Polyline | undefined;
|
|
20
|
+
eventHandlers: {
|
|
21
|
+
click?: google.maps.MapsEventListener;
|
|
22
|
+
};
|
|
23
|
+
componentDidMount(): void;
|
|
24
|
+
componentDidUpdate(prevProps: Props): void;
|
|
25
|
+
componentWillUnmount(): void;
|
|
26
|
+
render(): null;
|
|
27
|
+
}
|
|
28
|
+
export {};
|
|
29
29
|
//# sourceMappingURL=Arrow.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Arrow.d.ts","sourceRoot":"","sources":["../../../../src/map/Arrow.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAA;AAG/B,UAAU,KAAK;IACb,GAAG,EAAE,OAAO,MAAM,CAAC,MAAM,CAAC,IAAI,CAAA;IAC9B,GAAG,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,CAAC,EAAE;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAC,CAAA;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC,CAAA;IACnE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,aAAa,KAAK,IAAI,CAAA;CACrD;AAED,qBAAa,KAAM,SAAQ,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC;IACnD,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAA;IAEtC,aAAa,EAAE;QACb,KAAK,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,iBAAiB,CAAA;KACtC,CAAK;IAEN,iBAAiB;IAwBjB,kBAAkB,CAAC,SAAS,EAAE,KAAK;IAenC,oBAAoB;IAWpB,MAAM;CAGP"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { latLngAreEqual } from './util';
|
|
3
|
+
export class Arrow extends React.PureComponent {
|
|
4
|
+
constructor() {
|
|
5
|
+
super(...arguments);
|
|
6
|
+
this.eventHandlers = {};
|
|
7
|
+
}
|
|
8
|
+
componentDidMount() {
|
|
9
|
+
const { from, to, api, map, zIndex, onClick, color, arrowRef } = this.props;
|
|
10
|
+
const lineSymbol = {
|
|
11
|
+
path: api.SymbolPath.FORWARD_OPEN_ARROW,
|
|
12
|
+
};
|
|
13
|
+
this.line = new api.Polyline({
|
|
14
|
+
map,
|
|
15
|
+
zIndex,
|
|
16
|
+
path: [from, to],
|
|
17
|
+
icons: [{ icon: lineSymbol, offset: '50%' }],
|
|
18
|
+
strokeOpacity: 0.55,
|
|
19
|
+
strokeColor: color ? color.text : 'black',
|
|
20
|
+
});
|
|
21
|
+
if (onClick) {
|
|
22
|
+
this.eventHandlers.click = api.event.addListener(this.line, 'click', onClick);
|
|
23
|
+
}
|
|
24
|
+
if (arrowRef) {
|
|
25
|
+
arrowRef.current = this.line;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
componentDidUpdate(prevProps) {
|
|
29
|
+
if (!this.line) {
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
const { from, to, map } = this.props;
|
|
33
|
+
if (!latLngAreEqual(prevProps.from, from) || !latLngAreEqual(prevProps.to, to)) {
|
|
34
|
+
this.line.setPath([from, to]);
|
|
35
|
+
}
|
|
36
|
+
if (prevProps.map !== map) {
|
|
37
|
+
this.line.setMap(map);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
componentWillUnmount() {
|
|
41
|
+
if (this.line) {
|
|
42
|
+
this.line.setMap(null);
|
|
43
|
+
}
|
|
44
|
+
if (this.eventHandlers.click) {
|
|
45
|
+
this.eventHandlers.click.remove();
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
// eslint-disable-next-line class-methods-use-this
|
|
49
|
+
render() {
|
|
50
|
+
return null;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
//# sourceMappingURL=Arrow.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Arrow.js","sourceRoot":"","sources":["../../../../src/map/Arrow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAC,cAAc,EAAC,MAAM,QAAQ,CAAA;AAarC,MAAM,OAAO,KAAM,SAAQ,KAAK,CAAC,aAAoB;IAArD;;QAGE,kBAAa,GAET,EAAE,CAAA;IAuDR,CAAC;IArDC,iBAAiB;QACf,MAAM,EAAC,IAAI,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAC,GAAG,IAAI,CAAC,KAAK,CAAA;QACzE,MAAM,UAAU,GAAG;YACjB,IAAI,EAAE,GAAG,CAAC,UAAU,CAAC,kBAAkB;SACxC,CAAA;QAED,IAAI,CAAC,IAAI,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC;YAC3B,GAAG;YACH,MAAM;YACN,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC;YAChB,KAAK,EAAE,CAAC,EAAC,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAC,CAAC;YAC1C,aAAa,EAAE,IAAI;YACnB,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO;SAC1C,CAAC,CAAA;QAEF,IAAI,OAAO,EAAE;YACX,IAAI,CAAC,aAAa,CAAC,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,CAAC,CAAA;SAC9E;QAED,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAA;SAC7B;IACH,CAAC;IAED,kBAAkB,CAAC,SAAgB;QACjC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,OAAM;SACP;QAED,MAAM,EAAC,IAAI,EAAE,EAAE,EAAE,GAAG,EAAC,GAAG,IAAI,CAAC,KAAK,CAAA;QAClC,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE;YAC9E,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAA;SAC9B;QAED,IAAI,SAAS,CAAC,GAAG,KAAK,GAAG,EAAE;YACzB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;SACtB;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;SACvB;QAED,IAAI,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE;YAC5B,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,EAAE,CAAA;SAClC;IACH,CAAC;IAED,kDAAkD;IAClD,MAAM;QACJ,OAAO,IAAI,CAAA;IACb,CAAC;CACF"}
|
|
@@ -1,37 +1,37 @@
|
|
|
1
|
-
/// <reference types="googlemaps" />
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { LatLng } from '../types';
|
|
4
|
-
interface MapProps {
|
|
5
|
-
api: typeof window.google.maps;
|
|
6
|
-
location: LatLng;
|
|
7
|
-
bounds?: google.maps.LatLngBounds;
|
|
8
|
-
defaultZoom?: number;
|
|
9
|
-
mapTypeControl?: boolean;
|
|
10
|
-
scrollWheel?: boolean;
|
|
11
|
-
controlSize?: number;
|
|
12
|
-
onClick?: (event: google.maps.MapMouseEvent) => void;
|
|
13
|
-
children?: (map: google.maps.Map) => React.ReactElement;
|
|
14
|
-
}
|
|
15
|
-
interface MapState {
|
|
16
|
-
map: google.maps.Map | undefined;
|
|
17
|
-
}
|
|
18
|
-
export declare class GoogleMap extends React.PureComponent<MapProps, MapState> {
|
|
19
|
-
static defaultProps: {
|
|
20
|
-
defaultZoom: number;
|
|
21
|
-
scrollWheel: boolean;
|
|
22
|
-
};
|
|
23
|
-
state: MapState;
|
|
24
|
-
clickHandler: google.maps.MapsEventListener | undefined;
|
|
25
|
-
mapRef: React.RefObject<HTMLDivElement>;
|
|
26
|
-
mapEl: HTMLDivElement | null;
|
|
27
|
-
componentDidMount(): void;
|
|
28
|
-
attachClickHandler: () => void;
|
|
29
|
-
componentDidUpdate(prevProps: MapProps): void;
|
|
30
|
-
componentWillUnmount(): void;
|
|
31
|
-
getCenter(): google.maps.LatLng;
|
|
32
|
-
constructMap(el: HTMLDivElement): google.maps.Map<HTMLDivElement>;
|
|
33
|
-
setMapElement: (element: HTMLDivElement | null) => void;
|
|
34
|
-
render(): JSX.Element;
|
|
35
|
-
}
|
|
36
|
-
export {};
|
|
1
|
+
/// <reference types="googlemaps" />
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { LatLng } from '../types';
|
|
4
|
+
interface MapProps {
|
|
5
|
+
api: typeof window.google.maps;
|
|
6
|
+
location: LatLng;
|
|
7
|
+
bounds?: google.maps.LatLngBounds;
|
|
8
|
+
defaultZoom?: number;
|
|
9
|
+
mapTypeControl?: boolean;
|
|
10
|
+
scrollWheel?: boolean;
|
|
11
|
+
controlSize?: number;
|
|
12
|
+
onClick?: (event: google.maps.MapMouseEvent) => void;
|
|
13
|
+
children?: (map: google.maps.Map) => React.ReactElement;
|
|
14
|
+
}
|
|
15
|
+
interface MapState {
|
|
16
|
+
map: google.maps.Map | undefined;
|
|
17
|
+
}
|
|
18
|
+
export declare class GoogleMap extends React.PureComponent<MapProps, MapState> {
|
|
19
|
+
static defaultProps: {
|
|
20
|
+
defaultZoom: number;
|
|
21
|
+
scrollWheel: boolean;
|
|
22
|
+
};
|
|
23
|
+
state: MapState;
|
|
24
|
+
clickHandler: google.maps.MapsEventListener | undefined;
|
|
25
|
+
mapRef: React.RefObject<HTMLDivElement>;
|
|
26
|
+
mapEl: HTMLDivElement | null;
|
|
27
|
+
componentDidMount(): void;
|
|
28
|
+
attachClickHandler: () => void;
|
|
29
|
+
componentDidUpdate(prevProps: MapProps): void;
|
|
30
|
+
componentWillUnmount(): void;
|
|
31
|
+
getCenter(): google.maps.LatLng;
|
|
32
|
+
constructMap(el: HTMLDivElement): google.maps.Map<HTMLDivElement>;
|
|
33
|
+
setMapElement: (element: HTMLDivElement | null) => void;
|
|
34
|
+
render(): JSX.Element;
|
|
35
|
+
}
|
|
36
|
+
export {};
|
|
37
37
|
//# sourceMappingURL=Map.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Map.d.ts","sourceRoot":"","sources":["../../../../src/map/Map.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAA;AAI/B,UAAU,QAAQ;IAChB,GAAG,EAAE,OAAO,MAAM,CAAC,MAAM,CAAC,IAAI,CAAA;IAC9B,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,YAAY,CAAA;IACjC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,aAAa,KAAK,IAAI,CAAA;IACpD,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,KAAK,KAAK,CAAC,YAAY,CAAA;CACxD;AAED,UAAU,QAAQ;IAChB,GAAG,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,GAAG,SAAS,CAAA;CACjC;AAED,qBAAa,SAAU,SAAQ,KAAK,CAAC,aAAa,CAAC,QAAQ,EAAE,QAAQ,CAAC;IACpE,MAAM,CAAC,YAAY;;;MAGlB;IAED,KAAK,EAAE,QAAQ,CAAmB;IAClC,YAAY,EAAE,MAAM,CAAC,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAA;IACvD,MAAM,kCAAoC;IAC1C,KAAK,EAAE,cAAc,GAAG,IAAI,CAAO;IAEnC,iBAAiB;IAIjB,kBAAkB,aAgBjB;IAED,kBAAkB,CAAC,SAAS,EAAE,QAAQ;IAqBtC,oBAAoB;IAMpB,SAAS,IAAI,MAAM,CAAC,IAAI,CAAC,MAAM;IAK/B,YAAY,CAAC,EAAE,EAAE,cAAc;IAmB/B,aAAa,YAAa,cAAc,GAAG,IAAI,UAO9C;IAED,MAAM;CAUP"}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { latLngAreEqual } from './util';
|
|
3
|
+
import { MapContainer } from './Map.styles';
|
|
4
|
+
export class GoogleMap extends React.PureComponent {
|
|
5
|
+
constructor() {
|
|
6
|
+
super(...arguments);
|
|
7
|
+
this.state = { map: undefined };
|
|
8
|
+
this.mapRef = React.createRef();
|
|
9
|
+
this.mapEl = null;
|
|
10
|
+
this.attachClickHandler = () => {
|
|
11
|
+
const map = this.state.map;
|
|
12
|
+
if (!map) {
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
15
|
+
const { api, onClick } = this.props;
|
|
16
|
+
const { event } = api;
|
|
17
|
+
if (this.clickHandler) {
|
|
18
|
+
this.clickHandler.remove();
|
|
19
|
+
}
|
|
20
|
+
if (onClick) {
|
|
21
|
+
this.clickHandler = event.addListener(map, 'click', onClick);
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
this.setMapElement = (element) => {
|
|
25
|
+
if (element && element !== this.mapEl) {
|
|
26
|
+
const map = this.constructMap(element);
|
|
27
|
+
this.setState({ map }, this.attachClickHandler);
|
|
28
|
+
}
|
|
29
|
+
this.mapEl = element;
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
componentDidMount() {
|
|
33
|
+
this.attachClickHandler();
|
|
34
|
+
}
|
|
35
|
+
componentDidUpdate(prevProps) {
|
|
36
|
+
const map = this.state.map;
|
|
37
|
+
if (!map) {
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
const { onClick, location, bounds } = this.props;
|
|
41
|
+
if (prevProps.onClick !== onClick) {
|
|
42
|
+
this.attachClickHandler();
|
|
43
|
+
}
|
|
44
|
+
if (!latLngAreEqual(prevProps.location, location)) {
|
|
45
|
+
map.panTo(this.getCenter());
|
|
46
|
+
}
|
|
47
|
+
if (bounds && (!prevProps.bounds || !bounds.equals(prevProps.bounds))) {
|
|
48
|
+
map.fitBounds(bounds);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
componentWillUnmount() {
|
|
52
|
+
if (this.clickHandler) {
|
|
53
|
+
this.clickHandler.remove();
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
getCenter() {
|
|
57
|
+
const { location, api } = this.props;
|
|
58
|
+
return new api.LatLng(location.lat, location.lng);
|
|
59
|
+
}
|
|
60
|
+
constructMap(el) {
|
|
61
|
+
const { defaultZoom, api, mapTypeControl, controlSize, bounds, scrollWheel } = this.props;
|
|
62
|
+
const map = new api.Map(el, {
|
|
63
|
+
zoom: defaultZoom,
|
|
64
|
+
center: this.getCenter(),
|
|
65
|
+
scrollwheel: scrollWheel,
|
|
66
|
+
streetViewControl: false,
|
|
67
|
+
mapTypeControl,
|
|
68
|
+
controlSize,
|
|
69
|
+
});
|
|
70
|
+
if (bounds) {
|
|
71
|
+
map.fitBounds(bounds);
|
|
72
|
+
}
|
|
73
|
+
return map;
|
|
74
|
+
}
|
|
75
|
+
render() {
|
|
76
|
+
const { children } = this.props;
|
|
77
|
+
const { map } = this.state;
|
|
78
|
+
return (React.createElement(React.Fragment, null,
|
|
79
|
+
React.createElement(MapContainer, { ref: this.setMapElement }),
|
|
80
|
+
children && map ? children(map) : null));
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
GoogleMap.defaultProps = {
|
|
84
|
+
defaultZoom: 8,
|
|
85
|
+
scrollWheel: true,
|
|
86
|
+
};
|
|
87
|
+
//# sourceMappingURL=Map.js.map
|