@sanity/google-maps-input 2.29.3 → 2.29.4-purple-unicorn.509

package/lib/input/GeopointInput.cjs

@@ -0,0 +1,227 @@
+'use strict';
+
+var React = require('react');
+var lodash = require('lodash');
+var ui = require('@sanity/ui');
+var icons = require('@sanity/icons');
+var config = require('config:@sanity/google-maps-input');
+var _unstable = require('@sanity/base/_unstable');
+var form = require('@sanity/base/form');
+var Marker = require('../_Marker-ee551fa7.cjs');
+var styled = require('styled-components');
+require('rxjs');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return n;
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var config__default = /*#__PURE__*/_interopDefaultLegacy(config);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const WrapperContainer = styled__default["default"].div `
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  width: 220px;
+`;
+
+class SearchInput extends React__namespace.PureComponent {
+    searchInputRef = React__namespace.createRef();
+    autoComplete;
+    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 (React__namespace.createElement(WrapperContainer, null,
+            React__namespace.createElement(ui.TextInput, { name: "place", ref: this.searchInputRef, placeholder: "Search for place or address", padding: 4 })));
+    }
+}
+
+const fallbackLatLng = { lat: 40.7058254, lng: -74.1180863 };
+class GeopointSelect extends React__default["default"].PureComponent {
+    static defaultProps = {
+        defaultZoom: 8,
+        defaultLocation: { lng: 10.74609, lat: 59.91273 },
+    };
+    mapRef = React__default["default"].createRef();
+    getCenter() {
+        const { value = {}, defaultLocation = {} } = this.props;
+        const point = { ...fallbackLatLng, ...defaultLocation, ...value };
+        return point;
+    }
+    handlePlaceChanged = (place) => {
+        if (!place.geometry) {
+            return;
+        }
+        this.setValue(place.geometry.location);
+    };
+    handleMarkerDragEnd = (event) => {
+        this.setValue(event.latLng);
+    };
+    handleMapClick = (event) => {
+        this.setValue(event.latLng);
+    };
+    setValue(geoPoint) {
+        if (this.props.onChange) {
+            this.props.onChange(geoPoint);
+        }
+    }
+    render() {
+        const { api, defaultZoom, value, onChange } = this.props;
+        return (React__default["default"].createElement(Marker.GoogleMap, { api: api, location: this.getCenter(), onClick: this.handleMapClick, defaultZoom: defaultZoom }, (map) => (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(SearchInput, { api: api, map: map, onChange: this.handlePlaceChanged }),
+            value && (React__default["default"].createElement(Marker.Marker, { api: api, map: map, position: value, onMove: onChange ? this.handleMarkerDragEnd : undefined }))))));
+    }
+}
+
+const PreviewImage = styled__default["default"].img `
+  width: 100%;
+  height: auto;
+  vertical-align: top;
+`;
+const DialogInnerContainer = styled__default["default"].div `
+  height: 40rem;
+  width: 50rem;
+`;
+
+const getStaticImageUrl = (value) => {
+    const loc = `${value.lat},${value.lng}`;
+    const params = {
+        key: config__default["default"].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])}`);
+    }, []);
+    return `https://maps.googleapis.com/maps/api/staticmap?${qs.join('&')}`;
+};
+class GeopointInput extends React__default["default"].PureComponent {
+    _geopointInputId = lodash.uniqueId('GeopointInput');
+    static defaultProps = {
+        validation: [],
+    };
+    editButton;
+    constructor(props) {
+        super(props);
+        this.state = {
+            modalOpen: false,
+        };
+    }
+    setEditButton = (el) => {
+        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) => {
+        const { type, onChange } = this.props;
+        onChange(form.PatchEvent.from([
+            form.setIfMissing({
+                _type: type.name,
+            }),
+            form.set(latLng.lat(), ['lat']),
+            form.set(latLng.lng(), ['lng']),
+        ]));
+    };
+    handleClear = () => {
+        const { onChange } = this.props;
+        onChange(form.PatchEvent.from(form.unset()));
+    };
+    render() {
+        const { value, compareValue, readOnly, type, validation, level, presence } = this.props;
+        const { modalOpen } = this.state;
+        if (!config__default["default"] || !config__default["default"].apiKey) {
+            return (React__default["default"].createElement("div", null,
+                React__default["default"].createElement("p", null,
+                    "The ",
+                    React__default["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["default"].createElement("ul", null,
+                    React__default["default"].createElement("li", null, "Google Maps JavaScript API"),
+                    React__default["default"].createElement("li", null, "Google Places API Web Service"),
+                    React__default["default"].createElement("li", null, "Google Static Maps API")),
+                React__default["default"].createElement("p", null,
+                    "Please enter the API key with access to these services in",
+                    React__default["default"].createElement("code", { style: { whiteSpace: 'nowrap' } }, "`<project-root>/config/@sanity/google-maps-input.json`"))));
+        }
+        return (React__default["default"].createElement(_unstable.FormFieldSet, { level: level, title: type.title, description: type.description, onFocus: this.handleFocus, onBlur: this.handleBlur, __unstable_presence: presence, __unstable_changeIndicator: false, validation: validation },
+            React__default["default"].createElement("div", null,
+                value && (React__default["default"].createElement(_unstable.ChangeIndicatorCompareValueProvider, { value: value, compareValue: compareValue },
+                    React__default["default"].createElement(_unstable.ChangeIndicator, { compareDeep: true },
+                        React__default["default"].createElement(PreviewImage, { src: getStaticImageUrl(value), alt: "Map location" })))),
+                !readOnly && (React__default["default"].createElement(ui.Box, { marginTop: 4 },
+                    React__default["default"].createElement(ui.Grid, { columns: 2, gap: 2 },
+                        React__default["default"].createElement(ui.Button, { mode: "ghost", icon: value && icons.EditIcon, padding: 3, ref: this.setEditButton, text: value ? 'Edit' : 'Set location', onClick: this.handleToggleModal }),
+                        value && (React__default["default"].createElement(ui.Button, { tone: "critical", icon: icons.TrashIcon, padding: 3, mode: "ghost", text: 'Remove', onClick: this.handleClear }))))),
+                modalOpen && (React__default["default"].createElement(ui.Dialog, { id: `${this._geopointInputId}_dialog`, onClose: this.handleCloseModal, header: "Place the marker on the map", width: 1 },
+                    React__default["default"].createElement(DialogInnerContainer, null,
+                        React__default["default"].createElement(Marker.GoogleMapsLoadProxy, null, (api) => (React__default["default"].createElement(GeopointSelect, { api: api, value: value || undefined, onChange: readOnly ? undefined : this.handleChange, defaultLocation: config__default["default"].defaultLocation, defaultZoom: config__default["default"].defaultZoom })))))))));
+    }
+}
+
+module.exports = GeopointInput;
+//# sourceMappingURL=GeopointInput.cjs.map

package/lib/input/GeopointInput.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GeopointInput.cjs","sources":["../../src/map/SearchInput.styles.tsx","../../src/map/SearchInput.tsx","../../src/input/GeopointSelect.tsx","../../src/input/GeopointInput.styles.tsx","../../src/input/GeopointInput.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","import * as React from 'react'\nimport {TextInput} from '@sanity/ui'\nimport {WrapperContainer} from './SearchInput.styles'\n\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","import React from 'react'\nimport {SearchInput} from '../map/SearchInput'\nimport {GoogleMap} from '../map/Map'\nimport {Marker} from '../map/Marker'\nimport {LatLng, Geopoint} from '../types'\n\nconst fallbackLatLng: LatLng = {lat: 40.7058254, lng: -74.1180863}\n\ninterface SelectProps {\n  api: typeof window.google.maps\n  value?: Geopoint\n  onChange?: (latLng: google.maps.LatLng) => void\n  defaultLocation?: LatLng\n  defaultZoom?: number\n}\n\nexport class GeopointSelect extends React.PureComponent<SelectProps> {\n  static defaultProps = {\n    defaultZoom: 8,\n    defaultLocation: {lng: 10.74609, lat: 59.91273},\n  }\n\n  mapRef = React.createRef<HTMLDivElement>()\n\n  getCenter() {\n    const {value = {}, defaultLocation = {}} = this.props\n    const point: LatLng = {...fallbackLatLng, ...defaultLocation, ...value}\n    return point\n  }\n\n  handlePlaceChanged = (place: google.maps.places.PlaceResult) => {\n    if (!place.geometry) {\n      return\n    }\n\n    this.setValue(place.geometry.location)\n  }\n\n  handleMarkerDragEnd = (event: google.maps.MapMouseEvent) => {\n    this.setValue(event.latLng)\n  }\n\n  handleMapClick = (event: google.maps.MapMouseEvent) => {\n    this.setValue(event.latLng)\n  }\n\n  setValue(geoPoint: google.maps.LatLng) {\n    if (this.props.onChange) {\n      this.props.onChange(geoPoint)\n    }\n  }\n\n  render() {\n    const {api, defaultZoom, value, onChange} = this.props\n    return (\n      <GoogleMap\n        api={api}\n        location={this.getCenter()}\n        onClick={this.handleMapClick}\n        defaultZoom={defaultZoom}\n      >\n        {(map) => (\n          <>\n            <SearchInput api={api} map={map} onChange={this.handlePlaceChanged} />\n            {value && (\n              <Marker\n                api={api}\n                map={map}\n                position={value}\n                onMove={onChange ? this.handleMarkerDragEnd : undefined}\n              />\n            )}\n          </>\n        )}\n      </GoogleMap>\n    )\n  }\n}\n","import styled from 'styled-components'\n\nexport const PreviewImage = styled.img`\n  width: 100%;\n  height: auto;\n  vertical-align: top;\n`\n\nexport const DialogInnerContainer = styled.div`\n  height: 40rem;\n  width: 50rem;\n`\n","import React from 'react'\nimport {uniqueId} from 'lodash'\nimport {Box, Grid, Button, Dialog} from '@sanity/ui'\nimport {TrashIcon, EditIcon} from '@sanity/icons'\n// @ts-expect-error TODO: remove the types eventually\nimport config from 'config:@sanity/google-maps-input'\nimport {\n  FormFieldSet,\n  ChangeIndicatorCompareValueProvider,\n  ChangeIndicator,\n} from '@sanity/base/_unstable'\nimport {FormInputProps, PatchEvent, set, setIfMissing, unset} from '@sanity/base/form'\nimport {GoogleMapsLoadProxy} from '../loader/GoogleMapsLoadProxy'\nimport {Geopoint, GeopointSchemaType} from '../types'\nimport {GeopointSelect} from './GeopointSelect'\nimport {PreviewImage, DialogInnerContainer} from './GeopointInput.styles'\n\nconst getStaticImageUrl = (value) => {\n  const loc = `${value.lat},${value.lng}`\n  const params = {\n    key: config.apiKey,\n    center: loc,\n    markers: loc,\n    zoom: 13,\n    scale: 2,\n    size: '640x300',\n  }\n\n  const qs = Object.keys(params).reduce((res, param) => {\n    return res.concat(`${param}=${encodeURIComponent(params[param])}`)\n  }, [] as string[])\n\n  return `https://maps.googleapis.com/maps/api/staticmap?${qs.join('&')}`\n}\n\ntype GeopointInputProps = FormInputProps<Geopoint, GeopointSchemaType>\n\n// @todo\n// interface Focusable {\n//   focus: () => void\n// }\ntype Focusable = any\n\ninterface InputState {\n  modalOpen: boolean\n}\n\nclass GeopointInput extends React.PureComponent<GeopointInputProps, InputState> {\n  _geopointInputId = uniqueId('GeopointInput')\n\n  static defaultProps = {\n    validation: [],\n  }\n\n  editButton: Focusable | undefined\n\n  constructor(props) {\n    super(props)\n\n    this.state = {\n      modalOpen: false,\n    }\n  }\n\n  setEditButton = (el: Focusable) => {\n    this.editButton = el\n  }\n\n  focus() {\n    if (this.editButton) {\n      this.editButton.focus()\n    }\n  }\n\n  handleFocus = (event) => {\n    this.props.onFocus(event)\n  }\n\n  handleBlur = () => {\n    this.props.onBlur?.()\n  }\n\n  handleToggleModal = () => {\n    const {onFocus, onBlur} = this.props\n    this.setState(\n      (prevState) => ({modalOpen: !prevState.modalOpen}),\n      () => {\n        if (this.state.modalOpen) {\n          onFocus(['$'])\n        } else {\n          onBlur?.()\n        }\n      }\n    )\n  }\n\n  handleCloseModal = () => {\n    this.setState({modalOpen: false})\n  }\n\n  handleChange = (latLng: google.maps.LatLng) => {\n    const {type, onChange} = this.props\n    onChange(\n      PatchEvent.from([\n        setIfMissing({\n          _type: type.name,\n        }),\n        set(latLng.lat(), ['lat']),\n        set(latLng.lng(), ['lng']),\n      ])\n    )\n  }\n\n  handleClear = () => {\n    const {onChange} = this.props\n    onChange(PatchEvent.from(unset()))\n  }\n\n  render() {\n    const {value, compareValue, readOnly, type, validation, level, presence} = this.props\n    const {modalOpen} = this.state\n\n    if (!config || !config.apiKey) {\n      return (\n        <div>\n          <p>\n            The <a href=\"https://sanity.io/docs/schema-types/geopoint-type\">Geopoint type</a> needs\n            a Google Maps API key with access to:\n          </p>\n          <ul>\n            <li>Google Maps JavaScript API</li>\n            <li>Google Places API Web Service</li>\n            <li>Google Static Maps API</li>\n          </ul>\n          <p>\n            Please enter the API key with access to these services in\n            <code style={{whiteSpace: 'nowrap'}}>\n              `&lt;project-root&gt;/config/@sanity/google-maps-input.json`\n            </code>\n          </p>\n        </div>\n      )\n    }\n\n    return (\n      <FormFieldSet\n        level={level}\n        title={type.title}\n        description={type.description}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n        __unstable_presence={presence}\n        __unstable_changeIndicator={false}\n        validation={validation}\n      >\n        <div>\n          {value && (\n            <ChangeIndicatorCompareValueProvider value={value} compareValue={compareValue}>\n              <ChangeIndicator compareDeep>\n                <PreviewImage src={getStaticImageUrl(value)} alt=\"Map location\" />\n              </ChangeIndicator>\n            </ChangeIndicatorCompareValueProvider>\n          )}\n\n          {!readOnly && (\n            <Box marginTop={4}>\n              <Grid columns={2} gap={2}>\n                <Button\n                  mode=\"ghost\"\n                  icon={value && EditIcon}\n                  padding={3}\n                  ref={this.setEditButton}\n                  text={value ? 'Edit' : 'Set location'}\n                  onClick={this.handleToggleModal}\n                />\n\n                {value && (\n                  <Button\n                    tone=\"critical\"\n                    icon={TrashIcon}\n                    padding={3}\n                    mode=\"ghost\"\n                    text={'Remove'}\n                    onClick={this.handleClear}\n                  />\n                )}\n              </Grid>\n            </Box>\n          )}\n\n          {modalOpen && (\n            <Dialog\n              id={`${this._geopointInputId}_dialog`}\n              onClose={this.handleCloseModal}\n              header=\"Place the marker on the map\"\n              width={1}\n            >\n              <DialogInnerContainer>\n                <GoogleMapsLoadProxy>\n                  {(api) => (\n                    <GeopointSelect\n                      api={api}\n                      value={value || undefined}\n                      onChange={readOnly ? undefined : this.handleChange}\n                      defaultLocation={config.defaultLocation}\n                      defaultZoom={config.defaultZoom}\n                    />\n                  )}\n                </GoogleMapsLoadProxy>\n              </DialogInnerContainer>\n            </Dialog>\n          )}\n        </div>\n      </FormFieldSet>\n    )\n  }\n}\n\nexport default GeopointInput\n"],"names":["styled","React","TextInput","GoogleMap","Marker","config","uniqueId","PatchEvent","setIfMissing","set","unset","FormFieldSet","ChangeIndicatorCompareValueProvider","ChangeIndicator","Box","Grid","Button","EditIcon","TrashIcon","Dialog","GoogleMapsLoadProxy"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEO,MAAM,gBAAgB,GAAGA,0BAAM,CAAC,GAAG,CAAA,CAAA;;;;;CAKzC;;ACGY,MAAA,WAAY,SAAQC,gBAAK,CAAC,aAAoB,CAAA;AACzD,IAAA,cAAc,GAAGA,gBAAK,CAAC,SAAS,EAAoB,CAAA;AACpD,IAAA,YAAY,CAA6C;IAEzD,YAAY,GAAG,MAAK;AAClB,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,OAAM;AACP,SAAA;AAED,QAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,CAAA;AAEjD,QAAA,IAAI,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE;YAC/B,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAA;AACvC,SAAA;AACH,KAAC,CAAA;IAED,iBAAiB,GAAA;AACf,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAA;QACzC,IAAI,CAAC,KAAK,EAAE;YACV,OAAM;AACP,SAAA;QAED,MAAM,EAAC,GAAG,EAAE,GAAG,EAAC,GAAG,IAAI,CAAC,KAAK,CAAA;QAC7B,MAAM,EAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAC,GAAG,GAAG,CAAA;QACnC,MAAM,YAAY,GAAG,IAAI,MAAM,CAAC,EAAC,MAAM,EAAE,GAAG,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,GAAG,EAAC,CAAC,CAAC,SAAS,EAAE,CAAA;QACnF,IAAI,CAAC,YAAY,GAAG,IAAI,MAAM,CAAC,YAAY,CAAC,KAAK,EAAE;AACjD,YAAA,MAAM,EAAE,YAAY;YACpB,KAAK,EAAE,EAAE;AACV,SAAA,CAAC,CAAA;AAEF,QAAA,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,EAAE,eAAe,EAAE,IAAI,CAAC,YAAY,CAAC,CAAA;KACzE;IAED,MAAM,GAAA;QACJ,QACEA,+BAAC,gBAAgB,EAAA,IAAA;YACfA,gBAAC,CAAA,aAAA,CAAAC,YAAS,IACR,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,cAAc,EACxB,WAAW,EAAC,6BAA6B,EACzC,OAAO,EAAE,CAAC,EAAA,CACV,CACe,EACpB;KACF;AACF;;ACjDD,MAAM,cAAc,GAAW,EAAC,GAAG,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,UAAU,EAAC,CAAA;AAUrD,MAAA,cAAe,SAAQD,yBAAK,CAAC,aAA0B,CAAA;IAClE,OAAO,YAAY,GAAG;AACpB,QAAA,WAAW,EAAE,CAAC;QACd,eAAe,EAAE,EAAC,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAC;KAChD,CAAA;AAED,IAAA,MAAM,GAAGA,yBAAK,CAAC,SAAS,EAAkB,CAAA;IAE1C,SAAS,GAAA;AACP,QAAA,MAAM,EAAC,KAAK,GAAG,EAAE,EAAE,eAAe,GAAG,EAAE,EAAC,GAAG,IAAI,CAAC,KAAK,CAAA;AACrD,QAAA,MAAM,KAAK,GAAW,EAAC,GAAG,cAAc,EAAE,GAAG,eAAe,EAAE,GAAG,KAAK,EAAC,CAAA;AACvE,QAAA,OAAO,KAAK,CAAA;KACb;AAED,IAAA,kBAAkB,GAAG,CAAC,KAAqC,KAAI;AAC7D,QAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;YACnB,OAAM;AACP,SAAA;QAED,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAA;AACxC,KAAC,CAAA;AAED,IAAA,mBAAmB,GAAG,CAAC,KAAgC,KAAI;AACzD,QAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;AAC7B,KAAC,CAAA;AAED,IAAA,cAAc,GAAG,CAAC,KAAgC,KAAI;AACpD,QAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;AAC7B,KAAC,CAAA;AAED,IAAA,QAAQ,CAAC,QAA4B,EAAA;AACnC,QAAA,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;AACvB,YAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAA;AAC9B,SAAA;KACF;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,EAAC,GAAG,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAC,GAAG,IAAI,CAAC,KAAK,CAAA;AACtD,QAAA,QACEA,yBAAA,CAAA,aAAA,CAACE,gBAAS,EAAA,EACR,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,IAAI,CAAC,SAAS,EAAE,EAC1B,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,WAAW,EAAE,WAAW,EAAA,EAEvB,CAAC,GAAG,MACHF,yBAAA,CAAA,aAAA,CAAAA,yBAAA,CAAA,QAAA,EAAA,IAAA;AACE,YAAAA,yBAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,kBAAkB,EAAI,CAAA;AACrE,YAAA,KAAK,KACJA,yBAAA,CAAA,aAAA,CAACG,aAAM,EAAA,EACL,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,KAAK,EACf,MAAM,EAAE,QAAQ,GAAG,IAAI,CAAC,mBAAmB,GAAG,SAAS,GACvD,CACH,CACA,CACJ,CACS,EACb;KACF;;;AC1EI,MAAM,YAAY,GAAGJ,0BAAM,CAAC,GAAG,CAAA,CAAA;;;;CAIrC,CAAA;AAEM,MAAM,oBAAoB,GAAGA,0BAAM,CAAC,GAAG,CAAA,CAAA;;;CAG7C;;ACMD,MAAM,iBAAiB,GAAG,CAAC,KAAK,KAAI;IAClC,MAAM,GAAG,GAAG,CAAA,EAAG,KAAK,CAAC,GAAG,CAAA,CAAA,EAAI,KAAK,CAAC,GAAG,CAAA,CAAE,CAAA;AACvC,IAAA,MAAM,MAAM,GAAG;QACb,GAAG,EAAEK,0BAAM,CAAC,MAAM;AAClB,QAAA,MAAM,EAAE,GAAG;AACX,QAAA,OAAO,EAAE,GAAG;AACZ,QAAA,IAAI,EAAE,EAAE;AACR,QAAA,KAAK,EAAE,CAAC;AACR,QAAA,IAAI,EAAE,SAAS;KAChB,CAAA;AAED,IAAA,MAAM,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,KAAK,KAAI;AACnD,QAAA,OAAO,GAAG,CAAC,MAAM,CAAC,CAAA,EAAG,KAAK,CAAI,CAAA,EAAA,kBAAkB,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAA,CAAE,CAAC,CAAA;KACnE,EAAE,EAAc,CAAC,CAAA;IAElB,OAAO,CAAA,+CAAA,EAAkD,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAA;AACzE,CAAC,CAAA;AAcD,MAAM,aAAc,SAAQJ,yBAAK,CAAC,aAA6C,CAAA;AAC7E,IAAA,gBAAgB,GAAGK,eAAQ,CAAC,eAAe,CAAC,CAAA;IAE5C,OAAO,YAAY,GAAG;AACpB,QAAA,UAAU,EAAE,EAAE;KACf,CAAA;AAED,IAAA,UAAU,CAAuB;AAEjC,IAAA,WAAA,CAAY,KAAK,EAAA;QACf,KAAK,CAAC,KAAK,CAAC,CAAA;QAEZ,IAAI,CAAC,KAAK,GAAG;AACX,YAAA,SAAS,EAAE,KAAK;SACjB,CAAA;KACF;AAED,IAAA,aAAa,GAAG,CAAC,EAAa,KAAI;AAChC,QAAA,IAAI,CAAC,UAAU,GAAG,EAAE,CAAA;AACtB,KAAC,CAAA;IAED,KAAK,GAAA;QACH,IAAI,IAAI,CAAC,UAAU,EAAE;AACnB,YAAA,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAA;AACxB,SAAA;KACF;AAED,IAAA,WAAW,GAAG,CAAC,KAAK,KAAI;AACtB,QAAA,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;AAC3B,KAAC,CAAA;IAED,UAAU,GAAG,MAAK;AAChB,QAAA,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CAAA;AACvB,KAAC,CAAA;IAED,iBAAiB,GAAG,MAAK;QACvB,MAAM,EAAC,OAAO,EAAE,MAAM,EAAC,GAAG,IAAI,CAAC,KAAK,CAAA;QACpC,IAAI,CAAC,QAAQ,CACX,CAAC,SAAS,MAAM,EAAC,SAAS,EAAE,CAAC,SAAS,CAAC,SAAS,EAAC,CAAC,EAClD,MAAK;AACH,YAAA,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE;AACxB,gBAAA,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;AACf,aAAA;AAAM,iBAAA;gBACL,MAAM,IAAI,CAAA;AACX,aAAA;AACH,SAAC,CACF,CAAA;AACH,KAAC,CAAA;IAED,gBAAgB,GAAG,MAAK;QACtB,IAAI,CAAC,QAAQ,CAAC,EAAC,SAAS,EAAE,KAAK,EAAC,CAAC,CAAA;AACnC,KAAC,CAAA;AAED,IAAA,YAAY,GAAG,CAAC,MAA0B,KAAI;QAC5C,MAAM,EAAC,IAAI,EAAE,QAAQ,EAAC,GAAG,IAAI,CAAC,KAAK,CAAA;AACnC,QAAA,QAAQ,CACNC,eAAU,CAAC,IAAI,CAAC;AACd,YAAAC,iBAAY,CAAC;gBACX,KAAK,EAAE,IAAI,CAAC,IAAI;aACjB,CAAC;YACFC,QAAG,CAAC,MAAM,CAAC,GAAG,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC;YAC1BA,QAAG,CAAC,MAAM,CAAC,GAAG,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC;AAC3B,SAAA,CAAC,CACH,CAAA;AACH,KAAC,CAAA;IAED,WAAW,GAAG,MAAK;AACjB,QAAA,MAAM,EAAC,QAAQ,EAAC,GAAG,IAAI,CAAC,KAAK,CAAA;QAC7B,QAAQ,CAACF,eAAU,CAAC,IAAI,CAACG,UAAK,EAAE,CAAC,CAAC,CAAA;AACpC,KAAC,CAAA;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,EAAC,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAC,GAAG,IAAI,CAAC,KAAK,CAAA;AACrF,QAAA,MAAM,EAAC,SAAS,EAAC,GAAG,IAAI,CAAC,KAAK,CAAA;AAE9B,QAAA,IAAI,CAACL,0BAAM,IAAI,CAACA,0BAAM,CAAC,MAAM,EAAE;AAC7B,YAAA,QACEJ,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;AACE,gBAAAA,yBAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA;;oBACMA,yBAAG,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,IAAI,EAAC,mDAAmD,EAAkB,EAAA,eAAA,CAAA;AAE/E,oBAAA,8CAAA,CAAA;AACJ,gBAAAA,yBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA;oBACEA,yBAAmC,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAAA,4BAAA,CAAA;oBACnCA,yBAAsC,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAAA,+BAAA,CAAA;AACtC,oBAAAA,yBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAAA,wBAAA,CAA+B,CAC5B;AACL,gBAAAA,yBAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA;;oBAEEA,yBAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,KAAK,EAAE,EAAC,UAAU,EAAE,QAAQ,EAAC,EAE5B,EAAA,wDAAA,CAAA,CACL,CACA,EACP;AACF,SAAA;AAED,QAAA,QACEA,yBAAC,CAAA,aAAA,CAAAU,sBAAY,IACX,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,mBAAmB,EAAE,QAAQ,EAC7B,0BAA0B,EAAE,KAAK,EACjC,UAAU,EAAE,UAAU,EAAA;AAEtB,YAAAV,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;gBACG,KAAK,KACJA,yBAAA,CAAA,aAAA,CAACW,6CAAmC,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY,EAAA;oBAC3EX,yBAAC,CAAA,aAAA,CAAAY,yBAAe,IAAC,WAAW,EAAA,IAAA,EAAA;AAC1B,wBAAAZ,yBAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,GAAG,EAAE,iBAAiB,CAAC,KAAK,CAAC,EAAE,GAAG,EAAC,cAAc,EAAG,CAAA,CAClD,CACkB,CACvC;gBAEA,CAAC,QAAQ,KACRA,yBAAA,CAAA,aAAA,CAACa,MAAG,EAAC,EAAA,SAAS,EAAE,CAAC,EAAA;oBACfb,yBAAC,CAAA,aAAA,CAAAc,OAAI,IAAC,OAAO,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAA;AACtB,wBAAAd,yBAAA,CAAA,aAAA,CAACe,SAAM,EACL,EAAA,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,KAAK,IAAIC,cAAQ,EACvB,OAAO,EAAE,CAAC,EACV,GAAG,EAAE,IAAI,CAAC,aAAa,EACvB,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,cAAc,EACrC,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,CAAA;AAED,wBAAA,KAAK,KACJhB,yBAAC,CAAA,aAAA,CAAAe,SAAM,IACL,IAAI,EAAC,UAAU,EACf,IAAI,EAAEE,eAAS,EACf,OAAO,EAAE,CAAC,EACV,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,CACzB,CACH,CACI,CACH,CACP;gBAEA,SAAS,KACRjB,yBAAA,CAAA,aAAA,CAACkB,SAAM,EAAA,EACL,EAAE,EAAE,CAAA,EAAG,IAAI,CAAC,gBAAgB,CAAA,OAAA,CAAS,EACrC,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,MAAM,EAAC,6BAA6B,EACpC,KAAK,EAAE,CAAC,EAAA;AAER,oBAAAlB,yBAAA,CAAA,aAAA,CAAC,oBAAoB,EAAA,IAAA;wBACnBA,yBAAC,CAAA,aAAA,CAAAmB,0BAAmB,EACjB,IAAA,EAAA,CAAC,GAAG,MACHnB,yBAAC,CAAA,aAAA,CAAA,cAAc,EACb,EAAA,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,IAAI,SAAS,EACzB,QAAQ,EAAE,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC,YAAY,EAClD,eAAe,EAAEI,0BAAM,CAAC,eAAe,EACvC,WAAW,EAAEA,0BAAM,CAAC,WAAW,EAAA,CAC/B,CACH,CACmB,CACD,CAChB,CACV,CACG,CACO,EAChB;KACF;;;;;"}

package/lib/input/GeopointInput.js

@@ -1,194 +1,201 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _uniqueId2 = _interopRequireDefault(require("lodash/uniqueId"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _ui = require("@sanity/ui");
-
-var _icons = require("@sanity/icons");
-
-var _googleMapsInput = _interopRequireDefault(require("config:@sanity/google-maps-input"));
-
-var _components = require("@sanity/base/components");
-
-var _patchEvent = require("part:@sanity/form-builder/patch-event");
-
-var _changeIndicators = require("@sanity/base/change-indicators");
-
-var _GoogleMapsLoadProxy = require("../loader/GoogleMapsLoadProxy");
-
-var _GeopointSelect = require("./GeopointSelect");
-
-var _GeopointInput = require("./GeopointInput.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; }
-
-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.PureComponent {
-  constructor(props) {
-    super(props);
-
-    _defineProperty(this, "_geopointInputId", (0, _uniqueId2.default)('GeopointInput'));
-
-    _defineProperty(this, "editButton", void 0);
-
-    _defineProperty(this, "setEditButton", el => {
-      this.editButton = el;
-    });
-
-    _defineProperty(this, "handleFocus", event => {
-      this.props.onFocus(event);
-    });
-
-    _defineProperty(this, "handleBlur", () => {
-      this.props.onBlur();
-    });
-
-    _defineProperty(this, "handleToggleModal", () => {
-      var _this$props = this.props,
-          onFocus = _this$props.onFocus,
-          onBlur = _this$props.onBlur;
-      this.setState(prevState => ({
-        modalOpen: !prevState.modalOpen
-      }), () => {
-        if (this.state.modalOpen) {
-          onFocus(['$']);
-        } else {
-          onBlur();
-        }
-      });
-    });
-
-    _defineProperty(this, "handleCloseModal", () => {
-      this.setState({
-        modalOpen: false
-      });
-    });
-
-    _defineProperty(this, "handleChange", latLng => {
-      var _this$props2 = this.props,
-          type = _this$props2.type,
-          onChange = _this$props2.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.state = {
-      modalOpen: false
-    };
-  }
-
-  focus() {
-    if (this.editButton) {
-      this.editButton.focus();
-    }
-  }
-
-  render() {
-    var _this$props3 = this.props,
-        value = _this$props3.value,
-        compareValue = _this$props3.compareValue,
-        readOnly = _this$props3.readOnly,
-        type = _this$props3.type,
-        markers = _this$props3.markers,
-        level = _this$props3.level,
-        presence = _this$props3.presence;
-    var modalOpen = this.state.modalOpen;
-
-    if (!_googleMapsInput.default || !_googleMapsInput.default.apiKey) {
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "The ", /*#__PURE__*/_react.default.createElement("a", {
-        href: "https://sanity.io/docs/schema-types/geopoint-type"
-      }, "Geopoint type"), " needs a Google Maps API key with access to:"), /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, "Google Maps JavaScript API"), /*#__PURE__*/_react.default.createElement("li", null, "Google Places API Web Service"), /*#__PURE__*/_react.default.createElement("li", null, "Google Static Maps API")), /*#__PURE__*/_react.default.createElement("p", null, "Please enter the API key with access to these services in", /*#__PURE__*/_react.default.createElement("code", {
-        style: {
-          whiteSpace: 'nowrap'
-        }
-      }, "`<project-root>/config/@sanity/google-maps-input.json`")));
-    }
-
-    return /*#__PURE__*/_react.default.createElement(_components.FormFieldSet, {
-      level: level,
-      title: type.title,
-      description: type.description,
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur,
-      __unstable_presence: presence,
-      __unstable_changeIndicator: false,
-      __unstable_markers: markers
-    }, /*#__PURE__*/_react.default.createElement("div", null, value && /*#__PURE__*/_react.default.createElement(_changeIndicators.ChangeIndicatorCompareValueProvider, {
-      value: value,
-      compareValue: compareValue
-    }, /*#__PURE__*/_react.default.createElement(_changeIndicators.ChangeIndicator, {
-      compareDeep: true
-    }, /*#__PURE__*/_react.default.createElement(_GeopointInput.PreviewImage, {
-      src: getStaticImageUrl(value),
-      alt: "Map location"
-    }))), !readOnly && /*#__PURE__*/_react.default.createElement(_ui.Box, {
-      marginTop: 4
-    }, /*#__PURE__*/_react.default.createElement(_ui.Grid, {
-      columns: 2,
-      gap: 2
-    }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
-      mode: "ghost",
-      icon: value && _icons.EditIcon,
-      padding: 3,
-      ref: this.setEditButton,
-      text: value ? 'Edit' : 'Set location',
-      onClick: this.handleToggleModal
-    }), value && /*#__PURE__*/_react.default.createElement(_ui.Button, {
-      tone: "critical",
-      icon: _icons.TrashIcon,
-      padding: 3,
-      mode: "ghost",
-      text: 'Remove',
-      onClick: this.handleClear
-    }))), modalOpen && /*#__PURE__*/_react.default.createElement(_ui.Dialog, {
-      id: "".concat(this._geopointInputId, "_dialog"),
-      onClose: this.handleCloseModal,
-      header: "Place the marker on the map",
-      width: 1
-    }, /*#__PURE__*/_react.default.createElement(_GeopointInput.DialogInnerContainer, null, /*#__PURE__*/_react.default.createElement(_GoogleMapsLoadProxy.GoogleMapsLoadProxy, null, api => /*#__PURE__*/_react.default.createElement(_GeopointSelect.GeopointSelect, {
-      api: api,
-      value: value,
-      onChange: readOnly ? undefined : this.handleChange,
-      defaultLocation: _googleMapsInput.default.defaultLocation,
-      defaultZoom: _googleMapsInput.default.defaultZoom
-    }))))));
-  }
+import * as React from 'react';
+import React__default from 'react';
+import { uniqueId } from 'lodash';
+import { TextInput, Box, Grid, Button, Dialog } from '@sanity/ui';
+import { EditIcon, TrashIcon } from '@sanity/icons';
+import config from 'config:@sanity/google-maps-input';
+import { FormFieldSet, ChangeIndicatorCompareValueProvider, ChangeIndicator } from '@sanity/base/_unstable';
+import { PatchEvent, setIfMissing, set, unset } from '@sanity/base/form';
+import { G as GoogleMap, M as Marker, a as GoogleMapsLoadProxy } from '../_Marker-353730d0.js';
+import styled from 'styled-components';
+import 'rxjs';
+
+const WrapperContainer = styled.div `
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  width: 220px;
+`;
+
+class SearchInput extends React.PureComponent {
+    searchInputRef = React.createRef();
+    autoComplete;
+    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 (React.createElement(WrapperContainer, null,
+            React.createElement(TextInput, { name: "place", ref: this.searchInputRef, placeholder: "Search for place or address", padding: 4 })));
+    }
+}
 
+const fallbackLatLng = { lat: 40.7058254, lng: -74.1180863 };
+class GeopointSelect extends React__default.PureComponent {
+    static defaultProps = {
+        defaultZoom: 8,
+        defaultLocation: { lng: 10.74609, lat: 59.91273 },
+    };
+    mapRef = React__default.createRef();
+    getCenter() {
+        const { value = {}, defaultLocation = {} } = this.props;
+        const point = { ...fallbackLatLng, ...defaultLocation, ...value };
+        return point;
+    }
+    handlePlaceChanged = (place) => {
+        if (!place.geometry) {
+            return;
+        }
+        this.setValue(place.geometry.location);
+    };
+    handleMarkerDragEnd = (event) => {
+        this.setValue(event.latLng);
+    };
+    handleMapClick = (event) => {
+        this.setValue(event.latLng);
+    };
+    setValue(geoPoint) {
+        if (this.props.onChange) {
+            this.props.onChange(geoPoint);
+        }
+    }
+    render() {
+        const { api, defaultZoom, value, onChange } = this.props;
+        return (React__default.createElement(GoogleMap, { api: api, location: this.getCenter(), onClick: this.handleMapClick, defaultZoom: defaultZoom }, (map) => (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(SearchInput, { api: api, map: map, onChange: this.handlePlaceChanged }),
+            value && (React__default.createElement(Marker, { api: api, map: map, position: value, onMove: onChange ? this.handleMarkerDragEnd : undefined }))))));
+    }
 }
 
-_defineProperty(GeopointInput, "defaultProps", {
-  markers: []
-});
+const PreviewImage = styled.img `
+  width: 100%;
+  height: auto;
+  vertical-align: top;
+`;
+const DialogInnerContainer = styled.div `
+  height: 40rem;
+  width: 50rem;
+`;
+
+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])}`);
+    }, []);
+    return `https://maps.googleapis.com/maps/api/staticmap?${qs.join('&')}`;
+};
+class GeopointInput extends React__default.PureComponent {
+    _geopointInputId = uniqueId('GeopointInput');
+    static defaultProps = {
+        validation: [],
+    };
+    editButton;
+    constructor(props) {
+        super(props);
+        this.state = {
+            modalOpen: false,
+        };
+    }
+    setEditButton = (el) => {
+        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) => {
+        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 (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(FormFieldSet, { level: level, title: type.title, description: type.description, onFocus: this.handleFocus, onBlur: this.handleBlur, __unstable_presence: presence, __unstable_changeIndicator: false, validation: validation },
+            React__default.createElement("div", null,
+                value && (React__default.createElement(ChangeIndicatorCompareValueProvider, { value: value, compareValue: compareValue },
+                    React__default.createElement(ChangeIndicator, { compareDeep: true },
+                        React__default.createElement(PreviewImage, { src: getStaticImageUrl(value), alt: "Map location" })))),
+                !readOnly && (React__default.createElement(Box, { marginTop: 4 },
+                    React__default.createElement(Grid, { columns: 2, gap: 2 },
+                        React__default.createElement(Button, { mode: "ghost", icon: value && EditIcon, padding: 3, ref: this.setEditButton, text: value ? 'Edit' : 'Set location', onClick: this.handleToggleModal }),
+                        value && (React__default.createElement(Button, { tone: "critical", icon: TrashIcon, padding: 3, mode: "ghost", text: 'Remove', onClick: this.handleClear }))))),
+                modalOpen && (React__default.createElement(Dialog, { id: `${this._geopointInputId}_dialog`, onClose: this.handleCloseModal, header: "Place the marker on the map", width: 1 },
+                    React__default.createElement(DialogInnerContainer, null,
+                        React__default.createElement(GoogleMapsLoadProxy, null, (api) => (React__default.createElement(GeopointSelect, { api: api, value: value || undefined, onChange: readOnly ? undefined : this.handleChange, defaultLocation: config.defaultLocation, defaultZoom: config.defaultZoom })))))))));
+    }
+}
 
-var _default = GeopointInput;
-exports.default = _default;
+export { GeopointInput as default };
+//# sourceMappingURL=GeopointInput.js.map