@sanity/google-maps-input 2.30.1 → 3.0.0-studio-v3.0

package/src/input/GeopointInput.tsx

@@ -0,0 +1,176 @@
+import React from 'react'
+import {uniqueId} from 'lodash'
+import {Box, Button, Dialog, Grid} from '@sanity/ui'
+import {EditIcon, TrashIcon} from '@sanity/icons'
+import {ChangeIndicator, ChangeIndicatorCompareValueProvider} from 'sanity/_unstable'
+import {ObjectInputProps, set, setIfMissing, unset} from 'sanity/form'
+import {GoogleMapsLoadProxy} from '../loader/GoogleMapsLoadProxy'
+import {Geopoint, GeopointSchemaType, LatLng} from '../types'
+import {GeopointSelect} from './GeopointSelect'
+import {DialogInnerContainer, PreviewImage} from './GeopointInput.styles'
+import {GoogleMapsInputConfig} from '../index'
+import {getGeoConfig} from '../global-workaround'
+
+const getStaticImageUrl = (value: LatLng, apiKey: string) => {
+  const loc = `${value.lat},${value.lng}`
+  const params = {
+    key: apiKey,
+    center: loc,
+    markers: loc,
+    zoom: 13,
+    scale: 2,
+    size: '640x300',
+  } as const
+  const qs = Object.keys(params).reduce((res, param) => {
+    return res.concat(`${param}=${encodeURIComponent(params[param as keyof typeof params])}`)
+  }, [] as string[])
+
+  return `https://maps.googleapis.com/maps/api/staticmap?${qs.join('&')}`
+}
+
+export type GeopointInputProps = ObjectInputProps<Geopoint, GeopointSchemaType> & {
+  geoConfig: GoogleMapsInputConfig
+}
+
+type Focusable = any
+
+interface InputState {
+  modalOpen: boolean
+}
+
+class GeopointInput extends React.PureComponent<GeopointInputProps, InputState> {
+  _geopointInputId = uniqueId('GeopointInput')
+
+  editButton: Focusable | undefined
+
+  constructor(props: GeopointInputProps) {
+    super(props)
+
+    this.state = {
+      modalOpen: false,
+    }
+  }
+
+  setEditButton = (el: Focusable) => {
+    this.editButton = el
+  }
+
+  focus() {
+    if (this.editButton) {
+      this.editButton.focus()
+    }
+  }
+
+  handleToggleModal = () => {
+    this.setState((prevState) => ({modalOpen: !prevState.modalOpen}))
+  }
+
+  handleCloseModal = () => {
+    this.setState({modalOpen: false})
+  }
+
+  handleChange = (latLng: google.maps.LatLng) => {
+    const {schemaType, onChange} = this.props
+    onChange([
+      setIfMissing({
+        _type: schemaType.name,
+      }),
+      set(latLng.lat(), ['lat']),
+      set(latLng.lng(), ['lng']),
+    ])
+  }
+
+  handleClear = () => {
+    const {onChange} = this.props
+    onChange(unset())
+  }
+
+  render() {
+    const {value, readOnly, compareValue, geoConfig: config} = this.props
+
+    const {modalOpen} = this.state
+
+    if (!config || !config.apiKey) {
+      return (
+        <div>
+          <p>
+            The <a href="https://sanity.io/docs/schema-types/geopoint-type">Geopoint type</a> needs
+            a Google Maps API key with access to:
+          </p>
+          <ul>
+            <li>Google Maps JavaScript API</li>
+            <li>Google Places API Web Service</li>
+            <li>Google Static Maps API</li>
+          </ul>
+          <p>
+            Please enter the API key with access to these services in your googleMapsInput plugin
+            config.
+          </p>
+        </div>
+      )
+    }
+
+    return (
+      <>
+        {value && (
+          <ChangeIndicatorCompareValueProvider value={value} compareValue={compareValue}>
+            <ChangeIndicator compareDeep>
+              <PreviewImage src={getStaticImageUrl(value, config.apiKey)} alt="Map location" />
+            </ChangeIndicator>
+          </ChangeIndicatorCompareValueProvider>
+        )}
+
+        {!readOnly && (
+          <Box marginTop={4}>
+            <Grid columns={2} gap={2}>
+              <Button
+                mode="ghost"
+                icon={value && EditIcon}
+                padding={3}
+                ref={this.setEditButton}
+                text={value ? 'Edit' : 'Set location'}
+                onClick={this.handleToggleModal}
+              />
+
+              {value && (
+                <Button
+                  tone="critical"
+                  icon={TrashIcon}
+                  padding={3}
+                  mode="ghost"
+                  text={'Remove'}
+                  onClick={this.handleClear}
+                />
+              )}
+            </Grid>
+          </Box>
+        )}
+
+        {modalOpen && (
+          <Dialog
+            id={`${this._geopointInputId}_dialog`}
+            onClose={this.handleCloseModal}
+            header="Place the marker on the map"
+            width={1}
+          >
+            <DialogInnerContainer>
+              <GoogleMapsLoadProxy config={getGeoConfig()}>
+                {(api) => (
+                  <GeopointSelect
+                    api={api}
+                    value={value || undefined}
+                    onChange={readOnly ? undefined : this.handleChange}
+                    defaultLocation={config.defaultLocation}
+                    defaultZoom={config.defaultZoom}
+                  />
+                )}
+              </GoogleMapsLoadProxy>
+            </DialogInnerContainer>
+          </Dialog>
+        )}
+      </>
+    )
+  }
+}
+
+export default GeopointInput

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?.location) {
+      return
+    }
+
+    this.setValue(place.geometry.location)
+  }
+
+  handleMarkerDragEnd = (event: google.maps.MapMouseEvent) => {
+    if (event.latLng) this.setValue(event.latLng)
+  }
+
+  handleMapClick = (event: google.maps.MapMouseEvent) => {
+    if (event.latLng) 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,51 @@
+import React from 'react'
+import {Subscription} from 'rxjs'
+import {loadGoogleMapsApi, GoogleLoadState} from './loadGoogleMapsApi'
+import {LoadError} from './LoadError'
+import {GoogleMapsInputConfig} from '../index'
+
+interface LoadProps {
+  children: (api: typeof window.google.maps) => React.ReactElement
+  config: GoogleMapsInputConfig
+}
+
+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(props.config).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}>{'error' in props && 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,97 @@
+import {Observable, BehaviorSubject} from 'rxjs'
+import {GoogleMapsInputConfig} from '../index'
+
+declare global {
+  interface Window {
+    gm_authFailure: any
+    ___sanity_googleMapsApiCallback: any
+  }
+}
+
+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(config: GoogleMapsInputConfig): 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(): any {
+    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}
+      </>
+    )
+  }
+}