@sanity/google-maps-input 0.147.10-ts-client.1 → 1.0.0-v2-studio.1

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() {
+    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}
+      </>
+    )
+  }
+}

package/src/map/Marker.tsx

@@ -0,0 +1,132 @@
+import * as React from 'react'
+import {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
+  onMouseOver?: (event: google.maps.MapMouseEvent) => void
+  onMouseOut?: (event: google.maps.MapMouseEvent) => void
+  position: LatLng | google.maps.LatLng
+  zIndex?: number
+  opacity?: number
+  label?: string
+  markerRef?: React.MutableRefObject<google.maps.Marker | undefined>
+  color?: {background: string; border: string; text: string}
+}
+
+export class Marker extends React.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.ReadonlySymbol | 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() {
+    return null
+  }
+}

package/src/map/SearchInput.styles.tsx

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

package/src/map/SearchInput.tsx

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

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

@@ -0,0 +1,16 @@
+import {ObjectSchemaType} from '@sanity/field/diff'
+
+export interface LatLng {
+  lat: number
+  lng: number
+}
+
+export interface Geopoint {
+  _type: 'geopoint'
+  _key?: string
+  lat: number
+  lng: number
+  alt?: number
+}
+
+export type GeopointSchemaType = ObjectSchemaType<Geopoint>

package/example/Main.js

@@ -1,28 +0,0 @@
-import React from 'react'
-import FormBuilder from 'part:@sanity/form-builder'
-import SanityIntlProvider from 'part:@sanity/base/sanity-intl-provider'
-
-export default class QuickstartExample extends React.Component {
-  state = {
-    editorValue: FormBuilder.createEmpty('myTestLocation')
-  }
-
-  handleChange = event => {
-    this.setState({editorValue: this.state.editorValue.patch(event.patch)})
-  }
-
-  handleLogClick = event => {
-    console.log(this.state.editorValue) // eslint-disable-line no-console
-  }
-
-  render() {
-    return (
-      <SanityIntlProvider supportedLanguages={['en-US']}>
-        <FormBuilder value={this.state.editorValue} onChange={this.handleChange} />
-        <button type="button" onClick={this.handleLogClick}>
-          Output current value to console
-        </button>
-      </SanityIntlProvider>
-    )
-  }
-}

package/example/config/.checksums

@@ -1,4 +0,0 @@
-{
-  "#": "Used by Sanity to keep track of configuration file checksums, do not delete or modify!",
-  "@sanity/data-aspects": "ba5c2649cc1b1c39ae92b7daf2661f95fa79d7325073ffd410245d2717b240e9"
-}

package/example/config/@sanity/google-maps-input.json

@@ -1,8 +0,0 @@
-{
-  "apiKey": null,
-  "defaultZoom": 11,
-  "defaultLocation": {
-    "lat": 40.7058254,
-    "lng": -74.1180863
-  }
-}

package/example/sanity.json

@@ -1,33 +0,0 @@
-{
-  "server": {
-    "hostname": "0.0.0.0"
-  },
-  "api": {
-    "dataset": "production",
-    "projectId": "foobar"
-  },
-  "plugins": [
-    "@sanity/base",
-    "@sanity/components",
-    "@sanity/form-builder"
-  ],
-  "parts": [
-    {
-      "implements": "part:@sanity/base/root",
-      "path": "./Main"
-    },
-    {
-      "implements": "part:@sanity/base/schema",
-      "path": "./schema.js"
-    },
-    {
-      "name": "part:@sanity/google-maps-input/input/geopoint",
-      "implements": "part:@sanity/form-builder/input/geopoint",
-      "path": "../src/GeopointInput.js"
-    },
-    {
-      "implements": "part:@sanity/base/locale-messages",
-      "path": "../locale/strings.json"
-    }
-  ]
-}

package/example/schema.js

@@ -1,22 +0,0 @@
-import bundledTypes from 'part:@sanity/base/bundled-types'
-import {keyBy} from 'lodash'
-
-const keyedTypes = keyBy(bundledTypes.types, 'name')
-
-export default {
-  name: 'test',
-  types: [
-    keyedTypes.geopoint,
-    {
-      name: 'myTestLocation',
-      type: 'object',
-      fields: [
-        {
-          name: 'location',
-          type: 'geopoint',
-          title: 'Location'
-        }
-      ]
-    }
-  ]
-}