rc-virtual-list - npm Package Compare versions

Comparing version 3.7.0 to 3.8.0

es/Filler.js

@@ -50,5 +50,5 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     ref: ref
-  }, innerProps), children), extra));
+  }, innerProps), children)), extra);
 });
 Filler.displayName = 'Filler';
 export default Filler;

es/List.d.ts

@@ -39,2 +39,10 @@ import * as React from 'react';
     onScroll?: React.UIEventHandler<HTMLElement>;
+    /**
+     * Given the virtual offset value.
+     * It's the logic offset from start position.
+     */
+    onVirtualScroll?: (info: {
+        x: number;
+        y: number;
+    }) => void;
     /** Trigger when render list item changed */
@@ -41,0 +49,0 @@ onVisibleChange?: (visibleList: T[], fullList: T[]) => void;

es/List.js

@@ -6,5 +6,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["prefixCls", "className", "height", "itemHeight", "fullHeight", "style", "data", "children", "itemKey", "virtual", "direction", "scrollWidth", "component", "onScroll", "onVisibleChange", "innerProps", "extraRender"];
+var _excluded = ["prefixCls", "className", "height", "itemHeight", "fullHeight", "style", "data", "children", "itemKey", "virtual", "direction", "scrollWidth", "component", "onScroll", "onVirtualScroll", "onVisibleChange", "innerProps", "extraRender"];
 import * as React from 'react';
 import { useRef, useState } from 'react';
+import { flushSync } from 'react-dom';
 import classNames from 'classnames';
@@ -47,2 +48,3 @@ import ResizeObserver from 'rc-resize-observer';
     onScroll = props.onScroll,
+    onVirtualScroll = props.onVirtualScroll,
     onVisibleChange = props.onVisibleChange,
@@ -222,6 +224,24 @@ innerProps = props.innerProps,
   // ================================ Scroll ================================
+  var lastVirtualScrollInfoRef = useRef([0, 0]);
+  var triggerScroll = useEvent(function () {
+    if (onVirtualScroll) {
+      var x = isRTL ? -offsetLeft : offsetLeft;
+      var y = offsetTop;
+      // Trigger when offset changed
+      if (lastVirtualScrollInfoRef.current[0] !== x || lastVirtualScrollInfoRef.current[1] !== y) {
+        onVirtualScroll({
+          x: x,
+          y: y
+        });
+        lastVirtualScrollInfoRef.current = [x, y];
+      }
+    }
+  });
   function onScrollBar(newScrollOffset, horizontal) {
     var newOffset = newScrollOffset;
     if (horizontal) {
-      setOffsetLeft(newOffset);
+      flushSync(function () {
+        setOffsetLeft(newOffset);
+      });
+      triggerScroll();
     } else {
@@ -239,2 +259,3 @@ syncScrollTop(newOffset);
     onScroll === null || onScroll === void 0 ? void 0 : onScroll(e);
+    triggerScroll();
   }
@@ -244,9 +265,12 @@ var onWheelDelta = useEvent(function (offsetXY, fromHorizontal) {
       // Horizontal scroll no need sync virtual position
-      setOffsetLeft(function (left) {
-        var newLeft = left + offsetXY;
-        var max = scrollWidth - size.width;
-        newLeft = Math.max(newLeft, 0);
-        newLeft = Math.min(newLeft, max);
-        return newLeft;
+      flushSync(function () {
+        setOffsetLeft(function (left) {
+          var newLeft = left + (isRTL ? -offsetXY : offsetXY);
+          var max = scrollWidth - size.width;
+          newLeft = Math.max(newLeft, 0);
+          newLeft = Math.min(newLeft, max);
+          return newLeft;
+        });
       });
+      triggerScroll();
     } else {
@@ -253,0 +277,0 @@ syncScrollTop(function (top) {

lib/Filler.js

@@ -58,3 +58,3 @@ "use strict";
     ref: ref
-  }, innerProps), children), extra));
+  }, innerProps), children)), extra);
 });
@@ -61,0 +61,0 @@ Filler.displayName = 'Filler';

lib/List.d.ts

@@ -39,2 +39,10 @@ import * as React from 'react';
     onScroll?: React.UIEventHandler<HTMLElement>;
+    /**
+     * Given the virtual offset value.
+     * It's the logic offset from start position.
+     */
+    onVirtualScroll?: (info: {
+        x: number;
+        y: number;
+    }) => void;
     /** Trigger when render list item changed */
@@ -41,0 +49,0 @@ onVisibleChange?: (visibleList: T[], fullList: T[]) => void;

lib/List.js

@@ -16,2 +16,3 @@ "use strict";
 var React = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -31,3 +32,3 @@ var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));
 var _rcUtil = require("rc-util");
-var _excluded = ["prefixCls", "className", "height", "itemHeight", "fullHeight", "style", "data", "children", "itemKey", "virtual", "direction", "scrollWidth", "component", "onScroll", "onVisibleChange", "innerProps", "extraRender"];
+var _excluded = ["prefixCls", "className", "height", "itemHeight", "fullHeight", "style", "data", "children", "itemKey", "virtual", "direction", "scrollWidth", "component", "onScroll", "onVirtualScroll", "onVisibleChange", "innerProps", "extraRender"];
 var EMPTY_DATA = [];
@@ -56,2 +57,3 @@ var ScrollStyle = {
     onScroll = props.onScroll,
+    onVirtualScroll = props.onVirtualScroll,
     onVisibleChange = props.onVisibleChange,
@@ -231,6 +233,24 @@ innerProps = props.innerProps,
   // ================================ Scroll ================================
+  var lastVirtualScrollInfoRef = (0, React.useRef)([0, 0]);
+  var triggerScroll = (0, _rcUtil.useEvent)(function () {
+    if (onVirtualScroll) {
+      var x = isRTL ? -offsetLeft : offsetLeft;
+      var y = offsetTop;
+      // Trigger when offset changed
+      if (lastVirtualScrollInfoRef.current[0] !== x || lastVirtualScrollInfoRef.current[1] !== y) {
+        onVirtualScroll({
+          x: x,
+          y: y
+        });
+        lastVirtualScrollInfoRef.current = [x, y];
+      }
+    }
+  });
   function onScrollBar(newScrollOffset, horizontal) {
     var newOffset = newScrollOffset;
     if (horizontal) {
-      setOffsetLeft(newOffset);
+      (0, _reactDom.flushSync)(function () {
+        setOffsetLeft(newOffset);
+      });
+      triggerScroll();
     } else {
@@ -248,2 +268,3 @@ syncScrollTop(newOffset);
     onScroll === null || onScroll === void 0 ? void 0 : onScroll(e);
+    triggerScroll();
   }
@@ -253,9 +274,12 @@ var onWheelDelta = (0, _rcUtil.useEvent)(function (offsetXY, fromHorizontal) {
       // Horizontal scroll no need sync virtual position
-      setOffsetLeft(function (left) {
-        var newLeft = left + offsetXY;
-        var max = scrollWidth - size.width;
-        newLeft = Math.max(newLeft, 0);
-        newLeft = Math.min(newLeft, max);
-        return newLeft;
+      (0, _reactDom.flushSync)(function () {
+        setOffsetLeft(function (left) {
+          var newLeft = left + (isRTL ? -offsetXY : offsetXY);
+          var max = scrollWidth - size.width;
+          newLeft = Math.max(newLeft, 0);
+          newLeft = Math.min(newLeft, max);
+          return newLeft;
+        });
       });
+      triggerScroll();
     } else {
@@ -262,0 +286,0 @@ syncScrollTop(function (top) {

package.json

 {
   "name": "rc-virtual-list",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "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

111420

increased by1.78%

Lines of code

2821

increased by2.32%

No dependency changes