- updates;

src/components/FlowBuilder/index.js

@@ -0,0 +1,95 @@
+import React, { useEffect, useState } from 'react';
+import {
+    ReactFlow,
+    Background,
+    useNodesState,
+    useEdgesState,
+    addEdge,
+    getIncomers,
+    getOutgoers,
+    getConnectedEdges,
+} from '@xyflow/react';
+import { isEmpty } from 'ramda';
+
+import '@xyflow/react/dist/style.css';
+
+const FlowBuilder = ({ initialForm = 0, finalForm = 0, forms = [], updateFn }) => {
+    const [nodes, setNodes] = useState([]);
+    const [edges, setEdges] = useState([]);
+
+    const range = (start, stop, step) => {
+        return Array.from(
+            { length: (stop - start) / step + 1 },
+            (_, i) => start + i * step
+        );
+    }
+
+    useEffect(() => {
+        if (initialForm && finalForm && forms.length) {
+            const total = (forms.length - 2) * (200 - 90);
+            let coordinates = range(total * -1, total, 200);
+
+            const initialNodes = forms.map(o => {
+                let obj;
+
+                if (o.id === initialForm) {
+                    obj = {
+                        id: String(o.id),
+                        type: 'input',
+                        data: { label: o.label },
+                        position: { x: 0, y: 0 },
+                    }
+                } else if (o.id === finalForm) {
+                    obj = {
+                        id: String(o.id),
+                        type: 'output',
+                        data: { label: o.label },
+                        position: { x: 0, y: 300 },
+                    }
+                } else {
+                    const x = coordinates.splice(0, 1);
+                    obj = {
+                        id: String(o.id),
+                        data: { label: o.label },
+                        position: { x, y: 150 },
+                    }
+                }
+                return obj
+            });
+
+            let edges = [];
+            forms.map(o => {
+                if (o.id !== initialForm && o.id !== finalForm) {
+                    edges.push({ id: `${initialForm}->${o.id}`, source: String(initialForm), target: String(o.id) });
+                    edges.push({ id: `${o.id}->${finalForm}`, source: String(o.id), target: String(finalForm) });
+                }
+            });
+
+            setNodes(initialNodes);
+            setEdges(edges);
+            updateFn(edges);
+        } else {
+            setNodes([]);
+            setEdges([]);
+        }
+    }, [initialForm, finalForm, forms]);
+
+    return (
+        !isEmpty(nodes) && !isEmpty(edges)
+            ? <div className="reactFlow__wrapper">
+                <ReactFlow
+                    nodes={nodes}
+                    edges={edges}
+                    nodesDraggable={false}
+                    nodesConnectable={false}
+                    fitView
+                    attributionPosition="top-right"
+                >
+                    <Background variant="dots" gap={12} size={1}/>
+                </ReactFlow>
+            </div>
+            : null
+    );
+}
+
+export default FlowBuilder;