react-simple-maps - npm Package Compare versions

Comparing version 0.10.1 to 0.10.2

lib/Annotation.js

@@ -50,2 +50,3 @@ "use strict";
       var connectorPath = (0, _utils.createConnectorPath)(null, [-dx / zoom, -dy / zoom], curve);
+      var translation = projection()(subject);
 
@@ -57,3 +58,3 @@ return _react2.default.createElement(
           style: { style: style },
-          transform: "translate(\n          " + (projection()(subject)[0] + dx / zoom) + "\n          " + (projection()(subject)[1] + dy / zoom) + "\n        )",
+          transform: "translate(\n          " + (translation[0] + dx / zoom) + "\n          " + (translation[1] + dy / zoom) + "\n        )",
           textAnchor: (0, _utils.createTextAnchor)(dx)
@@ -60,0 +61,0 @@ },

lib/ComposableMap.js

@@ -64,3 +64,4 @@ "use strict";
           aspectRatio = _props2.aspectRatio,
-          viewBox = _props2.viewBox;
+          viewBox = _props2.viewBox,
+          defs = _props2.defs;
 
@@ -76,2 +77,7 @@
           preserveAspectRatio: aspectRatio },
+        defs && _react2.default.createElement(
+          "defs",
+          null,
+          defs
+        ),
         _react2.default.cloneElement(this.props.children, {
@@ -78,0 +84,0 @@ projection: this.projection,

lib/Geographies.js

@@ -32,6 +32,4 @@ "use strict";
     _this.state = {
-      geographyPaths: ""
+      geographyPaths: _this.shouldFetchGeographies(props.geography) ? [] : _this.parseGeographies(props.geography)
     };
-
-    _this.fetchGeographies = _this.fetchGeographies.bind(_this);
     return _this;
@@ -41,46 +39,12 @@ }
   _createClass(Geographies, [{
-    key: "fetchGeographies",
-    value: function fetchGeographies(geography) {
-      var _this2 = this;
-
-      var _props = this.props,
-          width = _props.width,
-          height = _props.height;
-
-
-      if (!geography) return;else if (Object.prototype.toString.call(geography) === '[object Object]') {
-        this.setState({
-          geographyPaths: (0, _topojsonClient.feature)(geography, geography.objects[Object.keys(geography.objects)[0]]).features
-        });
-      } else if (Array.isArray(geography)) {
-        this.setState({ geographyPaths: geography });
-      } else {
-        var request = new XMLHttpRequest();
-        request.open("GET", geography, true);
-
-        request.onload = function () {
-          if (request.status >= 200 && request.status < 400) {
-            var geographyPaths = JSON.parse(request.responseText);
-            _this2.setState({
-              geographyPaths: (0, _topojsonClient.feature)(geographyPaths, geographyPaths.objects[Object.keys(geographyPaths.objects)[0]]).features
-            }, function () {
-              if (!_this2.props.onGeographiesLoaded) return;
-              _this2.props.onGeographyPathsLoaded(String(request.status));
-            });
-          } else {
-            if (!_this2.props.onGeographiesLoaded) return;
-            _this2.props.onGeographyPathsLoaded(String(request.status));
-          }
-        };
-        request.onerror = function () {
-          console.log("There was a connection error...");
-        };
-        request.send();
-      }
-    }
-  }, {
     key: "componentWillReceiveProps",
     value: function componentWillReceiveProps(nextProps) {
       if (nextProps.geography !== this.props.geography) {
-        this.fetchGeographies(nextProps.geography);
+        if (this.shouldFetchGeographies(nextProps.geography)) {
+          this.fetchGeographies(nextProps.geography);
+        } else {
+          this.setState({
+            geographyPaths: this.parseGeographies(nextProps.geography)
+          });
+        }
       }
@@ -100,11 +64,18 @@ }
       }
-      this.fetchGeographies(this.props.geography);
+      if (this.shouldFetchGeographies(this.props.geography)) {
+        this.fetchGeographies(this.props.geography);
+      }
     }
   }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.cancelPendingRequest();
+    }
+  }, {
     key: "render",
     value: function render() {
-      var _props2 = this.props,
-          projection = _props2.projection,
-          style = _props2.style,
-          children = _props2.children;
+      var _props = this.props,
+          projection = _props.projection,
+          style = _props.style,
+          children = _props.children;
 
@@ -117,2 +88,59 @@ return _react2.default.createElement(
     }
+  }, {
+    key: "shouldFetchGeographies",
+    value: function shouldFetchGeographies(geography) {
+      return typeof geography === 'string';
+    }
+  }, {
+    key: "parseGeographies",
+    value: function parseGeographies(geography) {
+      if (Array.isArray(geography)) {
+        return geography;
+      }
+
+      if (Object.prototype.toString.call(geography) === '[object Object]') {
+        return (0, _topojsonClient.feature)(geography, geography.objects[Object.keys(geography.objects)[0]]).features;
+      }
+
+      return [];
+    }
+  }, {
+    key: "fetchGeographies",
+    value: function fetchGeographies(geography) {
+      var _this2 = this;
+
+      var request = new XMLHttpRequest();
+      request.open("GET", geography, true);
+      request.onload = function () {
+        if (request.status >= 200 && request.status < 400) {
+          var geographyPaths = JSON.parse(request.responseText);
+          _this2.setState({
+            geographyPaths: _this2.parseGeographies(geographyPaths)
+          }, function () {
+            if (_this2.props.onGeographyPathsLoaded) {
+              _this2.props.onGeographyPathsLoaded(String(request.status));
+            }
+          });
+        } else {
+          if (_this2.props.onGeographyPathsLoaded) {
+            _this2.props.onGeographyPathsLoaded(String(request.status));
+          }
+        }
+      };
+      request.onerror = function () {
+        console.log("There was a connection error...");
+      };
+      request.send();
+
+      this.cancelPendingRequest();
+      this._xhr = request;
+    }
+  }, {
+    key: "cancelPendingRequest",
+    value: function cancelPendingRequest() {
+      if (this._xhr) {
+        this._xhr.abort();
+        thix._xhr = null;
+      }
+    }
   }]);
@@ -119,0 +147,0 @@

lib/Marker.js

@@ -175,2 +175,3 @@ "use strict";
       var scale = preserveMarkerAspect ? " scale(" + 1 / zoom + ")" : "";
+      var translation = projection()(marker.coordinates);
 
@@ -180,3 +181,3 @@ return _react2.default.createElement(
         { className: "rsm-marker" + (pressed ? " rsm-marker--pressed" : "") + (hover ? " rsm-marker--hover" : ""),
-          transform: "translate(\n           " + projection()(marker.coordinates)[0] + "\n           " + projection()(marker.coordinates)[1] + "\n         ) " + scale,
+          transform: "translate(\n           " + translation[0] + "\n           " + translation[1] + "\n         ) " + scale,
           style: style[pressed || hover ? pressed ? "pressed" : "hover" : "default"],
@@ -183,0 +184,0 @@ onMouseEnter: this.handleMouseEnter,

package.json

 {
   "name": "react-simple-maps",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "description": "An svg map component built with and for React",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -128,2 +128,3 @@ # react-simple-maps
 | projectionConfig | Object          | *see examples below            |
+| defs             | SVG Def Element       | *see [defs spec](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs)         |
 
@@ -130,0 +131,0 @@ ##### Configuring projections

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

641

increased by0.16%

Worsened metrics

Total package byte prevSize

89432

decreased by-98.5%

Number of package files

18

decreased by-48.57%

Lines of code

1411

decreased by-57.61%

No dependency changes