feat(marker): better validations on did update (#3)

gympass · Aug 2, 2019 · f4af95f · f4af95f
1 parent 24f34a1
commit f4af95f
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 43 deletions.
diff --git a/dist/components/Marker.js b/dist/components/Marker.js
@@ -54,6 +54,12 @@
     return target;
   }
 
+  var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  };
+
   function _classCallCheck(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
       throw new TypeError("Cannot call a class as a function");
@@ -132,20 +138,14 @@
         this.markerPromise = wrappedPromise();
         this.renderMarker();
       }
-    }, {
-      key: 'shouldComponentUpdate',
-      value: function shouldComponentUpdate(nextProps) {
-        if (nextProps.icon.url !== this.props.icon.url) return true;
-
-        return false;
-      }
     }, {
       key: 'componentDidUpdate',
       value: function componentDidUpdate(prevProps) {
-        if (this.props.map !== prevProps.map || this.props.position !== prevProps.position || this.props.icon !== prevProps.icon) {
+        if (this.props.icon.url !== prevProps.icon.url || typeof prevProps.map === 'undefined' && _typeof(this.props.map) === 'object' || this.props.position.lat !== prevProps.position.lat || this.props.position.lng !== prevProps.position.lng) {
           if (this.marker) {
             this.marker.setMap(null);
           }
+
           this.renderMarker();
         }
       }
@@ -217,13 +217,7 @@
     }, {
       key: 'render',
       value: function render() {
-        return _react2.default.createElement(
-          _react.Fragment,
-          null,
-          this.props.children && this.marker ? _react2.default.Children.only(_react2.default.cloneElement(this.props.children, { marker: this.marker,
-            google: this.props.google,
-            map: this.props.map })) : null
-        );
+        return null;
       }
     }]);
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "google-maps-react",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "Google maps container",
   "author": "Fullstack.io <[email protected]>",
   "license": "MIT",

diff --git a/src/components/Marker.js b/src/components/Marker.js
@@ -34,20 +34,21 @@ export class Marker extends React.Component {
     this.renderMarker();
   }
 
-  shouldComponentUpdate(nextProps) {
-    if (nextProps.icon.url !== this.props.icon.url) return true;
-
-    return false;
-  }
-
   componentDidUpdate(prevProps) {
-    if ((this.props.map !== prevProps.map) ||
-      (this.props.position !== prevProps.position) ||
-      (this.props.icon !== prevProps.icon)) {
-        if (this.marker) {
-            this.marker.setMap(null);
-        }
-        this.renderMarker();
+    if (
+      this.props.icon.url !== prevProps.icon.url ||
+      (
+        typeof prevProps.map === 'undefined' &&
+        typeof this.props.map === 'object'
+      ) ||
+      this.props.position.lat !== prevProps.position.lat ||
+      this.props.position.lng !== prevProps.position.lng
+    ) {
+      if (this.marker) {
+        this.marker.setMap(null);
+      }
+
+      this.renderMarker();
     }
   }
 
@@ -110,20 +111,7 @@ export class Marker extends React.Component {
   }
 
   render() {
-    return (
-      <Fragment>
-        {this.props.children && this.marker ?
-          React.Children.only(
-            React.cloneElement(
-              this.props.children, 
-              { marker: this.marker,
-                google: this.props.google,
-                map: this.props.map}
-            )
-          ) : null
-        }
-      </Fragment>
-    )
+    return null;
   }
 }