@sanity/google-maps-input 0.147.10-next.23 → 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/lib/GeopointInput.js

@@ -1,170 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _googleMapsInput = _interopRequireDefault(require("config:@sanity/google-maps-input"));
-
-var _default2 = _interopRequireDefault(require("part:@sanity/components/buttons/default"));
-
-var _default3 = _interopRequireDefault(require("part:@sanity/components/dialogs/default"));
-
-var _default4 = _interopRequireDefault(require("part:@sanity/components/fieldsets/default"));
-
-var _patchEvent = require("part:@sanity/form-builder/patch-event");
-
-var _GeopointInput = _interopRequireDefault(require("../styles/GeopointInput.css"));
-
-var _GeopointSelect = _interopRequireDefault(require("./GeopointSelect"));
-
-var _GoogleMapsLoadProxy = _interopRequireDefault(require("./GoogleMapsLoadProxy"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var getLocale = context => {
-  var intl = context.intl || {};
-  return intl.locale || typeof window !== 'undefined' && window.navigator.language || 'en';
-};
-
-var getStaticImageUrl = value => {
-  var loc = "".concat(value.lat, ",").concat(value.lng);
-  var params = {
-    key: _googleMapsInput.default.apiKey,
-    center: loc,
-    markers: loc,
-    zoom: 13,
-    scale: 2,
-    size: '640x300'
-  };
-  var qs = Object.keys(params).reduce((res, param) => {
-    return res.concat("".concat(param, "=").concat(encodeURIComponent(params[param])));
-  }, []);
-  return "https://maps.googleapis.com/maps/api/staticmap?".concat(qs.join('&'));
-};
-
-class GeopointInput extends _react.default.Component {
-  constructor() {
-    super();
-
-    _defineProperty(this, "handleChange", latLng => {
-      var _this$props = this.props,
-          type = _this$props.type,
-          onChange = _this$props.onChange;
-      onChange(_patchEvent.PatchEvent.from([(0, _patchEvent.setIfMissing)({
-        _type: type.name
-      }), (0, _patchEvent.set)(latLng.lat(), ['lat']), (0, _patchEvent.set)(latLng.lng(), ['lng'])]));
-    });
-
-    _defineProperty(this, "handleClear", () => {
-      var onChange = this.props.onChange;
-      onChange(_patchEvent.PatchEvent.from((0, _patchEvent.unset)()));
-    });
-
-    this.handleToggleModal = this.handleToggleModal.bind(this);
-    this.handleCloseModal = this.handleCloseModal.bind(this);
-    this.state = {
-      modalOpen: false
-    };
-  }
-
-  handleToggleModal() {
-    this.setState(prevState => ({
-      modalOpen: !prevState.modalOpen
-    }));
-  }
-
-  handleCloseModal() {
-    this.setState({
-      modalOpen: false
-    });
-  }
-
-  render() {
-    var _this$props2 = this.props,
-        value = _this$props2.value,
-        type = _this$props2.type,
-        markers = _this$props2.markers;
-
-    if (!_googleMapsInput.default || !_googleMapsInput.default.apiKey) {
-      return _react.default.createElement("div", null, _react.default.createElement("p", null, "The ", _react.default.createElement("a", {
-        href: "https://sanity.io/docs/schema-types/geopoint-type"
-      }, "Geopoint type"), " needs a Google Maps API key with access to:"), _react.default.createElement("ul", null, _react.default.createElement("li", null, "Google Maps JavaScript API"), _react.default.createElement("li", null, "Google Places API Web Service"), _react.default.createElement("li", null, "Google Static Maps API")), _react.default.createElement("p", null, "Please enter the API key with access to these services in", _react.default.createElement("code", {
-        style: {
-          whitespace: 'nowrap'
-        }
-      }, "`<project-root>/config/@sanity/google-maps-input.json`")));
-    }
-
-    return _react.default.createElement(_default4.default, {
-      legend: type.title,
-      description: type.description,
-      className: _GeopointInput.default.root,
-      markers: markers
-    }, value && _react.default.createElement("div", null, _react.default.createElement("img", {
-      className: _GeopointInput.default.previewImage,
-      src: getStaticImageUrl(value),
-      alt: "Map location"
-    })), _react.default.createElement("div", {
-      className: _GeopointInput.default.functions
-    }, _react.default.createElement(_default2.default, {
-      onClick: this.handleToggleModal
-    }, value ? 'Edit' : 'Set location'), value && _react.default.createElement(_default2.default, {
-      type: "button",
-      onClick: this.handleClear
-    }, "Remove")), this.state.modalOpen && _react.default.createElement(_default3.default, {
-      title: "Place on map",
-      onClose: this.handleCloseModal,
-      onCloseClick: this.handleCloseModal,
-      onOpen: this.handleOpenModal,
-      message: "Select location by dragging the marker or search for a place",
-      isOpen: this.state.modalOpen
-    }, _react.default.createElement("div", {
-      className: _GeopointInput.default.dialogInner
-    }, _react.default.createElement(_GoogleMapsLoadProxy.default, {
-      value: value,
-      apiKey: _googleMapsInput.default.apiKey,
-      onChange: this.handleChange,
-      defaultLocation: _googleMapsInput.default.defaultLocation,
-      defaultZoom: _googleMapsInput.default.defaultZoom,
-      locale: getLocale(this.context),
-      component: _GeopointSelect.default
-    }))));
-  }
-
-}
-
-_defineProperty(GeopointInput, "propTypes", {
-  onChange: _propTypes.default.func.isRequired,
-  markers: _propTypes.default.arrayOf(_propTypes.default.shape({
-    type: _propTypes.default.string
-  })),
-  value: _propTypes.default.shape({
-    lat: _propTypes.default.number,
-    lng: _propTypes.default.number
-  }),
-  type: _propTypes.default.shape({
-    title: _propTypes.default.string.isRequired,
-    description: _propTypes.default.string
-  })
-});
-
-_defineProperty(GeopointInput, "defaultProps", {
-  markers: []
-});
-
-_defineProperty(GeopointInput, "contextTypes", {
-  intl: _propTypes.default.shape({
-    locale: _propTypes.default.string
-  })
-});
-
-var _default = GeopointInput;
-exports.default = _default;