refactor(handle): forward ref closes #1458 closes #1385

src/components/Handle/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useContext, useCallback, FC, HTMLAttributes } from 'react';
+import React, { memo, useContext, useCallback, HTMLAttributes, forwardRef } from 'react';
 import cc from 'classcat';
 
 import { useStoreActions, useStoreState } from '../../store/hooks';
@@ -9,95 +9,103 @@ import { onMouseDown, SetSourceIdFunc, SetPosition } from './handler';
 
 const alwaysValid = () => true;
 
-const Handle: FC<HandleProps & Omit<HTMLAttributes<HTMLDivElement>, 'id'>> = ({
-  type = 'source',
-  position = Position.Top,
-  isValidConnection = alwaysValid,
-  isConnectable = true,
-  id,
-  onConnect,
-  children,
-  className,
-  ...rest
-}) => {
-  const nodeId = useContext(NodeIdContext) as ElementId;
-  const setPosition = useStoreActions((actions) => actions.setConnectionPosition);
-  const setConnectionNodeId = useStoreActions((actions) => actions.setConnectionNodeId);
-  const onConnectAction = useStoreState((state) => state.onConnect);
-  const onConnectStart = useStoreState((state) => state.onConnectStart);
-  const onConnectStop = useStoreState((state) => state.onConnectStop);
-  const onConnectEnd = useStoreState((state) => state.onConnectEnd);
-  const connectionMode = useStoreState((state) => state.connectionMode);
-  const handleId = id || null;
-  const isTarget = type === 'target';
+export type HandleComponentProps = HandleProps & Omit<HTMLAttributes<HTMLDivElement>, 'id'>;
 
-  const onConnectExtended = useCallback(
-    (params: Connection) => {
-      onConnectAction?.(params);
-      onConnect?.(params);
+const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
+  (
+    {
+      type = 'source',
+      position = Position.Top,
+      isValidConnection = alwaysValid,
+      isConnectable = true,
+      id,
+      onConnect,
+      children,
+      className,
+      ...rest
     },
-    [onConnectAction, onConnect]
-  );
+    ref
+  ) => {
+    const nodeId = useContext(NodeIdContext) as ElementId;
+    const setPosition = useStoreActions((actions) => actions.setConnectionPosition);
+    const setConnectionNodeId = useStoreActions((actions) => actions.setConnectionNodeId);
+    const onConnectAction = useStoreState((state) => state.onConnect);
+    const onConnectStart = useStoreState((state) => state.onConnectStart);
+    const onConnectStop = useStoreState((state) => state.onConnectStop);
+    const onConnectEnd = useStoreState((state) => state.onConnectEnd);
+    const connectionMode = useStoreState((state) => state.connectionMode);
+    const handleId = id || null;
+    const isTarget = type === 'target';
 
-  const onMouseDownHandler = useCallback(
-    (event: React.MouseEvent) => {
-      onMouseDown(
-        event,
+    const onConnectExtended = useCallback(
+      (params: Connection) => {
+        onConnectAction?.(params);
+        onConnect?.(params);
+      },
+      [onConnectAction, onConnect]
+    );
+
+    const onMouseDownHandler = useCallback(
+      (event: React.MouseEvent) => {
+        onMouseDown(
+          event,
+          handleId,
+          nodeId,
+          setConnectionNodeId as unknown as SetSourceIdFunc,
+          setPosition as unknown as SetPosition,
+          onConnectExtended,
+          isTarget,
+          isValidConnection,
+          connectionMode,
+          undefined,
+          undefined,
+          onConnectStart,
+          onConnectStop,
+          onConnectEnd
+        );
+      },
+      [
         handleId,
         nodeId,
-        setConnectionNodeId as unknown as SetSourceIdFunc,
-        setPosition as unknown as SetPosition,
+        setConnectionNodeId,
+        setPosition,
         onConnectExtended,
         isTarget,
         isValidConnection,
         connectionMode,
-        undefined,
-        undefined,
         onConnectStart,
         onConnectStop,
-        onConnectEnd
-      );
-    },
-    [
-      handleId,
-      nodeId,
-      setConnectionNodeId,
-      setPosition,
-      onConnectExtended,
-      isTarget,
-      isValidConnection,
-      connectionMode,
-      onConnectStart,
-      onConnectStop,
-      onConnectEnd,
-    ]
-  );
+        onConnectEnd,
+      ]
+    );
 
-  const handleClasses = cc([
-    'react-flow__handle',
-    `react-flow__handle-${position}`,
-    'nodrag',
-    className,
-    {
-      source: !isTarget,
-      target: isTarget,
-      connectable: isConnectable,
-    },
-  ]);
+    const handleClasses = cc([
+      'react-flow__handle',
+      `react-flow__handle-${position}`,
+      'nodrag',
+      className,
+      {
+        source: !isTarget,
+        target: isTarget,
+        connectable: isConnectable,
+      },
+    ]);
 
-  return (
-    <div
-      data-handleid={handleId}
-      data-nodeid={nodeId}
-      data-handlepos={position}
-      className={handleClasses}
-      onMouseDown={onMouseDownHandler}
-      {...rest}
-    >
-      {children}
-    </div>
-  );
-};
+    return (
+      <div
+        data-handleid={handleId}
+        data-nodeid={nodeId}
+        data-handlepos={position}
+        className={handleClasses}
+        onMouseDown={onMouseDownHandler}
+        ref={ref}
+        {...rest}
+      >
+        {children}
+      </div>
+    );
+  }
+);
 
 Handle.displayName = 'Handle';