rc-virtual-list - npm Package Compare versions

Comparing version 0.0.0-alpha.19 to 0.0.0-alpha.20

es/List.d.ts

@@ -76,3 +76,3 @@ import * as React from 'react';
  */
-declare class List<T> extends React.Component<ListProps<T>, ListState<T>> {
+declare class List<T = any> extends React.Component<ListProps<T>, ListState<T>> {
     static defaultProps: {
@@ -116,9 +116,16 @@ itemHeight: number;
     onRawScroll: () => void;
-    getIndexKey: (index: number, props?: Partial<ListProps<T>>) => any;
-    getItemKey: (item: T, props?: Partial<ListProps<T>>) => any;
+    getIndexKey: (index: number, props?: Partial<ListProps<T>>) => string;
+    getItemKey: (item: T, props?: Partial<ListProps<T>>) => string;
     /**
      * Collect current rendered dom element item heights
      */
-    collectItemHeights: () => void;
+    collectItemHeights: (range?: {
+        startIndex: number;
+        endIndex: number;
+    }) => void;
     scrollTo(scrollTop: number): void;
+    scrollTo(config: {
+        index: number;
+        align?: 'top' | 'bottom' | 'auto';
+    }): void;
     internalScrollTo(relativeScroll: RelativeScroll): void;
@@ -125,0 +132,0 @@ /**

es/List.js

@@ -1,3 +0,1 @@
-function _typeof(obj) { 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); }
-
 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; }
@@ -13,2 +11,4 @@
 
+function _typeof(obj) { 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); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -159,6 +159,7 @@
 
-    _this.collectItemHeights = function () {
-      var _this$state = _this.state,
-          startIndex = _this$state.startIndex,
-          endIndex = _this$state.endIndex;
+    _this.collectItemHeights = function (range) {
+      var _ref2 = range || _this.state,
+          startIndex = _ref2.startIndex,
+          endIndex = _ref2.endIndex;
+
       var data = _this.props.data; // Record here since measure item height will get warning in `render`
@@ -259,5 +260,5 @@
         if (data.length > prevData.length) {
-          var _this$state2 = this.state,
-              startIndex = _this$state2.startIndex,
-              endIndex = _this$state2.endIndex;
+          var _this$state = this.state,
+              startIndex = _this$state.startIndex,
+              endIndex = _this$state.endIndex;
 
@@ -292,6 +293,6 @@ if (onSkipRender && (changedItemIndex === null || changedItemIndex < startIndex || endIndex < changedItemIndex)) {
       if (status === 'MEASURE_START') {
-        var _this$state3 = this.state,
-            _startIndex = _this$state3.startIndex,
-            itemIndex = _this$state3.itemIndex,
-            itemOffsetPtg = _this$state3.itemOffsetPtg;
+        var _this$state2 = this.state,
+            _startIndex = _this$state2.startIndex,
+            itemIndex = _this$state2.itemIndex,
+            itemOffsetPtg = _this$state2.itemOffsetPtg;
         var scrollTop = this.listRef.current.scrollTop; // Record here since measure item height will get warning in `render`
@@ -352,7 +353,7 @@
         var originItemIndex = this.state.itemIndex;
-        var _this$state4 = this.state,
-            originItemOffsetPtg = _this$state4.itemOffsetPtg,
-            originStartIndex = _this$state4.startIndex,
-            originEndIndex = _this$state4.endIndex,
-            originScrollTop = _this$state4.scrollTop; // 1. Refresh item heights
+        var _this$state3 = this.state,
+            originItemOffsetPtg = _this$state3.itemOffsetPtg,
+            originStartIndex = _this$state3.startIndex,
+            originEndIndex = _this$state3.endIndex,
+            originScrollTop = _this$state3.scrollTop; // 1. Refresh item heights
 
@@ -425,4 +426,133 @@ this.collectItemHeights(); // 1. Get origin located item top
     key: "scrollTo",
-    value: function scrollTo(scrollTop) {
-      this.listRef.current.scrollTop = scrollTop;
+    value: function scrollTo(arg0) {
+      var _this3 = this;
+
+      // Number top
+      if (_typeof(arg0) === 'object') {
+        var isVirtual = this.state.isVirtual;
+        var _this$props3 = this.props,
+            height = _this$props3.height,
+            itemHeight = _this$props3.itemHeight,
+            data = _this$props3.data;
+        var index = arg0.index,
+            _arg0$align = arg0.align,
+            align = _arg0$align === void 0 ? 'auto' : _arg0$align;
+        var itemCount = Math.ceil(height / itemHeight);
+        var item = data[index];
+
+        if (item) {
+          var clientHeight = this.listRef.current.clientHeight;
+
+          if (isVirtual) {
+            // Calculate related data
+            var _this$state4 = this.state,
+                itemIndex = _this$state4.itemIndex,
+                itemOffsetPtg = _this$state4.itemOffsetPtg,
+                startIndex = _this$state4.startIndex,
+                endIndex = _this$state4.endIndex;
+            var relativeLocatedItemTop = getItemRelativeTop({
+              itemIndex: itemIndex,
+              itemOffsetPtg: itemOffsetPtg,
+              itemElementHeights: this.itemElementHeights,
+              scrollPtg: getElementScrollPercentage(this.listRef.current),
+              clientHeight: clientHeight,
+              getItemKey: this.getIndexKey
+            }); // We will force render related items to collect height for re-location
+
+            this.setState({
+              startIndex: Math.max(0, index - itemCount),
+              endIndex: Math.min(data.length - 1, index + itemCount)
+            }, function () {
+              _this3.collectItemHeights(); // Calculate related top
+
+
+              var relativeTop;
+              var mergedAlgin = align;
+
+              if (align === 'auto') {
+                var shouldChange = true; // Check if exist in the visible range
+
+                if (Math.abs(itemIndex - index) < itemCount) {
+                  var itemTop = relativeLocatedItemTop;
+
+                  if (index < itemIndex) {
+                    for (var i = index; i < itemIndex; i += 1) {
+                      var eleKey = _this3.getIndexKey(i);
+
+                      itemTop -= _this3.itemElementHeights[eleKey] || 0;
+                    }
+                  } else {
+                    for (var _i = itemIndex; _i <= index; _i += 1) {
+                      var _eleKey = _this3.getIndexKey(_i);
+
+                      itemTop += _this3.itemElementHeights[_eleKey] || 0;
+                    }
+                  }
+
+                  shouldChange = itemTop <= 0 || itemTop >= clientHeight;
+                }
+
+                if (shouldChange) {
+                  // Out of range will fall back to position align
+                  mergedAlgin = index < itemIndex ? 'top' : 'bottom';
+                } else {
+                  _this3.setState({
+                    startIndex: startIndex,
+                    endIndex: endIndex
+                  });
+
+                  return;
+                }
+              } // Align with position should make scroll happen
+
+
+              if (mergedAlgin === 'top') {
+                relativeTop = 0;
+              } else if (mergedAlgin === 'bottom') {
+                var _eleKey2 = _this3.getItemKey(item);
+
+                relativeTop = clientHeight - _this3.itemElementHeights[_eleKey2] || 0;
+              }
+
+              _this3.internalScrollTo({
+                itemIndex: index,
+                relativeTop: relativeTop
+              });
+            });
+          } else {
+            // Raw list without virtual scroll set position directly
+            this.collectItemHeights({
+              startIndex: 0,
+              endIndex: data.length - 1
+            });
+            var mergedAlgin = align; // Collection index item position
+
+            var indexItemHeight = this.itemElementHeights[this.getIndexKey(index)];
+            var itemTop = 0;
+
+            for (var i = 0; i < index; i += 1) {
+              var eleKey = this.getIndexKey(i);
+              itemTop += this.itemElementHeights[eleKey] || 0;
+            }
+
+            var itemBottom = itemTop + indexItemHeight;
+
+            if (mergedAlgin === 'auto') {
+              if (itemTop < this.listRef.current.scrollTop) {
+                mergedAlgin = 'top';
+              } else if (itemBottom > this.listRef.current.scrollTop + clientHeight) {
+                mergedAlgin = 'bottom';
+              }
+            }
+
+            if (mergedAlgin === 'top') {
+              this.listRef.current.scrollTop = itemTop;
+            } else if (mergedAlgin === 'bottom') {
+              this.listRef.current.scrollTop = itemTop - (clientHeight - indexItemHeight);
+            }
+          }
+        }
+      } else {
+        this.listRef.current.scrollTop = arg0;
+      }
     }
@@ -432,3 +562,3 @@ }, {
     value: function internalScrollTo(relativeScroll) {
-      var _this3 = this;
+      var _this4 = this;
 
@@ -438,6 +568,6 @@ var compareItemIndex = relativeScroll.itemIndex,
       var originScrollTop = this.state.scrollTop;
-      var _this$props3 = this.props,
-          data = _this$props3.data,
-          itemHeight = _this$props3.itemHeight,
-          height = _this$props3.height; // 1. Find the best match compare item top
+      var _this$props4 = this.props,
+          data = _this$props4.data,
+          itemHeight = _this$props4.itemHeight,
+          height = _this$props4.height; // 1. Find the best match compare item top
 
@@ -528,3 +658,3 @@ var bestSimilarity = Number.MAX_VALUE;
           requestAnimationFrame(function () {
-            _this3.lockScroll = false;
+            _this4.lockScroll = false;
           });
@@ -541,16 +671,16 @@ });
 
-      var _this$props4 = this.props,
-          prefixCls = _this$props4.prefixCls,
-          style = _this$props4.style,
-          className = _this$props4.className,
-          _this$props4$componen = _this$props4.component,
-          Component = _this$props4$componen === void 0 ? 'div' : _this$props4$componen,
-          height = _this$props4.height,
-          itemHeight = _this$props4.itemHeight,
-          data = _this$props4.data,
-          children = _this$props4.children,
-          itemKey = _this$props4.itemKey,
-          onSkipRender = _this$props4.onSkipRender,
-          disabled = _this$props4.disabled,
-          restProps = _objectWithoutProperties(_this$props4, ["prefixCls", "style", "className", "component", "height", "itemHeight", "data", "children", "itemKey", "onSkipRender", "disabled"]);
+      var _this$props5 = this.props,
+          prefixCls = _this$props5.prefixCls,
+          style = _this$props5.style,
+          className = _this$props5.className,
+          _this$props5$componen = _this$props5.component,
+          Component = _this$props5$componen === void 0 ? 'div' : _this$props5$componen,
+          height = _this$props5.height,
+          itemHeight = _this$props5.itemHeight,
+          data = _this$props5.data,
+          children = _this$props5.children,
+          itemKey = _this$props5.itemKey,
+          onSkipRender = _this$props5.onSkipRender,
+          disabled = _this$props5.disabled,
+          restProps = _objectWithoutProperties(_this$props5, ["prefixCls", "style", "className", "component", "height", "itemHeight", "data", "children", "itemKey", "onSkipRender", "disabled"]);
 
@@ -557,0 +687,0 @@ var mergedClassName = classNames(prefixCls, className); // Render pure list if not set height or height is enough for all items

lib/List.d.ts

@@ -76,3 +76,3 @@ import * as React from 'react';
  */
-declare class List<T> extends React.Component<ListProps<T>, ListState<T>> {
+declare class List<T = any> extends React.Component<ListProps<T>, ListState<T>> {
     static defaultProps: {
@@ -116,9 +116,16 @@ itemHeight: number;
     onRawScroll: () => void;
-    getIndexKey: (index: number, props?: Partial<ListProps<T>>) => any;
-    getItemKey: (item: T, props?: Partial<ListProps<T>>) => any;
+    getIndexKey: (index: number, props?: Partial<ListProps<T>>) => string;
+    getItemKey: (item: T, props?: Partial<ListProps<T>>) => string;
     /**
      * Collect current rendered dom element item heights
      */
-    collectItemHeights: () => void;
+    collectItemHeights: (range?: {
+        startIndex: number;
+        endIndex: number;
+    }) => void;
     scrollTo(scrollTop: number): void;
+    scrollTo(config: {
+        index: number;
+        align?: 'top' | 'bottom' | 'auto';
+    }): void;
     internalScrollTo(relativeScroll: RelativeScroll): void;
@@ -125,0 +132,0 @@ /**

lib/List.js

@@ -22,4 +22,2 @@ "use strict";
 
-function _typeof(obj) { 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); }
-
 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; }
@@ -35,2 +33,4 @@
 
+function _typeof(obj) { 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); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -176,6 +176,7 @@
 
-    _this.collectItemHeights = function () {
-      var _this$state = _this.state,
-          startIndex = _this$state.startIndex,
-          endIndex = _this$state.endIndex;
+    _this.collectItemHeights = function (range) {
+      var _ref2 = range || _this.state,
+          startIndex = _ref2.startIndex,
+          endIndex = _ref2.endIndex;
+
       var data = _this.props.data; // Record here since measure item height will get warning in `render`
@@ -276,5 +277,5 @@
         if (data.length > prevData.length) {
-          var _this$state2 = this.state,
-              startIndex = _this$state2.startIndex,
-              endIndex = _this$state2.endIndex;
+          var _this$state = this.state,
+              startIndex = _this$state.startIndex,
+              endIndex = _this$state.endIndex;
 
@@ -309,6 +310,6 @@ if (onSkipRender && (changedItemIndex === null || changedItemIndex < startIndex || endIndex < changedItemIndex)) {
       if (status === 'MEASURE_START') {
-        var _this$state3 = this.state,
-            _startIndex = _this$state3.startIndex,
-            itemIndex = _this$state3.itemIndex,
-            itemOffsetPtg = _this$state3.itemOffsetPtg;
+        var _this$state2 = this.state,
+            _startIndex = _this$state2.startIndex,
+            itemIndex = _this$state2.itemIndex,
+            itemOffsetPtg = _this$state2.itemOffsetPtg;
         var scrollTop = this.listRef.current.scrollTop; // Record here since measure item height will get warning in `render`
@@ -369,7 +370,7 @@
         var originItemIndex = this.state.itemIndex;
-        var _this$state4 = this.state,
-            originItemOffsetPtg = _this$state4.itemOffsetPtg,
-            originStartIndex = _this$state4.startIndex,
-            originEndIndex = _this$state4.endIndex,
-            originScrollTop = _this$state4.scrollTop; // 1. Refresh item heights
+        var _this$state3 = this.state,
+            originItemOffsetPtg = _this$state3.itemOffsetPtg,
+            originStartIndex = _this$state3.startIndex,
+            originEndIndex = _this$state3.endIndex,
+            originScrollTop = _this$state3.scrollTop; // 1. Refresh item heights
 
@@ -442,4 +443,133 @@ this.collectItemHeights(); // 1. Get origin located item top
     key: "scrollTo",
-    value: function scrollTo(scrollTop) {
-      this.listRef.current.scrollTop = scrollTop;
+    value: function scrollTo(arg0) {
+      var _this3 = this;
+
+      // Number top
+      if (_typeof(arg0) === 'object') {
+        var isVirtual = this.state.isVirtual;
+        var _this$props3 = this.props,
+            height = _this$props3.height,
+            itemHeight = _this$props3.itemHeight,
+            data = _this$props3.data;
+        var index = arg0.index,
+            _arg0$align = arg0.align,
+            align = _arg0$align === void 0 ? 'auto' : _arg0$align;
+        var itemCount = Math.ceil(height / itemHeight);
+        var item = data[index];
+
+        if (item) {
+          var clientHeight = this.listRef.current.clientHeight;
+
+          if (isVirtual) {
+            // Calculate related data
+            var _this$state4 = this.state,
+                itemIndex = _this$state4.itemIndex,
+                itemOffsetPtg = _this$state4.itemOffsetPtg,
+                startIndex = _this$state4.startIndex,
+                endIndex = _this$state4.endIndex;
+            var relativeLocatedItemTop = (0, _itemUtil.getItemRelativeTop)({
+              itemIndex: itemIndex,
+              itemOffsetPtg: itemOffsetPtg,
+              itemElementHeights: this.itemElementHeights,
+              scrollPtg: (0, _itemUtil.getElementScrollPercentage)(this.listRef.current),
+              clientHeight: clientHeight,
+              getItemKey: this.getIndexKey
+            }); // We will force render related items to collect height for re-location
+
+            this.setState({
+              startIndex: Math.max(0, index - itemCount),
+              endIndex: Math.min(data.length - 1, index + itemCount)
+            }, function () {
+              _this3.collectItemHeights(); // Calculate related top
+
+
+              var relativeTop;
+              var mergedAlgin = align;
+
+              if (align === 'auto') {
+                var shouldChange = true; // Check if exist in the visible range
+
+                if (Math.abs(itemIndex - index) < itemCount) {
+                  var itemTop = relativeLocatedItemTop;
+
+                  if (index < itemIndex) {
+                    for (var i = index; i < itemIndex; i += 1) {
+                      var eleKey = _this3.getIndexKey(i);
+
+                      itemTop -= _this3.itemElementHeights[eleKey] || 0;
+                    }
+                  } else {
+                    for (var _i = itemIndex; _i <= index; _i += 1) {
+                      var _eleKey = _this3.getIndexKey(_i);
+
+                      itemTop += _this3.itemElementHeights[_eleKey] || 0;
+                    }
+                  }
+
+                  shouldChange = itemTop <= 0 || itemTop >= clientHeight;
+                }
+
+                if (shouldChange) {
+                  // Out of range will fall back to position align
+                  mergedAlgin = index < itemIndex ? 'top' : 'bottom';
+                } else {
+                  _this3.setState({
+                    startIndex: startIndex,
+                    endIndex: endIndex
+                  });
+
+                  return;
+                }
+              } // Align with position should make scroll happen
+
+
+              if (mergedAlgin === 'top') {
+                relativeTop = 0;
+              } else if (mergedAlgin === 'bottom') {
+                var _eleKey2 = _this3.getItemKey(item);
+
+                relativeTop = clientHeight - _this3.itemElementHeights[_eleKey2] || 0;
+              }
+
+              _this3.internalScrollTo({
+                itemIndex: index,
+                relativeTop: relativeTop
+              });
+            });
+          } else {
+            // Raw list without virtual scroll set position directly
+            this.collectItemHeights({
+              startIndex: 0,
+              endIndex: data.length - 1
+            });
+            var mergedAlgin = align; // Collection index item position
+
+            var indexItemHeight = this.itemElementHeights[this.getIndexKey(index)];
+            var itemTop = 0;
+
+            for (var i = 0; i < index; i += 1) {
+              var eleKey = this.getIndexKey(i);
+              itemTop += this.itemElementHeights[eleKey] || 0;
+            }
+
+            var itemBottom = itemTop + indexItemHeight;
+
+            if (mergedAlgin === 'auto') {
+              if (itemTop < this.listRef.current.scrollTop) {
+                mergedAlgin = 'top';
+              } else if (itemBottom > this.listRef.current.scrollTop + clientHeight) {
+                mergedAlgin = 'bottom';
+              }
+            }
+
+            if (mergedAlgin === 'top') {
+              this.listRef.current.scrollTop = itemTop;
+            } else if (mergedAlgin === 'bottom') {
+              this.listRef.current.scrollTop = itemTop - (clientHeight - indexItemHeight);
+            }
+          }
+        }
+      } else {
+        this.listRef.current.scrollTop = arg0;
+      }
     }
@@ -449,3 +579,3 @@ }, {
     value: function internalScrollTo(relativeScroll) {
-      var _this3 = this;
+      var _this4 = this;
 
@@ -455,6 +585,6 @@ var compareItemIndex = relativeScroll.itemIndex,
       var originScrollTop = this.state.scrollTop;
-      var _this$props3 = this.props,
-          data = _this$props3.data,
-          itemHeight = _this$props3.itemHeight,
-          height = _this$props3.height; // 1. Find the best match compare item top
+      var _this$props4 = this.props,
+          data = _this$props4.data,
+          itemHeight = _this$props4.itemHeight,
+          height = _this$props4.height; // 1. Find the best match compare item top
 
@@ -545,3 +675,3 @@ var bestSimilarity = Number.MAX_VALUE;
           requestAnimationFrame(function () {
-            _this3.lockScroll = false;
+            _this4.lockScroll = false;
           });
@@ -558,16 +688,16 @@ });
 
-      var _this$props4 = this.props,
-          prefixCls = _this$props4.prefixCls,
-          style = _this$props4.style,
-          className = _this$props4.className,
-          _this$props4$componen = _this$props4.component,
-          Component = _this$props4$componen === void 0 ? 'div' : _this$props4$componen,
-          height = _this$props4.height,
-          itemHeight = _this$props4.itemHeight,
-          data = _this$props4.data,
-          children = _this$props4.children,
-          itemKey = _this$props4.itemKey,
-          onSkipRender = _this$props4.onSkipRender,
-          disabled = _this$props4.disabled,
-          restProps = _objectWithoutProperties(_this$props4, ["prefixCls", "style", "className", "component", "height", "itemHeight", "data", "children", "itemKey", "onSkipRender", "disabled"]);
+      var _this$props5 = this.props,
+          prefixCls = _this$props5.prefixCls,
+          style = _this$props5.style,
+          className = _this$props5.className,
+          _this$props5$componen = _this$props5.component,
+          Component = _this$props5$componen === void 0 ? 'div' : _this$props5$componen,
+          height = _this$props5.height,
+          itemHeight = _this$props5.itemHeight,
+          data = _this$props5.data,
+          children = _this$props5.children,
+          itemKey = _this$props5.itemKey,
+          onSkipRender = _this$props5.onSkipRender,
+          disabled = _this$props5.disabled,
+          restProps = _objectWithoutProperties(_this$props5, ["prefixCls", "style", "className", "component", "height", "itemHeight", "data", "children", "itemKey", "onSkipRender", "disabled"]);
 
@@ -574,0 +704,0 @@ var mergedClassName = (0, _classnames.default)(prefixCls, className); // Render pure list if not set height or height is enough for all items

package.json

 {
   "name": "rc-virtual-list",
-  "version": "0.0.0-alpha.19",
+  "version": "0.0.0-alpha.20",
   "description": "React Virtual List Component",
@@ -5,0 +5,0 @@ "keywords": [

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

112630

increased by9.49%

Lines of code

2438

increased by10.22%

No dependency changes