@sanity/google-maps-input 2.29.1 → 2.29.4-purple-unicorn.509

package/src/input/GeopointSelect.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import {SearchInput} from '../map/SearchInput'
+import {GoogleMap} from '../map/Map'
+import {Marker} from '../map/Marker'
+import {LatLng, Geopoint} from '../types'
+
+const fallbackLatLng: LatLng = {lat: 40.7058254, lng: -74.1180863}
+
+interface SelectProps {
+  api: typeof window.google.maps
+  value?: Geopoint
+  onChange?: (latLng: google.maps.LatLng) => void
+  defaultLocation?: LatLng
+  defaultZoom?: number
+}
+
+export class GeopointSelect extends React.PureComponent<SelectProps> {
+  static defaultProps = {
+    defaultZoom: 8,
+    defaultLocation: {lng: 10.74609, lat: 59.91273},
+  }
+
+  mapRef = React.createRef<HTMLDivElement>()
+
+  getCenter() {
+    const {value = {}, defaultLocation = {}} = this.props
+    const point: LatLng = {...fallbackLatLng, ...defaultLocation, ...value}
+    return point
+  }
+
+  handlePlaceChanged = (place: google.maps.places.PlaceResult) => {
+    if (!place.geometry) {
+      return
+    }
+
+    this.setValue(place.geometry.location)
+  }
+
+  handleMarkerDragEnd = (event: google.maps.MapMouseEvent) => {
+    this.setValue(event.latLng)
+  }
+
+  handleMapClick = (event: google.maps.MapMouseEvent) => {
+    this.setValue(event.latLng)
+  }
+
+  setValue(geoPoint: google.maps.LatLng) {
+    if (this.props.onChange) {
+      this.props.onChange(geoPoint)
+    }
+  }
+
+  render() {
+    const {api, defaultZoom, value, onChange} = this.props
+    return (
+      <GoogleMap
+        api={api}
+        location={this.getCenter()}
+        onClick={this.handleMapClick}
+        defaultZoom={defaultZoom}
+      >
+        {(map) => (
+          <>
+            <SearchInput api={api} map={map} onChange={this.handlePlaceChanged} />
+            {value && (
+              <Marker
+                api={api}
+                map={map}
+                position={value}
+                onMove={onChange ? this.handleMarkerDragEnd : undefined}
+              />
+            )}
+          </>
+        )}
+      </GoogleMap>
+    )
+  }
+}

package/src/loader/GoogleMapsLoadProxy.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import {Subscription} from 'rxjs'
+import {loadGoogleMapsApi, GoogleLoadState} from './loadGoogleMapsApi'
+import {LoadError} from './LoadError'
+
+interface LoadProps {
+  children: (api: typeof window.google.maps) => React.ReactElement
+}
+
+export class GoogleMapsLoadProxy extends React.Component<LoadProps, GoogleLoadState> {
+  loadSubscription: Subscription | undefined
+
+  constructor(props: LoadProps) {
+    super(props)
+
+    this.state = {loadState: 'loading'}
+
+    let sync = true
+    this.loadSubscription = loadGoogleMapsApi().subscribe((loadState) => {
+      if (sync) {
+        this.state = loadState
+      } else {
+        this.setState(loadState)
+      }
+    })
+    sync = false
+  }
+
+  componentWillUnmount() {
+    if (this.loadSubscription) {
+      this.loadSubscription.unsubscribe()
+    }
+  }
+
+  render() {
+    switch (this.state.loadState) {
+      case 'loadError':
+        return <LoadError error={this.state.error} isAuthError={false} />
+      case 'authError':
+        return <LoadError isAuthError />
+      case 'loading':
+        return <div>Loading Google Maps API</div>
+      case 'loaded':
+        return this.props.children(this.state.api) || null
+      default:
+        return null
+    }
+  }
+}

package/src/loader/LoadError.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react'
+import {Card, Box, Text, Code} from '@sanity/ui'
+
+type Props = {error: Error; isAuthError: false} | {isAuthError: true}
+
+export function LoadError(props: Props) {
+  return (
+    <Card tone="critical" radius={1}>
+      <Box as="header" paddingX={4} paddingTop={4} paddingBottom={1}>
+        <Text as="h2" weight="bold">
+          Google Maps failed to load
+        </Text>
+      </Box>
+
+      <Box paddingX={4} paddingTop={4} paddingBottom={1}>
+        {props.isAuthError ? (
+          <AuthError />
+        ) : (
+          <>
+            <Text as="h3">Error details:</Text>
+            <pre>
+              <Code size={1}>{props.error?.message}</Code>
+            </pre>
+          </>
+        )}
+      </Box>
+    </Card>
+  )
+}
+
+function AuthError() {
+  return (
+    <Text>
+      <p>The error appears to be related to authentication</p>
+      <p>Common causes include:</p>
+      <ul>
+        <li>Incorrect API key</li>
+        <li>Referer not allowed</li>
+        <li>Missing authentication scope</li>
+      </ul>
+      <p>Check the browser developer tools for more information.</p>
+    </Text>
+  )
+}

package/src/loader/loadGoogleMapsApi.ts

@@ -0,0 +1,91 @@
+import {Observable, BehaviorSubject} from 'rxjs'
+// @ts-expect-error TODO: update to non-parts
+import config from 'config:@sanity/google-maps-input'
+
+const callbackName = '___sanity_googleMapsApiCallback'
+const authFailureCallbackName = 'gm_authFailure'
+const locale = (typeof window !== 'undefined' && window.navigator.language) || 'en'
+
+export interface LoadingState {
+  loadState: 'loading'
+}
+
+export interface LoadedState {
+  loadState: 'loaded'
+  api: typeof window.google.maps
+}
+
+export interface LoadErrorState {
+  loadState: 'loadError'
+  error: Error
+}
+
+export interface AuthErrorState {
+  loadState: 'authError'
+}
+
+export type GoogleLoadState = LoadingState | LoadedState | LoadErrorState | AuthErrorState
+
+let subject: BehaviorSubject<GoogleLoadState>
+
+export function loadGoogleMapsApi(): Observable<GoogleLoadState> {
+  const selectedLocale = config.defaultLocale || locale || 'en-US'
+
+  if (subject) {
+    return subject
+  }
+
+  subject = new BehaviorSubject<GoogleLoadState>({loadState: 'loading'})
+
+  window[authFailureCallbackName] = () => {
+    delete window[authFailureCallbackName]
+    subject.next({loadState: 'authError'})
+  }
+
+  window[callbackName] = () => {
+    delete window[callbackName]
+    subject.next({loadState: 'loaded', api: window.google.maps})
+  }
+
+  const script = document.createElement('script')
+  script.onerror = (
+    event: Event | string,
+    source?: string,
+    lineno?: number,
+    colno?: number,
+    error?: Error
+  ) =>
+    subject.next({
+      loadState: 'loadError',
+      error: coeerceError(event, error),
+    } as LoadErrorState)
+
+  script.src = `https://maps.googleapis.com/maps/api/js?key=${config.apiKey}&libraries=places&callback=${callbackName}&language=${selectedLocale}`
+  document.getElementsByTagName('head')[0].appendChild(script)
+
+  return subject
+}
+
+function coeerceError(event: Event | string, error?: Error): Error {
+  if (error) {
+    return error
+  }
+
+  if (typeof event === 'string') {
+    return new Error(event)
+  }
+
+  return new Error(isErrorEvent(event) ? event.message : 'Failed to load Google Maps API')
+}
+
+function isErrorEvent(event: unknown): event is ErrorEvent {
+  if (typeof event !== 'object' || event === null) {
+    return false
+  }
+
+  if (!('message' in event)) {
+    return false
+  }
+
+  return typeof (event as ErrorEvent).message === 'string'
+}

package/src/map/Arrow.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react'
+import {LatLng} from '../types'
+import {latLngAreEqual} from './util'
+
+interface Props {
+  api: typeof window.google.maps
+  map: google.maps.Map
+  from: LatLng
+  to: LatLng
+  color?: {background: string; border: string; text: string}
+  zIndex?: number
+  arrowRef?: React.MutableRefObject<google.maps.Polyline | undefined>
+  onClick?: (event: google.maps.MapMouseEvent) => void
+}
+
+export class Arrow extends React.PureComponent<Props> {
+  line: google.maps.Polyline | undefined
+
+  eventHandlers: {
+    click?: google.maps.MapsEventListener
+  } = {}
+
+  componentDidMount() {
+    const {from, to, api, map, zIndex, onClick, color, arrowRef} = this.props
+    const lineSymbol = {
+      path: api.SymbolPath.FORWARD_OPEN_ARROW,
+    }
+
+    this.line = new api.Polyline({
+      map,
+      zIndex,
+      path: [from, to],
+      icons: [{icon: lineSymbol, offset: '50%'}],
+      strokeOpacity: 0.55,
+      strokeColor: color ? color.text : 'black',
+    })
+
+    if (onClick) {
+      this.eventHandlers.click = api.event.addListener(this.line, 'click', onClick)
+    }
+
+    if (arrowRef) {
+      arrowRef.current = this.line
+    }
+  }
+
+  componentDidUpdate(prevProps: Props) {
+    if (!this.line) {
+      return
+    }
+
+    const {from, to, map} = this.props
+    if (!latLngAreEqual(prevProps.from, from) || !latLngAreEqual(prevProps.to, to)) {
+      this.line.setPath([from, to])
+    }
+
+    if (prevProps.map !== map) {
+      this.line.setMap(map)
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.line) {
+      this.line.setMap(null)
+    }
+
+    if (this.eventHandlers.click) {
+      this.eventHandlers.click.remove()
+    }
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  render() {
+    return null
+  }
+}

package/src/map/Map.styles.tsx

@@ -0,0 +1,10 @@
+import styled from 'styled-components'
+
+export const MapContainer = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+`

package/src/map/Map.tsx

@@ -0,0 +1,125 @@
+import React from 'react'
+import {LatLng} from '../types'
+import {latLngAreEqual} from './util'
+import {MapContainer} from './Map.styles'
+
+interface MapProps {
+  api: typeof window.google.maps
+  location: LatLng
+  bounds?: google.maps.LatLngBounds
+  defaultZoom?: number
+  mapTypeControl?: boolean
+  scrollWheel?: boolean
+  controlSize?: number
+  onClick?: (event: google.maps.MapMouseEvent) => void
+  children?: (map: google.maps.Map) => React.ReactElement
+}
+
+interface MapState {
+  map: google.maps.Map | undefined
+}
+
+export class GoogleMap extends React.PureComponent<MapProps, MapState> {
+  static defaultProps = {
+    defaultZoom: 8,
+    scrollWheel: true,
+  }
+
+  state: MapState = {map: undefined}
+  clickHandler: google.maps.MapsEventListener | undefined
+  mapRef = React.createRef<HTMLDivElement>()
+  mapEl: HTMLDivElement | null = null
+
+  componentDidMount() {
+    this.attachClickHandler()
+  }
+
+  attachClickHandler = () => {
+    const map = this.state.map
+    if (!map) {
+      return
+    }
+
+    const {api, onClick} = this.props
+    const {event} = api
+
+    if (this.clickHandler) {
+      this.clickHandler.remove()
+    }
+
+    if (onClick) {
+      this.clickHandler = event.addListener(map, 'click', onClick)
+    }
+  }
+
+  componentDidUpdate(prevProps: MapProps) {
+    const map = this.state.map
+    if (!map) {
+      return
+    }
+
+    const {onClick, location, bounds} = this.props
+
+    if (prevProps.onClick !== onClick) {
+      this.attachClickHandler()
+    }
+
+    if (!latLngAreEqual(prevProps.location, location)) {
+      map.panTo(this.getCenter())
+    }
+
+    if (bounds && (!prevProps.bounds || !bounds.equals(prevProps.bounds))) {
+      map.fitBounds(bounds)
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.clickHandler) {
+      this.clickHandler.remove()
+    }
+  }
+
+  getCenter(): google.maps.LatLng {
+    const {location, api} = this.props
+    return new api.LatLng(location.lat, location.lng)
+  }
+
+  constructMap(el: HTMLDivElement) {
+    const {defaultZoom, api, mapTypeControl, controlSize, bounds, scrollWheel} = this.props
+
+    const map = new api.Map(el, {
+      zoom: defaultZoom,
+      center: this.getCenter(),
+      scrollwheel: scrollWheel,
+      streetViewControl: false,
+      mapTypeControl,
+      controlSize,
+    })
+
+    if (bounds) {
+      map.fitBounds(bounds)
+    }
+
+    return map
+  }
+
+  setMapElement = (element: HTMLDivElement | null) => {
+    if (element && element !== this.mapEl) {
+      const map = this.constructMap(element)
+      this.setState({map}, this.attachClickHandler)
+    }
+
+    this.mapEl = element
+  }
+
+  render() {
+    const {children} = this.props
+    const {map} = this.state
+    return (
+      <>
+        <MapContainer ref={this.setMapElement} />
+        {children && map ? children(map) : null}
+      </>
+    )
+  }
+}

package/src/map/Marker.tsx

@@ -0,0 +1,130 @@
+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'
+
+interface Props {
+  api: typeof window.google.maps
+  map: google.maps.Map
+  onMove?: (event: google.maps.MapMouseEvent) => void
+  onClick?: (event: google.maps.MapMouseEvent) => void
+  position: LatLng | google.maps.LatLng
+  zIndex?: number
+  opacity?: number
+  label?: string
+  markerRef?: React.MutableRefObject<google.maps.Marker | undefined>
+  color?: {background: string; border: string; text: string}
+}
+
+export class Marker extends React.PureComponent<Props> {
+  marker: google.maps.Marker | undefined
+
+  eventHandlers: {
+    move?: google.maps.MapsEventListener
+    click?: google.maps.MapsEventListener
+  } = {}
+
+  componentDidMount() {
+    const {position, api, map, onMove, zIndex, opacity, label, markerRef, color} = this.props
+    const {Marker: GMarker} = api
+
+    let icon: google.maps.ReadonlySymbol | undefined
+    if (color) {
+      icon = {
+        path: markerPath,
+        fillOpacity: 1,
+        fillColor: color.background,
+        strokeColor: color.border,
+        strokeWeight: 2,
+        anchor: new api.Point(10, 35),
+        labelOrigin: new api.Point(10, 11),
+      }
+    }
+
+    this.marker = new GMarker({
+      draggable: Boolean(onMove),
+      position,
+      map,
+      zIndex,
+      opacity,
+      label,
+      icon,
+    })
+
+    if (markerRef) {
+      markerRef.current = this.marker
+    }
+
+    this.attachMoveHandler()
+    this.attachClickHandler()
+  }
+
+  componentDidUpdate(prevProps: Props) {
+    if (!this.marker) {
+      return
+    }
+
+    const {position, onMove, label, zIndex, opacity, map} = this.props
+
+    if (prevProps.onMove !== onMove) {
+      this.attachMoveHandler()
+    }
+
+    if (!latLngAreEqual(prevProps.position, position)) {
+      this.marker.setPosition(position)
+    }
+
+    if (prevProps.label !== label) {
+      this.marker.setLabel(label || null)
+    }
+
+    if (prevProps.zIndex !== zIndex) {
+      this.marker.setZIndex(zIndex || null)
+    }
+
+    if (prevProps.opacity !== opacity) {
+      this.marker.setOpacity(opacity || null)
+    }
+
+    if (prevProps.map !== map) {
+      this.marker.setMap(map)
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.eventHandlers.move) {
+      this.eventHandlers.move.remove()
+    }
+
+    if (this.marker) {
+      this.marker.setMap(null)
+    }
+  }
+
+  attachMoveHandler() {
+    const {api, onMove} = this.props
+    if (this.eventHandlers.move) {
+      this.eventHandlers.move.remove()
+    }
+    if (this.marker && onMove) {
+      this.eventHandlers.move = api.event.addListener(this.marker, 'dragend', onMove)
+    }
+  }
+
+  attachClickHandler() {
+    const {api, onClick} = this.props
+    if (this.eventHandlers.click) {
+      this.eventHandlers.click.remove()
+    }
+    if (this.marker && onClick) {
+      this.eventHandlers.click = api.event.addListener(this.marker, 'click', onClick)
+    }
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  render() {
+    return null
+  }
+}

package/src/map/SearchInput.styles.tsx

@@ -0,0 +1,8 @@
+import styled from 'styled-components'
+
+export const WrapperContainer = styled.div`
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  width: 220px;
+`

package/src/map/SearchInput.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react'
+import {TextInput} from '@sanity/ui'
+import {WrapperContainer} from './SearchInput.styles'
+
+interface Props {
+  api: typeof window.google.maps
+  map: google.maps.Map
+  onChange: (result: google.maps.places.PlaceResult) => void
+}
+
+export class SearchInput extends React.PureComponent<Props> {
+  searchInputRef = React.createRef<HTMLInputElement>()
+  autoComplete: google.maps.places.Autocomplete | undefined
+
+  handleChange = () => {
+    if (!this.autoComplete) {
+      return
+    }
+
+    this.props.onChange(this.autoComplete.getPlace())
+
+    if (this.searchInputRef.current) {
+      this.searchInputRef.current.value = ''
+    }
+  }
+
+  componentDidMount() {
+    const input = this.searchInputRef.current
+    if (!input) {
+      return
+    }
+
+    const {api, map} = this.props
+    const {Circle, places, event} = api
+    const searchBounds = new Circle({center: map.getCenter(), radius: 100}).getBounds()
+    this.autoComplete = new places.Autocomplete(input, {
+      bounds: searchBounds,
+      types: [], // return all kinds of places
+    })
+
+    event.addListener(this.autoComplete, 'place_changed', this.handleChange)
+  }
+
+  render() {
+    return (
+      <WrapperContainer>
+        <TextInput
+          name="place"
+          ref={this.searchInputRef}
+          placeholder="Search for place or address"
+          padding={4}
+        />
+      </WrapperContainer>
+    )
+  }
+}

package/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
+}

package/src/types.ts

@@ -0,0 +1,19 @@
+import {DiffComponent, DiffComponentOptions, ObjectDiff} from '@sanity/base/_unstable'
+import {ObjectSchemaType} from '@sanity/types'
+
+export interface LatLng {
+  lat: number
+  lng: number
+}
+
+export interface Geopoint {
+  _type: 'geopoint'
+  _key?: string
+  lat: number
+  lng: number
+  alt?: number
+}
+
+export interface GeopointSchemaType extends ObjectSchemaType {
+  diffComponent?: DiffComponent<ObjectDiff<Geopoint>> | DiffComponentOptions<ObjectDiff<Geopoint>>
+}