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

src/components/Edges/EdgeText.tsx

@@ -1,56 +1,56 @@
-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,
-    x,
+  y,
-    y,
+  label,
-    label,
+  labelStyle = {},
-    labelStyle = {},
+  labelShowBg = true,
-    labelShowBg = true,
+  labelBgStyle = {},
-    labelBgStyle = {},
+  labelBgPadding = [2, 4],
-    labelBgPadding = [2, 4],
+  labelBgBorderRadius = 2,
-    labelBgBorderRadius = 2,
+  ...rest
-  }: EdgeTextProps) => {
+}) => {
-    const edgeRef = useRef<SVGTextElement>(null);
+  const edgeRef = useRef<SVGTextElement>(null);
-    const [edgeTextBbox, setEdgeTextBbox] = useState<Rect>({ x: 0, y: 0, width: 0, height: 0 });
+  const [edgeTextBbox, setEdgeTextBbox] = useState<Rect>({ x: 0, y: 0, width: 0, height: 0 });
 
-    useEffect(() => {
+  useEffect(() => {
-      if (edgeRef.current) {
+    if (edgeRef.current) {
-        const textBbox = edgeRef.current.getBBox();
+      const textBbox = edgeRef.current.getBBox();
 
-        setEdgeTextBbox({
+      setEdgeTextBbox({
-          x: textBbox.x,
+        x: textBbox.x,
-          y: textBbox.y,
+        y: textBbox.y,
-          width: textBbox.width,
+        width: textBbox.width,
-          height: textBbox.height,
+        height: textBbox.height,
-        });
+      });
-      }
-    }, [label]);
-
-    if (typeof label === 'undefined' || !label) {
-      return null;
     }
+  }, [label]);
 
-    return (
+  if (typeof label === 'undefined' || !label) {
-      <g transform={`translate(${x - edgeTextBbox.width / 2} ${y - edgeTextBbox.height / 2})`}>
+    return null;
-        {labelShowBg && (
-          <rect
-            width={edgeTextBbox.width + 2 * labelBgPadding[0]}
-            x={-labelBgPadding[0]}
-            y={-labelBgPadding[1]}
-            height={edgeTextBbox.height + 2 * labelBgPadding[1]}
-            className="react-flow__edge-textbg"
-            style={labelBgStyle}
-            rx={labelBgBorderRadius}
-            ry={labelBgBorderRadius}
-          />
-        )}
-        <text className="react-flow__edge-text" y={edgeTextBbox.height / 2} dy="0.3em" ref={edgeRef} style={labelStyle}>
-          {label}
-        </text>
-      </g>
-    );
   }
-);
+
+  return (
+    <g transform={`translate(${x - edgeTextBbox.width / 2} ${y - edgeTextBbox.height / 2})`} {...rest}>
+      {labelShowBg && (
+        <rect
+          width={edgeTextBbox.width + 2 * labelBgPadding[0]}
+          x={-labelBgPadding[0]}
+          y={-labelBgPadding[1]}
+          height={edgeTextBbox.height + 2 * labelBgPadding[1]}
+          className="react-flow__edge-textbg"
+          style={labelBgStyle}
+          rx={labelBgBorderRadius}
+          ry={labelBgBorderRadius}
+        />
+      )}
+      <text className="react-flow__edge-text" y={edgeTextBbox.height / 2} dy="0.3em" ref={edgeRef} style={labelStyle}>
+        {label}
+      </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;