@mint-ui/map 0.3.5-beta → 0.3.6-beta

package/dist/components/mint-map/MintMap.d.ts

@@ -10,9 +10,14 @@ export interface MintMapProps extends MintMapEvents {
     mapId?: string;
     base?: BaseProps;
     visible?: boolean;
+    center?: Position;
+    zoomLevel?: number;
+    draggable?: boolean;
+    keyboardShortcuts?: boolean;
     markerCache?: boolean;
     markerCachePoolSize?: number;
     boundsChangeThrottlingTime?: number;
+    mapLoadingComponent?: () => JSX.Element;
 }
 export interface MintMapEvents {
     onBoundsChanged?: (bounds: Bounds) => void;
@@ -26,6 +31,7 @@ export declare class Position {
     lng: number;
     offset?: Offset;
     constructor(lat: number, lng: number);
+    static equals(pos1: Position, pos2: Position): boolean;
 }
 export declare class Bounds {
     nw: Position;
@@ -93,4 +99,4 @@ export declare class Polygon extends Drawable {
     constructor(options: PolygonOptions);
     getCenter(): Position;
 }
-export declare function MintMap({ mapType, children, base, ...props }: PropsWithChildren<MintMapProps>): JSX.Element;
+export declare function MintMap({ mapLoadingComponent, mapType, children, base, ...props }: PropsWithChildren<MintMapProps>): JSX.Element;

package/dist/components/mint-map/MintMap.js

@@ -25,6 +25,10 @@ var Position = function () {
     this.lng = lng;
   }
 
+  Position.equals = function (pos1, pos2) {
+    return pos1.lat === pos2.lat && pos1.lng === pos2.lng;
+  };
+
   return Position;
 }();
 
@@ -189,19 +193,25 @@ var DEFAULT_CENTER = {
   lng: 127.0448698
 };
 function MintMap(_a) {
-  var mapType = _a.mapType,
+  var mapLoadingComponent = _a.mapLoadingComponent,
+      mapType = _a.mapType,
       children = _a.children,
       _b = _a.base,
       base = _b === void 0 ? {
     center: DEFAULT_CENTER,
     zoomLevel: 12
   } : _b,
-      props = tslib.__rest(_a, ["mapType", "children", "base"]);
+      props = tslib.__rest(_a, ["mapLoadingComponent", "mapType", "children", "base"]);
 
   var _c = React.useState(),
       controller = _c[0],
       setController = _c[1];
 
+  var loading = React.useMemo(function () {
+    return mapLoadingComponent ? mapLoadingComponent() : React__default["default"].createElement(PointLoading, {
+      text: "Loading"
+    });
+  }, [mapLoadingComponent]);
   React.useEffect(function () {
     if (mapType && mapType.length > 0) {
       setController(undefined);
@@ -232,9 +242,7 @@ function MintMap(_a) {
     mapType: mapType
   }, props, {
     base: base
-  }), children)) : React__default["default"].createElement(PointLoading, {
-    text: "Loading"
-  }));
+  }), children)) : React__default["default"].createElement(React__default["default"].Fragment, null, loading));
 }
 
 function PointLoading(_a) {

package/dist/components/mint-map/core/MintMapController.d.ts

@@ -10,6 +10,8 @@ export declare abstract class MintMapController {
     abstract panningTo(targetCenter: Position): void;
     abstract getZoomLevel(): number;
     abstract setZoomLevel(zoom: number): void;
+    abstract getCenter(): Position;
+    abstract setCenter(position: Position): void;
     abstract createMarker(marker: Marker): void;
     abstract updateMarker(marker: Marker, options: MarkerOptions): void;
     abstract clearDrawable(drawable: Drawable): boolean;

package/dist/components/mint-map/core/MintMapCore.d.ts

@@ -1,3 +1,3 @@
 import { PropsWithChildren } from "react";
 import { MintMapProps } from "../MintMap";
-export declare function MintMapCore({ onLoad, visible, base, children }: PropsWithChildren<MintMapProps>): JSX.Element;
+export declare function MintMapCore({ onLoad, visible, zoomLevel, center, children }: PropsWithChildren<MintMapProps>): JSX.Element;

package/dist/components/mint-map/core/MintMapCore.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var classNames = require('classnames/bind');
 var React = require('react');
+var MintMap = require('../MintMap.js');
 var MintMapProvider = require('./provider/MintMapProvider.js');
 var MintMapCore_module = require('./MintMapCore.module.scss.js');
 
@@ -20,7 +21,8 @@ function MintMapCore(_a) {
   var onLoad = _a.onLoad,
       _b = _a.visible,
       visible = _b === void 0 ? true : _b,
-      base = _a.base,
+      zoomLevel = _a.zoomLevel,
+      center = _a.center,
       children = _a.children;
   var controller = MintMapProvider.useMintMapController();
   var elementRef = React.useRef(null);
@@ -59,21 +61,30 @@ function MintMapCore(_a) {
     };
   }, [controller, elementRef]);
   React.useEffect(function () {
-    if ((base === null || base === void 0 ? void 0 : base.zoomLevel) && controller && mapInitialized) {
+    if (zoomLevel && controller && mapInitialized) {
       var prevZoomLevel = controller === null || controller === void 0 ? void 0 : controller.getZoomLevel();
 
-      if (prevZoomLevel !== base.zoomLevel) {
-        controller === null || controller === void 0 ? void 0 : controller.setZoomLevel(base.zoomLevel);
+      if (prevZoomLevel !== zoomLevel) {
+        controller === null || controller === void 0 ? void 0 : controller.setZoomLevel(zoomLevel);
       }
     }
-  }, [base]);
-  return React__default["default"].createElement("div", {
-    className: cn('mint-map-root'),
-    style: {
-      visibility: visible ? 'inherit' : 'hidden'
+  }, [zoomLevel]);
+  React.useEffect(function () {
+    if (center && controller && mapInitialized) {
+      var prevCenter = controller.getCenter();
+
+      if (!MintMap.Position.equals(prevCenter, center)) {
+        controller === null || controller === void 0 ? void 0 : controller.setCenter(center);
+      }
     }
+  }, [center]);
+  return React__default["default"].createElement("div", {
+    className: cn('mint-map-root')
   }, mapInitialized && children, React__default["default"].createElement("div", {
     className: cn('mint-map-container'),
+    style: {
+      visibility: visible ? 'inherit' : 'hidden'
+    },
     ref: elementRef
   }));
 }

package/dist/components/mint-map/google/GoogleMintMapController.d.ts

@@ -33,4 +33,6 @@ export declare class GoogleMintMapController extends MintMapController {
     panningTo(targetCenter: Position): void;
     getZoomLevel(): number;
     setZoomLevel(zoom: number): void;
+    getCenter(): Position;
+    setCenter(position: Position): void;
 }

package/dist/components/mint-map/google/GoogleMintMapController.js

@@ -396,7 +396,8 @@ var GoogleMintMapController = function (_super) {
                     minZoom: (_c = this.mapProps.base) === null || _c === void 0 ? void 0 : _c.minZoomLevel,
                     zoom: (_d = this.mapProps.base) === null || _d === void 0 ? void 0 : _d.zoomLevel,
                     disableDefaultUI: true,
-                    gestureHandling: 'greedy',
+                    gestureHandling: this.mapProps.draggable === false ? 'none' : 'greedy',
+                    keyboardShortcuts: this.mapProps.keyboardShortcuts === false ? false : true,
                     clickableIcons: false
                   });
                   this.map = map;
@@ -468,6 +469,16 @@ var GoogleMintMapController = function (_super) {
     (_a = this.map) === null || _a === void 0 ? void 0 : _a.setZoom(zoom);
   };
 
+  GoogleMintMapController.prototype.getCenter = function () {
+    return this.getCurrBounds().getCenter();
+  };
+
+  GoogleMintMapController.prototype.setCenter = function (position) {
+    var _a;
+
+    (_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(position);
+  };
+
   return GoogleMintMapController;
 }(MintMapController.MintMapController);
 

package/dist/components/mint-map/naver/NaverMintMapController.d.ts

@@ -36,4 +36,6 @@ export declare class NaverMintMapController extends MintMapController {
     panningTo(targetCenter: Position): void;
     getZoomLevel(): number;
     setZoomLevel(zoom: number): void;
+    getCenter(): Position;
+    setCenter(position: Position): void;
 }

package/dist/components/mint-map/naver/NaverMintMapController.js

@@ -394,6 +394,9 @@ var NaverMintMapController = function (_super) {
                   options = {
                     center: (_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center,
                     zoom: (_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel,
+                    draggable: this.mapProps.draggable === false ? false : true,
+                    scrollWheel: this.mapProps.draggable === false ? false : true,
+                    keyboardShortcuts: this.mapProps.keyboardShortcuts === false ? false : true,
                     logoControl: false,
                     mapDataControl: false,
                     mapTypeControl: false,
@@ -515,6 +518,16 @@ var NaverMintMapController = function (_super) {
     (_a = this.map) === null || _a === void 0 ? void 0 : _a.setZoom(zoom, true);
   };
 
+  NaverMintMapController.prototype.getCenter = function () {
+    return this.getCurrBounds().getCenter();
+  };
+
+  NaverMintMapController.prototype.setCenter = function (position) {
+    var _a;
+
+    (_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(position);
+  };
+
   return NaverMintMapController;
 }(MintMapController.MintMapController);
 

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import { __awaiter, __generator, __extends, __assign, __rest, __spreadArray } from 'tslib';
-import React, { createContext, useContext, useRef, useState, useEffect } from 'react';
+import React, { createContext, useContext, useRef, useState, useEffect, useMemo } from 'react';
 import classNames from 'classnames/bind';
 import styleInject from 'style-inject';
 import { ObjectPool } from '@mint-ui/tools';
@@ -38,7 +38,8 @@ function MintMapCore(_a) {
   var onLoad = _a.onLoad,
       _b = _a.visible,
       visible = _b === void 0 ? true : _b,
-      base = _a.base,
+      zoomLevel = _a.zoomLevel,
+      center = _a.center,
       children = _a.children;
   var controller = useMintMapController();
   var elementRef = useRef(null);
@@ -77,21 +78,30 @@ function MintMapCore(_a) {
     };
   }, [controller, elementRef]);
   useEffect(function () {
-    if ((base === null || base === void 0 ? void 0 : base.zoomLevel) && controller && mapInitialized) {
+    if (zoomLevel && controller && mapInitialized) {
       var prevZoomLevel = controller === null || controller === void 0 ? void 0 : controller.getZoomLevel();
 
-      if (prevZoomLevel !== base.zoomLevel) {
-        controller === null || controller === void 0 ? void 0 : controller.setZoomLevel(base.zoomLevel);
+      if (prevZoomLevel !== zoomLevel) {
+        controller === null || controller === void 0 ? void 0 : controller.setZoomLevel(zoomLevel);
       }
     }
-  }, [base]);
-  return React.createElement("div", {
-    className: cn$2('mint-map-root'),
-    style: {
-      visibility: visible ? 'inherit' : 'hidden'
+  }, [zoomLevel]);
+  useEffect(function () {
+    if (center && controller && mapInitialized) {
+      var prevCenter = controller.getCenter();
+
+      if (!Position.equals(prevCenter, center)) {
+        controller === null || controller === void 0 ? void 0 : controller.setCenter(center);
+      }
     }
+  }, [center]);
+  return React.createElement("div", {
+    className: cn$2('mint-map-root')
   }, mapInitialized && children, React.createElement("div", {
     className: cn$2('mint-map-container'),
+    style: {
+      visibility: visible ? 'inherit' : 'hidden'
+    },
     ref: elementRef
   }));
 }
@@ -791,6 +801,9 @@ var NaverMintMapController = function (_super) {
                   options = {
                     center: (_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center,
                     zoom: (_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel,
+                    draggable: this.mapProps.draggable === false ? false : true,
+                    scrollWheel: this.mapProps.draggable === false ? false : true,
+                    keyboardShortcuts: this.mapProps.keyboardShortcuts === false ? false : true,
                     logoControl: false,
                     mapDataControl: false,
                     mapTypeControl: false,
@@ -912,6 +925,16 @@ var NaverMintMapController = function (_super) {
     (_a = this.map) === null || _a === void 0 ? void 0 : _a.setZoom(zoom, true);
   };
 
+  NaverMintMapController.prototype.getCenter = function () {
+    return this.getCurrBounds().getCenter();
+  };
+
+  NaverMintMapController.prototype.setCenter = function (position) {
+    var _a;
+
+    (_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(position);
+  };
+
   return NaverMintMapController;
 }(MintMapController);
 
@@ -1304,7 +1327,8 @@ var GoogleMintMapController = function (_super) {
                     minZoom: (_c = this.mapProps.base) === null || _c === void 0 ? void 0 : _c.minZoomLevel,
                     zoom: (_d = this.mapProps.base) === null || _d === void 0 ? void 0 : _d.zoomLevel,
                     disableDefaultUI: true,
-                    gestureHandling: 'greedy',
+                    gestureHandling: this.mapProps.draggable === false ? 'none' : 'greedy',
+                    keyboardShortcuts: this.mapProps.keyboardShortcuts === false ? false : true,
                     clickableIcons: false
                   });
                   this.map = map;
@@ -1376,6 +1400,16 @@ var GoogleMintMapController = function (_super) {
     (_a = this.map) === null || _a === void 0 ? void 0 : _a.setZoom(zoom);
   };
 
+  GoogleMintMapController.prototype.getCenter = function () {
+    return this.getCurrBounds().getCenter();
+  };
+
+  GoogleMintMapController.prototype.setCenter = function (position) {
+    var _a;
+
+    (_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(position);
+  };
+
   return GoogleMintMapController;
 }(MintMapController);
 
@@ -1387,6 +1421,10 @@ var Position = function () {
     this.lng = lng;
   }
 
+  Position.equals = function (pos1, pos2) {
+    return pos1.lat === pos2.lat && pos1.lng === pos2.lng;
+  };
+
   return Position;
 }();
 
@@ -1551,19 +1589,25 @@ var DEFAULT_CENTER = {
   lng: 127.0448698
 };
 function MintMap(_a) {
-  var mapType = _a.mapType,
+  var mapLoadingComponent = _a.mapLoadingComponent,
+      mapType = _a.mapType,
       children = _a.children,
       _b = _a.base,
       base = _b === void 0 ? {
     center: DEFAULT_CENTER,
     zoomLevel: 12
   } : _b,
-      props = __rest(_a, ["mapType", "children", "base"]);
+      props = __rest(_a, ["mapLoadingComponent", "mapType", "children", "base"]);
 
   var _c = useState(),
       controller = _c[0],
       setController = _c[1];
 
+  var loading = useMemo(function () {
+    return mapLoadingComponent ? mapLoadingComponent() : React.createElement(PointLoading, {
+      text: "Loading"
+    });
+  }, [mapLoadingComponent]);
   useEffect(function () {
     if (mapType && mapType.length > 0) {
       setController(undefined);
@@ -1594,9 +1638,7 @@ function MintMap(_a) {
     mapType: mapType
   }, props, {
     base: base
-  }), children)) : React.createElement(PointLoading, {
-    text: "Loading"
-  }));
+  }), children)) : React.createElement(React.Fragment, null, loading));
 }
 
 function PointLoading(_a) {

package/dist/index.umd.js

@@ -43,7 +43,8 @@
     var onLoad = _a.onLoad,
         _b = _a.visible,
         visible = _b === void 0 ? true : _b,
-        base = _a.base,
+        zoomLevel = _a.zoomLevel,
+        center = _a.center,
         children = _a.children;
     var controller = useMintMapController();
     var elementRef = React.useRef(null);
@@ -82,21 +83,30 @@
       };
     }, [controller, elementRef]);
     React.useEffect(function () {
-      if ((base === null || base === void 0 ? void 0 : base.zoomLevel) && controller && mapInitialized) {
+      if (zoomLevel && controller && mapInitialized) {
         var prevZoomLevel = controller === null || controller === void 0 ? void 0 : controller.getZoomLevel();
 
-        if (prevZoomLevel !== base.zoomLevel) {
-          controller === null || controller === void 0 ? void 0 : controller.setZoomLevel(base.zoomLevel);
+        if (prevZoomLevel !== zoomLevel) {
+          controller === null || controller === void 0 ? void 0 : controller.setZoomLevel(zoomLevel);
         }
       }
-    }, [base]);
-    return React__default["default"].createElement("div", {
-      className: cn$2('mint-map-root'),
-      style: {
-        visibility: visible ? 'inherit' : 'hidden'
+    }, [zoomLevel]);
+    React.useEffect(function () {
+      if (center && controller && mapInitialized) {
+        var prevCenter = controller.getCenter();
+
+        if (!Position.equals(prevCenter, center)) {
+          controller === null || controller === void 0 ? void 0 : controller.setCenter(center);
+        }
       }
+    }, [center]);
+    return React__default["default"].createElement("div", {
+      className: cn$2('mint-map-root')
     }, mapInitialized && children, React__default["default"].createElement("div", {
       className: cn$2('mint-map-container'),
+      style: {
+        visibility: visible ? 'inherit' : 'hidden'
+      },
       ref: elementRef
     }));
   }
@@ -796,6 +806,9 @@
                     options = {
                       center: (_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center,
                       zoom: (_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel,
+                      draggable: this.mapProps.draggable === false ? false : true,
+                      scrollWheel: this.mapProps.draggable === false ? false : true,
+                      keyboardShortcuts: this.mapProps.keyboardShortcuts === false ? false : true,
                       logoControl: false,
                       mapDataControl: false,
                       mapTypeControl: false,
@@ -917,6 +930,16 @@
       (_a = this.map) === null || _a === void 0 ? void 0 : _a.setZoom(zoom, true);
     };
 
+    NaverMintMapController.prototype.getCenter = function () {
+      return this.getCurrBounds().getCenter();
+    };
+
+    NaverMintMapController.prototype.setCenter = function (position) {
+      var _a;
+
+      (_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(position);
+    };
+
     return NaverMintMapController;
   }(MintMapController);
 
@@ -1309,7 +1332,8 @@
                       minZoom: (_c = this.mapProps.base) === null || _c === void 0 ? void 0 : _c.minZoomLevel,
                       zoom: (_d = this.mapProps.base) === null || _d === void 0 ? void 0 : _d.zoomLevel,
                       disableDefaultUI: true,
-                      gestureHandling: 'greedy',
+                      gestureHandling: this.mapProps.draggable === false ? 'none' : 'greedy',
+                      keyboardShortcuts: this.mapProps.keyboardShortcuts === false ? false : true,
                       clickableIcons: false
                     });
                     this.map = map;
@@ -1381,6 +1405,16 @@
       (_a = this.map) === null || _a === void 0 ? void 0 : _a.setZoom(zoom);
     };
 
+    GoogleMintMapController.prototype.getCenter = function () {
+      return this.getCurrBounds().getCenter();
+    };
+
+    GoogleMintMapController.prototype.setCenter = function (position) {
+      var _a;
+
+      (_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(position);
+    };
+
     return GoogleMintMapController;
   }(MintMapController);
 
@@ -1392,6 +1426,10 @@
       this.lng = lng;
     }
 
+    Position.equals = function (pos1, pos2) {
+      return pos1.lat === pos2.lat && pos1.lng === pos2.lng;
+    };
+
     return Position;
   }();
 
@@ -1556,19 +1594,25 @@
     lng: 127.0448698
   };
   function MintMap(_a) {
-    var mapType = _a.mapType,
+    var mapLoadingComponent = _a.mapLoadingComponent,
+        mapType = _a.mapType,
         children = _a.children,
         _b = _a.base,
         base = _b === void 0 ? {
       center: DEFAULT_CENTER,
       zoomLevel: 12
     } : _b,
-        props = tslib.__rest(_a, ["mapType", "children", "base"]);
+        props = tslib.__rest(_a, ["mapLoadingComponent", "mapType", "children", "base"]);
 
     var _c = React.useState(),
         controller = _c[0],
         setController = _c[1];
 
+    var loading = React.useMemo(function () {
+      return mapLoadingComponent ? mapLoadingComponent() : React__default["default"].createElement(PointLoading, {
+        text: "Loading"
+      });
+    }, [mapLoadingComponent]);
     React.useEffect(function () {
       if (mapType && mapType.length > 0) {
         setController(undefined);
@@ -1599,9 +1643,7 @@
       mapType: mapType
     }, props, {
       base: base
-    }), children)) : React__default["default"].createElement(PointLoading, {
-      text: "Loading"
-    }));
+    }), children)) : React__default["default"].createElement(React__default["default"].Fragment, null, loading));
   }
 
   function PointLoading(_a) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mint-ui/map",
-  "version": "0.3.5-beta",
+  "version": "0.3.6-beta",
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",
   "browser": "./dist/index.umd.js",