refactor(examples): on connect use connection type

xyflow · Nov 26, 2021 · 713e7e1 · 713e7e1
1 parent 62f1e90
commit 713e7e1
Show file tree

Hide file tree

Showing 8 changed files with 15 additions and 25 deletions.
diff --git a/example/src/Basic/index.tsx b/example/src/Basic/index.tsx
@@ -111,9 +111,9 @@ const BasicFlow = () => {
   const [nodes, setNodes] = useState<Node[]>(initialNodes);
   const [edges, setEdges] = useState<Edge[]>(initialEdges);
 
-  const onConnect = useCallback((params: Edge | Connection) => {
+  const onConnect = useCallback((connection: Connection) => {
     setEdges((eds) => {
-      return addEdge(params, eds);
+      return addEdge(connection, eds);
     });
   }, []);
   const onLoad = useCallback((reactFlowInstance: OnLoadParams) => setRfInstance(reactFlowInstance), []);

diff --git a/example/src/CustomNode/index.tsx b/example/src/CustomNode/index.tsx
@@ -100,8 +100,8 @@ const CustomNodeFlow = () => {
     ]);
   }, []);
 
-  const onConnect = (params: Connection | Edge) =>
-    setEdges((eds) => addEdge({ ...params, animated: true, style: { stroke: '#fff' } }, eds));
+  const onConnect = (connection: Connection) =>
+    setEdges((eds) => addEdge({ ...connection, animated: true, style: { stroke: '#fff' } }, eds));
 
   const onNodesChange = useCallback((changes: NodeChange[]) => {
     setNodes((ns) => applyNodeChanges(changes, ns));

diff --git a/example/src/FloatingEdges/index.tsx b/example/src/FloatingEdges/index.tsx
@@ -32,8 +32,8 @@ const FloatingEdges = () => {
   const [nodes, setNodes] = useState<Node[]>(initialNodes);
   const [edges, setEdges] = useState<Edge[]>(initialEdges);
 
-  const onConnect = useCallback((params: Edge | Connection) => {
-    setEdges((eds) => addEdge(params, eds));
+  const onConnect = useCallback((connection: Connection) => {
+    setEdges((eds) => addEdge(connection, eds));
   }, []);
 
   const onNodesChange = useCallback((changes: NodeChange[]) => {

diff --git a/example/src/Hidden/index.tsx b/example/src/Hidden/index.tsx
@@ -27,8 +27,8 @@ const HiddenFlow = () => {
   const [edges, setEdges] = useState<Edge[]>(initialEdges);
   const [isHidden, setIsHidden] = useState<boolean>(true);
 
-  const onConnect = useCallback((params: Edge | Connection) => {
-    setEdges((eds) => addEdge(params, eds));
+  const onConnect = useCallback((connection: Connection) => {
+    setEdges((eds) => addEdge(connection, eds));
   }, []);
 
   useEffect(() => {

diff --git a/example/src/Layouting/index.tsx b/example/src/Layouting/index.tsx
@@ -31,10 +31,8 @@ const LayoutFlow = () => {
   const [nodes, setNodes] = useState<Node[]>(initialNodesAndEdges.nodes);
   const [edges, setEdges] = useState<Edge[]>(initialNodesAndEdges.edges);
 
-  const onConnect = useCallback((params: Edge | Connection) => {
-    setEdges((eds) => {
-      return addEdge(params, eds);
-    });
+  const onConnect = useCallback((connection: Connection) => {
+    setEdges((eds) => addEdge(connection, eds));
   }, []);
 
   const onLayout = (direction: string) => {

diff --git a/example/src/NestedNodes/index.tsx b/example/src/NestedNodes/index.tsx
@@ -85,19 +85,13 @@ const initialEdges: Edge[] = [
   { id: 'e4b1-4b2', source: '4b1', target: '4b2' },
 ];
 
-function shuffle() {
-  return Math.random() - Math.random();
-}
-
 const NestedFlow = () => {
   const [rfInstance, setRfInstance] = useState<OnLoadParams | null>(null);
   const [nodes, setNodes] = useState<Node[]>(initialNodes);
   const [edges, setEdges] = useState<Edge[]>(initialEdges);
 
-  const onConnect = useCallback((params: Edge | Connection) => {
-    setEdges((eds) => {
-      return addEdge(params, eds);
-    });
+  const onConnect = useCallback((connection: Connection) => {
+    setEdges((eds) => addEdge(connection, eds));
   }, []);
   const onLoad = useCallback((reactFlowInstance: OnLoadParams) => setRfInstance(reactFlowInstance), []);
 

diff --git a/example/src/Stress/index.tsx b/example/src/Stress/index.tsx
@@ -26,8 +26,8 @@ const { nodes: initialNodes, edges: initialEdges } = getNodesAndEdges(30, 30);
 const StressFlow = () => {
   const [nodes, setNodes] = useState<Node[]>(initialNodes);
   const [edges, setEdges] = useState<Edge[]>(initialEdges);
-  const onConnect = useCallback((params: Edge | Connection) => {
-    setEdges((eds) => addEdge(params, eds));
+  const onConnect = useCallback((connection: Connection) => {
+    setEdges((eds) => addEdge(connection, eds));
   }, []);
   const updatePos = () => {
     setNodes((nds) => {
@@ -51,8 +51,6 @@ const StressFlow = () => {
   };
 
   const onNodesChange = useCallback((changes: NodeChange[]) => {
-    console.log('node change', changes);
-
     setNodes((ns) => applyNodeChanges(changes, ns));
   }, []);
 

diff --git a/example/src/UpdatableEdge/index.tsx b/example/src/UpdatableEdge/index.tsx
@@ -62,7 +62,7 @@ const UpdatableEdge = () => {
   const [edges, setEdges] = useState<Edge[]>(initialEdges);
   const onEdgeUpdate = (oldEdge: Edge, newConnection: Connection) =>
     setEdges((els) => updateEdge(oldEdge, newConnection, els));
-  const onConnect = (params: Connection | Edge) => setEdges((els) => addEdge(params, els));
+  const onConnect = (connection: Connection) => setEdges((els) => addEdge(connection, els));
 
   const onNodesChange = useCallback((changes: NodeChange[]) => {
     setNodes((ns) => applyNodeChanges(changes, ns));