@sanity/google-maps-input 2.25.4 → 2.26.1-purple-unicorn.560

package/src/diff/GeopointFieldDiff.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react'
+import {
+  DiffComponent,
+  ObjectDiff,
+  DiffProps as GenericDiffProps,
+  DiffTooltip,
+  getAnnotationAtPath,
+} from '@sanity/base/field'
+import {GoogleMapsLoadProxy} from '../loader/GoogleMapsLoadProxy'
+import {GoogleMap} from '../map/Map'
+import {Geopoint} from '../types'
+import {GeopointMove} from './GeopointMove'
+import {RootContainer} from './GeopointFieldDiff.styles'
+
+export type DiffProps = GenericDiffProps<ObjectDiff<Geopoint>>
+
+export const GeopointFieldDiff: DiffComponent<ObjectDiff<Geopoint>> = ({diff, schemaType}) => {
+  return (
+    <RootContainer>
+      <GoogleMapsLoadProxy>
+        {(api) => <GeopointDiff api={api} diff={diff} schemaType={schemaType} />}
+      </GoogleMapsLoadProxy>
+    </RootContainer>
+  )
+}
+
+function GeopointDiff({api, diff}: DiffProps & {api: typeof window.google.maps}) {
+  const {fromValue, toValue} = diff
+  const annotation =
+    getAnnotationAtPath(diff, ['lat']) ||
+    getAnnotationAtPath(diff, ['lng']) ||
+    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) => <GeopointMove api={api} map={map} diff={diff} />}
+        </GoogleMap>
+      </div>
+    </DiffTooltip>
+  )
+}
+
+function getBounds(
+  fromValue: google.maps.LatLngLiteral,
+  toValue: google.maps.LatLngLiteral,
+  api: typeof window.google.maps
+): google.maps.LatLngBounds {
+  return new api.LatLngBounds().extend(fromValue).extend(toValue)
+}
+
+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<Geopoint>) {
+  const {fromValue, toValue} = diff
+  if (fromValue && toValue) {
+    return 'Moved'
+  } else if (fromValue) {
+    return 'Removed'
+  } else if (toValue) {
+    return 'Added'
+  }
+
+  return 'Unchanged'
+}

package/src/diff/GeopointMove.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react'
+import {useUserColor} from '@sanity/base/user-color'
+import {ObjectDiff} from '@sanity/base/field'
+import {Marker} from '../map/Marker'
+import {Arrow} from '../map/Arrow'
+import {Geopoint} from '../types'
+
+interface Props {
+  api: typeof window.google.maps
+  map: google.maps.Map
+  diff: ObjectDiff<Geopoint>
+  label?: string
+}
+
+export function GeopointMove({diff, api, map, label}: Props) {
+  const {fromValue: from, toValue: to} = diff
+  const annotation = diff.isChanged ? diff.annotation : undefined
+  const userColor = useUserColor(annotation ? annotation.author : null) || undefined
+  const fromRef = React.useRef<google.maps.Marker>()
+  const toRef = React.useRef<google.maps.Marker>()
+
+  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

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

package/src/input/GeopointInput.styles.tsx

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

package/src/input/GeopointInput.tsx

@@ -0,0 +1,221 @@
+// @todo: remove the following line when part imports has been removed from this file
+///<reference types="@sanity/types/parts" />
+
+import React from 'react'
+import {uniqueId} from 'lodash'
+import {Box, Grid, Button, Dialog} from '@sanity/ui'
+import {TrashIcon, EditIcon} from '@sanity/icons'
+import config from 'config:@sanity/google-maps-input'
+import {
+  FormFieldSet,
+  ChangeIndicatorCompareValueProvider,
+  ChangeIndicator,
+} from '@sanity/base/components'
+import {FormInputProps, PatchEvent, set, setIfMissing, unset} from '@sanity/base/form'
+import {GoogleMapsLoadProxy} from '../loader/GoogleMapsLoadProxy'
+import {Geopoint, GeopointSchemaType} from '../types'
+import {GeopointSelect} from './GeopointSelect'
+import {PreviewImage, DialogInnerContainer} from './GeopointInput.styles'
+
+const getStaticImageUrl = (value) => {
+  const loc = `${value.lat},${value.lng}`
+  const params = {
+    key: config.apiKey,
+    center: loc,
+    markers: loc,
+    zoom: 13,
+    scale: 2,
+    size: '640x300',
+  }
+
+  const qs = Object.keys(params).reduce((res, param) => {
+    return res.concat(`${param}=${encodeURIComponent(params[param])}`)
+  }, [] as string[])
+
+  return `https://maps.googleapis.com/maps/api/staticmap?${qs.join('&')}`
+}
+
+type GeopointInputProps = FormInputProps<Geopoint, GeopointSchemaType>
+
+// @todo
+// interface Focusable {
+//   focus: () => void
+// }
+type Focusable = any
+
+interface InputState {
+  modalOpen: boolean
+}
+
+class GeopointInput extends React.PureComponent<GeopointInputProps, InputState> {
+  _geopointInputId = uniqueId('GeopointInput')
+
+  static defaultProps = {
+    validation: [],
+  }
+
+  editButton: Focusable | undefined
+
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      modalOpen: false,
+    }
+  }
+
+  setEditButton = (el: Focusable) => {
+    this.editButton = el
+  }
+
+  focus() {
+    if (this.editButton) {
+      this.editButton.focus()
+    }
+  }
+
+  handleFocus = (event) => {
+    this.props.onFocus(event)
+  }
+
+  handleBlur = () => {
+    this.props.onBlur?.()
+  }
+
+  handleToggleModal = () => {
+    const {onFocus, onBlur} = this.props
+    this.setState(
+      (prevState) => ({modalOpen: !prevState.modalOpen}),
+      () => {
+        if (this.state.modalOpen) {
+          onFocus(['$'])
+        } else {
+          onBlur?.()
+        }
+      }
+    )
+  }
+
+  handleCloseModal = () => {
+    this.setState({modalOpen: false})
+  }
+
+  handleChange = (latLng: google.maps.LatLng) => {
+    const {type, onChange} = this.props
+    onChange(
+      PatchEvent.from([
+        setIfMissing({
+          _type: type.name,
+        }),
+        set(latLng.lat(), ['lat']),
+        set(latLng.lng(), ['lng']),
+      ])
+    )
+  }
+
+  handleClear = () => {
+    const {onChange} = this.props
+    onChange(PatchEvent.from(unset()))
+  }
+
+  render() {
+    const {value, compareValue, readOnly, type, validation, level, presence} = 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
+            <code style={{whiteSpace: 'nowrap'}}>
+              `&lt;project-root&gt;/config/@sanity/google-maps-input.json`
+            </code>
+          </p>
+        </div>
+      )
+    }
+
+    return (
+      <FormFieldSet
+        level={level}
+        title={type.title}
+        description={type.description}
+        onFocus={this.handleFocus}
+        onBlur={this.handleBlur}
+        __unstable_presence={presence}
+        __unstable_changeIndicator={false}
+        validation={validation}
+      >
+        <div>
+          {value && (
+            <ChangeIndicatorCompareValueProvider value={value} compareValue={compareValue}>
+              <ChangeIndicator compareDeep>
+                <PreviewImage src={getStaticImageUrl(value)} 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>
+                  {(api) => (
+                    <GeopointSelect
+                      api={api}
+                      value={value || undefined}
+                      onChange={readOnly ? undefined : this.handleChange}
+                      defaultLocation={config.defaultLocation}
+                      defaultZoom={config.defaultZoom}
+                    />
+                  )}
+                </GoogleMapsLoadProxy>
+              </DialogInnerContainer>
+            </Dialog>
+          )}
+        </div>
+      </FormFieldSet>
+    )
+  }
+}
+
+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) {
+      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,93 @@
+// @todo: remove the following line when part imports has been removed from this file
+///<reference types="@sanity/types/parts" />
+
+import {Observable, BehaviorSubject} from 'rxjs'
+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'
+}