rc-virtual-list - npm Package Compare versions

Comparing version 3.0.5 to 3.0.6

es/hooks/useFrameWheel.d.ts

@@ -1,1 +0,6 @@
-export default function useFrameWheel(inVirtual: boolean, onWheelDelta: (offset: number) => void): (event: MouseWheelEvent) => void;
+interface FireFoxDOMMouseScrollEvent {
+    detail: number;
+    preventDefault: Function;
+}
+export default function useFrameWheel(inVirtual: boolean, onWheelDelta: (offset: number) => void): [(e: WheelEvent) => void, (e: FireFoxDOMMouseScrollEvent) => void];
+export {};

es/hooks/useFrameWheel.js

 import { useRef } from 'react';
 import raf from "rc-util/es/raf";
+import isFF from '../utils/isFirefox';
 export default function useFrameWheel(inVirtual, onWheelDelta) {
   var offsetRef = useRef(0);
-  var nextFrameRef = useRef(null);
+  var nextFrameRef = useRef(null); // Firefox patch
 
+  var wheelValueRef = useRef(null);
+  var isMouseScrollRef = useRef(false);
+
   function onWheel(event) {
     if (!inVirtual) return; // Proxy of scroll events
 
-    event.preventDefault();
+    if (!isFF) {
+      event.preventDefault();
+    }
+
     raf.cancel(nextFrameRef.current);
     offsetRef.current += event.deltaY;
+    wheelValueRef.current = event.deltaY;
     nextFrameRef.current = raf(function () {
-      onWheelDelta(offsetRef.current);
+      // Patch a multiple for Firefox to fix wheel number too small
+      // ref: https://github.com/ant-design/ant-design/issues/26372#issuecomment-679460266
+      var patchMultiple = isMouseScrollRef.current ? 10 : 1;
+      onWheelDelta(offsetRef.current * patchMultiple);
       offsetRef.current = 0;
     });
+  } // A patch for firefox
+
+
+  function onFireFoxScroll(event) {
+    if (!inVirtual) return; // Firefox level stop
+
+    event.preventDefault();
+    isMouseScrollRef.current = event.detail === wheelValueRef.current;
   }
 
-  return onWheel;
+  return [onWheel, onFireFoxScroll];
 }

es/List.js

@@ -187,11 +187,3 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
   var keepInRange = useInRange(scrollHeight, height); // ================================ Scroll ================================
-  // Since this added in global,should use ref to keep update
 
-  var onRawWheel = useFrameWheel(inVirtual, function (offsetY) {
-    syncScrollTop(function (top) {
-      var newTop = keepInRange(top + offsetY);
-      return newTop;
-    });
-  });
-
   function onScrollBar(newScrollTop) {
@@ -216,8 +208,21 @@ var newTop = keepInRange(newScrollTop);
     onScroll === null || onScroll === void 0 ? void 0 : onScroll(e);
-  }
+  } // Since this added in global,should use ref to keep update
 
+
+  var _useFrameWheel = useFrameWheel(inVirtual, function (offsetY) {
+    syncScrollTop(function (top) {
+      var newTop = keepInRange(top + offsetY);
+      return newTop;
+    });
+  }),
+      _useFrameWheel2 = _slicedToArray(_useFrameWheel, 2),
+      onRawWheel = _useFrameWheel2[0],
+      onFireFoxScroll = _useFrameWheel2[1];
+
   React.useEffect(function () {
     componentRef.current.addEventListener('wheel', onRawWheel);
+    componentRef.current.addEventListener('DOMMouseScroll', onFireFoxScroll);
     return function () {
       componentRef.current.removeEventListener('wheel', onRawWheel);
+      componentRef.current.removeEventListener('DOMMouseScroll', onFireFoxScroll);
     };
@@ -224,0 +229,0 @@ }, [inVirtual]); // ================================= Ref ==================================

lib/hooks/useFrameWheel.d.ts

@@ -1,1 +0,6 @@
-export default function useFrameWheel(inVirtual: boolean, onWheelDelta: (offset: number) => void): (event: MouseWheelEvent) => void;
+interface FireFoxDOMMouseScrollEvent {
+    detail: number;
+    preventDefault: Function;
+}
+export default function useFrameWheel(inVirtual: boolean, onWheelDelta: (offset: number) => void): [(e: WheelEvent) => void, (e: FireFoxDOMMouseScrollEvent) => void];
+export {};

lib/hooks/useFrameWheel.js

@@ -12,2 +12,4 @@ "use strict";
 
+var _isFirefox = _interopRequireDefault(require("../utils/isFirefox"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -17,8 +19,13 @@
   var offsetRef = (0, _react.useRef)(0);
-  var nextFrameRef = (0, _react.useRef)(null);
+  var nextFrameRef = (0, _react.useRef)(null); // Firefox patch
 
+  var wheelValueRef = (0, _react.useRef)(null);
+  var isMouseScrollRef = (0, _react.useRef)(false);
+
   function onWheel(event) {
     if (!inVirtual) return; // Proxy of scroll events
 
-    event.preventDefault();
+    if (!_isFirefox.default) {
+      event.preventDefault();
+    }
 
@@ -28,9 +35,21 @@ _raf.default.cancel(nextFrameRef.current);
     offsetRef.current += event.deltaY;
+    wheelValueRef.current = event.deltaY;
     nextFrameRef.current = (0, _raf.default)(function () {
-      onWheelDelta(offsetRef.current);
+      // Patch a multiple for Firefox to fix wheel number too small
+      // ref: https://github.com/ant-design/ant-design/issues/26372#issuecomment-679460266
+      var patchMultiple = isMouseScrollRef.current ? 10 : 1;
+      onWheelDelta(offsetRef.current * patchMultiple);
       offsetRef.current = 0;
     });
+  } // A patch for firefox
+
+
+  function onFireFoxScroll(event) {
+    if (!inVirtual) return; // Firefox level stop
+
+    event.preventDefault();
+    isMouseScrollRef.current = event.detail === wheelValueRef.current;
   }
 
-  return onWheel;
+  return [onWheel, onFireFoxScroll];
 }

lib/List.js

@@ -29,3 +29,3 @@ "use strict";
 
-var _useFrameWheel = _interopRequireDefault(require("./hooks/useFrameWheel"));
+var _useFrameWheel3 = _interopRequireDefault(require("./hooks/useFrameWheel"));
 
@@ -214,11 +214,3 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
   var keepInRange = (0, _useInRange.default)(scrollHeight, height); // ================================ Scroll ================================
-  // Since this added in global,should use ref to keep update
 
-  var onRawWheel = (0, _useFrameWheel.default)(inVirtual, function (offsetY) {
-    syncScrollTop(function (top) {
-      var newTop = keepInRange(top + offsetY);
-      return newTop;
-    });
-  });
-
   function onScrollBar(newScrollTop) {
@@ -243,8 +235,21 @@ var newTop = keepInRange(newScrollTop);
     onScroll === null || onScroll === void 0 ? void 0 : onScroll(e);
-  }
+  } // Since this added in global,should use ref to keep update
 
+
+  var _useFrameWheel = (0, _useFrameWheel3.default)(inVirtual, function (offsetY) {
+    syncScrollTop(function (top) {
+      var newTop = keepInRange(top + offsetY);
+      return newTop;
+    });
+  }),
+      _useFrameWheel2 = _slicedToArray(_useFrameWheel, 2),
+      onRawWheel = _useFrameWheel2[0],
+      onFireFoxScroll = _useFrameWheel2[1];
+
   React.useEffect(function () {
     componentRef.current.addEventListener('wheel', onRawWheel);
+    componentRef.current.addEventListener('DOMMouseScroll', onFireFoxScroll);
     return function () {
       componentRef.current.removeEventListener('wheel', onRawWheel);
+      componentRef.current.removeEventListener('DOMMouseScroll', onFireFoxScroll);
     };
@@ -251,0 +256,0 @@ }, [inVirtual]); // ================================= Ref ==================================

package.json

 {
   "name": "rc-virtual-list",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "description": "React Virtual List Component",
@@ -5,0 +5,0 @@ "engines": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

109136

increased by2.51%

Number of package files

66

increased by6.45%

Lines of code

2065

increased by2.89%

No dependency changes