diff --git a/package.json b/package.json index 1cf26fc..4567ff0 100644 --- 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 index 19eb8bf..42958da 100644 --- 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( onWheel, onKeyDown, - onMouseDown, - onMouseUp, - onMouseMove, + onPointerDown, + onPointerUp, + onPointerMove, ...props }: Props & HtmlHTMLAttributes, @@ -48,9 +48,9 @@ function BaseLrc( 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( onLocalAutoScrollKeyDown(event); return onKeyDown && onKeyDown(event); }); - const onMouseDownWrapper = useEvent((event: MouseEvent) => { - onLocalAutoScrollMouseDown(); - return onMouseDown && onMouseDown(event); - }); - const onMouseUpWrapper = useEvent((event: MouseEvent) => { - onLocalAutoScrollMouseUp(); - return onMouseUp && onMouseUp(event); - }); - const onMouseMoveWrapper = useEvent((event: MouseEvent) => { - onLocalAutoScrollMove(); - return onMouseMove && onMouseMove(event); + const onPointerDownWrapper = useEvent( + (event: PointerEvent) => { + onLocalAutoScrollPointerDown(); + return onPointerDown?.(event); + }, + ); + const onPointerUpWrapper = useEvent((event: PointerEvent) => { + onLocalAutoScrollPointerUp(); + return onPointerUp?.(event); }); + const onPointerMoveWrapper = useEvent( + (event: PointerEvent) => { + onLocalAutoScrollPointerMove(); + return onPointerMove?.(event); + }, + ); const lineNodes = useMemo( () => @@ -113,9 +117,9 @@ function BaseLrc( {...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 index b2ba7d2..3c59dda 100644 --- 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, }; };