change mouse event to pointer event

mebtte · Jun 15, 2024 · c951953 · c951953
1 parent 3b610d6
commit c951953
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 35 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-lrc",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "description": "The react component to display lyric from LRC.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

diff --git a/src/components/base_lrc/base_lrc.tsx b/src/components/base_lrc/base_lrc.tsx
@@ -1,14 +1,14 @@
 import {
-  type ForwardedRef,
   forwardRef,
-  type HtmlHTMLAttributes,
   useImperativeHandle,
   useMemo,
   useRef,
-  type MouseEvent,
+  useEffect,
+  type HtmlHTMLAttributes,
   type KeyboardEvent,
   type WheelEvent,
-  useEffect,
+  type PointerEvent,
+  type ForwardedRef,
 } from 'react';
 import { LINE_CLASSNAME, type Props } from './constants';
 import Root from './root';
@@ -34,9 +34,9 @@ function BaseLrc<Line extends BaseLine>(
 
     onWheel,
     onKeyDown,
-    onMouseDown,
-    onMouseUp,
-    onMouseMove,
+    onPointerDown,
+    onPointerUp,
+    onPointerMove,
 
     ...props
   }: Props<Line> & HtmlHTMLAttributes<HTMLDivElement>,
@@ -48,9 +48,9 @@ function BaseLrc<Line extends BaseLine>(
     autoScroll,
     onWheel: onLocalAutoScrollWheel,
     onKeyDown: onLocalAutoScrollKeyDown,
-    onMouseDown: onLocalAutoScrollMouseDown,
-    onMouseUp: onLocalAutoScrollMouseUp,
-    onMouseMove: onLocalAutoScrollMove,
+    onPointerDown: onLocalAutoScrollPointerDown,
+    onPointerUp: onLocalAutoScrollPointerUp,
+    onPointerMove: onLocalAutoScrollPointerMove,
   } = useAutoScroll({
     recoverAutoScrollInterval,
     recoverAutoScrollSingal,
@@ -84,18 +84,22 @@ function BaseLrc<Line extends BaseLine>(
     onLocalAutoScrollKeyDown(event);
     return onKeyDown && onKeyDown(event);
   });
-  const onMouseDownWrapper = useEvent((event: MouseEvent<HTMLDivElement>) => {
-    onLocalAutoScrollMouseDown();
-    return onMouseDown && onMouseDown(event);
-  });
-  const onMouseUpWrapper = useEvent((event: MouseEvent<HTMLDivElement>) => {
-    onLocalAutoScrollMouseUp();
-    return onMouseUp && onMouseUp(event);
-  });
-  const onMouseMoveWrapper = useEvent((event: MouseEvent<HTMLDivElement>) => {
-    onLocalAutoScrollMove();
-    return onMouseMove && onMouseMove(event);
+  const onPointerDownWrapper = useEvent(
+    (event: PointerEvent<HTMLDivElement>) => {
+      onLocalAutoScrollPointerDown();
+      return onPointerDown?.(event);
+    },
+  );
+  const onPointerUpWrapper = useEvent((event: PointerEvent<HTMLDivElement>) => {
+    onLocalAutoScrollPointerUp();
+    return onPointerUp?.(event);
   });
+  const onPointerMoveWrapper = useEvent(
+    (event: PointerEvent<HTMLDivElement>) => {
+      onLocalAutoScrollPointerMove();
+      return onPointerMove?.(event);
+    },
+  );
 
   const lineNodes = useMemo(
     () =>
@@ -113,9 +117,9 @@ function BaseLrc<Line extends BaseLine>(
       {...props}
       onWheel={onWheelWrapper}
       onKeyDown={onKeyDownWrapper}
-      onMouseDown={onMouseDownWrapper}
-      onMouseUp={onMouseUpWrapper}
-      onMouseMove={onMouseMoveWrapper}
+      onPointerDown={onPointerDownWrapper}
+      onPointerUp={onPointerUpWrapper}
+      onPointerMove={onPointerMoveWrapper}
       ref={rootRef}
     >
       {verticalSpace ? space : null}

diff --git a/src/components/base_lrc/use_auto_scroll.ts b/src/components/base_lrc/use_auto_scroll.ts
@@ -40,17 +40,17 @@ export default ({
     );
   }, [recoverAutoScrollInterval]);
 
-  const mouseDownRef = useRef(false);
-  const onMouseDown = useCallback(() => {
-    mouseDownRef.current = true;
+  const pointerDownRef = useRef(false);
+  const onPointerDown = useCallback(() => {
+    pointerDownRef.current = true;
   }, []);
-  const onMouseUp = useCallback(() => {
-    mouseDownRef.current = false;
+  const onPointerUp = useCallback(() => {
+    pointerDownRef.current = false;
   }, []);
-  const onMouseMove = useMemo(
+  const onPointerMove = useMemo(
     () =>
       throttle(() => {
-        if (mouseDownRef.current) {
+        if (pointerDownRef.current) {
           handleUserScroll();
         }
       }),
@@ -88,8 +88,8 @@ export default ({
     autoScroll,
     onWheel,
     onKeyDown,
-    onMouseDown,
-    onMouseUp,
-    onMouseMove,
+    onPointerDown,
+    onPointerUp,
+    onPointerMove,
   };
 };