refactor(examples): hide old api examples

example/src/Stress/index.tsx

@@ -1,15 +1,13 @@
-import React, { useState, CSSProperties } from 'react';
+import { useState, CSSProperties, useCallback } from 'react';
 import ReactFlow, {
-  removeElements,
-  addEdge,
   MiniMap,
-  isNode,
   Controls,
   Background,
   OnLoadParams,
-  Elements,
-  Connection,
   Edge,
+  Node,
+  ElementChange,
+  applyNodeChanges,
 } from 'react-flow-renderer';
 
 import { getElements } from './utils';
@@ -21,38 +19,41 @@ const onLoad = (reactFlowInstance: OnLoadParams) => {
   console.log(reactFlowInstance.getElements());
 };
 
-const initialElements: Elements = getElements(30, 30);
+const initialElements = getElements(30, 30);
 
 const StressFlow = () => {
-  const [elements, setElements] = useState<Elements>(initialElements);
-  const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
-  const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els));
+  const [nodes, setNodes] = useState<Node[]>(initialElements.nodes);
+  const [edges, setEdges] = useState<Edge[]>(initialElements.edges);
+  // const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
+  // const onConnect = (params: Connection | Edge, nds: Node[]) => setElements((els) => addEdge(params, els));
 
   const updatePos = () => {
-    setElements((elms) => {
-      return elms.map((el) => {
-        if (isNode(el)) {
-          return {
-            ...el,
-            position: {
-              x: Math.random() * window.innerWidth,
-              y: Math.random() * window.innerHeight,
-            },
-          };
-        }
-
-        return el;
+    setNodes((nds) => {
+      return nds.map((n) => {
+        return {
+          ...n,
+          position: {
+            x: Math.random() * window.innerWidth,
+            y: Math.random() * window.innerHeight,
+          },
+        };
       });
     });
   };
 
   const updateElements = () => {
     const grid = Math.ceil(Math.random() * 10);
-    setElements(getElements(grid, grid));
+    const initialElements = getElements(grid, grid);
+    setNodes(initialElements.nodes);
+    setEdges(initialElements.edges);
   };
 
+  const onNodesChange = useCallback((changes: ElementChange[]) => {
+    setNodes((ns) => applyNodeChanges(changes, ns));
+  }, []);
+
   return (
-    <ReactFlow elements={elements} onLoad={onLoad} onElementsRemove={onElementsRemove} onConnect={onConnect}>
+    <ReactFlow nodes={nodes} edges={edges} onLoad={onLoad} onNodesChange={onNodesChange}>
       <MiniMap />
       <Controls />
       <Background />

example/src/Stress/utils.ts

@@ -1,7 +1,13 @@
-import { Elements } from 'react-flow-renderer';
+import { Node, Edge } from 'react-flow-renderer';
 
-export function getElements(xElements: number = 10, yElements: number = 10): Elements {
-  const initialElements = [];
+type ElementsCollection = {
+  nodes: Node[];
+  edges: Edge[];
+};
+
+export function getElements(xElements: number = 10, yElements: number = 10): ElementsCollection {
+  const initialNodes = [];
+  const initialEdges = [];
   let nodeId = 1;
   let recentNodeId = null;
 
@@ -15,10 +21,10 @@ export function getElements(xElements: number = 10, yElements: number = 10): Ele
         data,
         position,
       };
-      initialElements.push(node);
+      initialNodes.push(node);
 
       if (recentNodeId && nodeId <= xElements * yElements) {
-        initialElements.push({ id: `${x}-${y}`, source: recentNodeId.toString(), target: nodeId.toString() });
+        initialEdges.push({ id: `${x}-${y}`, source: recentNodeId.toString(), target: nodeId.toString() });
       }
 
       recentNodeId = nodeId;
@@ -26,5 +32,8 @@ export function getElements(xElements: number = 10, yElements: number = 10): Ele
     }
   }
 
-  return initialElements;
+  return {
+    nodes: initialNodes,
+    edges: initialEdges,
+  };
 }