From cbc41f244e495a8ae7c955c9bd5000af1d9de39f Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 27 Jul 2020 12:36:47 +0200
Subject: [PATCH] refactor(examples): cleanup

---
 example/src/CustomNode/index.js | 16 ++++++++++------
 example/src/Edges/index.js      | 11 ++++++-----
 example/src/Overview/index.js   |  8 +++++---
 example/src/Validation/index.js | 14 +++++++++-----
 4 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/example/src/CustomNode/index.js b/example/src/CustomNode/index.js
index 247f4b2b..e5b11736 100644
--- a/example/src/CustomNode/index.js
+++ b/example/src/CustomNode/index.js
@@ -10,6 +10,12 @@ const onLoad = (reactFlowInstance) => console.log('flow loaded:', reactFlowInsta
 
 const initBgColor = '#f0e742';
 
+const connectionLineStyle = { stroke: '#fff' };
+const snapGrid = [16, 16];
+const nodeTypes = {
+  selectorNode: ColorSelectorNode,
+};
+
 const CustomNodeFlow = () => {
   const [elements, setElements] = useState([]);
   const [bgColor, setBgColor] = useState(initBgColor);
@@ -66,14 +72,12 @@ const CustomNodeFlow = () => {
       onElementsRemove={onElementsRemove}
       onConnect={onConnect}
       onNodeDragStop={onNodeDragStop}
-      style={{ width: '100%', height: '100%', background: bgColor }}
+      style={{ background: bgColor }}
       onLoad={onLoad}
-      nodeTypes={{
-        selectorNode: ColorSelectorNode,
-      }}
-      connectionLineStyle={{ stroke: '#fff' }}
+      nodeTypes={nodeTypes}
+      connectionLineStyle={connectionLineStyle}
       snapToGrid={true}
-      snapGrid={[16, 16]}
+      snapGrid={snapGrid}
     >
       <MiniMap
         nodeColor={(n) => {
diff --git a/example/src/Edges/index.js b/example/src/Edges/index.js
index 545d2e4a..41040cd4 100644
--- a/example/src/Edges/index.js
+++ b/example/src/Edges/index.js
@@ -41,9 +41,13 @@ const initialElements = [
     labelBgStyle: { fill: '#eee', fillOpacity: 0.7 },
     arrowHeadType: 'arrowclosed',
   },
-  { id: 'e5-8', source: '5', target: '8', type: 'custom', label: 'custom edge' },
+  { id: 'e5-8', source: '5', target: '8', type: 'custom', data: { text: 'custom edge' } },
 ];
 
+const edgeTypes = {
+  custom: CustomEdge,
+};
+
 const EdgesFlow = () => {
   const [elements, setElements] = useState(initialElements);
 
@@ -57,12 +61,9 @@ const EdgesFlow = () => {
       onElementsRemove={onElementsRemove}
       onConnect={onConnect}
       onNodeDragStop={onNodeDragStop}
-      style={{ width: '100%', height: '100%' }}
       onLoad={onLoad}
       snapToGrid={true}
-      edgeTypes={{
-        custom: CustomEdge,
-      }}
+      edgeTypes={edgeTypes}
     >
       <MiniMap />
       <Controls />
diff --git a/example/src/Overview/index.js b/example/src/Overview/index.js
index c7e3c64f..8c311dce 100644
--- a/example/src/Overview/index.js
+++ b/example/src/Overview/index.js
@@ -104,6 +104,9 @@ const initialElements = [
   },
 ];
 
+const connectionLineStyle = { stroke: '#ddd' };
+const snapGrid = [16, 16];
+
 const OverviewFlow = () => {
   const [elements, setElements] = useState(initialElements);
   const onElementsRemove = (elementsToRemove) => setElements((els) => removeElements(elementsToRemove, els));
@@ -119,11 +122,10 @@ const OverviewFlow = () => {
       onNodeDragStop={onNodeDragStop}
       onSelectionChange={onSelectionChange}
       onMoveEnd={onMoveEnd}
-      style={{ width: '100%', height: '100%' }}
       onLoad={onLoad}
-      connectionLineStyle={{ stroke: '#ddd' }}
+      connectionLineStyle={connectionLineStyle}
       snapToGrid={true}
-      snapGrid={[16, 16]}
+      snapGrid={snapGrid}
     >
       <MiniMap
         nodeColor={(n) => {
diff --git a/example/src/Validation/index.js b/example/src/Validation/index.js
index 2a46a5d8..fb82a320 100644
--- a/example/src/Validation/index.js
+++ b/example/src/Validation/index.js
@@ -13,6 +13,8 @@ const initialElements = [
 
 const isValidConnection = (connection) => connection.target === 'B';
 
+const onLoad = (reactFlowInstance) => reactFlowInstance.fitView();
+
 const CustomInput = () => (
   <>
     <div>Only connectable with B</div>
@@ -28,6 +30,11 @@ const CustomNode = ({ id }) => (
   </>
 );
 
+const nodeTypes = {
+  custominput: CustomInput,
+  customnode: CustomNode,
+};
+
 const HorizontalFlow = () => {
   const [elements, setElements] = useState(initialElements);
   const onConnect = (params) => setElements((els) => addEdge(params, els));
@@ -37,12 +44,9 @@ const HorizontalFlow = () => {
       elements={elements}
       onConnect={onConnect}
       selectNodesOnDrag={false}
-      onLoad={(reactFlowInstance) => reactFlowInstance.fitView()}
+      onLoad={onLoad}
       className="validationflow"
-      nodeTypes={{
-        custominput: CustomInput,
-        customnode: CustomNode,
-      }}
+      nodeTypes={nodeTypes}
     />
   );
 };