From f18e8f147f798b446fcf2fc76da65c1f7f660c6e Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Fri, 5 Jun 2020 13:01:07 +0200
Subject: [PATCH] refactor(example): dont use inline functions for handle props
 #282

---
 example/src/Validation/index.js | 30 ++++++++++--------------------
 1 file changed, 10 insertions(+), 20 deletions(-)

diff --git a/example/src/Validation/index.js b/example/src/Validation/index.js
index 47988e4c..2a46a5d8 100644
--- a/example/src/Validation/index.js
+++ b/example/src/Validation/index.js
@@ -8,53 +8,43 @@ const initialElements = [
   { id: '0', type: 'custominput', position: { x: 0, y: 150 } },
   { id: 'A', type: 'customnode', position: { x: 250, y: 0 } },
   { id: 'B', type: 'customnode', position: { x: 250, y: 150 } },
-  { id: 'C', type: 'customnode', position: { x: 250, y:300 } },
+  { id: 'C', type: 'customnode', position: { x: 250, y: 300 } },
 ];
 
+const isValidConnection = (connection) => connection.target === 'B';
+
 const CustomInput = () => (
   <>
     <div>Only connectable with B</div>
-    <Handle
-      type="source"
-      position="right"
-      isValidConnection={connection => connection.target === 'B'}
-    />
+    <Handle type="source" position="right" isValidConnection={isValidConnection} />
   </>
 );
 
 const CustomNode = ({ id }) => (
   <>
-    <Handle
-      type="target"
-      position="left"
-      isValidConnection={_ => id === 'B'}
-    />
+    <Handle type="target" position="left" isValidConnection={isValidConnection} />
     <div>{id}</div>
-    <Handle
-      type="source"
-      position="right"
-      isValidConnection={_ => id === 'B'}
-    />
+    <Handle type="source" position="right" isValidConnection={isValidConnection} />
   </>
 );
 
 const HorizontalFlow = () => {
   const [elements, setElements] = useState(initialElements);
-  const onConnect = (params) => setElements(els => addEdge(params, els));
+  const onConnect = (params) => setElements((els) => addEdge(params, els));
 
   return (
     <ReactFlow
       elements={elements}
       onConnect={onConnect}
       selectNodesOnDrag={false}
-      onLoad={reactFlowInstance => reactFlowInstance.fitView()}
+      onLoad={(reactFlowInstance) => reactFlowInstance.fitView()}
       className="validationflow"
       nodeTypes={{
         custominput: CustomInput,
-        customnode: CustomNode
+        customnode: CustomNode,
       }}
     />
   );
-}
+};
 
 export default HorizontalFlow;