@sanity/google-maps-input 4.2.0 → 5.0.0

package/src/input/GeopointRadiusInput.tsx

@@ -1,258 +0,0 @@
-import React, {useCallback, useEffect, useId, useRef, useState} from 'react'
-import {Box, Button, Dialog, Grid, Stack, TextInput, Label} from '@sanity/ui'
-import {EditIcon, TrashIcon} from '@sanity/icons'
-import {ObjectInputProps, set, setIfMissing, unset, ChangeIndicator, Path} from 'sanity'
-import {GoogleMapsLoadProxy} from '../loader/GoogleMapsLoadProxy'
-import type {
-  GeopointRadius,
-  GeopointRadiusSchemaType,
-  GoogleMapsInputConfig,
-  LatLng,
-} from '../types'
-import {getGeoConfig} from '../global-workaround'
-import {DialogInnerContainer, PreviewImage} from './GeopointInput.styles'
-import {GeopointRadiusSelect} from './GeopointRadiusSelect'
-
-const EMPTY_PATH: Path = []
-
-// Helper function to generate circle points
-const generateCirclePoints = (
-  lat: number,
-  lng: number,
-  radius: number,
-): Array<{lat: number; lng: number}> => {
-  const points = []
-  const steps = 32 // Number of points to create the circle
-
-  for (let i = 0; i <= steps; i++) {
-    const angle = (i / steps) * 2 * Math.PI
-    const latOffset = (radius / 111000) * Math.cos(angle) // Rough conversion to degrees
-    const lngOffset = (radius / (111000 * Math.cos((lat * Math.PI) / 180))) * Math.sin(angle)
-
-    points.push({
-      lat: lat + latOffset,
-      lng: lng + lngOffset,
-    })
-  }
-
-  return points
-}
-
-const getStaticImageUrl = (value: LatLng & {radius?: number}, apiKey: string) => {
-  const loc = `${value.lat},${value.lng}`
-
-  // Calculate appropriate zoom level based on radius
-  let zoom = 13
-  if (value.radius) {
-    // Use logarithmic formula for better zoom calculation
-    // Add padding to ensure circle is fully visible
-    const radius = value.radius + value.radius / 2
-    const scale = radius / 500
-    const calculatedZoom = 16 - Math.log(scale) / Math.log(2)
-    // Add small offset to ensure circle fits well in view
-    zoom = Math.max(8, Math.min(16, Math.round(calculatedZoom - 0.4)))
-  }
-
-  const qs = new URLSearchParams({
-    key: apiKey,
-    center: loc,
-    markers: loc,
-    zoom: zoom.toString(),
-    scale: '2',
-    size: '640x300',
-  })
-
-  // Add circle if radius is present
-  if (value.radius) {
-    // Create a circle path using multiple points
-    const points = generateCirclePoints(value.lat, value.lng, value.radius)
-    const path = points.map((p) => `${p.lat},${p.lng}`).join('|')
-    qs.append('path', `fillcolor:0x4285F480|color:0x4285F4|weight:2|${path}`)
-  }
-
-  return `https://maps.googleapis.com/maps/api/staticmap?${qs.toString()}`
-}
-
-export type GeopointRadiusInputProps = ObjectInputProps<
-  GeopointRadius,
-  GeopointRadiusSchemaType
-> & {
-  geoConfig: GoogleMapsInputConfig
-}
-
-export function GeopointRadiusInput(props: GeopointRadiusInputProps) {
-  const {
-    changed,
-    elementProps,
-    focused,
-    geoConfig: config,
-    onChange,
-    onPathFocus,
-    path,
-    readOnly,
-    schemaType,
-    value,
-  } = props
-
-  const {
-    id,
-    ref: inputRef,
-    onBlur: handleBlur,
-    onFocus: handleFocus,
-    'aria-describedby': ariaDescribedBy,
-  } = elementProps
-
-  const schemaTypeName = schemaType.name
-  const dialogId = useId()
-  const dialogRef = useRef<HTMLDivElement | null>(null)
-  const handleFocusButton = useCallback(() => inputRef?.current?.focus(), [inputRef])
-  const [modalOpen, setModalOpen] = useState(false)
-
-  const handleCloseModal = useCallback(() => {
-    if (dialogRef.current) dialogRef.current.blur()
-    setModalOpen(false)
-    handleFocusButton()
-  }, [setModalOpen, handleFocusButton])
-
-  const handleToggleModal = useCallback(
-    () => setModalOpen((currentState) => !currentState),
-    [setModalOpen],
-  )
-
-  const handleChange = useCallback(
-    (latLng: google.maps.LatLng, radius?: number) => {
-      const currentRadius = radius ?? value?.radius ?? config.defaultRadius ?? 1000
-      onChange([
-        setIfMissing({_type: schemaTypeName}),
-        set(latLng.lat(), ['lat']),
-        set(latLng.lng(), ['lng']),
-        set(currentRadius, ['radius']),
-      ])
-    },
-    [schemaTypeName, onChange, value?.radius, config.defaultRadius],
-  )
-
-  const handleRadiusChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      if (value) {
-        onChange([set(Math.round(Number(event.currentTarget.value)), ['radius'])])
-      }
-    },
-    [onChange, value],
-  )
-
-  const handleClear = useCallback(() => {
-    onChange(unset())
-  }, [onChange])
-
-  useEffect(() => {
-    if (modalOpen) {
-      onPathFocus(EMPTY_PATH)
-    }
-  }, [modalOpen, onPathFocus])
-
-  if (!config || !config.apiKey) {
-    return (
-      <div>
-        <p>
-          The <a href="https://sanity.io/docs/schema-types/geopoint-type">Geopoint Radius 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 (
-    <Stack space={3}>
-      {value && (
-        <ChangeIndicator path={path} isChanged={changed} hasFocus={!!focused}>
-          <PreviewImage
-            src={getStaticImageUrl(value, config.apiKey)}
-            alt="Map location with radius"
-            onClick={handleFocusButton}
-            onDoubleClick={handleToggleModal}
-          />
-        </ChangeIndicator>
-      )}
-
-      {value && (
-        <Stack space={2}>
-          <Label>Radius (meters)</Label>
-          <TextInput
-            type="number"
-            value={Math.round(value.radius || config.defaultRadius || 1000)}
-            onChange={handleRadiusChange}
-            disabled={readOnly}
-            min={1}
-            max={50000}
-            step={1}
-          />
-        </Stack>
-      )}
-
-      <Box>
-        <Grid columns={value ? 2 : 1} gap={3}>
-          <Button
-            aria-describedby={ariaDescribedBy}
-            disabled={readOnly}
-            icon={value && EditIcon}
-            id={id}
-            mode="ghost"
-            onClick={handleToggleModal}
-            onFocus={handleFocus}
-            padding={3}
-            ref={inputRef}
-            text={value ? 'Edit' : 'Set location and radius'}
-          />
-
-          {value && (
-            <Button
-              disabled={readOnly}
-              icon={TrashIcon}
-              mode="ghost"
-              onClick={handleClear}
-              padding={3}
-              text="Remove"
-              tone="critical"
-            />
-          )}
-        </Grid>
-      </Box>
-
-      {modalOpen && (
-        <Dialog
-          header="Place the marker and set radius on the map"
-          id={`${dialogId}_dialog`}
-          onBlur={handleBlur}
-          onClose={handleCloseModal}
-          ref={dialogRef}
-          width={1}
-        >
-          <DialogInnerContainer>
-            <GoogleMapsLoadProxy config={getGeoConfig()}>
-              {(api) => (
-                <GeopointRadiusSelect
-                  api={api}
-                  value={value || undefined}
-                  onChange={readOnly ? undefined : handleChange}
-                  defaultLocation={config.defaultLocation}
-                  defaultRadiusZoom={config.defaultRadiusZoom}
-                  defaultRadius={config.defaultRadius}
-                />
-              )}
-            </GoogleMapsLoadProxy>
-          </DialogInnerContainer>
-        </Dialog>
-      )}
-    </Stack>
-  )
-}

package/src/input/GeopointRadiusSelect.tsx

@@ -1,193 +0,0 @@
-import React, {type FC, useCallback, useEffect, useRef} from 'react'
-import {SearchInput} from '../map/SearchInput'
-import {GoogleMap} from '../map/Map'
-import {Marker} from '../map/Marker'
-import type {LatLng, GeopointRadius} from '../types'
-
-const fallbackLatLng: LatLng = {lat: 40.7058254, lng: -74.1180863}
-
-// Component to sync marker drag with circle position
-const MarkerDragSync: FC<{
-  api: typeof window.google.maps
-  marker: google.maps.Marker
-  circleRef: React.MutableRefObject<google.maps.Circle | null>
-  isMarkerDragging: React.MutableRefObject<boolean>
-}> = ({api, marker, circleRef, isMarkerDragging}) => {
-  useEffect(() => {
-    const handleDrag = () => {
-      isMarkerDragging.current = true
-    }
-
-    const handleDragEnd = () => {
-      isMarkerDragging.current = false
-    }
-
-    const dragListener = api.event.addListener(marker, 'drag', handleDrag)
-    const dragEndListener = api.event.addListener(marker, 'dragend', handleDragEnd)
-
-    return () => {
-      api.event.removeListener(dragListener)
-      api.event.removeListener(dragEndListener)
-    }
-  }, [api, marker, circleRef, isMarkerDragging])
-
-  return null
-}
-
-interface SelectProps {
-  api: typeof window.google.maps
-  value?: GeopointRadius
-  onChange?: (latLng: google.maps.LatLng, radius?: number) => void
-  defaultLocation?: LatLng
-  defaultRadiusZoom?: number
-  defaultRadius?: number
-}
-
-export const GeopointRadiusSelect: FC<SelectProps> = ({
-  api,
-  value,
-  onChange,
-  defaultLocation = {lng: 10.74609, lat: 59.91273},
-  defaultRadiusZoom = 12,
-  defaultRadius = 1000,
-}) => {
-  const circleRef = useRef<google.maps.Circle | null>(null)
-  const markerRef = useRef<google.maps.Marker | undefined>()
-  const isMarkerDragging = useRef(false)
-
-  const getCenter = useCallback(() => {
-    const point: LatLng = {...fallbackLatLng, ...defaultLocation, ...value}
-    return point
-  }, [value, defaultLocation])
-
-  const setValue = useCallback(
-    (geoPoint: google.maps.LatLng, radius?: number) => {
-      if (onChange) {
-        const roundedRadius = radius ? Math.round(radius) : undefined
-        onChange(geoPoint, roundedRadius)
-      }
-    },
-    [onChange],
-  )
-
-  const handlePlaceChanged = useCallback(
-    (place: google.maps.places.PlaceResult) => {
-      if (!place.geometry?.location) {
-        return
-      }
-      setValue(place.geometry.location, value?.radius || defaultRadius)
-    },
-    [setValue, value?.radius, defaultRadius],
-  )
-
-  const handleMarkerDragEnd = useCallback(
-    (event: google.maps.MapMouseEvent) => {
-      if (event.latLng) {
-        // Update circle position when marker drag ends
-        if (circleRef.current) {
-          circleRef.current.setCenter(event.latLng)
-        }
-        setValue(event.latLng, value?.radius || defaultRadius)
-      }
-    },
-    [setValue, value?.radius, defaultRadius],
-  )
-
-  const handleMapClick = useCallback(
-    (event: google.maps.MapMouseEvent) => {
-      if (event.latLng) {
-        setValue(event.latLng, value?.radius || defaultRadius)
-      }
-    },
-    [setValue, value?.radius, defaultRadius],
-  )
-
-  // Create or update circle when value changes
-  useEffect(() => {
-    if (value && circleRef.current) {
-      circleRef.current.setCenter({lat: value.lat, lng: value.lng})
-      circleRef.current.setRadius(value.radius)
-    }
-  }, [value])
-
-  return (
-    <GoogleMap
-      api={api}
-      location={getCenter()}
-      onClick={handleMapClick}
-      defaultZoom={defaultRadiusZoom}
-    >
-      {(map) => {
-        // Create circle if it doesn't exist and we have a value
-        if (value && !circleRef.current) {
-          circleRef.current = new api.Circle({
-            map,
-            center: {lat: value.lat, lng: value.lng},
-            radius: value.radius,
-            fillColor: '#4285F4',
-            fillOpacity: 0.2,
-            strokeColor: '#4285F4',
-            strokeOpacity: 0.8,
-            strokeWeight: 2,
-            editable: true,
-          })
-
-          // Add event listeners for circle interactions
-          circleRef.current.addListener('center_changed', () => {
-            if (circleRef.current && markerRef.current && !isMarkerDragging.current) {
-              // When circle center is dragged, move the marker to match
-              const circleCenter = circleRef.current.getCenter()
-              if (circleCenter) {
-                markerRef.current.setPosition(circleCenter)
-              }
-            }
-          })
-
-          circleRef.current.addListener('radius_changed', () => {
-            if (circleRef.current) {
-              const center = circleRef.current.getCenter()
-              const radius = circleRef.current.getRadius()
-              if (center) {
-                setValue(center, Math.round(radius))
-              }
-            }
-          })
-
-          circleRef.current.addListener('dragend', () => {
-            if (circleRef.current) {
-              const center = circleRef.current.getCenter()
-              const radius = circleRef.current.getRadius()
-              if (center) {
-                setValue(center, Math.round(radius))
-              }
-            }
-          })
-        }
-
-        return (
-          <>
-            <SearchInput api={api} map={map} onChange={handlePlaceChanged} />
-            {value && (
-              <Marker
-                api={api}
-                map={map}
-                position={value}
-                onMove={onChange ? handleMarkerDragEnd : undefined}
-                markerRef={markerRef}
-              />
-            )}
-            {/* Add drag event listener to marker for circle sync */}
-            {value && markerRef.current && (
-              <MarkerDragSync
-                api={api}
-                marker={markerRef.current}
-                circleRef={circleRef}
-                isMarkerDragging={isMarkerDragging}
-              />
-            )}
-          </>
-        )
-      }}
-    </GoogleMap>
-  )
-}

package/src/input/GeopointSelect.tsx

@@ -1,79 +0,0 @@
-import {type FC, useCallback} from 'react'
-import {SearchInput} from '../map/SearchInput'
-import {GoogleMap} from '../map/Map'
-import {Marker} from '../map/Marker'
-import type {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 const GeopointSelect: FC<SelectProps> = ({
-  api,
-  value,
-  onChange,
-  defaultLocation = {lng: 10.74609, lat: 59.91273},
-  defaultZoom = 8,
-}) => {
-  const getCenter = useCallback(() => {
-    const point: LatLng = {...fallbackLatLng, ...defaultLocation, ...value}
-    return point
-  }, [value, defaultLocation])
-
-  const setValue = useCallback(
-    (geoPoint: google.maps.LatLng) => {
-      if (onChange) {
-        onChange(geoPoint)
-      }
-    },
-    [onChange],
-  )
-
-  const handlePlaceChanged = useCallback(
-    (place: google.maps.places.PlaceResult) => {
-      if (!place.geometry?.location) {
-        return
-      }
-      setValue(place.geometry.location)
-    },
-    [setValue],
-  )
-
-  const handleMarkerDragEnd = useCallback(
-    (event: google.maps.MapMouseEvent) => {
-      if (event.latLng) setValue(event.latLng)
-    },
-    [setValue],
-  )
-
-  const handleMapClick = useCallback(
-    (event: google.maps.MapMouseEvent) => {
-      if (event.latLng) setValue(event.latLng)
-    },
-    [setValue],
-  )
-
-  return (
-    <GoogleMap api={api} location={getCenter()} onClick={handleMapClick} defaultZoom={defaultZoom}>
-      {(map) => (
-        <>
-          <SearchInput api={api} map={map} onChange={handlePlaceChanged} />
-          {value && (
-            <Marker
-              api={api}
-              map={map}
-              position={value}
-              onMove={onChange ? handleMarkerDragEnd : undefined}
-            />
-          )}
-        </>
-      )}
-    </GoogleMap>
-  )
-}

package/src/loader/GoogleMapsLoadProxy.tsx

@@ -1,62 +0,0 @@
-import {type ReactElement, useEffect, useState} from 'react'
-import type {GoogleMapsInputConfig} from '../types'
-import {AuthError, loadGoogleMapsApi} from './loadGoogleMapsApi'
-import {LoadError as LoadErrorView} from './LoadError'
-
-interface LoadProps {
-  children: (api: typeof window.google.maps) => ReactElement
-  config: GoogleMapsInputConfig
-}
-
-const browserLocale = (typeof window !== 'undefined' && window.navigator.language) || 'en'
-
-type LoadState =
-  | {
-      type: 'loading'
-    }
-  | {
-      type: 'loaded'
-      api: typeof window.google.maps
-    }
-  | {
-      type: 'error'
-      error: {type: 'loadError' | 'authError'; message: string}
-    }
-
-function useLoadGoogleMapsApi(config: {defaultLocale?: string; apiKey: string}): LoadState {
-  const locale = config.defaultLocale || browserLocale || 'en-US'
-
-  const [state, setState] = useState<LoadState>({type: 'loading'})
-
-  useEffect(() => {
-    if (typeof window === 'undefined') {
-      return
-    }
-
-    loadGoogleMapsApi({locale, apiKey: config.apiKey}).then(
-      (api) => setState({type: 'loaded', api}),
-      (err) =>
-        setState({
-          type: 'error',
-          error: {type: err instanceof AuthError ? 'authError' : 'loadError', message: err.message},
-        }),
-    )
-  }, [locale, config.apiKey])
-  return state
-}
-
-export function GoogleMapsLoadProxy(props: LoadProps) {
-  const loadState = useLoadGoogleMapsApi(props.config)
-  switch (loadState.type) {
-    case 'error':
-      return (
-        <LoadErrorView error={loadState.error} isAuthError={loadState.error.type === 'authError'} />
-      )
-    case 'loading':
-      return <div>Loading Google Maps API</div>
-    case 'loaded':
-      return props.children(loadState.api)
-    default:
-      return null
-  }
-}

package/src/loader/LoadError.tsx

@@ -1,43 +0,0 @@
-import {Card, Box, Text, Code} from '@sanity/ui'
-
-type Props = {error: {message?: string}; 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>
-  )
-}