[google-maps-input] Prevent pan/zoom resetting when props update

sanity-io · Oct 6, 2020 · 43cc141 · 43cc141
1 parent 0131c94
commit 43cc141
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 12 deletions.
diff --git a/packages/@sanity/google-maps-input/src/input/GeopointInput.tsx b/packages/@sanity/google-maps-input/src/input/GeopointInput.tsx
@@ -41,7 +41,7 @@ interface InputState {
   modalOpen: boolean
 }
 
-class GeopointInput extends React.Component<InputProps, InputState> {
+class GeopointInput extends React.PureComponent<InputProps, InputState> {
   static defaultProps = {
     markers: []
   }

diff --git a/packages/@sanity/google-maps-input/src/input/GeopointSelect.tsx b/packages/@sanity/google-maps-input/src/input/GeopointSelect.tsx
@@ -15,7 +15,7 @@ interface SelectProps {
   defaultZoom?: number
 }
 
-export class GeopointSelect extends React.Component<SelectProps> {
+export class GeopointSelect extends React.PureComponent<SelectProps> {
   static defaultProps = {
     defaultZoom: 8,
     defaultLocation: {lng: 10.74609, lat: 59.91273}

diff --git a/packages/@sanity/google-maps-input/src/map/Arrow.tsx b/packages/@sanity/google-maps-input/src/map/Arrow.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import {LatLng} from '../types'
+import {latLngAreEqual} from './util'
 
 interface Props {
   api: typeof window.google.maps
@@ -12,7 +13,7 @@ interface Props {
   onClick?: (event: google.maps.MouseEvent) => void
 }
 
-export class Arrow extends React.Component<Props> {
+export class Arrow extends React.PureComponent<Props> {
   line: google.maps.Polyline | undefined
 
   eventHandlers: {
@@ -49,7 +50,7 @@ export class Arrow extends React.Component<Props> {
     }
 
     const {from, to, map} = this.props
-    if (prevProps.from !== from || prevProps.to !== to) {
+    if (!latLngAreEqual(prevProps.from, from) || !latLngAreEqual(prevProps.to, to)) {
       this.line.setPath([from, to])
     }
 

diff --git a/packages/@sanity/google-maps-input/src/map/Map.tsx b/packages/@sanity/google-maps-input/src/map/Map.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import {LatLng} from '../types'
 import styles from './Map.css'
+import {latLngAreEqual} from './util'
 
 interface MapProps {
   api: typeof window.google.maps
@@ -17,7 +18,7 @@ interface MapState {
   map: google.maps.Map | undefined
 }
 
-export class GoogleMap extends React.Component<MapProps, MapState> {
+export class GoogleMap extends React.PureComponent<MapProps, MapState> {
   static defaultProps = {
     defaultZoom: 8
   }
@@ -31,7 +32,7 @@ export class GoogleMap extends React.Component<MapProps, MapState> {
     this.attachClickHandler()
   }
 
-  attachClickHandler() {
+  attachClickHandler = () => {
     const map = this.state.map
     if (!map) {
       return
@@ -61,11 +62,11 @@ export class GoogleMap extends React.Component<MapProps, MapState> {
       this.attachClickHandler()
     }
 
-    if (prevProps.location !== location) {
+    if (!latLngAreEqual(prevProps.location, location)) {
       map.panTo(this.getCenter())
     }
 
-    if (prevProps.bounds !== bounds && bounds) {
+    if (bounds && (!prevProps.bounds || !bounds.equals(prevProps.bounds))) {
       map.fitBounds(bounds)
     }
   }
@@ -102,7 +103,7 @@ export class GoogleMap extends React.Component<MapProps, MapState> {
   setMapElement = (element: HTMLDivElement | null) => {
     if (element && element !== this.mapEl) {
       const map = this.constructMap(element)
-      this.setState({map})
+      this.setState({map}, this.attachClickHandler)
     }
 
     this.mapEl = element

diff --git a/packages/@sanity/google-maps-input/src/map/Marker.tsx b/packages/@sanity/google-maps-input/src/map/Marker.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import {LatLng} from '../types'
+import {latLngAreEqual} from './util'
 
 const markerPath =
   'M 3.052 3.7 C 1.56 5.293 0.626 7.612 0.663 9.793 C 0.738 14.352 2.793 16.077 6.078 22.351 C 7.263 25.111 8.497 28.032 9.672 32.871 C 9.835 33.584 9.994 34.246 10.069 34.305 C 10.143 34.362 10.301 33.697 10.465 32.983 C 11.639 28.145 12.875 25.226 14.059 22.466 C 17.344 16.192 19.398 14.466 19.474 9.908 C 19.511 7.727 18.574 5.405 17.083 3.814 C 15.379 1.994 12.809 0.649 10.069 0.593 C 7.328 0.536 4.756 1.882 3.052 3.7 Z'
@@ -19,7 +20,7 @@ interface Props {
   color?: {background: string; border: string; text: string}
 }
 
-export class Marker extends React.Component<Props> {
+export class Marker extends React.PureComponent<Props> {
   marker: google.maps.Marker | undefined
 
   eventHandlers: {
@@ -73,7 +74,7 @@ export class Marker extends React.Component<Props> {
       this.attachMoveHandler()
     }
 
-    if (prevProps.position !== position) {
+    if (!latLngAreEqual(prevProps.position, position)) {
       this.marker.setPosition(position)
     }
 

diff --git a/packages/@sanity/google-maps-input/src/map/SearchInput.tsx b/packages/@sanity/google-maps-input/src/map/SearchInput.tsx
@@ -7,7 +7,7 @@ interface Props {
   onChange: (result: google.maps.places.PlaceResult) => void
 }
 
-export class SearchInput extends React.Component<Props> {
+export class SearchInput extends React.PureComponent<Props> {
   searchInputRef = React.createRef<HTMLInputElement>()
   autoComplete: google.maps.places.Autocomplete | undefined
 

diff --git a/packages/@sanity/google-maps-input/src/map/util.ts b/packages/@sanity/google-maps-input/src/map/util.ts
@@ -0,0 +1,14 @@
+import {LatLng} from '../types'
+
+export function latLngAreEqual(
+  latLng1: LatLng | google.maps.LatLng,
+  latLng2: LatLng | google.maps.LatLng
+) {
+  const lat1 = typeof latLng1.lat === 'function' ? latLng1.lat() : latLng1.lat
+  const lng1 = typeof latLng1.lng === 'function' ? latLng1.lng() : latLng1.lng
+
+  const lat2 = typeof latLng2.lat === 'function' ? latLng2.lat() : latLng2.lat
+  const lng2 = typeof latLng2.lng === 'function' ? latLng2.lng() : latLng2.lng
+
+  return lat1 === lat2 && lng1 === lng2
+}