Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-simple-maps

Package Overview
Dependencies
Maintainers
1
Versions
54
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-simple-maps - npm Package Compare versions

Comparing version 3.0.0-beta.3 to 3.0.0-beta.4

315

dist/index.js

@@ -1,9 +0,36 @@

import React, { createContext, useMemo, useCallback, useContext, useState, useEffect, memo, useRef, Fragment } from 'react';
import PropTypes from 'prop-types';
import * as d3Geo from 'd3-geo';
import { geoGraticule } from 'd3-geo';
import { feature, mesh } from 'topojson-client';
import { zoom, zoomIdentity } from 'd3-zoom';
import { select } from 'd3-selection';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var PropTypes = require('prop-types');
var d3Geo = require('d3-geo');
var topojsonClient = require('topojson-client');
var d3Zoom = require('d3-zoom');
var d3Selection = require('d3-selection');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var d3Geo__namespace = /*#__PURE__*/_interopNamespace(d3Geo);
function ownKeys(object, enumerableOnly) {

@@ -174,6 +201,6 @@ var keys = Object.keys(object);

var geoPath = d3Geo.geoPath,
projections = _objectWithoutProperties(d3Geo, ["geoPath"]);
var geoPath = d3Geo__namespace.geoPath,
projections = _objectWithoutProperties(d3Geo__namespace, ["geoPath"]);
var MapContext = createContext();
var MapContext = React.createContext();

@@ -224,3 +251,3 @@ var makeProjection = function makeProjection(_ref) {

var s = projectionConfig.scale || null;
var projMemo = useMemo(function () {
var projMemo = React.useMemo(function () {
return makeProjection({

@@ -238,4 +265,4 @@ projectionConfig: {

}, [width, height, projection, cx, cy, rx, ry, rz, p1, p2, s]);
var proj = useCallback(projMemo, [projMemo]);
var value = useMemo(function () {
var proj = React.useCallback(projMemo, [projMemo]);
var value = React.useMemo(function () {
return {

@@ -248,3 +275,3 @@ width: width,

}, [width, height, proj]);
return /*#__PURE__*/React.createElement(MapContext.Provider, _extends({
return /*#__PURE__*/React__default["default"].createElement(MapContext.Provider, _extends({
value: value

@@ -255,6 +282,6 @@ }, restProps));

MapProvider.propTypes = {
width: PropTypes.number,
height: PropTypes.number,
projection: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
projectionConfig: PropTypes.object
width: PropTypes__default["default"].number,
height: PropTypes__default["default"].number,
projection: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].func]),
projectionConfig: PropTypes__default["default"].object
};

@@ -277,3 +304,3 @@

return /*#__PURE__*/React.createElement(MapProvider, {
return /*#__PURE__*/React__default["default"].createElement(MapProvider, {
width: width,

@@ -283,3 +310,3 @@ height: height,

projectionConfig: projectionConfig
}, /*#__PURE__*/React.createElement("svg", _extends({
}, /*#__PURE__*/React__default["default"].createElement("svg", _extends({
viewBox: "0 0 ".concat(width, " ").concat(height),

@@ -291,7 +318,7 @@ className: "rsm-svg ".concat(className)

ComposableMap.propTypes = {
width: PropTypes.number,
height: PropTypes.number,
projection: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
projectionConfig: PropTypes.object,
className: PropTypes.string
width: PropTypes__default["default"].number,
height: PropTypes__default["default"].number,
projection: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].func]),
projectionConfig: PropTypes__default["default"].object,
className: PropTypes__default["default"].string
};

@@ -322,3 +349,3 @@

var feats = feature(geographies, geographies.objects[Object.keys(geographies.objects)[0]]).features;
var feats = topojsonClient.feature(geographies, geographies.objects[Object.keys(geographies.objects)[0]]).features;
return parseGeographies ? parseGeographies(feats) : feats;

@@ -329,6 +356,6 @@ }

if (!isTopojson) return null;
var outline = mesh(geographies, geographies.objects[Object.keys(geographies.objects)[0]], function (a, b) {
var outline = topojsonClient.mesh(geographies, geographies.objects[Object.keys(geographies.objects)[0]], function (a, b) {
return a === b;
});
var borders = mesh(geographies, geographies.objects[Object.keys(geographies.objects)[0]], function (a, b) {
var borders = topojsonClient.mesh(geographies, geographies.objects[Object.keys(geographies.objects)[0]], function (a, b) {
return a !== b;

@@ -378,6 +405,6 @@ });

var _useContext = useContext(MapContext),
var _useContext = React.useContext(MapContext),
path = _useContext.path;
var _useState = useState({}),
var _useState = React.useState({}),
_useState2 = _slicedToArray(_useState, 2),

@@ -387,3 +414,3 @@ output = _useState2[0],

useEffect(function () {
React.useEffect(function () {
if ((typeof window === "undefined" ? "undefined" : _typeof(window)) === "undefined") return;

@@ -409,3 +436,3 @@ if (!geography) return;

var _useMemo = useMemo(function () {
var _useMemo = React.useMemo(function () {
var mesh = output.mesh || {};

@@ -440,3 +467,3 @@ var preparedMesh = prepareMesh(mesh.outline, mesh.borders, path);

var _useContext = useContext(MapContext),
var _useContext = React.useContext(MapContext),
path = _useContext.path,

@@ -453,3 +480,3 @@ projection = _useContext.projection;

return /*#__PURE__*/React.createElement("g", _extends({
return /*#__PURE__*/React__default["default"].createElement("g", _extends({
className: "rsm-geographies ".concat(className)

@@ -466,6 +493,6 @@ }, restProps), geographies && geographies.length > 0 && children({

Geographies.propTypes = {
geography: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array]),
children: PropTypes.func,
parseGeographies: PropTypes.func,
className: PropTypes.string
geography: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].object, PropTypes__default["default"].array]),
children: PropTypes__default["default"].func,
parseGeographies: PropTypes__default["default"].func,
className: PropTypes__default["default"].string
};

@@ -489,3 +516,3 @@

var _useState = useState(false),
var _useState = React.useState(false),
_useState2 = _slicedToArray(_useState, 2),

@@ -495,3 +522,3 @@ isPressed = _useState2[0],

var _useState3 = useState(false),
var _useState3 = React.useState(false),
_useState4 = _slicedToArray(_useState3, 2),

@@ -533,3 +560,3 @@ isFocused = _useState4[0],

return /*#__PURE__*/React.createElement("path", _extends({
return /*#__PURE__*/React__default["default"].createElement("path", _extends({
tabIndex: "0",

@@ -549,13 +576,13 @@ className: "rsm-geography ".concat(className),

Geography.propTypes = {
geography: PropTypes.object,
onMouseEnter: PropTypes.func,
onMouseLeave: PropTypes.func,
onMouseDown: PropTypes.func,
onMouseUp: PropTypes.func,
onFocus: PropTypes.func,
onBlur: PropTypes.func,
style: PropTypes.object,
className: PropTypes.string
geography: PropTypes__default["default"].object,
onMouseEnter: PropTypes__default["default"].func,
onMouseLeave: PropTypes__default["default"].func,
onMouseDown: PropTypes__default["default"].func,
onMouseUp: PropTypes__default["default"].func,
onFocus: PropTypes__default["default"].func,
onBlur: PropTypes__default["default"].func,
style: PropTypes__default["default"].object,
className: PropTypes__default["default"].string
};
var Geography$1 = memo(Geography);
var Geography$1 = React.memo(Geography);

@@ -575,7 +602,7 @@ var _excluded$5 = ["fill", "stroke", "step", "className"];

var _useContext = useContext(MapContext),
var _useContext = React.useContext(MapContext),
path = _useContext.path;
return /*#__PURE__*/React.createElement("path", _extends({
d: path(geoGraticule().step(step)()),
return /*#__PURE__*/React__default["default"].createElement("path", _extends({
d: path(d3Geo.geoGraticule().step(step)()),
fill: fill,

@@ -588,8 +615,8 @@ stroke: stroke,

Graticule.propTypes = {
fill: PropTypes.string,
stroke: PropTypes.string,
step: PropTypes.array,
className: PropTypes.string
fill: PropTypes__default["default"].string,
stroke: PropTypes__default["default"].string,
step: PropTypes__default["default"].array,
className: PropTypes__default["default"].string
};
var Graticule$1 = memo(Graticule);
var Graticule$1 = React.memo(Graticule);

@@ -607,5 +634,5 @@ function useZoomPan(_ref) {

_ref$zoom = _ref.zoom,
zoom$1 = _ref$zoom === void 0 ? 1 : _ref$zoom;
zoom = _ref$zoom === void 0 ? 1 : _ref$zoom;
var _useContext = useContext(MapContext),
var _useContext = React.useContext(MapContext),
width = _useContext.width,

@@ -619,3 +646,3 @@ height = _useContext.height,

var _useState = useState({
var _useState = React.useState({
x: 0,

@@ -629,3 +656,3 @@ y: 0,

var lastPosition = useRef({
var lastPosition = React.useRef({
x: 0,

@@ -635,5 +662,5 @@ y: 0,

});
var mapRef = useRef();
var zoomRef = useRef();
var bypassEvents = useRef(false);
var mapRef = React.useRef();
var zoomRef = React.useRef();
var bypassEvents = React.useRef(false);

@@ -656,4 +683,4 @@ var _translateExtent = _slicedToArray(translateExtent, 2),

useEffect(function () {
var svg = select(mapRef.current);
React.useEffect(function () {
var svg = d3Selection.select(mapRef.current);

@@ -718,18 +745,18 @@ function handleZoomStart(d3Event) {

var zoom$1 = zoom().filter(filterFunc).scaleExtent([minZoom, maxZoom]).translateExtent([[a1, a2], [b1, b2]]).on("start", handleZoomStart).on("zoom", handleZoom).on("end", handleZoomEnd);
zoomRef.current = zoom$1;
svg.call(zoom$1);
var zoom = d3Zoom.zoom().filter(filterFunc).scaleExtent([minZoom, maxZoom]).translateExtent([[a1, a2], [b1, b2]]).on("start", handleZoomStart).on("zoom", handleZoom).on("end", handleZoomEnd);
zoomRef.current = zoom;
svg.call(zoom);
}, [width, height, a1, a2, b1, b2, minZoom, maxZoom, projection, onMoveStart, onMove, onMoveEnd, filterZoomEvent]);
useEffect(function () {
if (lon === lastPosition.current.x && lat === lastPosition.current.y && zoom$1 === lastPosition.current.k) return;
React.useEffect(function () {
if (lon === lastPosition.current.x && lat === lastPosition.current.y && zoom === lastPosition.current.k) return;
var coords = projection([lon, lat]);
var x = coords[0] * zoom$1;
var y = coords[1] * zoom$1;
var svg = select(mapRef.current);
var x = coords[0] * zoom;
var y = coords[1] * zoom;
var svg = d3Selection.select(mapRef.current);
bypassEvents.current = true;
svg.call(zoomRef.current.transform, zoomIdentity.translate(width / 2 - x, height / 2 - y).scale(zoom$1));
svg.call(zoomRef.current.transform, d3Zoom.zoomIdentity.translate(width / 2 - x, height / 2 - y).scale(zoom));
setPosition({
x: width / 2 - x,
y: height / 2 - y,
k: zoom$1
k: zoom
});

@@ -739,5 +766,5 @@ lastPosition.current = {

y: lat,
k: zoom$1
k: zoom
};
}, [lon, lat, zoom$1, width, height, projection]);
}, [lon, lat, zoom, width, height, projection]);
return {

@@ -769,3 +796,3 @@ mapRef: mapRef,

var _useContext = useContext(MapContext),
var _useContext = React.useContext(MapContext),
width = _useContext.width,

@@ -787,9 +814,9 @@ height = _useContext.height;

return /*#__PURE__*/React.createElement("g", {
return /*#__PURE__*/React__default["default"].createElement("g", {
ref: mapRef
}, /*#__PURE__*/React.createElement("rect", {
}, /*#__PURE__*/React__default["default"].createElement("rect", {
width: width,
height: height,
fill: "transparent"
}), /*#__PURE__*/React.createElement("g", _extends({
}), /*#__PURE__*/React__default["default"].createElement("g", _extends({
transform: transformString,

@@ -801,11 +828,11 @@ className: "rsm-zoomable-group ".concat(className)

ZoomableGroup.propTypes = {
center: PropTypes.array,
zoom: PropTypes.number,
minZoom: PropTypes.number,
maxZoom: PropTypes.number,
translateExtent: PropTypes.arrayOf(PropTypes.array),
onMoveStart: PropTypes.func,
onMove: PropTypes.func,
onMoveEnd: PropTypes.func,
className: PropTypes.string
center: PropTypes__default["default"].array,
zoom: PropTypes__default["default"].number,
minZoom: PropTypes__default["default"].number,
maxZoom: PropTypes__default["default"].number,
translateExtent: PropTypes__default["default"].arrayOf(PropTypes__default["default"].array),
onMoveStart: PropTypes__default["default"].func,
onMove: PropTypes__default["default"].func,
onMoveEnd: PropTypes__default["default"].func,
className: PropTypes__default["default"].string
};

@@ -828,6 +855,6 @@

var _useContext = useContext(MapContext),
var _useContext = React.useContext(MapContext),
path = _useContext.path;
var spherePath = useMemo(function () {
var spherePath = React.useMemo(function () {
return path({

@@ -837,7 +864,7 @@ type: "Sphere"

}, [path]);
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement("defs", null, /*#__PURE__*/React__default["default"].createElement("clipPath", {
id: id
}, /*#__PURE__*/React.createElement("path", {
}, /*#__PURE__*/React__default["default"].createElement("path", {
d: spherePath
}))), /*#__PURE__*/React.createElement("path", _extends({
}))), /*#__PURE__*/React__default["default"].createElement("path", _extends({
d: spherePath,

@@ -855,9 +882,9 @@ fill: fill,

Sphere.propTypes = {
id: PropTypes.string,
fill: PropTypes.string,
stroke: PropTypes.string,
strokeWidth: PropTypes.number,
className: PropTypes.string
id: PropTypes__default["default"].string,
fill: PropTypes__default["default"].string,
stroke: PropTypes__default["default"].string,
strokeWidth: PropTypes__default["default"].number,
className: PropTypes__default["default"].string
};
var Sphere$1 = memo(Sphere);
var Sphere$1 = React.memo(Sphere);

@@ -881,6 +908,6 @@ var _excluded$2 = ["coordinates", "children", "onMouseEnter", "onMouseLeave", "onMouseDown", "onMouseUp", "onFocus", "onBlur", "style", "className"];

var _useContext = useContext(MapContext),
var _useContext = React.useContext(MapContext),
projection = _useContext.projection;
var _useState = useState(false),
var _useState = React.useState(false),
_useState2 = _slicedToArray(_useState, 2),

@@ -890,3 +917,3 @@ isPressed = _useState2[0],

var _useState3 = useState(false),
var _useState3 = React.useState(false),
_useState4 = _slicedToArray(_useState3, 2),

@@ -933,3 +960,3 @@ isFocused = _useState4[0],

return /*#__PURE__*/React.createElement("g", _extends({
return /*#__PURE__*/React__default["default"].createElement("g", _extends({
transform: "translate(".concat(x, ", ").concat(y, ")"),

@@ -948,12 +975,12 @@ className: "rsm-marker ".concat(className),

Marker.propTypes = {
coordinates: PropTypes.array,
children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
onMouseEnter: PropTypes.func,
onMouseLeave: PropTypes.func,
onMouseDown: PropTypes.func,
onMouseUp: PropTypes.func,
onFocus: PropTypes.func,
onBlur: PropTypes.func,
style: PropTypes.object,
className: PropTypes.string
coordinates: PropTypes__default["default"].array,
children: PropTypes__default["default"].oneOfType([PropTypes__default["default"].node, PropTypes__default["default"].arrayOf(PropTypes__default["default"].node)]),
onMouseEnter: PropTypes__default["default"].func,
onMouseLeave: PropTypes__default["default"].func,
onMouseDown: PropTypes__default["default"].func,
onMouseUp: PropTypes__default["default"].func,
onFocus: PropTypes__default["default"].func,
onBlur: PropTypes__default["default"].func,
style: PropTypes__default["default"].object,
className: PropTypes__default["default"].string
};

@@ -979,3 +1006,3 @@

var _useContext = useContext(MapContext),
var _useContext = React.useContext(MapContext),
path = _useContext.path;

@@ -987,3 +1014,3 @@

};
return /*#__PURE__*/React.createElement("path", _extends({
return /*#__PURE__*/React__default["default"].createElement("path", _extends({
d: path(lineData),

@@ -998,9 +1025,9 @@ className: "rsm-line ".concat(className),

Line.propTypes = {
from: PropTypes.array,
to: PropTypes.array,
coordinates: PropTypes.array,
stroke: PropTypes.string,
strokeWidth: PropTypes.number,
fill: PropTypes.string,
className: PropTypes.string
from: PropTypes__default["default"].array,
to: PropTypes__default["default"].array,
coordinates: PropTypes__default["default"].array,
stroke: PropTypes__default["default"].string,
strokeWidth: PropTypes__default["default"].number,
fill: PropTypes__default["default"].string,
className: PropTypes__default["default"].string
};

@@ -1024,3 +1051,3 @@

var _useContext = useContext(MapContext),
var _useContext = React.useContext(MapContext),
projection = _useContext.projection;

@@ -1034,6 +1061,6 @@

var connectorPath = createConnectorPath(dx, dy, curve);
return /*#__PURE__*/React.createElement("g", _extends({
return /*#__PURE__*/React__default["default"].createElement("g", _extends({
transform: "translate(".concat(x + dx, ", ").concat(y + dy, ")"),
className: "rsm-annotation ".concat(className)
}, restProps), /*#__PURE__*/React.createElement("path", _extends({
}, restProps), /*#__PURE__*/React__default["default"].createElement("path", _extends({
d: connectorPath,

@@ -1046,11 +1073,23 @@ fill: "transparent",

Annotation.propTypes = {
subject: PropTypes.array,
children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
dx: PropTypes.number,
dy: PropTypes.number,
curve: PropTypes.number,
connectorProps: PropTypes.object,
className: PropTypes.string
subject: PropTypes__default["default"].array,
children: PropTypes__default["default"].oneOfType([PropTypes__default["default"].node, PropTypes__default["default"].arrayOf(PropTypes__default["default"].node)]),
dx: PropTypes__default["default"].number,
dy: PropTypes__default["default"].number,
curve: PropTypes__default["default"].number,
connectorProps: PropTypes__default["default"].object,
className: PropTypes__default["default"].string
};
export { Annotation, ComposableMap, Geographies, Geography$1 as Geography, Graticule$1 as Graticule, Line, MapContext, MapProvider, Marker, Sphere$1 as Sphere, ZoomableGroup, useGeographies, useZoomPan };
exports.Annotation = Annotation;
exports.ComposableMap = ComposableMap;
exports.Geographies = Geographies;
exports.Geography = Geography$1;
exports.Graticule = Graticule$1;
exports.Line = Line;
exports.MapContext = MapContext;
exports.MapProvider = MapProvider;
exports.Marker = Marker;
exports.Sphere = Sphere$1;
exports.ZoomableGroup = ZoomableGroup;
exports.useGeographies = useGeographies;
exports.useZoomPan = useZoomPan;
{
"name": "react-simple-maps",
"version": "3.0.0-beta.3",
"version": "3.0.0-beta.4",
"description": "An svg map chart component built with and for React",

@@ -59,7 +59,7 @@ "main": "dist/index.js",

"dependencies": {
"d3-geo": "^3.0.1",
"d3-selection": "^3.0.0",
"d3-zoom": "^3.0.0",
"d3-geo": "^2.0.2",
"d3-selection": "^2.0.0",
"d3-zoom": "^2.0.0",
"topojson-client": "^3.1.0"
}
}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc