ref(replays): Refactor MouseTracking component into a react hook (#36710)

Refactor the MouseTracking component into a hook which is actually more re-usable.

Tested the change by making sure that the Replay Timeline still works properly, i can hover my mouse over and see the hoverTime updated in all the places on the page, and importantly the purple hoverTime bar is visible.

Author: ryan953

static/app/components/replays/player/scrubberMouseTracking.tsx

@@ -1,11 +1,7 @@
 import {useCallback} from 'react';
 
-import MouseTracking, {
-  Props as MouseTrackingProps,
-} from 'sentry/components/replays/mouseTracking';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
-
-type OnMouseMoveParams = Parameters<MouseTrackingProps['onMouseMove']>;
+import useMouseTracking from 'sentry/utils/replays/hooks/useMouseTracking';
 
 type Props = {
   children: React.ReactNode;
@@ -14,8 +10,8 @@ type Props = {
 function ScrubberMouseTracking({children}: Props) {
   const {duration = 0, setCurrentHoverTime} = useReplayContext();
 
-  const handleMouseMove = useCallback(
-    (params: OnMouseMoveParams[0]) => {
+  const handlePositionChange = useCallback(
+    params => {
       if (!params || duration === undefined) {
         setCurrentHoverTime(undefined);
         return;
@@ -33,7 +29,11 @@ function ScrubberMouseTracking({children}: Props) {
     [duration, setCurrentHoverTime]
   );
 
-  return <MouseTracking onMouseMove={handleMouseMove}>{children}</MouseTracking>;
+  const mouseTrackingProps = useMouseTracking<HTMLDivElement>({
+    onPositionChange: handlePositionChange,
+  });
+
+  return <div {...mouseTrackingProps}>{children}</div>;
 }
 
 export default ScrubberMouseTracking;

static/app/components/replays/mouseTracking.tsx renamed to static/app/utils/replays/hooks/useMouseTracking.tsx

@@ -1,16 +1,16 @@
-import React, {useCallback, useRef} from 'react';
+import {DOMAttributes, MouseEvent, useCallback, useRef} from 'react';
 import * as Sentry from '@sentry/react';
 
 type CallbackArgs = {height: number; left: number; top: number; width: number};
-export type Props = {
-  children: React.ReactNode;
-  onMouseMove: (args: undefined | CallbackArgs) => void;
-};
+
+type Opts<T extends Element> = {
+  onPositionChange: (args: undefined | CallbackArgs) => void;
+} & DOMAttributes<T>;
 
 class AbortError extends Error {}
 
 /**
- * Replace `elem.getBoundingClientRect()` which is too laggy for onMouseMove
+ * Replace `elem.getBoundingClientRect()` which is too laggy for onPositionChange
  */
 function getBoundingRect(
   elem: Element,
@@ -38,22 +38,28 @@ function getBoundingRect(
   });
 }
 
-function MouseTracking({onMouseMove, children}: Props) {
-  const elem = useRef<HTMLDivElement>(null);
+function useMouseTracking<T extends Element>({
+  onPositionChange,
+  onMouseEnter,
+  onMouseMove,
+  onMouseLeave,
+  ...rest
+}: Opts<T>) {
+  const elem = useRef<T>(null);
   const controller = useRef<AbortController>(new AbortController());
 
-  const handleMouseMove = useCallback(
-    async (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+  const handlePositionChange = useCallback(
+    async (e: MouseEvent<T>) => {
       if (!elem.current) {
-        onMouseMove(undefined);
+        onPositionChange(undefined);
         return;
       }
 
       try {
         const rect = await getBoundingRect(elem.current, {
           signal: controller.current.signal,
         });
-        onMouseMove({
+        onPositionChange({
           height: rect.height,
           left: Math.min(e.clientX - rect.left, rect.width),
           top: Math.min(e.clientY - rect.top, rect.height),
@@ -68,28 +74,34 @@ function MouseTracking({onMouseMove, children}: Props) {
         Sentry.captureException(err);
       }
     },
-    [onMouseMove, controller]
+    [onPositionChange, controller]
   );
 
-  const onMouseLeave = useCallback(() => {
+  const handleOnMouseLeave = useCallback(() => {
     if (controller.current) {
       controller.current.abort();
       controller.current = new AbortController();
     }
 
-    onMouseMove(undefined);
-  }, [onMouseMove, controller]);
+    onPositionChange(undefined);
+  }, [onPositionChange, controller]);
 
-  return (
-    <div
-      ref={elem}
-      onMouseEnter={handleMouseMove}
-      onMouseMove={handleMouseMove}
-      onMouseLeave={onMouseLeave}
-    >
-      {children}
-    </div>
-  );
+  return {
+    ref: elem,
+    ...rest,
+    onMouseEnter: (e: MouseEvent<T>) => {
+      handlePositionChange(e);
+      onMouseEnter?.(e);
+    },
+    onMouseMove: (e: MouseEvent<T>) => {
+      handlePositionChange(e);
+      onMouseMove?.(e);
+    },
+    onMouseLeave: (e: MouseEvent<T>) => {
+      handleOnMouseLeave();
+      onMouseLeave?.(e);
+    },
+  };
 }
 
-export default MouseTracking;
+export default useMouseTracking;