refactor(examples): hide old api examples

example/src/Basic/index.tsx

@@ -1,49 +1,54 @@
-import React, { useState, MouseEvent } from 'react';
+import { useState, MouseEvent, useCallback } from 'react';
 
 import ReactFlow, {
-  removeElements,
   addEdge,
-  isNode,
   Background,
-  Elements,
-  BackgroundVariant,
+  applyNodeChanges,
+  applyEdgeChanges,
+  MiniMap,
+  Controls,
   FlowElement,
   Node,
   Edge,
-  Connection,
+  ElementChange,
   OnLoadParams,
+  Connection,
 } from 'react-flow-renderer';
 
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
 const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
 
-const initialElements: Elements = [
+const initialNodes: Node[] = [
   { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
   { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
   { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
   { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
+];
+
+const initialEdges: Edge[] = [
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
 ];
 
 const BasicFlow = () => {
   const [rfInstance, setRfInstance] = useState<OnLoadParams | null>(null);
-  const [elements, setElements] = useState<Elements>(initialElements);
-  const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
-  const onConnect = (params: Edge | Connection) => setElements((els) => addEdge(params, els));
+  const [nodes, setNodes] = useState<Node[]>(initialNodes);
+  const [edges, setEdges] = useState<Edge[]>(initialEdges);
+
+  const onConnect = useCallback((params: Edge | Connection, nds: Node[]) => {
+    setEdges((eds) => addEdge(params, nds, eds));
+  }, []);
   const onLoad = (reactFlowInstance: OnLoadParams) => setRfInstance(reactFlowInstance);
 
   const updatePos = () => {
-    setElements((elms) => {
-      return elms.map((el) => {
-        if (isNode(el)) {
-          el.position = {
-            x: Math.random() * 400,
-            y: Math.random() * 400,
-          };
-        }
+    setNodes((nds) => {
+      return nds.map((n) => {
+        n.position = {
+          x: Math.random() * 400,
+          y: Math.random() * 400,
+        };
 
-        return el;
+        return n;
       });
     });
   };
@@ -52,23 +57,31 @@ const BasicFlow = () => {
   const resetTransform = () => rfInstance?.setTransform({ x: 0, y: 0, zoom: 1 });
 
   const toggleClassnames = () => {
-    setElements((elms) => {
-      return elms.map((el) => {
-        if (isNode(el)) {
-          el.className = el.className === 'light' ? 'dark' : 'light';
-        }
+    setNodes((nds) => {
+      return nds.map((n) => {
+        n.className = n.className === 'light' ? 'dark' : 'light';
 
-        return el;
+        return n;
       });
     });
   };
 
+  const onNodesChange = useCallback((changes: ElementChange[]) => {
+    setNodes((ns) => applyNodeChanges(changes, ns));
+  }, []);
+
+  const onEdgesChange = useCallback((changes: ElementChange[]) => {
+    setEdges((es) => applyEdgeChanges(changes, es));
+  }, []);
+
   return (
     <ReactFlow
-      elements={elements}
+      nodes={nodes}
+      edges={edges}
       onLoad={onLoad}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
       onElementClick={onElementClick}
-      onElementsRemove={onElementsRemove}
       onConnect={onConnect}
       onNodeDragStop={onNodeDragStop}
       className="react-flow-basic-example"
@@ -76,7 +89,9 @@ const BasicFlow = () => {
       minZoom={0.2}
       maxZoom={4}
     >
-      <Background variant={BackgroundVariant.Lines} />
+      <MiniMap />
+      <Controls />
+      <Background />
 
       <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>
         <button onClick={resetTransform} style={{ marginRight: 5 }}>