refactor(examples): use func components

example/src/Empty/index.js

@@ -1,84 +1,48 @@
-import React, { PureComponent } from 'react';
+import React, { useState } from 'react';
 
-import Graph, { removeElements, addEdge, getOutgoers, MiniMap } from 'react-flow';
+import Graph, { removeElements, addEdge, MiniMap, Controls } from 'react-flow';
 
 const onNodeDragStop = node => console.log('drag stop', node);
+const onLoad = graphInstance => console.log('graph loaded:', graphInstance);
+const onElementClick = element => console.log('click', element);
 
-class App extends PureComponent {
-  constructor() {
-    super();
-
-    this.state = {
-      graphLoaded: false,
-      elements: []
+const EmptyGraph = () => {
+  const [elements, setElements] = useState([]);
+  const onElementsRemove = (elementsToRemove) =>
+    setElements(els => removeElements(elementsToRemove, els));
+  const onConnect = (params) => setElements(els => addEdge(params, els));
+  const onAdd = () => {
+    const nodeId = (elements.length + 1).toString();
+    const newNode = {
+      id: nodeId,
+      data: { label: `Node: ${nodeId}` },
+      position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight }
     };
-  }
+    setElements(els => els.concat(newNode));
+  };
 
-  onLoad(graphInstance) {
-    console.log('graph loaded:', graphInstance);
-
-    this.graphInstance = graphInstance;
-    this.setState({
-      graphLoaded: true
-    });
-  }
-
-  onElementClick(element) {
-    console.log('click', element);
-    console.log('outgoers', getOutgoers(element, this.state.elements));
-  }
-
-  onElementsRemove(elementsToRemove) {
-    this.setState(prevState => ({
-      elements: removeElements(elementsToRemove, prevState.elements)
-    }));
-  }
-
-  onConnect(params) {
-    console.log('connect', params);
-    this.setState(prevState => ({
-      elements: addEdge(params, prevState.elements)
-    }));
-  }
-
-  onAdd() {
-    this.setState((prevState) => {
-      const nodeId =  (prevState.elements.length + 1).toString();
-
-      return {
-        ...prevState,
-        elements: prevState.elements.concat({
-          id: nodeId,
-          data: { label: `Node: ${nodeId}` },
-          position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight }
-        })
-      };
-    });
-  }
-
-  render() {
-    return (
-      <Graph
-        elements={this.state.elements}
-        onLoad={graphInstance => this.onLoad(graphInstance)}
-        onElementClick={element => this.onElementClick(element)}
-        onElementsRemove={elements => this.onElementsRemove(elements)}
-        onConnect={params => this.onConnect(params)}
-        onNodeDragStop={onNodeDragStop}
-        style={{ width: '100%', height: '100%' }}
-        backgroundType="lines"
-      >
-      <MiniMap />
-      <button
-        type="button"
-        onClick={() => this.onAdd()}
-        style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}
-      >
-        add
-      </button>
-      </Graph>
-    );
-  }
+  return (
+    <Graph
+      elements={elements}
+      onLoad={onLoad}
+      onElementClick={onElementClick}
+      onElementsRemove={onElementsRemove}
+      onConnect={p => onConnect(p)}
+      onNodeDragStop={onNodeDragStop}
+      style={{ width: '100%', height: '100%' }}
+      backgroundType="lines"
+    >
+    <MiniMap />
+    <Controls />
+    <button
+      type="button"
+      onClick={onAdd}
+      style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}
+    >
+      add
+    </button>
+    </Graph>
+  );
 }
 
-export default App;
+export default EmptyGraph;