fix(validation-example): add custom nodes with validation

example/src/Validation/index.js

@@ -6,9 +6,9 @@ import './validation.css';
 
 const initialElements = [
   { id: '0', type: 'custominput', position: { x: 0, y: 150 } },
-  { id: 'A', data: { label : 'A' }, position: { x: 250, y: 0 }, targetPosition: 'left', sourcePosition: 'right' },
+  { id: 'A', type: 'customnode', position: { x: 250, y: 0 } },
-  { id: 'B', data: { label : 'B' }, position: { x: 250, y: 150 }, targetPosition: 'left', sourcePosition: 'right' },
+  { id: 'B', type: 'customnode', position: { x: 250, y: 150 } },
-  { id: 'C', data: { label : 'C' }, position: { x: 250, y:300 }, targetPosition: 'left', sourcePosition: 'right' },
+  { id: 'C', type: 'customnode', position: { x: 250, y:300 } },
 ];
 
 const CustomInput = () => (
@@ -17,12 +17,27 @@ const CustomInput = () => (
     <Handle
       type="source"
       position="right"
-      style={{ background: '#e6e6e9' }}
       isValidConnection={connection => connection.target === 'B'}
     />
   </>
 );
 
+const CustomNode = ({ id }) => (
+  <>
+    <Handle
+      type="target"
+      position="left"
+      isValidConnection={_ => id === 'B'}
+    />
+    <div>{id}</div>
+    <Handle
+      type="source"
+      position="right"
+      isValidConnection={_ => id === 'B'}
+    />
+  </>
+);
+
 const HorizontalFlow = () => {
   const [elements, setElements] = useState(initialElements);
   const onConnect = (params) => setElements(els => addEdge(params, els));
@@ -35,7 +50,8 @@ const HorizontalFlow = () => {
       onLoad={reactflowInstance => reactflowInstance.fitView()}
       className="validationflow"
       nodeTypes={{
-        custominput: CustomInput
+        custominput: CustomInput,
+        customnode: CustomNode
       }}
     />
   );

example/src/Validation/validation.css

@@ -1,19 +1,27 @@
 .validationflow .react-flow__node {
-  background: #e6e6e9;
-  border: 1px solid #ddd;
-}
-
-.validationflow .react-flow__node-custominput {
   width: 150px;
   border-radius: 5px;
   padding: 10px;
-  background: #fff;
   color: #555;
   border: 1px solid #ddd;
   text-align: center;
   font-size: 12px;
 }
 
+.validationflow .react-flow__node-customnode {
+  background: #e6e6e9;
+  border: 1px solid #ddd;
+}
+
+.react-flow__node-custominput .react-flow__handle {
+  background: #e6e6e9;
+}
+
+.validationflow .react-flow__node-custominput {
+  background: #fff;
+
+}
+
 .validationflow .connecting {
   background: #ff6060;
 }