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

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;

package/lib/GeopointSelect.js

@@ -1,174 +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 _GeopointSelect = _interopRequireDefault(require("../styles/GeopointSelect.css"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-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 fallbackLatLng = {
-  lat: 40.7058254,
-  lng: -74.1180863
-};
-
-class GeopointSelect extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    this.elementRefs = {};
-  }
-
-  componentDidMount() {
-    var _this$props$api = this.props.api,
-        Circle = _this$props$api.Circle,
-        places = _this$props$api.places,
-        event = _this$props$api.event;
-    var GMap = this.props.api.Map;
-    var geoPoint = this.getValueLatLng();
-    var options = {
-      zoom: this.props.defaultZoom,
-      center: geoPoint
-    };
-    this.mapInstance = new GMap(this.elementRefs.map, options);
-    this.declareMarker();
-    var searchBounds = new Circle({
-      center: geoPoint,
-      radius: 100
-    }).getBounds();
-    var input = this.elementRefs.searchInput;
-    this.autoComplete = new places.Autocomplete(input, {
-      bounds: searchBounds,
-      types: [] // return all kinds of places
-
-    });
-    event.addListener(this.autoComplete, 'place_changed', this.handlePlaceChanged.bind(this));
-    event.addListener(this.mapInstance, 'click', clickEvent => {
-      this.setValue(clickEvent.latLng);
-    });
-  }
-
-  getValueLatLng() {
-    var _this$props = this.props,
-        api = _this$props.api,
-        _this$props$value = _this$props.value,
-        value = _this$props$value === void 0 ? {} : _this$props$value,
-        _this$props$defaultLo = _this$props.defaultLocation,
-        defaultLocation = _this$props$defaultLo === void 0 ? {} : _this$props$defaultLo;
-
-    var point = _objectSpread({}, fallbackLatLng, {}, defaultLocation, {}, value);
-
-    return new api.LatLng(point.lat, point.lng);
-  }
-
-  declareMarker() {
-    if (this.marker) {
-      return this.marker;
-    }
-
-    var _this$props$api2 = this.props.api,
-        Marker = _this$props$api2.Marker,
-        event = _this$props$api2.event;
-    this.marker = new Marker({
-      position: this.getValueLatLng(),
-      map: this.mapInstance,
-      draggable: true
-    });
-    event.addListener(this.marker, 'dragend', this.handleMarkerDragEnd.bind(this));
-    return this.marker;
-  }
-
-  handlePlaceChanged() {
-    var place = this.autoComplete.getPlace();
-
-    if (!place.geometry) {
-      return;
-    }
-
-    this.setValue(place.geometry.location);
-  }
-
-  handleMarkerDragEnd(event) {
-    this.setValue(event.latLng);
-  }
-
-  setValue(geoPoint) {
-    this.props.onChange(geoPoint);
-  }
-
-  componentDidUpdate() {
-    this.mapInstance.panTo(this.getValueLatLng());
-    this.marker.setPosition(this.getValueLatLng());
-    this.elementRefs.searchInput.value = '';
-  }
-
-  assignReference(type) {
-    return el => {
-      this.elementRefs[type] = el;
-    };
-  }
-
-  render() {
-    return _react.default.createElement("div", {
-      className: _GeopointSelect.default.wrapper
-    }, _react.default.createElement("div", {
-      ref: this.assignReference('map'),
-      className: _GeopointSelect.default.map
-    }), _react.default.createElement("div", {
-      className: _GeopointSelect.default.searchInput
-    }, _react.default.createElement("input", {
-      name: "place",
-      ref: this.assignReference('searchInput'),
-      placeholder: "Search for place or address",
-      className: _GeopointSelect.default.input
-    })));
-  }
-
-}
-
-_defineProperty(GeopointSelect, "propTypes", {
-  onChange: _propTypes.default.func.isRequired,
-  value: _propTypes.default.shape({
-    lat: _propTypes.default.number,
-    lng: _propTypes.default.number
-  }),
-  api: _propTypes.default.shape({
-    Map: _propTypes.default.func.isRequired,
-    Circle: _propTypes.default.func.isRequired,
-    Marker: _propTypes.default.func.isRequired,
-    LatLng: _propTypes.default.func.isRequired,
-    places: _propTypes.default.shape({
-      Autocomplete: _propTypes.default.func.isRequired
-    }),
-    event: _propTypes.default.shape({
-      addListener: _propTypes.default.func.isRequired
-    })
-  }).isRequired,
-  defaultLocation: _propTypes.default.shape({
-    lat: _propTypes.default.number,
-    lng: _propTypes.default.number
-  }),
-  defaultZoom: _propTypes.default.number
-});
-
-_defineProperty(GeopointSelect, "defaultProps", {
-  defaultZoom: 8,
-  defaultLocation: {
-    lng: 10.74609,
-    lat: 59.91273
-  }
-});
-
-var _default = GeopointSelect;
-exports.default = _default;

package/lib/GoogleMapsLoadProxy.js

@@ -1,65 +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 _loadGoogleMapsApi = _interopRequireDefault(require("./loadGoogleMapsApi"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-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 GoogleMapsLoadProxy extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      loading: true,
-      error: null
-    };
-  }
-
-  componentDidMount() {
-    (0, _loadGoogleMapsApi.default)(this.props).then(api => this.setState({
-      loading: false,
-      api
-    })).catch(err => this.setState({
-      error: err
-    }));
-  }
-
-  render() {
-    var _this$state = this.state,
-        error = _this$state.error,
-        loading = _this$state.loading,
-        api = _this$state.api;
-
-    if (error) {
-      return _react.default.createElement("div", null, "Load error: ", error.stack);
-    }
-
-    if (loading) {
-      return _react.default.createElement("div", null, "Loading Google Maps API");
-    }
-
-    var GeopointSelect = this.props.component;
-    return _react.default.createElement(GeopointSelect, _extends({}, this.props, {
-      api: api
-    }));
-  }
-
-}
-
-_defineProperty(GoogleMapsLoadProxy, "propTypes", {
-  component: _propTypes.default.func.isRequired
-});
-
-var _default = GoogleMapsLoadProxy;
-exports.default = _default;

package/lib/loadGoogleMapsApi.js

@@ -1,36 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var loadingPromise = null;
-
-function loadGoogleMapsApi(props) {
-  var callbackName = '___sanity_googleMapsApiCallback';
-  var selectedLocale = props.locale || 'en-US';
-  var apiKey = props.apiKey;
-
-  if (window.google && window.google.maps) {
-    return Promise.resolve(window.google.maps);
-  }
-
-  if (window[callbackName]) {
-    return loadingPromise;
-  }
-
-  loadingPromise = new Promise((resolve, reject) => {
-    window[callbackName] = () => {
-      delete window[callbackName];
-      resolve(window.google.maps);
-    };
-
-    var script = document.createElement('script');
-    script.src = "https://maps.googleapis.com/maps/api/js?key=".concat(apiKey, "&libraries=places&callback=").concat(callbackName, "&language=").concat(selectedLocale);
-    document.getElementsByTagName('head')[0].appendChild(script);
-  });
-  return loadingPromise;
-}
-
-var _default = loadGoogleMapsApi;
-exports.default = _default;

package/locale/strings.json

@@ -1,11 +0,0 @@
-{
-  "en-US": {
-    "google-maps.placeOnMap": "Place on map",
-    "google-maps.mapHelpText": "Select location by dragging the marker or search for a place",
-    "google-maps.searchInputPlaceholder": "Search for place or address",
-    "google-maps.button.done": "Done",
-    "google-maps.button.edit": "Edit",
-    "google-maps.button.remove": "Remove",
-    "google-maps.button.setLocation": "Set location"
-  }
-}

package/styles/GeopointInput.css

@@ -1,28 +0,0 @@
-@import "part:@sanity/base/theme/variables-style";
-
-.previewImage {
-  width: 100%;
-  height: auto;
-  vertical-align: top;
-}
-
-.dialogInner {
-  max-width: 100%;
-  max-height: 100%;
-  height: 40rem;
-  width: 50rem;
-  z-index: 0;
-  position: relative;
-  box-sizing: border-box;
-  border-radius: var(--border-radius-large);
-  overflow: hidden;
-}
-
-.functions {
-  composes: functions from 'part:@sanity/components/fieldsets/default-style';
-  padding-top: var(--small-padding);
-
-  @media (--screen-medium) {
-    padding-top: var(--medium-padding);
-  }
-}

package/styles/GeopointSelect.css

@@ -1,27 +0,0 @@
-@import "part:@sanity/base/theme/variables-style";
-
-.wrapper {
-  height: 100%;
-  width: 100%;
-}
-
-.map {
-  height: 100%;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.searchInput {
-  position: absolute;
-  right: 10px;
-  top: 10px;
-  width: 220px;
-}
-
-.input {
-  composes: textInput from "part:@sanity/base/theme/forms/text-input-style";
-}
-
-:global(.pac-container) {
-  z-index: calc(var(--zindex-modal) + 1);
-}