rc-virtual-list - npm Package Compare versions

Comparing version 3.1.1 to 3.2.0

es/Filler.d.ts

@@ -14,3 +14,3 @@ import * as React from 'react';
  */
-declare const Filler: React.FC<FillerProps>;
+declare const Filler: React.ForwardRefExoticComponent<FillerProps & React.RefAttributes<HTMLDivElement>>;
 export default Filler;

es/Filler.js

@@ -14,3 +14,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 Filler = function Filler(_ref) {
+var Filler = React.forwardRef(function (_ref, ref) {
   var height = _ref.height,
@@ -54,6 +54,7 @@ offset = _ref.offset,
     style: innerStyle,
-    className: classNames(_defineProperty({}, "".concat(prefixCls, "-holder-inner"), prefixCls))
+    className: classNames(_defineProperty({}, "".concat(prefixCls, "-holder-inner"), prefixCls)),
+    ref: ref
   }, children)));
-};
-
+});
+Filler.displayName = 'Filler';
 export default Filler;

es/hooks/useHeights.js

@@ -33,3 +33,2 @@ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
       if (currentId !== heightUpdateIdRef.current) return;
-      var changed = false;
       instanceRef.current.forEach(function (element, key) {
@@ -41,13 +40,10 @@ if (element && element.offsetParent) {
           if (heightsRef.current.get(key) !== offsetHeight) {
-            changed = true;
             heightsRef.current.set(key, htmlElement.offsetHeight);
           }
         }
+      }); // Always trigger update mark to tell parent that should re-calculate heights when resized
+
+      setUpdatedMark(function (c) {
+        return c + 1;
       });
-
-      if (changed) {
-        setUpdatedMark(function (c) {
-          return c + 1;
-        });
-      }
     });
@@ -54,0 +50,0 @@ }

es/hooks/useScrollTo.d.ts

@@ -5,2 +5,2 @@ import * as React from 'react';
 import CacheMap from '../utils/CacheMap';
-export default function useScrollTo<T>(containerRef: React.RefObject<HTMLDivElement>, data: T[], heights: CacheMap, itemHeight: number, getKey: GetKey<T>, collectHeight: () => void, syncScrollTop: (newTop: number) => void): ScrollTo;
+export default function useScrollTo<T>(containerRef: React.RefObject<HTMLDivElement>, data: T[], heights: CacheMap, itemHeight: number, getKey: GetKey<T>, collectHeight: () => void, syncScrollTop: (newTop: number) => void, triggerFlash: () => void): ScrollTo;

es/hooks/useScrollTo.js

@@ -6,5 +6,12 @@ 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, heights, itemHeight, getKey, collectHeight, syncScrollTop) {
+export default function useScrollTo(containerRef, data, heights, itemHeight, getKey, collectHeight, syncScrollTop, triggerFlash) {
   var scrollRef = React.useRef();
   return function (arg) {
+    // When not argument provided, we think dev may want to show the scrollbar
+    if (arg === null || arg === undefined) {
+      triggerFlash();
+      return;
+    } // Normal scroll logic
+
+
     raf.cancel(scrollRef.current);
@@ -11,0 +18,0 @@

es/List.js

@@ -59,3 +59,4 @@ 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 inVirtual = virtual !== false && height && itemHeight && data && itemHeight * data.length > height;
+  var useVirtual = !!(virtual !== false && height && itemHeight);
+  var inVirtual = useVirtual && data && itemHeight * data.length > height;
 
@@ -74,3 +75,6 @@ var _useState = useState(0),
   var mergedData = data || EMPTY_DATA;
-  var componentRef = useRef(); // =============================== Item Key ===============================
+  var componentRef = useRef();
+  var fillerInnerRef = useRef();
+  var scrollBarRef = useRef(); // Hack on scrollbar to enable flash call
+  // =============================== Item Key ===============================
 
@@ -127,3 +131,3 @@ var getKey = React.useCallback(function (item) {
   var _React$useMemo = React.useMemo(function () {
-    if (!inVirtual) {
+    if (!useVirtual) {
       return {
@@ -135,2 +139,14 @@ scrollHeight: undefined,
       };
+    } // Always use virtual scroll bar in avoid shaking
+
+
+    if (!inVirtual) {
+      var _fillerInnerRef$curre;
+
+      return {
+        scrollHeight: ((_fillerInnerRef$curre = fillerInnerRef.current) === null || _fillerInnerRef$curre === void 0 ? void 0 : _fillerInnerRef$curre.offsetHeight) || 0,
+        start: 0,
+        end: mergedData.length - 1,
+        offset: undefined
+      };
     }
@@ -183,3 +199,3 @@
     };
-  }, [inVirtual, scrollTop, mergedData, heightUpdatedMark, height]),
+  }, [inVirtual, useVirtual, scrollTop, mergedData, heightUpdatedMark, height]),
       scrollHeight = _React$useMemo.scrollHeight,
@@ -230,3 +246,3 @@ start = _React$useMemo.start,
 
-  var _useFrameWheel = useFrameWheel(inVirtual, isScrollAtTop, isScrollAtBottom, function (offsetY) {
+  var _useFrameWheel = useFrameWheel(useVirtual, isScrollAtTop, isScrollAtBottom, function (offsetY) {
     syncScrollTop(function (top) {
@@ -242,3 +258,3 @@ var newTop = top + offsetY;
 
-  useMobileTouchMove(inVirtual, componentRef, function (deltaY, smoothOffset) {
+  useMobileTouchMove(useVirtual, componentRef, function (deltaY, smoothOffset) {
     if (originScroll(deltaY, smoothOffset)) {
@@ -257,3 +273,3 @@ return false;
     function onMozMousePixelScroll(e) {
-      if (inVirtual) {
+      if (useVirtual) {
         e.preventDefault();
@@ -271,5 +287,9 @@ }
     };
-  }, [inVirtual]); // ================================= Ref ==================================
+  }, [useVirtual]); // ================================= Ref ==================================
 
-  var scrollTo = useScrollTo(componentRef, mergedData, heights, itemHeight, getKey, collectHeight, syncScrollTop);
+  var scrollTo = useScrollTo(componentRef, mergedData, heights, itemHeight, getKey, collectHeight, syncScrollTop, function () {
+    var _scrollBarRef$current;
+
+    (_scrollBarRef$current = scrollBarRef.current) === null || _scrollBarRef$current === void 0 ? void 0 : _scrollBarRef$current.delayHidden();
+  });
   React.useImperativeHandle(ref, function () {
@@ -287,3 +307,3 @@ return {
 
-    if (inVirtual) {
+    if (useVirtual) {
       componentStyle.overflowY = 'hidden';
@@ -311,4 +331,6 @@
     offset: offset,
-    onInnerResize: collectHeight
-  }, listChildren)), inVirtual && React.createElement(ScrollBar, {
+    onInnerResize: collectHeight,
+    ref: fillerInnerRef
+  }, listChildren)), useVirtual && React.createElement(ScrollBar, {
+    ref: scrollBarRef,
     prefixCls: prefixCls,
@@ -315,0 +337,0 @@ scrollTop: scrollTop,

es/ScrollBar.d.ts

@@ -40,4 +40,5 @@ /// <reference types="node" />
     getTop: () => number;
+    getVisible: () => boolean;
     render(): JSX.Element;
 }
 export {};

es/ScrollBar.js

@@ -193,2 +193,16 @@ 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); }
       return ptg * enableHeightRange;
+    }; // Not show scrollbar when height is large thane scrollHeight
+
+
+    _this.getVisible = function () {
+      var visible = _this.state.visible;
+      var _this$props3 = _this.props,
+          height = _this$props3.height,
+          scrollHeight = _this$props3.scrollHeight;
+
+      if (height > scrollHeight) {
+        return false;
+      }
+
+      return visible;
     };
@@ -217,12 +231,12 @@
       clearTimeout(this.visibleTimeout);
-    }
+    } // ====================== Render =======================
+
   }, {
     key: "render",
     value: function render() {
-      var _this$state2 = this.state,
-          visible = _this$state2.visible,
-          dragging = _this$state2.dragging;
+      var dragging = this.state.dragging;
       var prefixCls = this.props.prefixCls;
       var spinHeight = this.getSpinHeight();
       var top = this.getTop();
+      var visible = this.getVisible();
       return React.createElement("div", {
@@ -229,0 +243,0 @@ ref: this.scrollbarRef,

lib/Filler.d.ts

@@ -14,3 +14,3 @@ import * as React from 'react';
  */
-declare const Filler: React.FC<FillerProps>;
+declare const Filler: React.ForwardRefExoticComponent<FillerProps & React.RefAttributes<HTMLDivElement>>;
 export default Filler;

lib/Filler.js

@@ -31,3 +31,3 @@ "use strict";
  */
-var Filler = function Filler(_ref) {
+var Filler = React.forwardRef(function (_ref, ref) {
   var height = _ref.height,
@@ -71,7 +71,8 @@ offset = _ref.offset,
     style: innerStyle,
-    className: (0, _classnames.default)(_defineProperty({}, "".concat(prefixCls, "-holder-inner"), prefixCls))
+    className: (0, _classnames.default)(_defineProperty({}, "".concat(prefixCls, "-holder-inner"), prefixCls)),
+    ref: ref
   }, children)));
-};
-
+});
+Filler.displayName = 'Filler';
 var _default = Filler;
 exports.default = _default;

lib/hooks/useHeights.js

@@ -50,3 +50,2 @@ "use strict";
       if (currentId !== heightUpdateIdRef.current) return;
-      var changed = false;
       instanceRef.current.forEach(function (element, key) {
@@ -58,13 +57,10 @@ if (element && element.offsetParent) {
           if (heightsRef.current.get(key) !== offsetHeight) {
-            changed = true;
             heightsRef.current.set(key, htmlElement.offsetHeight);
           }
         }
+      }); // Always trigger update mark to tell parent that should re-calculate heights when resized
+
+      setUpdatedMark(function (c) {
+        return c + 1;
       });
-
-      if (changed) {
-        setUpdatedMark(function (c) {
-          return c + 1;
-        });
-      }
     });
@@ -71,0 +67,0 @@ }

lib/hooks/useScrollTo.d.ts

@@ -5,2 +5,2 @@ import * as React from 'react';
 import CacheMap from '../utils/CacheMap';
-export default function useScrollTo<T>(containerRef: React.RefObject<HTMLDivElement>, data: T[], heights: CacheMap, itemHeight: number, getKey: GetKey<T>, collectHeight: () => void, syncScrollTop: (newTop: number) => void): ScrollTo;
+export default function useScrollTo<T>(containerRef: React.RefObject<HTMLDivElement>, data: T[], heights: CacheMap, itemHeight: number, getKey: GetKey<T>, collectHeight: () => void, syncScrollTop: (newTop: number) => void, triggerFlash: () => void): ScrollTo;

lib/hooks/useScrollTo.js

@@ -20,5 +20,12 @@ "use strict";
 
-function useScrollTo(containerRef, data, heights, itemHeight, getKey, collectHeight, syncScrollTop) {
+function useScrollTo(containerRef, data, heights, itemHeight, getKey, collectHeight, syncScrollTop, triggerFlash) {
   var scrollRef = React.useRef();
   return function (arg) {
+    // When not argument provided, we think dev may want to show the scrollbar
+    if (arg === null || arg === undefined) {
+      triggerFlash();
+      return;
+    } // Normal scroll logic
+
+
     _raf.default.cancel(scrollRef.current);
@@ -25,0 +32,0 @@

lib/List.js

@@ -86,3 +86,4 @@ "use strict";
 
-  var inVirtual = virtual !== false && height && itemHeight && data && itemHeight * data.length > height;
+  var useVirtual = !!(virtual !== false && height && itemHeight);
+  var inVirtual = useVirtual && data && itemHeight * data.length > height;
 
@@ -101,3 +102,6 @@ var _useState = (0, React.useState)(0),
   var mergedData = data || EMPTY_DATA;
-  var componentRef = (0, React.useRef)(); // =============================== Item Key ===============================
+  var componentRef = (0, React.useRef)();
+  var fillerInnerRef = (0, React.useRef)();
+  var scrollBarRef = (0, React.useRef)(); // Hack on scrollbar to enable flash call
+  // =============================== Item Key ===============================
 
@@ -154,3 +158,3 @@ var getKey = React.useCallback(function (item) {
   var _React$useMemo = React.useMemo(function () {
-    if (!inVirtual) {
+    if (!useVirtual) {
       return {
@@ -162,2 +166,14 @@ scrollHeight: undefined,
       };
+    } // Always use virtual scroll bar in avoid shaking
+
+
+    if (!inVirtual) {
+      var _fillerInnerRef$curre;
+
+      return {
+        scrollHeight: ((_fillerInnerRef$curre = fillerInnerRef.current) === null || _fillerInnerRef$curre === void 0 ? void 0 : _fillerInnerRef$curre.offsetHeight) || 0,
+        start: 0,
+        end: mergedData.length - 1,
+        offset: undefined
+      };
     }
@@ -210,3 +226,3 @@
     };
-  }, [inVirtual, scrollTop, mergedData, heightUpdatedMark, height]),
+  }, [inVirtual, useVirtual, scrollTop, mergedData, heightUpdatedMark, height]),
       scrollHeight = _React$useMemo.scrollHeight,
@@ -257,3 +273,3 @@ start = _React$useMemo.start,
 
-  var _useFrameWheel = (0, _useFrameWheel3.default)(inVirtual, isScrollAtTop, isScrollAtBottom, function (offsetY) {
+  var _useFrameWheel = (0, _useFrameWheel3.default)(useVirtual, isScrollAtTop, isScrollAtBottom, function (offsetY) {
     syncScrollTop(function (top) {
@@ -269,3 +285,3 @@ var newTop = top + offsetY;
 
-  (0, _useMobileTouchMove.default)(inVirtual, componentRef, function (deltaY, smoothOffset) {
+  (0, _useMobileTouchMove.default)(useVirtual, componentRef, function (deltaY, smoothOffset) {
     if (originScroll(deltaY, smoothOffset)) {
@@ -284,3 +300,3 @@ return false;
     function onMozMousePixelScroll(e) {
-      if (inVirtual) {
+      if (useVirtual) {
         e.preventDefault();
@@ -298,5 +314,9 @@ }
     };
-  }, [inVirtual]); // ================================= Ref ==================================
+  }, [useVirtual]); // ================================= Ref ==================================
 
-  var scrollTo = (0, _useScrollTo.default)(componentRef, mergedData, heights, itemHeight, getKey, collectHeight, syncScrollTop);
+  var scrollTo = (0, _useScrollTo.default)(componentRef, mergedData, heights, itemHeight, getKey, collectHeight, syncScrollTop, function () {
+    var _scrollBarRef$current;
+
+    (_scrollBarRef$current = scrollBarRef.current) === null || _scrollBarRef$current === void 0 ? void 0 : _scrollBarRef$current.delayHidden();
+  });
   React.useImperativeHandle(ref, function () {
@@ -314,3 +334,3 @@ return {
 
-    if (inVirtual) {
+    if (useVirtual) {
       componentStyle.overflowY = 'hidden';
@@ -338,4 +358,6 @@
     offset: offset,
-    onInnerResize: collectHeight
-  }, listChildren)), inVirtual && React.createElement(_ScrollBar.default, {
+    onInnerResize: collectHeight,
+    ref: fillerInnerRef
+  }, listChildren)), useVirtual && React.createElement(_ScrollBar.default, {
+    ref: scrollBarRef,
     prefixCls: prefixCls,
@@ -342,0 +364,0 @@ scrollTop: scrollTop,

lib/ScrollBar.d.ts

@@ -40,4 +40,5 @@ /// <reference types="node" />
     getTop: () => number;
+    getVisible: () => boolean;
     render(): JSX.Element;
 }
 export {};

lib/ScrollBar.js

@@ -210,2 +210,16 @@ "use strict";
       return ptg * enableHeightRange;
+    }; // Not show scrollbar when height is large thane scrollHeight
+
+
+    _this.getVisible = function () {
+      var visible = _this.state.visible;
+      var _this$props3 = _this.props,
+          height = _this$props3.height,
+          scrollHeight = _this$props3.scrollHeight;
+
+      if (height > scrollHeight) {
+        return false;
+      }
+
+      return visible;
     };
@@ -234,12 +248,12 @@
       clearTimeout(this.visibleTimeout);
-    }
+    } // ====================== Render =======================
+
   }, {
     key: "render",
     value: function render() {
-      var _this$state2 = this.state,
-          visible = _this$state2.visible,
-          dragging = _this$state2.dragging;
+      var dragging = this.state.dragging;
       var prefixCls = this.props.prefixCls;
       var spinHeight = this.getSpinHeight();
       var top = this.getTop();
+      var visible = this.getVisible();
       return React.createElement("div", {
@@ -246,0 +260,0 @@ ref: this.scrollbarRef,

package.json

 {
   "name": "rc-virtual-list",
-  "version": "3.1.1",
+  "version": "3.2.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

127653

increased by2.53%

Lines of code

2438

increased by2.61%

No dependency changes