refactor(types): use types for prop type functions

src/components/Handle/BaseHandle.tsx

@@ -1,4 +1,4 @@
-import React, { memo, MouseEvent as ReactMouseEvent } from 'react';
+import React, { memo, MouseEvent as ReactMouseEvent, CSSProperties } from 'react';
 import cx from 'classnames';
 
 import { HandleType, ElementId, Position, XYPosition, OnConnectFunc, Connection } from '../../types';
@@ -16,6 +16,7 @@ interface BaseHandleProps {
   isValidConnection: ValidConnectionFunc;
   id?: ElementId | boolean;
   className?: string;
+  style?: CSSProperties;
 }
 
 type Result = {

src/components/Handle/index.tsx

@@ -4,36 +4,22 @@ import { useStoreActions, useStoreState } from '../../store/hooks';
 import BaseHandle from './BaseHandle';
 import NodeIdContext from '../../contexts/NodeIdContext';
 
-import {
+import { HandleProps, ElementId, Position, Connection } from '../../types';
-  HandleType,
-  ElementId,
-  Position,
-  Connection,
-  OnConnectFunc,
-} from '../../types';
-
-interface HandleProps {
-  type: HandleType;
-  position: Position;
-  onConnect?: OnConnectFunc;
-  isValidConnection?: (connection: Connection) => boolean;
-  id?: string;
-}
 
 const Handle = memo(
   ({
-    onConnect = _ => {},
     type = 'source',
     position = Position.Top,
+    onConnect = () => {},
     isValidConnection = () => true,
     ...rest
   }: HandleProps) => {
     const nodeId = useContext(NodeIdContext) as ElementId;
-    const { setPosition, setSourceId } = useStoreActions(a => ({
+    const { setPosition, setSourceId } = useStoreActions((a) => ({
       setPosition: a.setConnectionPosition,
       setSourceId: a.setConnectionSourceId,
     }));
-    const onConnectAction = useStoreState(s => s.onConnect);
+    const onConnectAction = useStoreState((s) => s.onConnect);
     const onConnectExtended = (params: Connection) => {
       onConnectAction(params);
       onConnect(params);

src/components/Nodes/wrapNode.tsx

@@ -60,7 +60,7 @@ const onDrag = (
 };
 
 const onStop = (
-  onNodeDragStop: (params: Node) => void,
+  onNodeDragStop: (node: Node) => void,
   isDragging: boolean,
   setDragging: (isDragging: boolean) => void,
   id: ElementId,

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;
+  onNodeDragStop: (node: Node) => void;
-  onConnect: () => 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;
+  onElementClick: (element: Node | Edge) => void;
-  onNodeDragStop: () => 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;
+  onNodeDragStop: (node: Node) => void;
-  onConnect: () => void;
+  onConnect: (connection: Connection) => void;
   onLoad: OnLoadFunc;
   onMove: () => void;
   nodeTypes: NodeTypesType;

src/types/index.ts

@@ -109,7 +109,7 @@ export interface NodeComponentProps {
   targetPosition?: Position;
   sourcePosition?: Position;
   onClick?: (node: Node) => void | undefined;
-  onNodeDragStop?: () => any;
+  onNodeDragStop?: (node: Node) => void;
   style?: CSSProperties;
 }
 
@@ -147,13 +147,22 @@ export type Connection = {
   target: ElementId | null;
 };
 
-export type OnConnectFunc = (params: Connection) => void;
+export type OnConnectFunc = (connection: Connection) => void;
 
 export interface HandleElement extends XYPosition, Dimensions {
   id?: ElementId | null;
   position: Position;
 }
 
+export interface HandleProps {
+  type: HandleType;
+  position: Position;
+  onConnect?: OnConnectFunc;
+  isValidConnection?: (connection: Connection) => boolean;
+  id?: string;
+  style?: CSSProperties;
+}
+
 export interface EdgeCompProps {
   id: ElementId;
   source: ElementId;