feat(examples): add validation example

example/src/Validation/index.js

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+
+import ReactFlow, { addEdge, Handle } from 'react-flow-renderer';
+
+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: 'B', data: { label : 'B' }, position: { x: 250, y: 150 }, targetPosition: 'left', sourcePosition: 'right' },
+  { id: 'C', data: { label : 'C' }, position: { x: 250, y:300 }, targetPosition: 'left', sourcePosition: 'right' },
+];
+
+const CustomInput = () => (
+  <>
+    <div>Only connectable with B</div>
+    <Handle
+      type="source"
+      position="right"
+      style={{ background: '#e6e6e9' }}
+      isValidConnection={connection => connection.target === 'B'}
+    />
+  </>
+);
+
+const HorizontalFlow = () => {
+  const [elements, setElements] = useState(initialElements);
+  const onConnect = (params) => setElements(els => addEdge(params, els));
+
+  return (
+    <ReactFlow
+      elements={elements}
+      onConnect={onConnect}
+      selectNodesOnDrag={false}
+      onLoad={reactflowInstance => reactflowInstance.fitView()}
+      className="validationflow"
+      nodeTypes={{
+        custominput: CustomInput
+      }}
+    />
+  );
+}
+
+export default HorizontalFlow;

example/src/Validation/validation.css

@@ -0,0 +1,23 @@
+.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 .connecting {
+  background: #ff6060;
+}
+
+.validationflow .connecting.valid {
+  background: #55dd99;
+}

example/src/index.css

@@ -141,6 +141,14 @@ nav a.active:before {
   color: #f8f8f8;
 }
 
+.react-flow__node-selectorNode {
+  font-size: 12px;
+  background: #eee;
+  border: 1px solid #555;
+  border-radius: 5px;
+  text-align: center;
+}
+
 @media screen and (min-width: 768px) {
   nav {
     position: relative;

example/src/index.js

@@ -9,6 +9,7 @@ import Stress from './Stress';
 import Inactive from './Inactive';
 import Empty from './Empty';
 import Edges from './Edges';
+import Validation from './Validation';
 import Horizontal from './Horizontal';
 
 import './index.css';
@@ -33,6 +34,10 @@ const routes = [{
   path: '/horizontal',
   component: Horizontal,
   label: 'Horizontal'
+}, {
+  path: '/validation',
+  component: Validation,
+  label: 'Validation'
 }, {
   path: '/stress',
   component: Stress,