refactor(edge-text): allow html attributes as props

src/components/Edges/EdgeText.tsx

@@ -1,9 +1,8 @@
-import React, { memo, useRef, useState, useEffect } from 'react';
+import React, { memo, useRef, useState, useEffect, FC } from 'react';
 
 import { EdgeTextProps, Rect } from '../../types';
 
-export default memo(
+const EdgeText: FC<EdgeTextProps> = ({
-  ({
   x,
   y,
   label,
@@ -12,7 +11,8 @@ export default memo(
   labelBgStyle = {},
   labelBgPadding = [2, 4],
   labelBgBorderRadius = 2,
-  }: EdgeTextProps) => {
+  ...rest
+}) => {
   const edgeRef = useRef<SVGTextElement>(null);
   const [edgeTextBbox, setEdgeTextBbox] = useState<Rect>({ x: 0, y: 0, width: 0, height: 0 });
 
@@ -34,7 +34,7 @@ export default memo(
   }
 
   return (
-      <g transform={`translate(${x - edgeTextBbox.width / 2} ${y - edgeTextBbox.height / 2})`}>
+    <g transform={`translate(${x - edgeTextBbox.width / 2} ${y - edgeTextBbox.height / 2})`} {...rest}>
       {labelShowBg && (
         <rect
           width={edgeTextBbox.width + 2 * labelBgPadding[0]}
@@ -52,5 +52,5 @@ export default memo(
       </text>
     </g>
   );
-  }
+};
-);
+export default memo(EdgeText);

src/types/index.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
+import { CSSProperties, MouseEvent as ReactMouseEvent, HTMLAttributes } from 'react';
 import { Selection as D3Selection, ZoomBehavior } from 'd3';
 
 export type ElementId = string;
@@ -157,7 +157,7 @@ export interface EdgeSmoothStepProps<T = any> extends EdgeProps<T> {
   borderRadius?: number;
 }
 
-export interface EdgeTextProps {
+export interface EdgeTextProps extends HTMLAttributes<SVGElement> {
   x: number;
   y: number;
   label?: string;