refactor(examples): clean up node type change example

This commit is contained in:
moklick
2021-02-14 14:52:03 +01:00
parent 1d1a17c80a
commit acd6b76b14
+8 -7
View File
@@ -1,6 +1,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import ReactFlow, { addEdge } from 'react-flow-renderer'; import ReactFlow, { addEdge, isEdge } from 'react-flow-renderer';
const onLoad = (reactFlowInstance) => reactFlowInstance.fitView(); const onLoad = (reactFlowInstance) => reactFlowInstance.fitView();
@@ -23,19 +23,20 @@ const initialElements = [
{ id: 'e1-2', source: '1', type: 'smoothstep', target: '2', animated: true }, { id: 'e1-2', source: '1', type: 'smoothstep', target: '2', animated: true },
]; ];
const HorizontalFlow = () => { const NodeTypeChangeFlow = () => {
const [elements, setElements] = useState(initialElements); const [elements, setElements] = useState(initialElements);
const onConnect = (params) => setElements((els) => addEdge(params, els)); const onConnect = (params) => setElements((els) => addEdge(params, els));
const changeType = () => { const changeType = () => {
setElements((elms) => setElements((elms) =>
elms.map((el) => { elms.map((el) => {
if (el.type === 'input') { if (isEdge(el) || el.type === 'input') {
return el; return el;
} }
el.type = el.type === 'default' ? 'output' : 'default'; return {
...el,
return { ...el }; type: el.type === 'default' ? 'output' : 'default',
};
}) })
); );
}; };
@@ -49,4 +50,4 @@ const HorizontalFlow = () => {
); );
}; };
export default HorizontalFlow; export default NodeTypeChangeFlow;