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

package/lib/map/Map.js

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GoogleMap = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _util = require("./util");
+var _Map = require("./Map.styles");
+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; }
+class GoogleMap extends _react.default.PureComponent {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "state", {
+      map: undefined
+    });
+    _defineProperty(this, "clickHandler", void 0);
+    _defineProperty(this, "mapRef", /*#__PURE__*/_react.default.createRef());
+    _defineProperty(this, "mapEl", null);
+    _defineProperty(this, "attachClickHandler", () => {
+      var map = this.state.map;
+      if (!map) {
+        return;
+      }
+      var _this$props = this.props,
+        api = _this$props.api,
+        onClick = _this$props.onClick;
+      var event = api.event;
+      if (this.clickHandler) {
+        this.clickHandler.remove();
+      }
+      if (onClick) {
+        this.clickHandler = event.addListener(map, 'click', onClick);
+      }
+    });
+    _defineProperty(this, "setMapElement", element => {
+      if (element && element !== this.mapEl) {
+        var _map = this.constructMap(element);
+        this.setState({
+          map: _map
+        }, this.attachClickHandler);
+      }
+      this.mapEl = element;
+    });
+  }
+  componentDidMount() {
+    this.attachClickHandler();
+  }
+  componentDidUpdate(prevProps) {
+    var map = this.state.map;
+    if (!map) {
+      return;
+    }
+    var _this$props2 = this.props,
+      onClick = _this$props2.onClick,
+      location = _this$props2.location,
+      bounds = _this$props2.bounds;
+    if (prevProps.onClick !== onClick) {
+      this.attachClickHandler();
+    }
+    if (!(0, _util.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() {
+    var _this$props3 = this.props,
+      location = _this$props3.location,
+      api = _this$props3.api;
+    return new api.LatLng(location.lat, location.lng);
+  }
+  constructMap(el) {
+    var _this$props4 = this.props,
+      defaultZoom = _this$props4.defaultZoom,
+      api = _this$props4.api,
+      mapTypeControl = _this$props4.mapTypeControl,
+      controlSize = _this$props4.controlSize,
+      bounds = _this$props4.bounds,
+      scrollWheel = _this$props4.scrollWheel;
+    var map = new api.Map(el, {
+      zoom: defaultZoom,
+      center: this.getCenter(),
+      scrollwheel: scrollWheel,
+      streetViewControl: false,
+      mapTypeControl,
+      controlSize
+    });
+    if (bounds) {
+      map.fitBounds(bounds);
+    }
+    return map;
+  }
+  render() {
+    var children = this.props.children;
+    var map = this.state.map;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Map.MapContainer, {
+      ref: this.setMapElement
+    }), children && map ? children(map) : null);
+  }
+}
+exports.GoogleMap = GoogleMap;
+_defineProperty(GoogleMap, "defaultProps", {
+  defaultZoom: 8,
+  scrollWheel: true
+});
+//# sourceMappingURL=Map.js.map

package/lib/map/Map.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Map.js","names":["GoogleMap","React","PureComponent","map","undefined","createRef","state","props","api","onClick","event","clickHandler","remove","addListener","element","mapEl","constructMap","setState","attachClickHandler","componentDidMount","componentDidUpdate","prevProps","location","bounds","latLngAreEqual","panTo","getCenter","equals","fitBounds","componentWillUnmount","LatLng","lat","lng","el","defaultZoom","mapTypeControl","controlSize","scrollWheel","Map","zoom","center","scrollwheel","streetViewControl","render","children","setMapElement"],"sources":["../../src/map/Map.tsx"],"sourcesContent":["import React from 'react'\nimport {LatLng} from '../types'\nimport {latLngAreEqual} from './util'\nimport {MapContainer} from './Map.styles'\n\ninterface MapProps {\n  api: typeof window.google.maps\n  location: LatLng\n  bounds?: google.maps.LatLngBounds\n  defaultZoom?: number\n  mapTypeControl?: boolean\n  scrollWheel?: boolean\n  controlSize?: number\n  onClick?: (event: google.maps.MapMouseEvent) => void\n  children?: (map: google.maps.Map) => React.ReactElement\n}\n\ninterface MapState {\n  map: google.maps.Map | undefined\n}\n\nexport class GoogleMap extends React.PureComponent<MapProps, MapState> {\n  static defaultProps = {\n    defaultZoom: 8,\n    scrollWheel: true,\n  }\n\n  state: MapState = {map: undefined}\n  clickHandler: google.maps.MapsEventListener | undefined\n  mapRef = React.createRef<HTMLDivElement>()\n  mapEl: HTMLDivElement | null = null\n\n  componentDidMount() {\n    this.attachClickHandler()\n  }\n\n  attachClickHandler = () => {\n    const map = this.state.map\n    if (!map) {\n      return\n    }\n\n    const {api, onClick} = this.props\n    const {event} = api\n\n    if (this.clickHandler) {\n      this.clickHandler.remove()\n    }\n\n    if (onClick) {\n      this.clickHandler = event.addListener(map, 'click', onClick)\n    }\n  }\n\n  componentDidUpdate(prevProps: MapProps) {\n    const map = this.state.map\n    if (!map) {\n      return\n    }\n\n    const {onClick, location, bounds} = this.props\n\n    if (prevProps.onClick !== onClick) {\n      this.attachClickHandler()\n    }\n\n    if (!latLngAreEqual(prevProps.location, location)) {\n      map.panTo(this.getCenter())\n    }\n\n    if (bounds && (!prevProps.bounds || !bounds.equals(prevProps.bounds))) {\n      map.fitBounds(bounds)\n    }\n  }\n\n  componentWillUnmount() {\n    if (this.clickHandler) {\n      this.clickHandler.remove()\n    }\n  }\n\n  getCenter(): google.maps.LatLng {\n    const {location, api} = this.props\n    return new api.LatLng(location.lat, location.lng)\n  }\n\n  constructMap(el: HTMLDivElement) {\n    const {defaultZoom, api, mapTypeControl, controlSize, bounds, scrollWheel} = this.props\n\n    const map = new api.Map(el, {\n      zoom: defaultZoom,\n      center: this.getCenter(),\n      scrollwheel: scrollWheel,\n      streetViewControl: false,\n      mapTypeControl,\n      controlSize,\n    })\n\n    if (bounds) {\n      map.fitBounds(bounds)\n    }\n\n    return map\n  }\n\n  setMapElement = (element: HTMLDivElement | null) => {\n    if (element && element !== this.mapEl) {\n      const map = this.constructMap(element)\n      this.setState({map}, this.attachClickHandler)\n    }\n\n    this.mapEl = element\n  }\n\n  render() {\n    const {children} = this.props\n    const {map} = this.state\n    return (\n      <>\n        <MapContainer ref={this.setMapElement} />\n        {children && map ? children(map) : null}\n      </>\n    )\n  }\n}\n"],"mappings":"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"}

package/lib/map/Map.styles.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MapContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var MapContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  box-sizing: border-box;\n"])));
+exports.MapContainer = MapContainer;
+//# sourceMappingURL=Map.styles.js.map

package/lib/map/Map.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Map.styles.js","names":["MapContainer","styled","div"],"sources":["../../src/map/Map.styles.tsx"],"sourcesContent":["import styled from 'styled-components'\n\nexport const MapContainer = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  box-sizing: border-box;\n`\n"],"mappings":";;;;;;AAAA;AAAsC;AAAA;AAAA;AAE/B,IAAMA,YAAY,GAAGC,yBAAM,CAACC,GAAG,iLAOrC;AAAA"}

package/lib/map/Marker.js

@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Marker = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _util = require("./util");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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 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';
+class Marker extends React.PureComponent {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "marker", void 0);
+    _defineProperty(this, "eventHandlers", {});
+  }
+  componentDidMount() {
+    var _this$props = this.props,
+      position = _this$props.position,
+      api = _this$props.api,
+      map = _this$props.map,
+      onMove = _this$props.onMove,
+      zIndex = _this$props.zIndex,
+      opacity = _this$props.opacity,
+      label = _this$props.label,
+      markerRef = _this$props.markerRef,
+      color = _this$props.color;
+    var GMarker = api.Marker;
+    var icon;
+    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) {
+    if (!this.marker) {
+      return;
+    }
+    var _this$props2 = this.props,
+      position = _this$props2.position,
+      onMove = _this$props2.onMove,
+      label = _this$props2.label,
+      zIndex = _this$props2.zIndex,
+      opacity = _this$props2.opacity,
+      map = _this$props2.map;
+    if (prevProps.onMove !== onMove) {
+      this.attachMoveHandler();
+    }
+    if (!(0, _util.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() {
+    var _this$props3 = this.props,
+      api = _this$props3.api,
+      onMove = _this$props3.onMove;
+    if (this.eventHandlers.move) {
+      this.eventHandlers.move.remove();
+    }
+    if (this.marker && onMove) {
+      this.eventHandlers.move = api.event.addListener(this.marker, 'dragend', onMove);
+    }
+  }
+  attachClickHandler() {
+    var _this$props4 = this.props,
+      api = _this$props4.api,
+      onClick = _this$props4.onClick;
+    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;
+  }
+}
+exports.Marker = Marker;
+//# sourceMappingURL=Marker.js.map

package/lib/map/Marker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Marker.js","names":["markerPath","Marker","React","PureComponent","componentDidMount","props","position","api","map","onMove","zIndex","opacity","label","markerRef","color","GMarker","icon","path","fillOpacity","fillColor","background","strokeColor","border","strokeWeight","anchor","Point","labelOrigin","marker","draggable","Boolean","current","attachMoveHandler","attachClickHandler","componentDidUpdate","prevProps","latLngAreEqual","setPosition","setLabel","setZIndex","setOpacity","setMap","componentWillUnmount","eventHandlers","move","remove","event","addListener","onClick","click","render"],"sources":["../../src/map/Marker.tsx"],"sourcesContent":["import * as React from 'react'\nimport {LatLng} from '../types'\nimport {latLngAreEqual} from './util'\n\nconst markerPath =\n  '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'\n\ninterface Props {\n  api: typeof window.google.maps\n  map: google.maps.Map\n  onMove?: (event: google.maps.MapMouseEvent) => void\n  onClick?: (event: google.maps.MapMouseEvent) => void\n  onMouseOver?: (event: google.maps.MapMouseEvent) => void\n  onMouseOut?: (event: google.maps.MapMouseEvent) => void\n  position: LatLng | google.maps.LatLng\n  zIndex?: number\n  opacity?: number\n  label?: string\n  markerRef?: React.MutableRefObject<google.maps.Marker | undefined>\n  color?: {background: string; border: string; text: string}\n}\n\nexport class Marker extends React.PureComponent<Props> {\n  marker: google.maps.Marker | undefined\n\n  eventHandlers: {\n    move?: google.maps.MapsEventListener\n    click?: google.maps.MapsEventListener\n  } = {}\n\n  componentDidMount() {\n    const {position, api, map, onMove, zIndex, opacity, label, markerRef, color} = this.props\n    const {Marker: GMarker} = api\n\n    let icon: google.maps.ReadonlySymbol | undefined\n    if (color) {\n      icon = {\n        path: markerPath,\n        fillOpacity: 1,\n        fillColor: color.background,\n        strokeColor: color.border,\n        strokeWeight: 2,\n        anchor: new api.Point(10, 35),\n        labelOrigin: new api.Point(10, 11),\n      }\n    }\n\n    this.marker = new GMarker({\n      draggable: Boolean(onMove),\n      position,\n      map,\n      zIndex,\n      opacity,\n      label,\n      icon,\n    })\n\n    if (markerRef) {\n      markerRef.current = this.marker\n    }\n\n    this.attachMoveHandler()\n    this.attachClickHandler()\n  }\n\n  componentDidUpdate(prevProps: Props) {\n    if (!this.marker) {\n      return\n    }\n\n    const {position, onMove, label, zIndex, opacity, map} = this.props\n\n    if (prevProps.onMove !== onMove) {\n      this.attachMoveHandler()\n    }\n\n    if (!latLngAreEqual(prevProps.position, position)) {\n      this.marker.setPosition(position)\n    }\n\n    if (prevProps.label !== label) {\n      this.marker.setLabel(label || null)\n    }\n\n    if (prevProps.zIndex !== zIndex) {\n      this.marker.setZIndex(zIndex || null)\n    }\n\n    if (prevProps.opacity !== opacity) {\n      this.marker.setOpacity(opacity || null)\n    }\n\n    if (prevProps.map !== map) {\n      this.marker.setMap(map)\n    }\n  }\n\n  componentWillUnmount() {\n    if (this.eventHandlers.move) {\n      this.eventHandlers.move.remove()\n    }\n\n    if (this.marker) {\n      this.marker.setMap(null)\n    }\n  }\n\n  attachMoveHandler() {\n    const {api, onMove} = this.props\n    if (this.eventHandlers.move) {\n      this.eventHandlers.move.remove()\n    }\n    if (this.marker && onMove) {\n      this.eventHandlers.move = api.event.addListener(this.marker, 'dragend', onMove)\n    }\n  }\n\n  attachClickHandler() {\n    const {api, onClick} = this.props\n    if (this.eventHandlers.click) {\n      this.eventHandlers.click.remove()\n    }\n    if (this.marker && onClick) {\n      this.eventHandlers.click = api.event.addListener(this.marker, 'click', onClick)\n    }\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  render() {\n    return null\n  }\n}\n"],"mappings":"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"}

package/lib/map/SearchInput.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SearchInput = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _ui = require("@sanity/ui");
+var _SearchInput = require("./SearchInput.styles");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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; }
+class SearchInput extends React.PureComponent {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "searchInputRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "autoComplete", void 0);
+    _defineProperty(this, "handleChange", () => {
+      if (!this.autoComplete) {
+        return;
+      }
+      this.props.onChange(this.autoComplete.getPlace());
+      if (this.searchInputRef.current) {
+        this.searchInputRef.current.value = '';
+      }
+    });
+  }
+  componentDidMount() {
+    var input = this.searchInputRef.current;
+    if (!input) {
+      return;
+    }
+    var _this$props = this.props,
+      api = _this$props.api,
+      map = _this$props.map;
+    var Circle = api.Circle,
+      places = api.places,
+      event = api.event;
+    var 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 /*#__PURE__*/React.createElement(_SearchInput.WrapperContainer, null, /*#__PURE__*/React.createElement(_ui.TextInput, {
+      name: "place",
+      ref: this.searchInputRef,
+      placeholder: "Search for place or address",
+      padding: 4
+    }));
+  }
+}
+exports.SearchInput = SearchInput;
+//# sourceMappingURL=SearchInput.js.map

package/lib/map/SearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","names":["SearchInput","React","PureComponent","createRef","autoComplete","props","onChange","getPlace","searchInputRef","current","value","componentDidMount","input","api","map","Circle","places","event","searchBounds","center","getCenter","radius","getBounds","Autocomplete","bounds","types","addListener","handleChange","render"],"sources":["../../src/map/SearchInput.tsx"],"sourcesContent":["import * as React from 'react'\nimport {TextInput} from '@sanity/ui'\nimport {WrapperContainer} from './SearchInput.styles'\ninterface Props {\n  api: typeof window.google.maps\n  map: google.maps.Map\n  onChange: (result: google.maps.places.PlaceResult) => void\n}\n\nexport class SearchInput extends React.PureComponent<Props> {\n  searchInputRef = React.createRef<HTMLInputElement>()\n  autoComplete: google.maps.places.Autocomplete | undefined\n\n  handleChange = () => {\n    if (!this.autoComplete) {\n      return\n    }\n\n    this.props.onChange(this.autoComplete.getPlace())\n\n    if (this.searchInputRef.current) {\n      this.searchInputRef.current.value = ''\n    }\n  }\n\n  componentDidMount() {\n    const input = this.searchInputRef.current\n    if (!input) {\n      return\n    }\n\n    const {api, map} = this.props\n    const {Circle, places, event} = api\n    const searchBounds = new Circle({center: map.getCenter(), radius: 100}).getBounds()\n    this.autoComplete = new places.Autocomplete(input, {\n      bounds: searchBounds,\n      types: [], // return all kinds of places\n    })\n\n    event.addListener(this.autoComplete, 'place_changed', this.handleChange)\n  }\n\n  render() {\n    return (\n      <WrapperContainer>\n        <TextInput\n          name=\"place\"\n          ref={this.searchInputRef}\n          placeholder=\"Search for place or address\"\n          padding={4}\n        />\n      </WrapperContainer>\n    )\n  }\n}\n"],"mappings":";;;;;;AAAA;AACA;AACA;AAAqD;AAAA;AAAA;AAO9C,MAAMA,WAAW,SAASC,KAAK,CAACC,aAAa,CAAQ;EAAA;IAAA;IAAA,qDACzCD,KAAK,CAACE,SAAS,EAAoB;IAAA;IAAA,sCAGrC,MAAM;MACnB,IAAI,CAAC,IAAI,CAACC,YAAY,EAAE;QACtB;MACF;MAEA,IAAI,CAACC,KAAK,CAACC,QAAQ,CAAC,IAAI,CAACF,YAAY,CAACG,QAAQ,EAAE,CAAC;MAEjD,IAAI,IAAI,CAACC,cAAc,CAACC,OAAO,EAAE;QAC/B,IAAI,CAACD,cAAc,CAACC,OAAO,CAACC,KAAK,GAAG,EAAE;MACxC;IACF,CAAC;EAAA;EAEDC,iBAAiB,GAAG;IAClB,IAAMC,KAAK,GAAG,IAAI,CAACJ,cAAc,CAACC,OAAO;IACzC,IAAI,CAACG,KAAK,EAAE;MACV;IACF;IAEA,kBAAmB,IAAI,CAACP,KAAK;MAAtBQ,GAAG,eAAHA,GAAG;MAAEC,GAAG,eAAHA,GAAG;IACf,IAAOC,MAAM,GAAmBF,GAAG,CAA5BE,MAAM;MAAEC,MAAM,GAAWH,GAAG,CAApBG,MAAM;MAAEC,KAAK,GAAIJ,GAAG,CAAZI,KAAK;IAC5B,IAAMC,YAAY,GAAG,IAAIH,MAAM,CAAC;MAACI,MAAM,EAAEL,GAAG,CAACM,SAAS,EAAE;MAAEC,MAAM,EAAE;IAAG,CAAC,CAAC,CAACC,SAAS,EAAE;IACnF,IAAI,CAAClB,YAAY,GAAG,IAAIY,MAAM,CAACO,YAAY,CAACX,KAAK,EAAE;MACjDY,MAAM,EAAEN,YAAY;MACpBO,KAAK,EAAE,EAAE,CAAE;IACb,CAAC,CAAC;;IAEFR,KAAK,CAACS,WAAW,CAAC,IAAI,CAACtB,YAAY,EAAE,eAAe,EAAE,IAAI,CAACuB,YAAY,CAAC;EAC1E;EAEAC,MAAM,GAAG;IACP,oBACE,oBAAC,6BAAgB,qBACf,oBAAC,aAAS;MACR,IAAI,EAAC,OAAO;MACZ,GAAG,EAAE,IAAI,CAACpB,cAAe;MACzB,WAAW,EAAC,6BAA6B;MACzC,OAAO,EAAE;IAAE,EACX,CACe;EAEvB;AACF;AAAC"}

package/lib/map/SearchInput.styles.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WrapperContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var WrapperContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 10px;\n  top: 10px;\n  width: 220px;\n"])));
+exports.WrapperContainer = WrapperContainer;
+//# sourceMappingURL=SearchInput.styles.js.map

package/lib/map/SearchInput.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.styles.js","names":["WrapperContainer","styled","div"],"sources":["../../src/map/SearchInput.styles.tsx"],"sourcesContent":["import styled from 'styled-components'\n\nexport const WrapperContainer = styled.div`\n  position: absolute;\n  right: 10px;\n  top: 10px;\n  width: 220px;\n`\n"],"mappings":";;;;;;AAAA;AAAsC;AAAA;AAAA;AAE/B,IAAMA,gBAAgB,GAAGC,yBAAM,CAACC,GAAG,6IAKzC;AAAA"}

package/lib/map/util.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.latLngAreEqual = latLngAreEqual;
+function latLngAreEqual(latLng1, latLng2) {
+  var lat1 = typeof latLng1.lat === 'function' ? latLng1.lat() : latLng1.lat;
+  var lng1 = typeof latLng1.lng === 'function' ? latLng1.lng() : latLng1.lng;
+  var lat2 = typeof latLng2.lat === 'function' ? latLng2.lat() : latLng2.lat;
+  var lng2 = typeof latLng2.lng === 'function' ? latLng2.lng() : latLng2.lng;
+  return lat1 === lat2 && lng1 === lng2;
+}
+//# sourceMappingURL=util.js.map

package/lib/map/util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","names":["latLngAreEqual","latLng1","latLng2","lat1","lat","lng1","lng","lat2","lng2"],"sources":["../../src/map/util.ts"],"sourcesContent":["import {LatLng} from '../types'\n\nexport function latLngAreEqual(\n  latLng1: LatLng | google.maps.LatLng,\n  latLng2: LatLng | google.maps.LatLng\n) {\n  const lat1 = typeof latLng1.lat === 'function' ? latLng1.lat() : latLng1.lat\n  const lng1 = typeof latLng1.lng === 'function' ? latLng1.lng() : latLng1.lng\n\n  const lat2 = typeof latLng2.lat === 'function' ? latLng2.lat() : latLng2.lat\n  const lng2 = typeof latLng2.lng === 'function' ? latLng2.lng() : latLng2.lng\n\n  return lat1 === lat2 && lng1 === lng2\n}\n"],"mappings":";;;;;;AAEO,SAASA,cAAc,CAC5BC,OAAoC,EACpCC,OAAoC,EACpC;EACA,IAAMC,IAAI,GAAG,OAAOF,OAAO,CAACG,GAAG,KAAK,UAAU,GAAGH,OAAO,CAACG,GAAG,EAAE,GAAGH,OAAO,CAACG,GAAG;EAC5E,IAAMC,IAAI,GAAG,OAAOJ,OAAO,CAACK,GAAG,KAAK,UAAU,GAAGL,OAAO,CAACK,GAAG,EAAE,GAAGL,OAAO,CAACK,GAAG;EAE5E,IAAMC,IAAI,GAAG,OAAOL,OAAO,CAACE,GAAG,KAAK,UAAU,GAAGF,OAAO,CAACE,GAAG,EAAE,GAAGF,OAAO,CAACE,GAAG;EAC5E,IAAMI,IAAI,GAAG,OAAON,OAAO,CAACI,GAAG,KAAK,UAAU,GAAGJ,OAAO,CAACI,GAAG,EAAE,GAAGJ,OAAO,CAACI,GAAG;EAE5E,OAAOH,IAAI,KAAKI,IAAI,IAAIF,IAAI,KAAKG,IAAI;AACvC"}

package/lib/types.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=types.js.map

package/lib/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../src/types.ts"],"sourcesContent":["import {ObjectSchemaType} from '@sanity/field/diff'\n\nexport interface LatLng {\n  lat: number\n  lng: number\n}\n\nexport interface Geopoint {\n  _type: 'geopoint'\n  _key?: string\n  lat: number\n  lng: number\n  alt?: number\n}\n\nexport type GeopointSchemaType = ObjectSchemaType<Geopoint>\n"],"mappings":""}

package/package.json

@@ -1,15 +1,7 @@
 {
   "name": "@sanity/google-maps-input",
-  "version": "0.147.10-ts-client.1+5473a24ff",
+  "version": "1.0.0-v2-studio.1",
   "description": "Sanity plugin providing input handlers for geo-related input types using Google Maps",
-  "main": "lib/index.js",
-  "author": "Sanity.io <hello@sanity.io>",
-  "license": "MIT",
-  "scripts": {
-    "clean": "rimraf lib",
-    "start": "cd example && sanity start",
-    "prepublishOnly": "sanity-check"
-  },
   "keywords": [
     "sanity",
     "cms",
@@ -19,27 +11,71 @@
     "google-maps-input",
     "sanity-plugin"
   ],
-  "devDependencies": {
-    "@sanity/base": "0.147.10-ts-client.1+5473a24ff",
-    "@sanity/check": "0.147.10-ts-client.1+5473a24ff",
-    "@sanity/cli": "0.147.10-ts-client.1+5473a24ff",
-    "@sanity/components": "0.147.10-ts-client.1+5473a24ff",
-    "@sanity/core": "0.147.10-ts-client.1+5473a24ff",
-    "lodash": "^4.17.15",
-    "prop-types": "^15.6.0",
-    "rimraf": "^2.7.1"
-  },
-  "peerDependencies": {
-    "react": "^16.9",
-    "react-dom": "^16.9"
+  "homepage": "https://www.sanity.io/",
+  "bugs": {
+    "url": "https://github.com/sanity-io/google-maps-input/issues"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/sanity-io/sanity.git"
+    "url": "git@github.com:sanity-io/google-maps-input.git"
   },
-  "bugs": {
-    "url": "https://github.com/sanity-io/sanity/issues"
+  "license": "MIT",
+  "author": "Sanity.io <hello@sanity.io>",
+  "main": "lib/input/GeopointInput.js",
+  "types": "./dts/input/GeopointInput.d.ts",
+  "files": [
+    "lib",
+    "dts",
+    "src",
+    "sanity.json",
+    "config.dist.json"
+  ],
+  "scripts": {
+    "prebuild": "npm run clean",
+    "build": "tsc --declaration --emitDeclarationOnly && sanipack build",
+    "clean": "rimraf lib",
+    "lint": "eslint .",
+    "prepare": "husky install",
+    "prepublishOnly": "npm run build",
+    "watch": "sanipack build --watch"
   },
-  "homepage": "https://www.sanity.io/",
-  "gitHead": "5473a24ff3431de02eed65e8b70e3487fb03e2da"
+  "dependencies": {
+    "@sanity/field": "2.35.2",
+    "@sanity/icons": "^1.3.4",
+    "@sanity/types": "2.35.0",
+    "@sanity/ui": "^0.37.22",
+    "lodash": "^4.17.15",
+    "rxjs": "^6.5.3"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^17.3.0",
+    "@commitlint/config-conventional": "^17.3.0",
+    "@sanity/base": "2.35.2",
+    "@sanity/semantic-release-preset": "^2.0.1",
+    "@types/googlemaps": "^3.43.0",
+    "@types/styled-components": "5.1.26",
+    "@typescript-eslint/eslint-plugin": "^5.42.0",
+    "@typescript-eslint/parser": "^5.42.0",
+    "eslint": "^8.27.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-sanity": "^6.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
+    "prettier": "^2.7.1",
+    "prettier-plugin-packagejson": "^2.3.0",
+    "prop-types": "^15.8.1",
+    "react": "17.0.1",
+    "rimraf": "^2.7.1",
+    "sanipack": "^2.1.0",
+    "styled-components": "^5.2.0"
+  },
+  "peerDependencies": {
+    "@sanity/base": "^2.0.0",
+    "react": "^16.9 || ^17",
+    "react-dom": "^16.9 || ^17",
+    "styled-components": "^5.2.0"
+  }
 }

package/sanity.json

@@ -8,7 +8,11 @@
     {
       "name": "part:@sanity/google-maps-input/input/geopoint",
       "implements": "part:@sanity/form-builder/input/geopoint",
-      "path": "GeopointInput.js"
+      "path": "input/GeopointInput"
+    },
+    {
+      "implements": "part:@sanity/base/diff-resolver",
+      "path": "diff/resolver"
     }
   ]
 }

package/src/@types/css.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+  const styles: Record<string, string>
+  export default styles
+}

package/src/diff/GeopointArrayDiff.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react'
+import {
+  ArrayDiff,
+  ObjectDiff,
+  Diff,
+  DiffProps as GenericDiffProps,
+  DiffComponent,
+} from '@sanity/field/diff'
+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<ArrayDiff<Geopoint>>
+
+export const GeopointArrayDiff: DiffComponent<ArrayDiff<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 = (diff.fromValue || []).filter(hasCoordinates)
+  const toValue = (diff.toValue || []).filter(hasCoordinates)
+  if (fromValue.length === 0 && toValue.length === 0) {
+    return null
+  }
+
+  const bounds = getBounds(fromValue, toValue, api)
+  return (
+    <GoogleMap
+      api={api}
+      location={bounds.getCenter().toJSON()}
+      mapTypeControl={false}
+      controlSize={20}
+      bounds={bounds}
+    >
+      {(map) => (
+        <>
+          {diff.items.map(({toIndex, diff: pointDiff}) => {
+            if (!isChangeDiff(pointDiff)) {
+              return null
+            }
+
+            return (
+              <GeopointMove
+                key={toIndex}
+                api={api}
+                map={map}
+                diff={pointDiff}
+                label={`${toIndex}`}
+              />
+            )
+          })}
+        </>
+      )}
+    </GoogleMap>
+  )
+}
+
+function isChangeDiff(diff: Diff): diff is ObjectDiff<Geopoint> {
+  return diff.action !== 'unchanged' && diff.type === 'object'
+}
+
+function hasCoordinates(point: Partial<Geopoint>): point is Geopoint {
+  return typeof point.lat === 'number' && typeof point.lng === 'number'
+}
+
+function getBounds(
+  fromValue: google.maps.LatLngLiteral[] | null | undefined,
+  toValue: google.maps.LatLngLiteral[] | null | undefined,
+  api: typeof window.google.maps
+): google.maps.LatLngBounds {
+  const bounds = new api.LatLngBounds()
+  const points = [...(fromValue || []), ...(toValue || [])]
+  points.forEach((point) => bounds.extend(point))
+  return bounds
+}

package/src/diff/GeopointFieldDiff.styles.tsx

@@ -0,0 +1,20 @@
+import styled from 'styled-components'
+
+export const RootContainer = styled.div`
+  position: relative;
+  min-height: 200px;
+
+  &:empty {
+    background-color: var(--card-skeleton-color-from);
+    display: table;
+    width: 100%;
+  }
+
+  &:empty:after {
+    content: 'Missing/invalid data';
+    display: table-cell;
+    vertical-align: middle;
+    text-align: center;
+    position: relative;
+  }
+`