fix: resolve passive warning (#281)

react-component · Jun 26, 2024 · 376bd49 · 376bd49
1 parent a4a01d7
commit 376bd49
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 12 deletions.
diff --git a/src/List.tsx b/src/List.tsx
@@ -432,9 +432,9 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     }
 
     const componentEle = componentRef.current;
-    componentEle.addEventListener('wheel', onRawWheel);
-    componentEle.addEventListener('DOMMouseScroll', onFireFoxScroll as any);
-    componentEle.addEventListener('MozMousePixelScroll', onMozMousePixelScroll);
+    componentEle.addEventListener('wheel', onRawWheel, { passive: false });
+    componentEle.addEventListener('DOMMouseScroll', onFireFoxScroll as any, { passive: true });
+    componentEle.addEventListener('MozMousePixelScroll', onMozMousePixelScroll, { passive: false });
 
     return () => {
       componentEle.removeEventListener('wheel', onRawWheel);

diff --git a/src/ScrollBar.tsx b/src/ScrollBar.tsx
@@ -115,8 +115,8 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
 
     const scrollbarEle = scrollbarRef.current;
     const thumbEle = thumbRef.current;
-    scrollbarEle.addEventListener('touchstart', onScrollbarTouchStart);
-    thumbEle.addEventListener('touchstart', onThumbMouseDown);
+    scrollbarEle.addEventListener('touchstart', onScrollbarTouchStart, { passive: false });
+    thumbEle.addEventListener('touchstart', onThumbMouseDown, { passive: false });
 
     return () => {
       scrollbarEle.removeEventListener('touchstart', onScrollbarTouchStart);
@@ -176,10 +176,10 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
         onStopMove();
       };
 
-      window.addEventListener('mousemove', onMouseMove);
-      window.addEventListener('touchmove', onMouseMove);
-      window.addEventListener('mouseup', onMouseUp);
-      window.addEventListener('touchend', onMouseUp);
+      window.addEventListener('mousemove', onMouseMove, { passive: true });
+      window.addEventListener('touchmove', onMouseMove, { passive: true });
+      window.addEventListener('mouseup', onMouseUp, { passive: true });
+      window.addEventListener('touchend', onMouseUp, { passive: true });
 
       return () => {
         window.removeEventListener('mousemove', onMouseMove);

diff --git a/src/hooks/useMobileTouchMove.ts b/src/hooks/useMobileTouchMove.ts
@@ -68,8 +68,8 @@ export default function useMobileTouchMove(
       touchYRef.current = Math.ceil(e.touches[0].pageY);
 
       elementRef.current = e.target as HTMLElement;
-      elementRef.current.addEventListener('touchmove', onTouchMove);
-      elementRef.current.addEventListener('touchend', onTouchEnd);
+      elementRef.current.addEventListener('touchmove', onTouchMove, { passive: false });
+      elementRef.current.addEventListener('touchend', onTouchEnd, { passive: true });
     }
   };
 
@@ -82,7 +82,7 @@ export default function useMobileTouchMove(
 
   useLayoutEffect(() => {
     if (inVirtual) {
-      listRef.current.addEventListener('touchstart', onTouchStart);
+      listRef.current.addEventListener('touchstart', onTouchStart, { passive: true });
     }
 
     return () => {