@sanity/google-maps-input 4.2.1 → 5.0.1

package/src/loader/loadGoogleMapsApi.ts

@@ -1,77 +0,0 @@
-declare global {
-  // eslint-disable-next-line
-  interface Window {
-    gm_authFailure: any
-    ___sanity_googleMapsApiCallback: any
-  }
-}
-
-const callbackName = '___sanity_googleMapsApiCallback'
-const authFailureCallbackName = 'gm_authFailure'
-
-export class AuthError extends Error {}
-
-function _loadGoogleMapsApi(config: {locale: string; apiKey: string}) {
-  return new Promise<typeof window.google.maps>((resolve, reject) => {
-    window[authFailureCallbackName] = () => {
-      reject(new AuthError('Authentication error when loading Google Maps API.'))
-    }
-
-    window[callbackName] = () => {
-      resolve(window.google.maps)
-    }
-
-    const script = document.createElement('script')
-    script.onerror = (
-      event: Event | string,
-      source?: string,
-      lineno?: number,
-      colno?: number,
-      error?: Error,
-    ) => reject(new Error(coeerceError(event, error)))
-
-    script.src = `https://maps.googleapis.com/maps/api/js?key=${config.apiKey}&libraries=places&callback=${callbackName}&language=${config.locale}`
-    document.getElementsByTagName('head')[0].appendChild(script)
-  }).finally(() => {
-    delete window[callbackName]
-    delete window[authFailureCallbackName]
-  })
-}
-
-let memo: Promise<typeof window.google.maps> | null = null
-export function loadGoogleMapsApi(config: {
-  locale: string
-  apiKey: string
-}): Promise<typeof window.google.maps> {
-  if (memo) {
-    return memo
-  }
-  memo = _loadGoogleMapsApi(config)
-  memo.catch(() => {
-    memo = null
-  })
-  return memo
-}
-function coeerceError(event: Event | string, error?: Error): string {
-  if (error) {
-    return error.message
-  }
-
-  if (typeof event === 'string') {
-    return event
-  }
-
-  return 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

@@ -1,76 +0,0 @@
-import {type MutableRefObject, PureComponent} from 'react'
-import type {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?: MutableRefObject<google.maps.Polyline | undefined>
-  onClick?: (event: google.maps.MapMouseEvent) => void
-}
-
-export class Arrow extends 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

@@ -1,10 +0,0 @@
-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

@@ -1,125 +0,0 @@
-import {createRef, PureComponent, type ReactElement} from 'react'
-import type {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) => ReactElement
-}
-
-interface MapState {
-  map: google.maps.Map | undefined
-}
-
-export class GoogleMap extends PureComponent<MapProps, MapState> {
-  static defaultProps = {
-    defaultZoom: 8,
-    scrollWheel: true,
-  }
-
-  state: MapState = {map: undefined}
-  clickHandler: google.maps.MapsEventListener | undefined
-  mapRef = 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

@@ -1,130 +0,0 @@
-import {PureComponent, type MutableRefObject} from 'react'
-import type {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?: MutableRefObject<google.maps.Marker | undefined>
-  color?: {background: string; border: string; text: string}
-}
-
-export class Marker extends 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.Symbol | 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(): any {
-    return null
-  }
-}

package/src/map/SearchInput.styles.tsx

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

package/src/map/SearchInput.tsx

@@ -1,56 +0,0 @@
-import {TextInput} from '@sanity/ui'
-import {WrapperContainer} from './SearchInput.styles'
-import {createRef, PureComponent} from 'react'
-
-interface Props {
-  api: typeof window.google.maps
-  map: google.maps.Map
-  onChange: (result: google.maps.places.PlaceResult) => void
-}
-
-export class SearchInput extends PureComponent<Props> {
-  searchInputRef = 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

@@ -1,14 +0,0 @@
-import type {LatLng} from '../types'
-
-export function latLngAreEqual(
-  latLng1: LatLng | google.maps.LatLng,
-  latLng2: LatLng | google.maps.LatLng,
-): boolean {
-  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/plugin.tsx

@@ -1,92 +0,0 @@
-import {definePlugin, type SchemaType} from 'sanity'
-import {GeopointInput, type GeopointInputProps} from './input/GeopointInput'
-import {GeopointRadiusInput, type GeopointRadiusInputProps} from './input/GeopointRadiusInput'
-import {setGeoConfig} from './global-workaround'
-import type {GeopointSchemaType, GeopointRadiusSchemaType, GoogleMapsInputConfig} from './types'
-
-export const googleMapsInput = definePlugin<GoogleMapsInputConfig>((config) => {
-  setGeoConfig(config)
-  return {
-    name: 'google-maps-input',
-    schema: {
-      types: [
-        {
-          name: 'geopointRadius',
-          title: 'Geopoint with Radius',
-          type: 'object',
-          fields: [
-            {
-              name: 'lat',
-              title: 'Latitude',
-              type: 'number',
-              validation: (Rule: any) => Rule.required().min(-90).max(90),
-            },
-            {
-              name: 'lng',
-              title: 'Longitude',
-              type: 'number',
-              validation: (Rule: any) => Rule.required().min(-180).max(180),
-            },
-            {
-              name: 'alt',
-              title: 'Altitude',
-              type: 'number',
-            },
-            {
-              name: 'radius',
-              title: 'Radius (meters)',
-              type: 'number',
-              validation: (Rule: any) => Rule.required().min(1).max(50000),
-            },
-          ],
-          preview: {
-            select: {
-              lat: 'lat',
-              lng: 'lng',
-              radius: 'radius',
-            },
-            prepare({lat, lng, radius}: {lat: number; lng: number; radius: number}) {
-              return {
-                title: `${lat.toFixed(6)}, ${lng.toFixed(6)}`,
-                subtitle: radius ? `Radius: ${radius}m` : 'No radius set',
-              }
-            },
-          },
-        },
-      ],
-    },
-    form: {
-      components: {
-        input(props) {
-          if (isGeopoint(props.schemaType)) {
-            const castedProps = props as unknown as Omit<GeopointInputProps, 'geoConfig'>
-            return <GeopointInput {...castedProps} geoConfig={config} />
-          }
-          if (isGeopointRadius(props.schemaType)) {
-            const castedProps = props as unknown as Omit<GeopointRadiusInputProps, 'geoConfig'>
-            return <GeopointRadiusInput {...castedProps} geoConfig={config} />
-          }
-          return props.renderDefault(props)
-        },
-      },
-    },
-  }
-})
-
-function isGeopoint(schemaType: SchemaType): schemaType is GeopointSchemaType {
-  return isType('geopoint', schemaType)
-}
-
-function isGeopointRadius(schemaType: SchemaType): schemaType is GeopointRadiusSchemaType {
-  return isType('geopointRadius', schemaType)
-}
-
-function isType(name: string, schema?: SchemaType): boolean {
-  if (schema?.name === name) {
-    return true
-    // eslint-disable-next-line no-negated-condition
-  } else if (!schema?.name) {
-    return false
-  }
-  return isType(name, schema?.type)
-}

package/src/types.ts

@@ -1,46 +0,0 @@
-import type {DiffComponent, DiffComponentOptions, ObjectDiff} from 'sanity'
-import type {ObjectSchemaType} from 'sanity'
-
-export interface LatLng {
-  lat: number
-  lng: number
-}
-
-export interface Geopoint {
-  _type: 'geopoint'
-  _key?: string
-  lat: number
-  lng: number
-  alt?: number
-}
-
-export interface GeopointRadius {
-  _type: 'geopointRadius'
-  _key?: string
-  lat: number
-  lng: number
-  alt?: number
-  radius: number
-}
-
-export interface GeopointSchemaType extends ObjectSchemaType {
-  diffComponent?: DiffComponent<ObjectDiff<Geopoint>> | DiffComponentOptions<ObjectDiff<Geopoint>>
-}
-
-export interface GeopointRadiusSchemaType extends ObjectSchemaType {
-  diffComponent?:
-    | DiffComponent<ObjectDiff<GeopointRadius>>
-    | DiffComponentOptions<ObjectDiff<GeopointRadius>>
-}
-
-export interface GoogleMapsInputConfig {
-  apiKey: string
-  defaultZoom?: number
-  defaultLocale?: string
-  defaultLocation?: {
-    lat: number
-    lng: number
-  }
-  defaultRadiusZoom?: number
-  defaultRadius?: number
-}

package/v2-incompatible.js

@@ -1,10 +0,0 @@
-const {showIncompatiblePluginDialog} = require('@sanity/incompatible-plugin')
-const {name, version} = require('./package.json')
-
-export default showIncompatiblePluginDialog({
-  name: name,
-  versions: {
-    v3: version,
-    v2: '^2.30.0',
-  },
-})