rerender circle on props change, update README

fullstackreact · Oct 6, 2018 · c5de2a7 · c5de2a7
1 parent 84f5400
commit c5de2a7
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 48 deletions.
diff --git a/README.md b/README.md
@@ -472,7 +472,7 @@ render() {
 
   return (
     <Map
-      center={coords}
+      initialCenter={coords}
       google={this.props.google}
       style={{width: 500, height: 500, position: 'relative'}}
       zoom={14}
@@ -483,12 +483,11 @@ render() {
         onMouseover={() => console.log('mouseover')}
         onClick={() => console.log('click')}
         onMouseout={() => console.log('mouseout')}
-        options={{
-          strokeColor: 'transparent',
-          strokeOpacity: 0,
-          fillColor: '#FF0000',
-          fillOpacity: 0.2,
-        }}
+        strokeColor='transparent'
+        strokeOpacity={0}
+        strokeWeight={5}
+        fillColor='#FF0000'
+        fillOpacity={0.2}
       />
     </Map>
   );

diff --git a/dist/components/Circle.js b/dist/components/Circle.js
@@ -121,9 +121,33 @@
     _inherits(Circle, _React$Component);
 
     function Circle() {
+      var _ref;
+
+      var _temp, _this, _ret;
+
       _classCallCheck(this, Circle);
 
-      return _possibleConstructorReturn(this, (Circle.__proto__ || Object.getPrototypeOf(Circle)).apply(this, arguments));
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Circle.__proto__ || Object.getPrototypeOf(Circle)).call.apply(_ref, [this].concat(args))), _this), _this.centerChanged = function (newCenter) {
+        var _this$props$center = _this.props.center,
+            lat = _this$props$center.lat,
+            lng = _this$props$center.lng;
+
+        return lat !== newCenter.lat || lng !== newCenter.lng;
+      }, _this.propsChanged = function (newProps) {
+        if (_this.centerChanged(newProps.center)) return true;
+
+        return Object.keys(Circle.propTypes).some(function (key) {
+          return _this.props[key] !== newProps[key];
+        });
+      }, _this.destroyCircle = function () {
+        if (_this.circle) {
+          _this.circle.setMap(null);
+        }
+      }, _temp), _possibleConstructorReturn(_this, _ret);
     }
 
     _createClass(Circle, [{
@@ -135,55 +159,58 @@
     }, {
       key: 'componentDidUpdate',
       value: function componentDidUpdate(prevProps) {
-        if (this.props.map !== prevProps.map || !(0, _arePathsEqual.arePathsEqual)(this.props.path, prevProps.path)) {
-          if (this.circle) {
-            this.circle.setMap(null);
-          }
+        var _props = this.props,
+            path = _props.path,
+            map = _props.map;
+
+
+        if (this.propsChanged(prevProps) || map !== prevProps.map || !(0, _arePathsEqual.arePathsEqual)(path, prevProps.path)) {
+          this.destroyCircle();
           this.renderCircle();
         }
       }
     }, {
       key: 'componentWillUnmount',
       value: function componentWillUnmount() {
-        if (this.circle) {
-          this.circle.setMap(null);
-        }
+        this.destroyCircle();
       }
     }, {
       key: 'renderCircle',
       value: function renderCircle() {
         var _this2 = this;
 
-        var _props = this.props,
-            map = _props.map,
-            google = _props.google,
-            center = _props.center,
-            radius = _props.radius,
-            strokeColor = _props.strokeColor,
-            strokeOpacity = _props.strokeOpacity,
-            strokeWeight = _props.strokeWeight,
-            fillColor = _props.fillColor,
-            fillOpacity = _props.fillOpacity,
-            draggable = _props.draggable,
-            visible = _props.visible,
-            props = _objectWithoutProperties(_props, ['map', 'google', 'center', 'radius', 'strokeColor', 'strokeOpacity', 'strokeWeight', 'fillColor', 'fillOpacity', 'draggable', 'visible']);
+        var _props2 = this.props,
+            map = _props2.map,
+            google = _props2.google,
+            center = _props2.center,
+            radius = _props2.radius,
+            strokeColor = _props2.strokeColor,
+            strokeOpacity = _props2.strokeOpacity,
+            strokeWeight = _props2.strokeWeight,
+            fillColor = _props2.fillColor,
+            fillOpacity = _props2.fillOpacity,
+            draggable = _props2.draggable,
+            visible = _props2.visible,
+            props = _objectWithoutProperties(_props2, ['map', 'google', 'center', 'radius', 'strokeColor', 'strokeOpacity', 'strokeWeight', 'fillColor', 'fillOpacity', 'draggable', 'visible']);
 
         if (!google) {
           return null;
         }
 
-        var params = _extends({
+        var params = _extends({}, props, {
           map: map,
           center: center,
           radius: radius,
-          strokeColor: strokeColor,
-          strokeOpacity: strokeOpacity,
-          strokeWeight: strokeWeight,
-          fillColor: fillColor,
-          fillOpacity: fillOpacity,
           draggable: draggable,
-          visible: visible
-        }, props);
+          visible: visible,
+          options: {
+            strokeColor: strokeColor,
+            strokeOpacity: strokeOpacity,
+            strokeWeight: strokeWeight,
+            fillColor: fillColor,
+            fillOpacity: fillOpacity
+          }
+        });
 
         this.circle = new google.maps.Circle(params);
 
@@ -227,7 +254,9 @@
     strokeOpacity: _propTypes2.default.number,
     strokeWeight: _propTypes2.default.number,
     fillColor: _propTypes2.default.string,
-    fillOpacity: _propTypes2.default.number
+    fillOpacity: _propTypes2.default.number,
+    draggable: _propTypes2.default.bool,
+    visible: _propTypes2.default.bool
   };
 
   evtNames.forEach(function (e) {

diff --git a/src/components/Circle.js b/src/components/Circle.js
@@ -26,18 +26,36 @@ export class Circle extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
+    const { path, map } = this.props;
+
     if (
-      this.props.map !== prevProps.map ||
-      !arePathsEqual(this.props.path, prevProps.path)
+      this.propsChanged(prevProps) ||
+      map !== prevProps.map ||
+      !arePathsEqual(path, prevProps.path)
     ) {
-      if (this.circle) {
-        this.circle.setMap(null);
-      }
+      this.destroyCircle();
       this.renderCircle();
     }
   }
 
+  centerChanged = (newCenter) => {
+    const { lat, lng } = this.props.center;
+    return lat !== newCenter.lat || lng !== newCenter.lng;
+  };
+
+  propsChanged = (newProps) => {
+    if (this.centerChanged(newProps.center)) return true;
+
+    return Object.keys(Circle.propTypes).some(key => (
+      this.props[key] !== newProps[key]
+    ));
+  };
+
   componentWillUnmount() {
+    this.destroyCircle();
+  }
+
+  destroyCircle = () => {
     if (this.circle) {
       this.circle.setMap(null);
     }
@@ -64,17 +82,19 @@ export class Circle extends React.Component {
     }
 
     const params = {
+      ...props,
       map,
       center,
       radius,
-      strokeColor,
-      strokeOpacity,
-      strokeWeight,
-      fillColor,
-      fillOpacity,
       draggable,
       visible,
-      ...props
+      options: {
+        strokeColor,
+        strokeOpacity,
+        strokeWeight,
+        fillColor,
+        fillOpacity,
+      },
     };
 
     this.circle = new google.maps.Circle(params);
@@ -112,6 +132,8 @@ Circle.propTypes = {
   strokeWeight: PropTypes.number,
   fillColor: PropTypes.string,
   fillOpacity: PropTypes.number,
+  draggable: PropTypes.bool,
+  visible: PropTypes.bool,
 }
 
 evtNames.forEach(e => Circle.propTypes[e] = PropTypes.func)