@sanity/google-maps-input 4.2.0 → 5.0.0

package/src/diff/GeopointRadiusFieldDiff.tsx

@@ -1,136 +0,0 @@
-import {
-  type DiffComponent,
-  type ObjectDiff,
-  type DiffProps as GenericDiffProps,
-  DiffTooltip,
-  getAnnotationAtPath,
-} from 'sanity'
-import {GoogleMapsLoadProxy} from '../loader/GoogleMapsLoadProxy'
-import {GoogleMap} from '../map/Map'
-import type {GeopointRadius} from '../types'
-import {getGeoConfig} from '../global-workaround'
-import {GeopointRadiusMove} from './GeopointRadiusMove'
-import {RootContainer} from './GeopointFieldDiff.styles'
-
-export type DiffProps = GenericDiffProps<ObjectDiff<GeopointRadius>>
-
-export const GeopointRadiusFieldDiff: DiffComponent<ObjectDiff<GeopointRadius>> = ({
-  diff,
-  schemaType,
-}: DiffProps) => {
-  return (
-    <RootContainer>
-      <GoogleMapsLoadProxy config={getGeoConfig()}>
-        {(api) => <GeopointRadiusDiff api={api} diff={diff} schemaType={schemaType} />}
-      </GoogleMapsLoadProxy>
-    </RootContainer>
-  )
-}
-
-function GeopointRadiusDiff({api, diff}: DiffProps & {api: typeof window.google.maps}) {
-  const {fromValue, toValue} = diff
-  const annotation =
-    getAnnotationAtPath(diff, ['lat']) ||
-    getAnnotationAtPath(diff, ['lng']) ||
-    getAnnotationAtPath(diff, ['radius']) ||
-    getAnnotationAtPath(diff, [])
-
-  const center = getCenter(diff, api)
-  const bounds = fromValue && toValue ? getBounds(fromValue, toValue, api) : undefined
-
-  return (
-    <DiffTooltip annotations={annotation ? [annotation] : []} description={getAction(diff)}>
-      <div>
-        <GoogleMap
-          api={api}
-          location={center}
-          mapTypeControl={false}
-          controlSize={20}
-          bounds={bounds}
-          scrollWheel={false}
-        >
-          {(map) => <GeopointRadiusMove api={api} map={map} diff={diff} />}
-        </GoogleMap>
-      </div>
-    </DiffTooltip>
-  )
-}
-
-function getBounds(
-  fromValue: google.maps.LatLngLiteral & {radius?: number},
-  toValue: google.maps.LatLngLiteral & {radius?: number},
-  api: typeof window.google.maps,
-): google.maps.LatLngBounds {
-  const bounds = new api.LatLngBounds().extend(fromValue).extend(toValue)
-
-  // Extend bounds to include radius circles
-  const fromRadius = fromValue.radius || 0
-  const toRadius = toValue.radius || 0
-  const maxRadius = Math.max(fromRadius, toRadius)
-
-  if (maxRadius > 0) {
-    // Convert radius from meters to degrees (approximate)
-    const radiusInDegrees = maxRadius / 111000 // Rough conversion
-    bounds.extend({
-      lat: fromValue.lat + radiusInDegrees,
-      lng: fromValue.lng + radiusInDegrees,
-    })
-    bounds.extend({
-      lat: fromValue.lat - radiusInDegrees,
-      lng: fromValue.lng - radiusInDegrees,
-    })
-    bounds.extend({
-      lat: toValue.lat + radiusInDegrees,
-      lng: toValue.lng + radiusInDegrees,
-    })
-    bounds.extend({
-      lat: toValue.lat - radiusInDegrees,
-      lng: toValue.lng - radiusInDegrees,
-    })
-  }
-
-  return bounds
-}
-
-function getCenter(
-  diff: DiffProps['diff'],
-  api: typeof window.google.maps,
-): google.maps.LatLngLiteral {
-  const {fromValue, toValue} = diff
-  if (fromValue && toValue) {
-    return getBounds(fromValue, toValue, api).getCenter().toJSON()
-  }
-
-  if (fromValue) {
-    return fromValue
-  }
-
-  if (toValue) {
-    return toValue
-  }
-
-  throw new Error('Neither a from or a to value present')
-}
-
-function getAction(diff: ObjectDiff<GeopointRadius>) {
-  const {fromValue, toValue} = diff
-  if (fromValue && toValue) {
-    const latChanged = fromValue.lat !== toValue.lat || fromValue.lng !== toValue.lng
-    const radiusChanged = fromValue.radius !== toValue.radius
-
-    if (latChanged && radiusChanged) {
-      return 'Moved and radius changed'
-    } else if (latChanged) {
-      return 'Moved'
-    } else if (radiusChanged) {
-      return 'Radius changed'
-    }
-    return 'Unchanged'
-  } else if (fromValue) {
-    return 'Removed'
-  } else if (toValue) {
-    return 'Added'
-  }
-
-  return 'Unchanged'
-}

package/src/diff/GeopointRadiusMove.tsx

@@ -1,92 +0,0 @@
-import {useRef, useEffect} from 'react'
-import {useUserColor, type ObjectDiff} from 'sanity'
-import {Marker} from '../map/Marker'
-import {Arrow} from '../map/Arrow'
-import type {GeopointRadius} from '../types'
-
-interface GeopointRadiusMoveProps {
-  api: typeof window.google.maps
-  map: google.maps.Map
-  diff: ObjectDiff<GeopointRadius>
-  label?: string
-}
-
-export function GeopointRadiusMove({diff, api, map, label}: GeopointRadiusMoveProps) {
-  const {fromValue: from, toValue: to} = diff
-  const annotation = diff.isChanged ? diff.annotation : undefined
-  const userColor = useUserColor(annotation ? annotation.author : null) || undefined
-  const fromRef = useRef<google.maps.Marker>()
-  const toRef = useRef<google.maps.Marker>()
-  const fromCircleRef = useRef<google.maps.Circle>()
-  const toCircleRef = useRef<google.maps.Circle>()
-
-  // Create circles for radius visualization
-  useEffect(() => {
-    const color = userColor?.background || '#4285F4'
-
-    if (from && from.radius) {
-      fromCircleRef.current = new api.Circle({
-        map,
-        center: {lat: from.lat, lng: from.lng},
-        radius: from.radius,
-        fillColor: color,
-        fillOpacity: 0.1,
-        strokeColor: color,
-        strokeOpacity: 0.3,
-        strokeWeight: 1,
-        zIndex: 0,
-      })
-    }
-
-    if (to && to.radius) {
-      toCircleRef.current = new api.Circle({
-        map,
-        center: {lat: to.lat, lng: to.lng},
-        radius: to.radius,
-        fillColor: color,
-        fillOpacity: 0.2,
-        strokeColor: color,
-        strokeOpacity: 0.8,
-        strokeWeight: 2,
-        zIndex: 2,
-      })
-    }
-
-    return () => {
-      if (fromCircleRef.current) {
-        fromCircleRef.current.setMap(null)
-      }
-      if (toCircleRef.current) {
-        toCircleRef.current.setMap(null)
-      }
-    }
-  }, [api, map, from, to, userColor])
-
-  return (
-    <>
-      {from && (
-        <Marker
-          api={api}
-          map={map}
-          position={from}
-          zIndex={0}
-          opacity={0.55}
-          markerRef={fromRef}
-          color={userColor}
-        />
-      )}
-      {from && to && <Arrow api={api} map={map} from={from} to={to} zIndex={1} color={userColor} />}
-      {to && (
-        <Marker
-          api={api}
-          map={map}
-          position={to}
-          zIndex={2}
-          markerRef={toRef}
-          label={label}
-          color={userColor}
-        />
-      )}
-    </>
-  )
-}

package/src/diff/resolver.ts

@@ -1,26 +0,0 @@
-import {DiffComponentResolver} from 'sanity'
-import {GeopointFieldDiff} from './GeopointFieldDiff'
-import {GeopointArrayDiff} from './GeopointArrayDiff'
-import {GeopointRadiusFieldDiff} from './GeopointRadiusFieldDiff'
-
-const diffResolver: DiffComponentResolver = function diffResolver({schemaType}) {
-  if (schemaType.name === 'geopoint') {
-    return GeopointFieldDiff
-  }
-
-  if (schemaType.name === 'geopointRadius') {
-    return GeopointRadiusFieldDiff
-  }
-
-  if (
-    schemaType.jsonType === 'array' &&
-    schemaType.of.length === 1 &&
-    schemaType.of[0].name === 'geopoint'
-  ) {
-    return GeopointArrayDiff
-  }
-
-  return undefined
-}
-
-export default diffResolver

package/src/global-workaround.ts

@@ -1,11 +0,0 @@
-import type {GoogleMapsInputConfig} from './types'
-
-let config: GoogleMapsInputConfig
-
-export function getGeoConfig(): GoogleMapsInputConfig {
-  return config as GoogleMapsInputConfig
-}
-
-export function setGeoConfig(newConfig: GoogleMapsInputConfig): void {
-  config = newConfig
-}

package/src/index.ts

@@ -1,20 +0,0 @@
-export {GeopointInput, type GeopointInputProps} from './input/GeopointInput'
-export {GeopointRadiusInput, type GeopointRadiusInputProps} from './input/GeopointRadiusInput'
-
-export {GeopointArrayDiff, type DiffProps as GeopointArrayDiffProps} from './diff/GeopointArrayDiff'
-export {GeopointFieldDiff, type DiffProps as GeopointFieldDiffProps} from './diff/GeopointFieldDiff'
-export {
-  GeopointRadiusFieldDiff,
-  type DiffProps as GeopointRadiusFieldDiffProps,
-} from './diff/GeopointRadiusFieldDiff'
-
-export type {
-  LatLng,
-  GeopointSchemaType,
-  Geopoint,
-  GeopointRadius,
-  GeopointRadiusSchemaType,
-  GoogleMapsInputConfig,
-} from './types'
-
-export {googleMapsInput} from './plugin'

package/src/input/GeopointInput.styles.tsx

@@ -1,11 +0,0 @@
-import {styled} from 'styled-components'
-
-export const PreviewImage = styled.img`
-  width: 100%;
-  height: auto;
-  vertical-align: top;
-`
-
-export const DialogInnerContainer = styled.div`
-  height: 40rem;
-`

package/src/input/GeopointInput.tsx

@@ -1,179 +0,0 @@
-import {useCallback, useEffect, useId, useRef, useState} from 'react'
-import {Box, Button, Dialog, Grid, Stack} 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 {Geopoint, GeopointSchemaType, GoogleMapsInputConfig, LatLng} from '../types'
-import {getGeoConfig} from '../global-workaround'
-import {DialogInnerContainer, PreviewImage} from './GeopointInput.styles'
-import {GeopointSelect} from './GeopointSelect'
-
-const EMPTY_PATH: Path = []
-
-const getStaticImageUrl = (value: LatLng, apiKey: string) => {
-  const loc = `${value.lat},${value.lng}`
-  const qs = new URLSearchParams({
-    key: apiKey,
-    center: loc,
-    markers: loc,
-    zoom: '13',
-    scale: '2',
-    size: '640x300',
-  })
-
-  return `https://maps.googleapis.com/maps/api/staticmap?${qs.toString()}`
-}
-
-export type GeopointInputProps = ObjectInputProps<Geopoint, GeopointSchemaType> & {
-  geoConfig: GoogleMapsInputConfig
-}
-
-export function GeopointInput(props: GeopointInputProps) {
-  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) => {
-      onChange([
-        setIfMissing({_type: schemaTypeName}),
-        set(latLng.lat(), ['lat']),
-        set(latLng.lng(), ['lng']),
-      ])
-    },
-    [schemaTypeName, onChange],
-  )
-
-  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 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"
-            onClick={handleFocusButton}
-            onDoubleClick={handleToggleModal}
-          />
-        </ChangeIndicator>
-      )}
-
-      <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'}
-          />
-
-          {value && (
-            <Button
-              disabled={readOnly}
-              icon={TrashIcon}
-              mode="ghost"
-              onClick={handleClear}
-              padding={3}
-              text="Remove"
-              tone="critical"
-            />
-          )}
-        </Grid>
-      </Box>
-
-      {modalOpen && (
-        <Dialog
-          header="Place the marker on the map"
-          id={`${dialogId}_dialog`}
-          onBlur={handleBlur}
-          onClose={handleCloseModal}
-          ref={dialogRef}
-          width={1}
-        >
-          <DialogInnerContainer>
-            <GoogleMapsLoadProxy config={getGeoConfig()}>
-              {(api) => (
-                <GeopointSelect
-                  api={api}
-                  value={value || undefined}
-                  onChange={readOnly ? undefined : handleChange}
-                  defaultLocation={config.defaultLocation}
-                  defaultZoom={config.defaultZoom}
-                />
-              )}
-            </GoogleMapsLoadProxy>
-          </DialogInnerContainer>
-        </Dialog>
-      )}
-    </Stack>
-  )
-}