Added forward refs

Author: zimrick

src/components/Annotation.js

@@ -1,5 +1,5 @@
 
-import React, { useContext } from "react"
+import React, { useContext, forwardRef } from "react"
 import PropTypes from "prop-types"
 
 import { MapContext } from "./MapProvider"
@@ -14,13 +14,14 @@ const Annotation = ({
   curve = 0,
   className = "",
   ...restProps
-}) => {
+}, ref) => {
   const { projection } = useContext(MapContext)
   const [x, y] = projection(subject)
   const connectorPath = createConnectorPath(dx, dy, curve)
 
   return (
     <g
+      ref={ref}
       transform={`translate(${x + dx}, ${y + dy})`}
       className={`rsm-annotation ${className}`}
       {...restProps}
@@ -44,4 +45,4 @@ Annotation.propTypes = {
   className: PropTypes.string,
 }
 
-export default Annotation
+export default forwardRef(Annotation)

src/components/ComposableMap.js

@@ -1,5 +1,5 @@
 
-import React from "react"
+import React, { forwardRef } from "react"
 import PropTypes from "prop-types"
 
 import { MapProvider } from "./MapProvider"
@@ -11,7 +11,7 @@ const ComposableMap = ({
   projectionConfig = {},
   className = "",
   ...restProps
-}) => {
+}, ref) => {
   return (
     <MapProvider
       width={width}
@@ -20,6 +20,7 @@ const ComposableMap = ({
       projectionConfig={projectionConfig}
     >
       <svg
+        ref={ref}
         viewBox={`0 0 ${width} ${height}`}
         className={`rsm-svg ${className}`}
         {...restProps}
@@ -39,4 +40,4 @@ ComposableMap.propTypes = {
   className: PropTypes.string,
 }
 
-export default ComposableMap
+export default forwardRef(ComposableMap)

src/components/Geographies.js

@@ -1,5 +1,5 @@
 
-import React, { useContext } from "react"
+import React, { useContext, forwardRef } from "react"
 import PropTypes from "prop-types"
 
 import { MapContext } from "./MapProvider"
@@ -11,12 +11,12 @@ const Geographies = ({
   parseGeographies,
   className = "",
   ...restProps
-}) => {
+}, ref) => {
   const { path, projection } = useContext(MapContext)
   const { geographies, outline, borders } = useGeographies({ geography, parseGeographies })
 
   return (
-    <g className={`rsm-geographies ${className}`} {...restProps}>
+    <g ref={ref} className={`rsm-geographies ${className}`} {...restProps}>
       {
         geographies && geographies.length > 0 &&
         children({ geographies, outline, borders, path, projection })
@@ -36,4 +36,4 @@ Geographies.propTypes = {
   className: PropTypes.string,
 }
 
-export default Geographies
+export default forwardRef(Geographies)

src/components/Geography.js

@@ -1,5 +1,5 @@
 
-import React, { useState, memo } from "react"
+import React, { useState, memo, forwardRef } from "react"
 import PropTypes from "prop-types"
 
 const Geography = ({
@@ -13,7 +13,7 @@ const Geography = ({
   style = {},
   className = "",
   ...restProps
-}) => {
+}, ref) => {
   const [isPressed, setPressed] = useState(false)
   const [isFocused, setFocus] = useState(false)
 
@@ -51,6 +51,7 @@ const Geography = ({
 
   return (
     <path
+      ref={ref}
       tabIndex="0"
       className={`rsm-geography ${className}`}
       d={geography.svgPath}
@@ -78,4 +79,4 @@ Geography.propTypes = {
   className: PropTypes.string,
 }
 
-export default memo(Geography)
+export default memo(forwardRef(Geography))

src/components/Graticule.js

@@ -1,5 +1,5 @@
 
-import React, { memo, useContext } from "react"
+import React, { memo, useContext, forwardRef } from "react"
 import PropTypes from "prop-types"
 import { geoGraticule } from "d3-geo"
 
@@ -11,10 +11,11 @@ const Graticule = ({
   step = [10, 10],
   className = "",
   ...restProps
-}) => {
+}, ref) => {
   const { path } = useContext(MapContext)
   return (
     <path
+      ref={ref}
       d={path(geoGraticule().step(step)())}
       fill={fill}
       stroke={stroke}
@@ -31,4 +32,4 @@ Graticule.propTypes = {
   className: PropTypes.string,
 }
 
-export default memo(Graticule)
+export default memo(forwardRef(Graticule))

src/components/Line.js

@@ -1,5 +1,5 @@
 
-import React, { useContext } from "react"
+import React, { useContext, forwardRef } from "react"
 import PropTypes from "prop-types"
 
 import { MapContext } from "./MapProvider"
@@ -13,7 +13,7 @@ const Line = ({
   fill = "transparent",
   className = "",
   ...restProps
-}) => {
+}, ref) => {
   const { path } = useContext(MapContext)
 
   const lineData = {
@@ -23,6 +23,7 @@ const Line = ({
 
   return (
     <path
+      ref={ref}
       d={path(lineData)}
       className={`rsm-line ${className}`}
       stroke={stroke}
@@ -43,4 +44,4 @@ Line.propTypes = {
   className: PropTypes.string,
 }
 
-export default Line
+export default forwardRef(Line)

src/components/Marker.js

@@ -1,5 +1,5 @@
 
-import React, { useContext, useState } from "react"
+import React, { useContext, useState, forwardRef } from "react"
 import PropTypes from "prop-types"
 
 import { MapContext } from "./MapProvider"
@@ -16,7 +16,7 @@ const Marker = ({
   style = {},
   className = "",
   ...restProps
-}) => {
+}, ref) => {
   const { projection } = useContext(MapContext)
   const [isPressed, setPressed] = useState(false)
   const [isFocused, setFocus] = useState(false)
@@ -57,6 +57,7 @@ const Marker = ({
 
   return (
     <g
+      ref={ref}
       transform={`translate(${x}, ${y})`}
       className={`rsm-marker ${className}`}
       onMouseEnter={handleMouseEnter}
@@ -89,4 +90,4 @@ Marker.propTypes = {
   className: PropTypes.string,
 }
 
-export default Marker
+export default forwardRef(Marker)

src/components/Sphere.js

@@ -1,5 +1,5 @@
 
-import React, { Fragment, memo, useMemo, useContext } from "react"
+import React, { Fragment, memo, useMemo, useContext, forwardRef } from "react"
 import PropTypes from "prop-types"
 
 import { MapContext } from "./MapProvider"
@@ -11,7 +11,7 @@ const Sphere = ({
   strokeWidth = 0.5,
   className = "",
   ...restProps
-}) => {
+}, ref) => {
   const { path } = useContext(MapContext)
   const spherePath = useMemo(() => path({ type: "Sphere" }), [path])
   return (
@@ -22,6 +22,7 @@ const Sphere = ({
         </clipPath>
       </defs>
       <path
+        ref={ref}
         d={spherePath}
         fill={fill}
         stroke={stroke}
@@ -42,4 +43,4 @@ Sphere.propTypes = {
   className: PropTypes.string,
 }
 
-export default memo(Sphere)
+export default memo(forwardRef(Sphere))

src/components/ZoomableGroup.js

@@ -1,29 +1,28 @@
+import React, { useContext, forwardRef } from "react";
+import PropTypes from "prop-types";
 
-import React, { useContext } from "react"
-import PropTypes from "prop-types"
+import { MapContext } from "./MapProvider";
+import useZoomPan from "./useZoomPan";
 
-import { MapContext } from "./MapProvider"
-import useZoomPan from "./useZoomPan"
-
-const ZoomableGroup = ({
-  center = [0, 0],
-  zoom = 1,
-  minZoom = 1,
-  maxZoom = 8,
-  translateExtent,
-  filterZoomEvent,
-  onMoveStart,
-  onMove,
-  onMoveEnd,
-  className,
-  ...restProps
-}) => {
-  const { width, height } = useContext(MapContext)
+const ZoomableGroup = (
+  {
+    center = [0, 0],
+    zoom = 1,
+    minZoom = 1,
+    maxZoom = 8,
+    translateExtent,
+    filterZoomEvent,
+    onMoveStart,
+    onMove,
+    onMoveEnd,
+    className,
+    ...restProps
+  },
+  ref
+) => {
+  const { width, height } = useContext(MapContext);
 
-  const {
-    mapRef,
-    transformString,
-  } = useZoomPan({
+  const { mapRef, transformString } = useZoomPan({
     center,
     filterZoomEvent,
     onMoveStart,
@@ -32,15 +31,20 @@ const ZoomableGroup = ({
     scaleExtent: [minZoom, maxZoom],
     translateExtent,
     zoom,
-  })
+  });
 
   return (
     <g ref={mapRef}>
       <rect width={width} height={height} fill="transparent" />
-      <g transform={transformString} className={`rsm-zoomable-group ${className}`} {...restProps} />
+      <g
+        ref={ref}
+        transform={transformString}
+        className={`rsm-zoomable-group ${className}`}
+        {...restProps}
+      />
     </g>
-  )
-}
+  );
+};
 
 ZoomableGroup.propTypes = {
   center: PropTypes.array,
@@ -52,6 +56,6 @@ ZoomableGroup.propTypes = {
   onMove: PropTypes.func,
   onMoveEnd: PropTypes.func,
   className: PropTypes.string,
-}
+};
 
-export default ZoomableGroup
+export default forwardRef(ZoomableGroup);