test(draghandle): add basic tests #1552

2021-10-05 10:45:51 +02:00
parent 5d2f08cb54
commit c5ce586dd9
4 changed files with 89 additions and 0 deletions
@@ -0,0 +1,33 @@
+import { memo, FC } from 'react';
+
+import { Handle, Position, NodeProps, Connection, Edge } from 'react-flow-renderer';
+
+const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params);
+
+const labelStyle = {
+  display: 'flex',
+  alignItems: 'center',
+};
+
+const dragHandleStyle = {
+  display: 'inline-block',
+  width: 25,
+  height: 25,
+  backgroundColor: 'teal',
+  marginLeft: 5,
+  borderRadius: '50%',
+};
+
+const ColorSelectorNode: FC<NodeProps> = () => {
+  return (
+    <>
+      <Handle type="target" position={Position.Left} onConnect={onConnect} />
+      <div style={labelStyle}>
+        Only draggable here → <span className="custom-drag-handle" style={dragHandleStyle} />
+      </div>
+      <Handle type="source" position={Position.Right} />
+    </>
+  );
+};
+
+export default memo(ColorSelectorNode);