From 3744ed9f62a40a7bd7f886915aa9befc6c166c36 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 10 Jul 2024 12:06:25 +0200
Subject: [PATCH] chore(react): cleanup connection line example

---
 .../src/examples/FloatingEdges/FloatingConnectionLine.tsx  | 7 +++----
 examples/react/src/examples/FloatingEdges/FloatingEdge.tsx | 6 +++---
 examples/react/src/examples/FloatingEdges/index.tsx        | 4 ++--
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/examples/react/src/examples/FloatingEdges/FloatingConnectionLine.tsx b/examples/react/src/examples/FloatingEdges/FloatingConnectionLine.tsx
index a3039123..5f49d8a4 100644
--- a/examples/react/src/examples/FloatingEdges/FloatingConnectionLine.tsx
+++ b/examples/react/src/examples/FloatingEdges/FloatingConnectionLine.tsx
@@ -1,9 +1,8 @@
-import { FC } from 'react';
-import { getBezierPath, ConnectionLineComponentProps, Node, InternalNode } from '@xyflow/react';
+import { getBezierPath, ConnectionLineComponentProps, InternalNode } from '@xyflow/react';
 
 import { getEdgeParams } from './utils';
 
-const FloatingConnectionLine: FC<ConnectionLineComponentProps> = ({ toX, toY, fromPosition, toPosition, fromNode }) => {
+function FloatingConnectionLine({ toX, toY, fromPosition, toPosition, fromNode }: ConnectionLineComponentProps) {
   if (!fromNode) {
     return null;
   }
@@ -32,6 +31,6 @@ const FloatingConnectionLine: FC<ConnectionLineComponentProps> = ({ toX, toY, fr
       <circle cx={toX} cy={toY} fill="#fff" r={3} stroke="#222" strokeWidth={1.5} />
     </g>
   );
-};
+}
 
 export default FloatingConnectionLine;
diff --git a/examples/react/src/examples/FloatingEdges/FloatingEdge.tsx b/examples/react/src/examples/FloatingEdges/FloatingEdge.tsx
index 0856d012..b2b65d4b 100644
--- a/examples/react/src/examples/FloatingEdges/FloatingEdge.tsx
+++ b/examples/react/src/examples/FloatingEdges/FloatingEdge.tsx
@@ -1,9 +1,9 @@
-import { FC, CSSProperties } from 'react';
+import { CSSProperties } from 'react';
 import { EdgeProps, useStore, getBezierPath } from '@xyflow/react';
 
 import { getEdgeParams } from './utils';
 
-const FloatingEdge: FC<EdgeProps> = ({ id, source, target, style }) => {
+function FloatingEdge({ id, source, target, style }: EdgeProps) {
   const { sourceNode, targetNode } = useStore((s) => {
     const sourceNode = s.nodeLookup.get(source);
     const targetNode = s.nodeLookup.get(target);
@@ -31,6 +31,6 @@ const FloatingEdge: FC<EdgeProps> = ({ id, source, target, style }) => {
       <path id={id} className="react-flow__edge-path" d={path} style={style as CSSProperties} />
     </g>
   );
-};
+}
 
 export default FloatingEdge;
diff --git a/examples/react/src/examples/FloatingEdges/index.tsx b/examples/react/src/examples/FloatingEdges/index.tsx
index 032f25f6..57bf921f 100644
--- a/examples/react/src/examples/FloatingEdges/index.tsx
+++ b/examples/react/src/examples/FloatingEdges/index.tsx
@@ -25,7 +25,7 @@ const edgeTypes: EdgeTypes = {
   floating: FloatingEdge,
 };
 
-const FloatingEdges = () => {
+function FloatingEdges() {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
@@ -49,6 +49,6 @@ const FloatingEdges = () => {
       </ReactFlow>
     </div>
   );
-};
+}
 
 export default FloatingEdges;