refactor(react/edges): simplify edge creation

2023-11-29 18:01:11 +01:00
parent f871617abe
commit 8f43160236
16 changed files with 287 additions and 529 deletions
@@ -1,61 +1,70 @@
 import { memo } from 'react';
-import { type Optional, Position, getBezierPath } from '@xyflow/system';
+import { Position, getBezierPath } from '@xyflow/system';

 import BaseEdge from './BaseEdge';
 import type { BezierEdgeProps } from '../../types';

-const BezierEdge = memo(
-  ({
-    id,
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-    sourcePosition = Position.Bottom,
-    targetPosition = Position.Top,
-    label,
-    labelStyle,
-    labelShowBg,
-    labelBgStyle,
-    labelBgPadding,
-    labelBgBorderRadius,
-    style,
-    markerEnd,
-    markerStart,
-    pathOptions,
-    interactionWidth,
-  }: Optional<BezierEdgeProps, 'id' | 'source' | 'target'>) => {
-    const [path, labelX, labelY] = getBezierPath({
+function createBezierEdge(params: { isInternal: boolean }) {
+  // eslint-disable-next-line react/display-name
+  return memo(
+    ({
+      id,
      sourceX,
      sourceY,
-      sourcePosition,
      targetX,
      targetY,
-      targetPosition,
-      curvature: pathOptions?.curvature,
-    });
+      sourcePosition = Position.Bottom,
+      targetPosition = Position.Top,
+      label,
+      labelStyle,
+      labelShowBg,
+      labelBgStyle,
+      labelBgPadding,
+      labelBgBorderRadius,
+      style,
+      markerEnd,
+      markerStart,
+      pathOptions,
+      interactionWidth,
+    }: BezierEdgeProps) => {
+      const [path, labelX, labelY] = getBezierPath({
+        sourceX,
+        sourceY,
+        sourcePosition,
+        targetX,
+        targetY,
+        targetPosition,
+        curvature: pathOptions?.curvature,
+      });

-    return (
-      <BaseEdge
-        id={id}
-        path={path}
-        labelX={labelX}
-        labelY={labelY}
-        label={label}
-        labelStyle={labelStyle}
-        labelShowBg={labelShowBg}
-        labelBgStyle={labelBgStyle}
-        labelBgPadding={labelBgPadding}
-        labelBgBorderRadius={labelBgBorderRadius}
-        style={style}
-        markerEnd={markerEnd}
-        markerStart={markerStart}
-        interactionWidth={interactionWidth}
-      />
-    );
-  }
-);
+      const _id = params.isInternal ? undefined : id;
+
+      return (
+        <BaseEdge
+          id={_id}
+          path={path}
+          labelX={labelX}
+          labelY={labelY}
+          label={label}
+          labelStyle={labelStyle}
+          labelShowBg={labelShowBg}
+          labelBgStyle={labelBgStyle}
+          labelBgPadding={labelBgPadding}
+          labelBgBorderRadius={labelBgBorderRadius}
+          style={style}
+          markerEnd={markerEnd}
+          markerStart={markerStart}
+          interactionWidth={interactionWidth}
+        />
+      );
+    }
+  );
+}
+
+const BezierEdge = createBezierEdge({ isInternal: false });
+const BezierEdgeInternal = createBezierEdge({ isInternal: true });

 BezierEdge.displayName = 'BezierEdge';
+BezierEdgeInternal.displayName = 'BezierEdgeInternal';

-export default BezierEdge;
+export { BezierEdge, BezierEdgeInternal };