@nocobase/plugin-map 0.10.0-alpha.5 → 0.10.1-alpha.1

package/lib/client/components/GoogleMaps/Map.js

@@ -0,0 +1,471 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDrawingMode = exports.GoogleMapsComponent = void 0;
+function _icons() {
+  const data = require("@ant-design/icons");
+  _icons = function _icons() {
+    return data;
+  };
+  return data;
+}
+function _css() {
+  const data = require("@emotion/css");
+  _css = function _css() {
+    return data;
+  };
+  return data;
+}
+function _react() {
+  const data = require("@formily/react");
+  _react = function _react() {
+    return data;
+  };
+  return data;
+}
+function _jsApiLoader() {
+  const data = require("@googlemaps/js-api-loader");
+  _jsApiLoader = function _jsApiLoader() {
+    return data;
+  };
+  return data;
+}
+function _client() {
+  const data = require("@nocobase/client");
+  _client = function _client() {
+    return data;
+  };
+  return data;
+}
+function _ahooks() {
+  const data = require("ahooks");
+  _ahooks = function _ahooks() {
+    return data;
+  };
+  return data;
+}
+function _antd() {
+  const data = require("antd");
+  _antd = function _antd() {
+    return data;
+  };
+  return data;
+}
+function _react2() {
+  const data = _interopRequireWildcard(require("react"));
+  _react2 = function _react2() {
+    return data;
+  };
+  return data;
+}
+function _reactRouter() {
+  const data = require("react-router");
+  _reactRouter = function _reactRouter() {
+    return data;
+  };
+  return data;
+}
+var _constants = require("../../constants");
+var _hooks = require("../../hooks");
+var _locale = require("../../locale");
+var _Search = require("./Search");
+var _utils = require("./utils");
+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 asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+const getDrawingMode = type => {
+  if (type === 'point') {
+    return 'marker';
+  } else if (type === 'lineString') {
+    return 'polyline';
+  }
+  return type;
+};
+exports.getDrawingMode = getDrawingMode;
+const methodMapping = {
+  point: {
+    propertyKey: 'position',
+    overlay: 'Marker'
+  },
+  polygon: {
+    propertyKey: 'paths',
+    overlay: 'Polygon'
+  },
+  lineString: {
+    propertyKey: 'path',
+    overlay: 'Polyline'
+  },
+  circle: {
+    transformOptions(value) {
+      return {
+        center: new google.maps.LatLng(value[1], value[0]),
+        radius: value[2]
+      };
+    },
+    overlay: 'Circle'
+  }
+};
+const GoogleMapsComponent = _react2().default.forwardRef((props, ref) => {
+  const value = props.value,
+    onChange = props.onChange,
+    _props$block = props.block,
+    block = _props$block === void 0 ? false : _props$block,
+    readonly = props.readonly,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? block : _props$disabled,
+    _props$zoom = props.zoom,
+    zoom = _props$zoom === void 0 ? 13 : _props$zoom,
+    overlayCommonOptions = props.overlayCommonOptions;
+  const _ref = (0, _hooks.useMapConfiguration)(props.mapType) || {},
+    accessKey = _ref.accessKey;
+  const _useMapTranslation = (0, _locale.useMapTranslation)(),
+    t = _useMapTranslation.t;
+  const _useCollection = (0, _client().useCollection)(),
+    getField = _useCollection.getField;
+  const fieldSchema = (0, _react().useFieldSchema)();
+  const drawingManagerRef = (0, _react2().useRef)();
+  const map = (0, _react2().useRef)();
+  const overlayRef = (0, _react2().useRef)();
+  const _useState = (0, _react2().useState)([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    needUpdateFlag = _useState2[0],
+    forceUpdate = _useState2[1];
+  const _useState3 = (0, _react2().useState)(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    errMessage = _useState4[0],
+    setErrMessage = _useState4[1];
+  const api = (0, _client().useAPIClient)();
+  const type = (0, _react2().useMemo)(() => {
+    if (props.type) return props.type;
+    const collectionField = getField(fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.name);
+    return collectionField === null || collectionField === void 0 ? void 0 : collectionField.interface;
+  }, [props === null || props === void 0 ? void 0 : props.type, fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.name]);
+  const drawingMode = (0, _react2().useRef)(getDrawingMode(type));
+  const _useState5 = (0, _react2().useState)(_objectSpread({
+      strokeWeight: 5,
+      strokeColor: '#4e9bff',
+      fillColor: '#4e9bff',
+      strokeOpacity: 1,
+      editable: !disabled,
+      draggable: !disabled
+    }, overlayCommonOptions)),
+    _useState6 = _slicedToArray(_useState5, 1),
+    commonOptions = _useState6[0];
+  const navigate = (0, _reactRouter().useNavigate)();
+  const mapContainerRef = (0, _react2().useRef)();
+  const cleanupOverlayListenersRef = (0, _react2().useRef)(new Set());
+  const onAndOffListenOverlay = (0, _ahooks().useMemoizedFn)(target => {
+    cleanupOverlayListenersRef.current.forEach(cb => {
+      cleanupOverlayListenersRef.current.delete(cb);
+    });
+    if ('getPath' in target) {
+      const mvcArray = target.getPath();
+      ['insert_at', 'remove_at', 'set_at'].forEach(event => {
+        cleanupOverlayListenersRef.current.add(mvcArray.addListener(event, () => {
+          onMapChange(target, true);
+        }).remove);
+      });
+    } else if (target instanceof google.maps.Circle) {
+      ['center_changed', 'radius_changed'].forEach(event => {
+        cleanupOverlayListenersRef.current.add(target.addListener(event, () => {
+          onMapChange(target, true);
+        }).remove);
+      });
+    }
+  });
+  const toRemoveOverlay = (0, _ahooks().useMemoizedFn)(() => {
+    if (overlayRef.current) {
+      overlayRef.current.unbindAll();
+      overlayRef.current.setMap(null);
+    }
+    if (type !== 'point') {
+      var _drawingManagerRef$cu;
+      (_drawingManagerRef$cu = drawingManagerRef.current) === null || _drawingManagerRef$cu === void 0 ? void 0 : _drawingManagerRef$cu.setDrawingMode(null);
+    }
+  });
+  const toCenter = (0, _ahooks().useMemoizedFn)(position => {
+    if (map.current) {
+      map.current.setCenter(position);
+      map.current.setZoom(zoom);
+    }
+  });
+  const setupOverlay = (0, _ahooks().useMemoizedFn)(nextOverlay => {
+    toRemoveOverlay();
+    onAndOffListenOverlay(nextOverlay);
+    overlayRef.current = nextOverlay;
+  });
+  const setFitView = (0, _ahooks().useMemoizedFn)(overlays => {
+    const bounds = new google.maps.LatLngBounds();
+    overlays.forEach(overlay => {
+      if (overlay instanceof google.maps.Marker) {
+        bounds.extend(overlay.getPosition());
+      } else if (overlay instanceof google.maps.Polyline || overlay instanceof google.maps.Polygon) {
+        const path = overlay.getPath();
+        for (let i = 0; i < path.getLength(); i++) {
+          bounds.extend(path.getAt(i));
+        }
+      } else if (overlay instanceof google.maps.Circle) {
+        bounds.union(overlay.getBounds());
+      }
+    });
+    map.current.setCenter(bounds.getCenter());
+  });
+  const onFocusOverlay = () => {
+    if (overlayRef.current) {
+      setFitView([overlayRef.current]);
+    }
+  };
+  const onMapChange = (0, _ahooks().useMemoizedFn)((target, onlyChange = false) => {
+    let nextValue = null;
+    if (type === 'point') {
+      const _target$getPosition = target.getPosition(),
+        lat = _target$getPosition.lat,
+        lng = _target$getPosition.lng;
+      nextValue = [lng(), lat()];
+    } else if (type === 'polygon' || type === 'lineString') {
+      nextValue = target.getPath().getArray().map(item => [item.lng(), item.lat()]);
+      if (nextValue.length < 2) {
+        return;
+      }
+    } else if (type === 'circle') {
+      const center = target.getCenter();
+      const radius = target.getRadius();
+      nextValue = [center.lng(), center.lat(), radius];
+    }
+    if (!onlyChange) {
+      setupOverlay(target);
+    }
+    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
+  });
+  const createDraw = (0, _ahooks().useMemoizedFn)((onlyCreate = false, additionalOptions) => {
+    const currentOptions = _objectSpread(_objectSpread(_objectSpread({}, commonOptions), additionalOptions), {}, {
+      map: map.current
+    });
+    drawingManagerRef.current = new google.maps.drawing.DrawingManager({
+      drawingMode: drawingMode.current,
+      drawingControl: false,
+      markerOptions: _objectSpread(_objectSpread({}, currentOptions), {}, {
+        icon: (0, _utils.getIcon)(_constants.defaultImage)
+      }),
+      polygonOptions: currentOptions,
+      polylineOptions: currentOptions,
+      circleOptions: currentOptions,
+      map: map.current
+    });
+    if (!onlyCreate) {
+      drawingManagerRef.current.addListener('overlaycomplete', event => {
+        const overlay = event.overlay;
+        onMapChange(overlay);
+      });
+    }
+    return drawingManagerRef.current;
+  });
+  const getOverlay = (0, _ahooks().useMemoizedFn)((t = type, v = value, o) => {
+    const mapping = methodMapping[t];
+    if (!mapping) {
+      return;
+    }
+    const options = _objectSpread(_objectSpread({}, commonOptions), {}, {
+      icon: (0, _utils.getIcon)(_constants.defaultImage)
+    }, o);
+    if ('transformOptions' in mapping) {
+      Object.assign(options, mapping.transformOptions(v));
+    } else if ('propertyKey' in mapping) {
+      options[mapping.propertyKey] = Array.isArray(v[0]) ? v.map(item => {
+        return new google.maps.LatLng(item[1], item[0]);
+      }) : new google.maps.LatLng(v[1], v[0]);
+    }
+    const overlay = new google.maps[mapping.overlay](options);
+    return overlay;
+  });
+  const setOverlay = (0, _ahooks().useMemoizedFn)((t = type, v = value, o) => {
+    if (!map.current) return;
+    const nextOverlay = getOverlay(t, v, _objectSpread(_objectSpread({}, o), {}, {
+      map: map.current
+    }));
+    return nextOverlay;
+  });
+  // edit mode
+  (0, _react2().useEffect)(() => {
+    if (!map.current) return;
+    if (!value || !readonly && overlayRef.current) {
+      return;
+    }
+    const nextOverlay = setOverlay();
+    setupOverlay(nextOverlay);
+    // Focus on the overlay
+    setFitView([nextOverlay]);
+  }, [value, needUpdateFlag, type, disabled, readonly, setOverlay, setFitView, setupOverlay]);
+  (0, _react2().useEffect)(() => {
+    if (!accessKey || map.current || !mapContainerRef.current) return;
+    let loader;
+    try {
+      loader = new (_jsApiLoader().Loader)({
+        apiKey: accessKey,
+        version: 'weekly',
+        language: api.auth.getLocale()
+      });
+    } catch (err) {
+      setErrMessage(t('Load google maps failed, Please check the Api key and refresh the page'));
+      return;
+    }
+    // google maps api error
+    const error = console.error;
+    console.error = (err, ...args) => {
+      if (err === null || err === void 0 ? void 0 : err.includes('InvalidKeyMapError')) {
+        setErrMessage(t('Load google maps failed, Please check the Api key and refresh the page'));
+      }
+      error(err, ...args);
+    };
+    Promise.all([loader.importLibrary('drawing'), loader.importLibrary('core'), loader.importLibrary('geometry')]).then( /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(function* (res) {
+        const center = yield (0, _utils.getCurrentPosition)();
+        map.current = new google.maps.Map(mapContainerRef.current, {
+          zoom,
+          center,
+          mapTypeId: google.maps.MapTypeId.ROADMAP,
+          zoomControl: false,
+          streetViewControl: false,
+          panControl: false,
+          mapTypeControl: false,
+          fullscreenControl: false
+        });
+        setErrMessage('');
+        forceUpdate([]);
+      });
+      return function (_x2) {
+        return _ref2.apply(this, arguments);
+      };
+    }()).catch(err => {
+      if (err instanceof Error) {
+        setErrMessage(err.message);
+        return;
+      }
+    });
+    return () => {
+      var _map$current, _drawingManagerRef$cu2;
+      (_map$current = map.current) === null || _map$current === void 0 ? void 0 : _map$current.unbindAll();
+      map.current = null;
+      (_drawingManagerRef$cu2 = drawingManagerRef.current) === null || _drawingManagerRef$cu2 === void 0 ? void 0 : _drawingManagerRef$cu2.unbindAll();
+    };
+  }, [accessKey, api.auth, type, zoom]);
+  (0, _react2().useEffect)(() => {
+    if (!map.current || !type || disabled || drawingManagerRef.current) return;
+    createDraw();
+  }, [createDraw, disabled, needUpdateFlag, type]);
+  (0, _react2().useImperativeHandle)(ref, () => ({
+    setOverlay,
+    getOverlay,
+    setFitView,
+    createDraw,
+    map: map.current,
+    overlay: overlayRef.current,
+    drawingManager: drawingManagerRef.current,
+    errMessage
+  }));
+  const onReset = (0, _ahooks().useMemoizedFn)(() => {
+    const ok = () => {
+      toRemoveOverlay();
+      drawingManagerRef.current.setDrawingMode(drawingMode.current);
+      onChange === null || onChange === void 0 ? void 0 : onChange(null);
+    };
+    _antd().Modal.confirm({
+      title: t('Clear the canvas'),
+      content: t('Are you sure to clear the canvas?'),
+      okText: t('Confirm'),
+      cancelText: t('Cancel'),
+      onOk() {
+        ok();
+      }
+    });
+  });
+  if (!accessKey || errMessage) {
+    return _react2().default.createElement(_antd().Alert, {
+      action: _react2().default.createElement(_antd().Button, {
+        type: "primary",
+        onClick: () => navigate('/admin/settings/map/configuration?tab=google')
+      }, t('Go to the configuration page')),
+      message: errMessage || t('Please configure the Api key first'),
+      type: "error"
+    });
+  }
+  return _react2().default.createElement("div", {
+    className: (0, _css().css)`
+          position: relative;
+          height: 500px;
+        `
+  }, !map.current && _react2().default.createElement("div", {
+    className: (0, _css().css)`
+              position: absolute;
+              inset: 0;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            `
+  }, _react2().default.createElement(_antd().Spin, null)), !disabled ? _react2().default.createElement(_react2().default.Fragment, null, map.current && _react2().default.createElement(_Search.Search, {
+    toCenter: toCenter,
+    mapRef: map
+  }), _react2().default.createElement("div", {
+    className: (0, _css().css)`
+                position: absolute;
+                bottom: 80px;
+                right: 20px;
+                z-index: 10;
+              `
+  }, _react2().default.createElement(_antd().Button, {
+    onClick: onFocusOverlay,
+    disabled: !overlayRef.current,
+    type: "primary",
+    shape: "round",
+    size: "large",
+    icon: _react2().default.createElement(_icons().SyncOutlined, null)
+  })), type === 'lineString' || type === 'polygon' ? _react2().default.createElement("div", {
+    className: (0, _css().css)`
+                  position: absolute;
+                  bottom: 20px;
+                  left: 10px;
+                  z-index: 2;
+                  pointer-events: none;
+                `
+  }, _react2().default.createElement(_antd().Alert, {
+    message: t('Click to select the starting point and double-click to end the drawing'),
+    type: "info"
+  })) : null, _react2().default.createElement("div", {
+    className: (0, _css().css)`
+                position: absolute;
+                bottom: 20px;
+                right: 20px;
+                z-index: 2;
+              `
+  }, _react2().default.createElement(_antd().Button, {
+    disabled: !value,
+    style: {
+      height: '40px'
+    },
+    onClick: onReset,
+    type: "primary",
+    danger: true
+  }, t('Clear')))) : null, _react2().default.createElement("div", {
+    ref: mapContainerRef,
+    className: (0, _css().css)`
+            width: 100%;
+            height: 100%;
+          `,
+    style: props === null || props === void 0 ? void 0 : props.style
+  }));
+});
+exports.GoogleMapsComponent = GoogleMapsComponent;

package/lib/client/components/GoogleMaps/Search.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="google.maps" />
+import React from 'react';
+interface SearchProps {
+    toCenter: (p: any) => void;
+    mapRef: React.RefObject<google.maps.Map>;
+}
+export declare const Search: (props: SearchProps) => React.JSX.Element;
+export default Search;

package/lib/client/components/GoogleMaps/Search.js

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Search = void 0;
+function _css() {
+  const data = require("@emotion/css");
+  _css = function _css() {
+    return data;
+  };
+  return data;
+}
+function _ahooks() {
+  const data = require("ahooks");
+  _ahooks = function _ahooks() {
+    return data;
+  };
+  return data;
+}
+function _antd() {
+  const data = require("antd");
+  _antd = function _antd() {
+    return data;
+  };
+  return data;
+}
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function _react() {
+    return data;
+  };
+  return data;
+}
+var _locale = require("../../locale");
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+const Search = props => {
+  const toCenter = props.toCenter,
+    mapRef = props.mapRef;
+  const _useMapTranslation = (0, _locale.useMapTranslation)(),
+    t = _useMapTranslation.t;
+  const placeSearchRef = (0, _react().useRef)();
+  const _useState = (0, _react().useState)([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    options = _useState2[0],
+    setOptions = _useState2[1];
+  (0, _react().useEffect)(() => {
+    google.maps.importLibrary('places').then(places => {
+      placeSearchRef.current = new places.AutocompleteService();
+    }).catch(() => {
+      _antd().message.error('Please configure the Google API Key correctly');
+    });
+  }, [mapRef]);
+  const _useDebounceFn = (0, _ahooks().useDebounceFn)(keyword => {
+      if (!placeSearchRef.current) {
+        return;
+      }
+      placeSearchRef.current.getPlacePredictions({
+        input: keyword || ' '
+      }, (result, status) => {
+        if (status === google.maps.places.PlacesServiceStatus.OK) {
+          setOptions(result.map(item => {
+            const structured = item.structured_formatting;
+            return _objectSpread(_objectSpread({}, item), {}, {
+              label: `${structured.main_text}${structured.secondary_text ? ' ' + structured.secondary_text : ''}`,
+              value: item.place_id
+            });
+          }));
+        } else {
+          setOptions([]);
+          return;
+        }
+      });
+    }, {
+      wait: 300
+    }),
+    onSearch = _useDebounceFn.run;
+  const onSelect = value => {
+    const place = options.find(o => {
+      return o.value === value;
+    });
+    const service = new google.maps.places.PlacesService(mapRef.current);
+    service.getDetails({
+      placeId: place.place_id,
+      fields: ['geometry']
+    }, (result, status) => {
+      if (status === google.maps.places.PlacesServiceStatus.OK) {
+        toCenter(result.geometry.location);
+      }
+    });
+  };
+  return _react().default.createElement("div", {
+    className: (0, _css().css)`
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        z-index: 10;
+        width: calc(100% - 20px);
+      `
+  }, _react().default.createElement(_antd().Select, {
+    id: "google-map-search",
+    showSearch: true,
+    allowClear: true,
+    style: {
+      background: 'rgba(255, 255, 255, 0.8)'
+    },
+    placeholder: t('Enter keywords to search'),
+    filterOption: false,
+    onSearch: onSearch,
+    onSelect: onSelect,
+    options: options
+  }));
+};
+exports.Search = Search;
+var _default = Search;
+exports.default = _default;

package/lib/client/components/GoogleMaps/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Block';
+export * from './Map';

package/lib/client/components/GoogleMaps/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Block = require("./Block");
+Object.keys(_Block).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Block[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Block[key];
+    }
+  });
+});
+var _Map = require("./Map");
+Object.keys(_Map).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Map[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Map[key];
+    }
+  });
+});

package/lib/client/components/GoogleMaps/utils.d.ts

@@ -0,0 +1,5 @@
+export declare const getIcon: (url: any) => google.maps.Icon;
+export declare const getCurrentPosition: () => Promise<{
+    lat: number;
+    lng: number;
+}>;