react-map4d-map 1.0.7 → 1.0.8

package/dist/components/MFMap.d.ts

@@ -22,26 +22,17 @@ interface MapProps {
     version: string;
     accessKey: string;
     environment?: "dev" | "test" | undefined | null;
-    onMapReady: (map: any, key?: string) => void;
+    onMapReady?: (map: any, key?: string) => void;
     onClickLocation?: (args: any) => void;
     onRightClickLocation?: (args: any) => void;
     onCameraChanging?: (args: any) => void;
     onTilesLoaded?: (args: any) => void;
+    children: any;
 }
-declare class MFMap extends React.Component<MapProps, any> {
-    mapKey: string;
-    callback: string;
-    mapDomRef: any;
-    mapRef: map4d.Map;
-    scriptElement: any;
-    url: string | null;
-    events: any[];
-    constructor(props: MapProps);
-    setMapDomRef(e: any): void;
-    componentWillUnmount(): void;
-    destroy(): void;
-    registerEvent(): void;
-    createCallback(): void;
-    render(): JSX.Element;
-}
+declare const MFMap: {
+    (props: MapProps): JSX.Element;
+    contextType: React.Context<{
+        map: any;
+    }>;
+};
 export default MFMap;

package/dist/context/Map4dContext.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export declare const defaultCt: {
-    map: null;
+    map: any;
 };
 export declare const Map4dContext: import("react").Context<{
-    map: null;
+    map: any;
 }>;

package/dist/index.js

@@ -709,29 +709,6 @@ var MFImageOverlay = function MFImageOverlay(props) {
   return null;
 };
 
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-
-  _setPrototypeOf(subClass, superClass);
-}
-
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-  return _setPrototypeOf(o, p);
-}
-
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return self;
-}
-
 function addLibrary(url, id) {
   var scriptId = "script_" + id;
   var exist = document.getElementById(scriptId);
@@ -758,182 +735,159 @@ var createId = function createId() {
   return uuid;
 };
 
-var MFMap = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(MFMap, _React$Component);
+var MFMap = function MFMap(props) {
+  var mapKey = React.useRef(createId());
+  var callback = React.useRef("callback_" + mapKey.current);
+  var mapDomRef = React.useRef();
+  var mapRef = React.useRef();
+  var scriptElement = React.useRef();
+  var url = React.useRef();
+  var events = React.useRef([]);
+
+  var _useState = React.useState(),
+      map = _useState[0],
+      setMap = _useState[1];
+
+  React.useEffect(function () {
+    var createCallback = function createCallback() {
+      window[callback.current] = function () {
+        if (mapDomRef.current) {
+          var options = props.options;
+          mapRef.current = new window.map4d.Map(mapDomRef.current, options);
+
+          if (props.onMapReady) {
+            props.onMapReady(mapRef.current, mapKey.current);
+          }
+
+          registerEvent();
+          setMap(mapRef.current);
+        } else {
+          console.error("MFMap: map element is NOT found");
+        }
+      };
+    };
 
-  function MFMap(props) {
-    var _this;
+    var urlNew = "https://api" + (props.environment ? "-" + props.environment : "") + ".map4d.vn/sdk/map/js?version=" + props.version + "&key=" + props.accessKey + "&callback=" + callback.current;
 
-    _this = _React$Component.call(this, props) || this;
-    _this.events = [];
-    _this.state = {
-      map: null
-    };
-    _this.mapKey = createId();
-    _this.callback = "callback_" + _this.mapKey;
-    _this.setMapDomRef = _this.setMapDomRef.bind(_assertThisInitialized(_this));
-    return _this;
-  }
+    if (props.mapid) {
+      urlNew += "&mapId=" + props.mapid;
+    }
 
-  var _proto = MFMap.prototype;
+    createCallback();
+    var script = addLibrary(urlNew, mapKey.current);
 
-  _proto.setMapDomRef = function setMapDomRef(e) {
-    this.mapDomRef = e;
-  };
+    if (script) {
+      scriptElement.current = script;
+    }
 
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    this.destroy();
-  };
+    url.current = urlNew;
+    return function () {
+      var destroy = function destroy() {
+        var _events$current, _mapRef$current;
 
-  _proto.destroy = function destroy() {
-    var _this$events, _this$mapRef;
+        delete window[callback.current];
 
-    delete window[this.callback];
+        if (scriptElement.current != null) {
+          scriptElement.current.remove();
+        }
 
-    if (this.scriptElement != null) {
-      this.scriptElement.remove();
-    }
+        (_events$current = events.current) === null || _events$current === void 0 ? void 0 : _events$current.forEach(function (t) {
+          t === null || t === void 0 ? void 0 : t.remove();
+        });
+        (_mapRef$current = mapRef.current) === null || _mapRef$current === void 0 ? void 0 : _mapRef$current.destroy();
+        url.current = undefined;
+      };
 
-    (_this$events = this.events) === null || _this$events === void 0 ? void 0 : _this$events.forEach(function (t) {
-      t === null || t === void 0 ? void 0 : t.remove();
-    });
-    ((_this$mapRef = this.mapRef) === null || _this$mapRef === void 0 ? void 0 : _this$mapRef.destroy) && this.mapRef.destroy();
-    this.url = null;
-  };
+      destroy();
+    };
+  }, [props.environment, props.version, props.accessKey]);
 
-  _proto.registerEvent = function registerEvent() {
-    var _this$mapRef2,
-        _this$mapRef3,
-        _this$mapRef4,
-        _this2 = this;
+  var registerEvent = function registerEvent() {
+    var _mapRef$current2, _mapRef$current3, _mapRef$current4;
 
-    var eventClickMarker = (_this$mapRef2 = this.mapRef) === null || _this$mapRef2 === void 0 ? void 0 : _this$mapRef2.addListener("click", function (args) {
+    var eventClickMarker = (_mapRef$current2 = mapRef.current) === null || _mapRef$current2 === void 0 ? void 0 : _mapRef$current2.addListener("click", function (args) {
       var _args$marker, _args$marker2;
 
       ((_args$marker = args.marker) === null || _args$marker === void 0 ? void 0 : _args$marker.onClick) && ((_args$marker2 = args.marker) === null || _args$marker2 === void 0 ? void 0 : _args$marker2.onClick());
     }, {
       marker: true
     });
-    var eventRightClickMarker = (_this$mapRef3 = this.mapRef) === null || _this$mapRef3 === void 0 ? void 0 : _this$mapRef3.addListener("rightClick", function (args) {
+    var eventRightClickMarker = (_mapRef$current3 = mapRef.current) === null || _mapRef$current3 === void 0 ? void 0 : _mapRef$current3.addListener("rightClick", function (args) {
       var _args$marker3, _args$marker4;
 
       ((_args$marker3 = args.marker) === null || _args$marker3 === void 0 ? void 0 : _args$marker3.onRightClick) && ((_args$marker4 = args.marker) === null || _args$marker4 === void 0 ? void 0 : _args$marker4.onRightClick());
     }, {
       marker: true
     });
-    var eventDragEndMarker = (_this$mapRef4 = this.mapRef) === null || _this$mapRef4 === void 0 ? void 0 : _this$mapRef4.addListener("dragEnd", function (args) {
+    var eventDragEndMarker = (_mapRef$current4 = mapRef.current) === null || _mapRef$current4 === void 0 ? void 0 : _mapRef$current4.addListener("dragEnd", function (args) {
       var _args$marker5, _args$marker6;
 
       ((_args$marker5 = args.marker) === null || _args$marker5 === void 0 ? void 0 : _args$marker5.onDragEnd) && ((_args$marker6 = args.marker) === null || _args$marker6 === void 0 ? void 0 : _args$marker6.onDragEnd());
     }, {
       marker: true
     });
-    this.events = this.events.concat([eventClickMarker, eventRightClickMarker, eventDragEndMarker]);
+    events.current = events.current.concat([eventClickMarker, eventRightClickMarker, eventDragEndMarker]);
 
-    if (this.props.onClickLocation) {
-      var _this$mapRef5;
+    if (props.onClickLocation) {
+      var _mapRef$current5;
 
-      var onClickLocation = (_this$mapRef5 = this.mapRef) === null || _this$mapRef5 === void 0 ? void 0 : _this$mapRef5.addListener("click", function (args) {
-        _this2.props.onClickLocation && _this2.props.onClickLocation(args);
+      var onClickLocation = (_mapRef$current5 = mapRef.current) === null || _mapRef$current5 === void 0 ? void 0 : _mapRef$current5.addListener("click", function (args) {
+        props.onClickLocation && props.onClickLocation(args);
       }, {
         location: true
       });
-      this.events.push(onClickLocation);
+      events.current.push(onClickLocation);
     }
 
-    if (this.props.onRightClickLocation) {
-      var _this$mapRef6;
+    if (props.onRightClickLocation) {
+      var _mapRef$current6;
 
-      var onRightClickLocation = (_this$mapRef6 = this.mapRef) === null || _this$mapRef6 === void 0 ? void 0 : _this$mapRef6.addListener("rightClick", function (args) {
-        _this2.props.onRightClickLocation && _this2.props.onRightClickLocation(args);
+      var onRightClickLocation = (_mapRef$current6 = mapRef.current) === null || _mapRef$current6 === void 0 ? void 0 : _mapRef$current6.addListener("rightClick", function (args) {
+        props.onRightClickLocation && props.onRightClickLocation(args);
       }, {
         location: true
       });
-      this.events.push(onRightClickLocation);
+      events.current.push(onRightClickLocation);
     }
 
-    if (this.props.onTilesLoaded) {
-      var _this$mapRef7;
+    if (props.onTilesLoaded) {
+      var _mapRef$current7;
 
-      var onTilesLoaded = (_this$mapRef7 = this.mapRef) === null || _this$mapRef7 === void 0 ? void 0 : _this$mapRef7.addListener("tilesLoaded", function (args) {
-        _this2.props.onTilesLoaded && _this2.props.onTilesLoaded(args);
+      var onTilesLoaded = (_mapRef$current7 = mapRef.current) === null || _mapRef$current7 === void 0 ? void 0 : _mapRef$current7.addListener("tilesLoaded", function (args) {
+        props.onTilesLoaded && props.onTilesLoaded(args);
       }, {
         location: true
       });
-      this.events.push(onTilesLoaded);
+      events.current.push(onTilesLoaded);
     }
 
-    if (this.props.onCameraChanging) {
-      var _this$mapRef8;
+    if (props.onCameraChanging) {
+      var _mapRef$current8;
 
-      var onCameraChanging = (_this$mapRef8 = this.mapRef) === null || _this$mapRef8 === void 0 ? void 0 : _this$mapRef8.addListener("cameraChanging", function (args) {
-        _this2.props.onCameraChanging && _this2.props.onCameraChanging(args);
+      var onCameraChanging = (_mapRef$current8 = mapRef.current) === null || _mapRef$current8 === void 0 ? void 0 : _mapRef$current8.addListener("cameraChanging", function (args) {
+        props.onCameraChanging && props.onCameraChanging(args);
       }, {
         location: true
       });
-      this.events.push(onCameraChanging);
+      events.current.push(onCameraChanging);
     }
   };
 
-  _proto.createCallback = function createCallback() {
-    var _this3 = this;
-
-    window[this.callback] = function () {
-      if (_this3.mapDomRef) {
-        var options = _this3.props.options;
-        _this3.mapRef = new window.map4d.Map(_this3.mapDomRef, options);
-
-        if (_this3.props.onMapReady) {
-          _this3.props.onMapReady(_this3.mapRef, _this3.mapKey);
-        }
-
-        _this3.registerEvent();
-
-        _this3.setState({
-          map: _this3.mapRef
-        });
-      } else {
-        console.error("MFMap: map element is NOT found");
-      }
-    };
-  };
-
-  _proto.render = function render() {
-    var url = "https://api" + (this.props.environment ? "-" + this.props.environment : "") + ".map4d.vn/sdk/map/js?version=" + this.props.version + "&key=" + this.props.accessKey + "&callback=" + this.callback;
-
-    if (this.props.mapid) {
-      url += "&mapId=" + this.props.mapid;
-    }
-
-    if (url != this.url) {
-      this.destroy();
-      this.createCallback();
-      var script = addLibrary(url, this.mapKey);
-
-      if (script) {
-        this.scriptElement = script;
-      }
-    }
-
-    this.url = url;
-    var newContext = {
-      map: this.state.map
-    };
-    return React__default.createElement(Map4dContext.Provider, {
-      value: newContext
-    }, React__default.createElement("div", {
-      style: {
-        width: '100%',
-        height: '100%',
-        display: 'block'
-      },
-      id: "" + this.mapKey,
-      ref: this.setMapDomRef
-    }), this.props.children);
+  var newContext = {
+    map: map
   };
-
-  return MFMap;
-}(React__default.Component);
+  return React__default.createElement(Map4dContext.Provider, {
+    value: newContext
+  }, React__default.createElement("div", {
+    style: {
+      width: '100%',
+      height: '100%',
+      display: 'block'
+    },
+    id: mapKey.current,
+    ref: mapDomRef.current
+  }), props.children);
+};
 
 MFMap.contextType = Map4dContext;