rc-virtual-list - npm Package Compare versions

Comparing version 2.1.4 to 2.1.5

es/hooks/useScrollTo.d.ts

 import * as React from 'react';
 import { ScrollTo } from '../List';
 import { GetKey } from '../interface';
-export default function useScrollTo<T>(containerRef: React.RefObject<HTMLDivElement>, data: T[], height: number, heights: Map<React.Key, number>, itemHeight: number, getKey: GetKey<T>): ScrollTo;
+export default function useScrollTo<T>(containerRef: React.RefObject<HTMLDivElement>, data: T[], heights: Map<React.Key, number>, itemHeight: number, getKey: GetKey<T>, collectHeight: () => void): ScrollTo;

es/hooks/useScrollTo.js

@@ -6,3 +6,3 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 import raf from "rc-util/es/raf";
-export default function useScrollTo(containerRef, data, height, heights, itemHeight, getKey) {
+export default function useScrollTo(containerRef, data, heights, itemHeight, getKey, collectHeight) {
   var scrollRef = React.useRef();
@@ -27,5 +27,6 @@ return function (arg) {
 
-      var syncScroll = function syncScroll() {
-        var times = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 3;
-        if (times < 0 || !containerRef.current) return; // Get top & bottom
+      var syncScroll = function syncScroll(times, targetAlign) {
+        if (times < 0 || !containerRef.current) return;
+        var height = containerRef.current.clientHeight;
+        var mergedAlign = targetAlign || align; // Get top & bottom
 
@@ -35,2 +36,3 @@ var stackTop = 0;
         var itemBottom = 0;
+        var needCollectHeight = false;
 
@@ -43,12 +45,19 @@ for (var i = 0; i <= index; i += 1) {
           stackTop = itemBottom;
+
+          if (i === index && cacheHeight === undefined) {
+            needCollectHeight = true;
+          }
         } // Scroll to
 
 
-        switch (align) {
+        var targetTop = null;
+        var newTargetAlign = targetAlign;
+
+        switch (mergedAlign) {
           case 'top':
-            containerRef.current.scrollTop = itemTop;
+            targetTop = itemTop;
             break;
 
           case 'bottom':
-            containerRef.current.scrollTop = itemBottom - height;
+            targetTop = itemBottom - height;
             break;
@@ -62,5 +71,5 @@
               if (itemTop < scrollTop) {
-                containerRef.current.scrollTop = itemTop;
+                newTargetAlign = 'top';
               } else if (itemBottom > scrollBottom) {
-                containerRef.current.scrollTop = itemBottom - height;
+                newTargetAlign = 'bottom';
               }
@@ -70,10 +79,19 @@ }
 
+        if (targetTop !== null && targetTop !== containerRef.current.scrollTop) {
+          containerRef.current.scrollTop = targetTop;
+        } // We will retry since element may not sync height as it described
+
+
         scrollRef.current = raf(function () {
-          syncScroll(times - 1);
+          if (needCollectHeight) {
+            collectHeight();
+          }
+
+          syncScroll(times - 1, newTargetAlign);
         });
       };
 
-      syncScroll();
+      syncScroll(3);
     }
   };
 }

es/List.js

@@ -189,3 +189,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 scrollTo = useScrollTo(componentRef, mergedData, height, heights, itemHeight, getKey);
+  var scrollTo = useScrollTo(componentRef, mergedData, heights, itemHeight, getKey, collectHeight);
   React.useImperativeHandle(ref, function () {
@@ -192,0 +192,0 @@ return {

lib/hooks/useScrollTo.d.ts

 import * as React from 'react';
 import { ScrollTo } from '../List';
 import { GetKey } from '../interface';
-export default function useScrollTo<T>(containerRef: React.RefObject<HTMLDivElement>, data: T[], height: number, heights: Map<React.Key, number>, itemHeight: number, getKey: GetKey<T>): ScrollTo;
+export default function useScrollTo<T>(containerRef: React.RefObject<HTMLDivElement>, data: T[], heights: Map<React.Key, number>, itemHeight: number, getKey: GetKey<T>, collectHeight: () => void): ScrollTo;

lib/hooks/useScrollTo.js

@@ -20,3 +20,3 @@ "use strict";
 
-function useScrollTo(containerRef, data, height, heights, itemHeight, getKey) {
+function useScrollTo(containerRef, data, heights, itemHeight, getKey, collectHeight) {
   var scrollRef = React.useRef();
@@ -41,5 +41,6 @@ return function (arg) {
 
-      var syncScroll = function syncScroll() {
-        var times = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 3;
-        if (times < 0 || !containerRef.current) return; // Get top & bottom
+      var syncScroll = function syncScroll(times, targetAlign) {
+        if (times < 0 || !containerRef.current) return;
+        var height = containerRef.current.clientHeight;
+        var mergedAlign = targetAlign || align; // Get top & bottom
 
@@ -49,2 +50,3 @@ var stackTop = 0;
         var itemBottom = 0;
+        var needCollectHeight = false;
 
@@ -57,12 +59,19 @@ for (var i = 0; i <= index; i += 1) {
           stackTop = itemBottom;
+
+          if (i === index && cacheHeight === undefined) {
+            needCollectHeight = true;
+          }
         } // Scroll to
 
 
-        switch (align) {
+        var targetTop = null;
+        var newTargetAlign = targetAlign;
+
+        switch (mergedAlign) {
           case 'top':
-            containerRef.current.scrollTop = itemTop;
+            targetTop = itemTop;
             break;
 
           case 'bottom':
-            containerRef.current.scrollTop = itemBottom - height;
+            targetTop = itemBottom - height;
             break;
@@ -76,5 +85,5 @@
               if (itemTop < scrollTop) {
-                containerRef.current.scrollTop = itemTop;
+                newTargetAlign = 'top';
               } else if (itemBottom > scrollBottom) {
-                containerRef.current.scrollTop = itemBottom - height;
+                newTargetAlign = 'bottom';
               }
@@ -84,10 +93,19 @@ }
 
+        if (targetTop !== null && targetTop !== containerRef.current.scrollTop) {
+          containerRef.current.scrollTop = targetTop;
+        } // We will retry since element may not sync height as it described
+
+
         scrollRef.current = (0, _raf.default)(function () {
-          syncScroll(times - 1);
+          if (needCollectHeight) {
+            collectHeight();
+          }
+
+          syncScroll(times - 1, newTargetAlign);
         });
       };
 
-      syncScroll();
+      syncScroll(3);
     }
   };
 }

lib/List.js

@@ -213,3 +213,3 @@ "use strict";
 
-  var scrollTo = (0, _useScrollTo.default)(componentRef, mergedData, height, heights, itemHeight, getKey);
+  var scrollTo = (0, _useScrollTo.default)(componentRef, mergedData, heights, itemHeight, getKey, collectHeight);
   React.useImperativeHandle(ref, function () {
@@ -216,0 +216,0 @@ return {

package.json

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

74830

increased by1.37%

Lines of code

1278

increased by2.08%

No dependency changes