refactor(examples): cleanup

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={{
+      nodeTypes={nodeTypes}
-        selectorNode: ColorSelectorNode,
+      connectionLineStyle={connectionLineStyle}
-      }}
-      connectionLineStyle={{ stroke: '#fff' }}
       snapToGrid={true}
-      snapGrid={[16, 16]}
+      snapGrid={snapGrid}
     >
       <MiniMap
         nodeColor={(n) => {

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={{
+      edgeTypes={edgeTypes}
-        custom: CustomEdge,
-      }}
     >
       <MiniMap />
       <Controls />

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) => {

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={{
+      nodeTypes={nodeTypes}
-        custominput: CustomInput,
-        customnode: CustomNode,
-      }}
     />
   );
 };