refactor(types): use types for prop type functions

src/container/EdgeRenderer/index.tsx

@@ -11,7 +11,7 @@ interface EdgeRendererProps {
   edgeTypes: any;
   connectionLineStyle?: CSSProperties;
   connectionLineType?: string;
-  onElementClick?: () => void;
+  onElementClick?: (element: Node | Edge) => void;
 }
 
 interface EdgePositions {

src/container/GraphView/index.tsx

@@ -13,14 +13,14 @@ import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler';
 import useElementUpdater from '../../hooks/useElementUpdater';
 import { getDimensions } from '../../utils';
 import { fitView, zoomIn, zoomOut } from '../../utils/graph';
-import { Elements, NodeTypesType, EdgeTypesType, GridType, OnLoadFunc } from '../../types';
+import { Elements, NodeTypesType, EdgeTypesType, GridType, OnLoadFunc, Node, Edge, Connection } from '../../types';
 
 export interface GraphViewProps {
   elements: Elements;
-  onElementClick: () => void;
+  onElementClick: (element: Node | Edge) => void;
   onElementsRemove: (elements: Elements) => void;
-  onNodeDragStop: () => void;
-  onConnect: () => void;
+  onNodeDragStop: (node: Node) => void;
+  onConnect: (conneciton: Connection) => void;
   onLoad: OnLoadFunc;
   onMove: () => void;
   selectionKeyCode: number;

src/container/NodeRenderer/index.tsx

@@ -2,12 +2,12 @@ import React, { memo, ComponentType } from 'react';
 
 import { useStoreState } from '../../store/hooks';
 import { getNodesInside } from '../../utils/graph';
-import { Node, Transform, NodeTypesType, WrapNodeProps, Elements } from '../../types';
+import { Node, Transform, NodeTypesType, WrapNodeProps, Elements, Edge } from '../../types';
 
 interface NodeRendererProps {
   nodeTypes: NodeTypesType;
-  onElementClick: () => void;
-  onNodeDragStop: () => void;
+  onElementClick: (element: Node | Edge) => void;
+  onNodeDragStop: (node: Node) => void;
   onlyRenderVisibleNodes?: boolean;
 }
 
@@ -47,7 +47,7 @@ function renderNode(
 }
 
 const NodeRenderer = memo(({ onlyRenderVisibleNodes = true, ...props }: NodeRendererProps) => {
-  const { nodes, transform, selectedElements, width, height, isInteractive } = useStoreState(s => ({
+  const { nodes, transform, selectedElements, width, height, isInteractive } = useStoreState((s) => ({
     nodes: s.nodes,
     transform: s.transform,
     selectedElements: s.selectedElements,
@@ -67,7 +67,7 @@ const NodeRenderer = memo(({ onlyRenderVisibleNodes = true, ...props }: NodeRend
 
   return (
     <div className="react-flow__nodes" style={transformStyle}>
-      {renderNodes.map(node => renderNode(node, props, transform, selectedElements, isInteractive))}
+      {renderNodes.map((node) => renderNode(node, props, transform, selectedElements, isInteractive))}
     </div>
   );
 });

src/container/ReactFlow/index.tsx

@@ -18,16 +18,16 @@ import StraightEdge from '../../components/Edges/StraightEdge';
 import StepEdge from '../../components/Edges/StepEdge';
 import { createEdgeTypes } from '../EdgeRenderer/utils';
 import store from '../../store';
-import { Elements, NodeTypesType, EdgeTypesType, GridType, OnLoadFunc } from '../../types';
+import { Elements, NodeTypesType, EdgeTypesType, GridType, OnLoadFunc, Node, Edge, Connection } from '../../types';
 
 import '../../style.css';
 
 export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onLoad'> {
   elements: Elements;
-  onElementClick: () => void;
+  onElementClick: (element: Node | Edge) => void;
   onElementsRemove: (elements: Elements) => void;
-  onNodeDragStop: () => void;
-  onConnect: () => void;
+  onNodeDragStop: (node: Node) => void;
+  onConnect: (connection: Connection) => void;
   onLoad: OnLoadFunc;
   onMove: () => void;
   nodeTypes: NodeTypesType;