react-window 1.8.2 → 1.8.6

package/dist/index.cjs.js

@@ -66,7 +66,7 @@ var cachedRTLResult = null; // TRICKY According to the spec, scrollLeft should b
 // and then verify that the subsequent "scroll" event matches the negative offset.
 // If it does not match, then we can assume a non-standard RTL scroll implementation.
 
-function isRTLOffsetNegative(recalculate) {
+function getRTLOffsetType(recalculate) {
   if (recalculate === void 0) {
     recalculate = false;
   }
@@ -84,8 +84,19 @@ function isRTLOffsetNegative(recalculate) {
     innerStyle.height = '100px';
     outerDiv.appendChild(innerDiv);
     document.body.appendChild(outerDiv);
-    outerDiv.scrollLeft = -10;
-    cachedRTLResult = outerDiv.scrollLeft === -10;
+
+    if (outerDiv.scrollLeft > 0) {
+      cachedRTLResult = 'positive-descending';
+    } else {
+      outerDiv.scrollLeft = 1;
+
+      if (outerDiv.scrollLeft === 0) {
+        cachedRTLResult = 'negative';
+      } else {
+        cachedRTLResult = 'positive-ascending';
+      }
+    }
+
     document.body.removeChild(outerDiv);
     return cachedRTLResult;
   }
@@ -203,11 +214,17 @@ function createGridComponent(_ref2) {
         if (itemStyleCache.hasOwnProperty(key)) {
           style = itemStyleCache[key];
         } else {
-          var _style;
-
-          itemStyleCache[key] = style = (_style = {
-            position: 'absolute'
-          }, _style[direction === 'rtl' ? 'right' : 'left'] = getColumnOffset(_this.props, columnIndex, _this._instanceProps), _style.top = getRowOffset(_this.props, rowIndex, _this._instanceProps), _style.height = getRowHeight(_this.props, rowIndex, _this._instanceProps), _style.width = getColumnWidth(_this.props, columnIndex, _this._instanceProps), _style);
+          var _offset = getColumnOffset(_this.props, columnIndex, _this._instanceProps);
+
+          var isRtl = direction === 'rtl';
+          itemStyleCache[key] = style = {
+            position: 'absolute',
+            left: isRtl ? undefined : _offset,
+            right: isRtl ? _offset : undefined,
+            top: getRowOffset(_this.props, rowIndex, _this._instanceProps),
+            height: getRowHeight(_this.props, rowIndex, _this._instanceProps),
+            width: getColumnWidth(_this.props, columnIndex, _this._instanceProps)
+          };
         }
 
         return style;
@@ -235,19 +252,22 @@ function createGridComponent(_ref2) {
             return null;
           }
 
-          var direction = _this.props.direction;
+          var direction = _this.props.direction; // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+          // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
+          // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
+          // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
+
           var calculatedScrollLeft = scrollLeft;
 
           if (direction === 'rtl') {
-            var isNegative = isRTLOffsetNegative(); // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
-            // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
-            // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
-            // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
-
-            if (isNegative) {
-              calculatedScrollLeft = -scrollLeft;
-            } else {
-              calculatedScrollLeft = scrollWidth - clientWidth - scrollLeft;
+            switch (getRTLOffsetType()) {
+              case 'negative':
+                calculatedScrollLeft = -scrollLeft;
+                break;
+
+              case 'positive-descending':
+                calculatedScrollLeft = scrollWidth - clientWidth - scrollLeft;
+                break;
             }
           } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
 
@@ -412,14 +432,20 @@ function createGridComponent(_ref2) {
         var outerRef = this._outerRef;
 
         if (direction === 'rtl') {
-          var isNegative = isRTLOffsetNegative();
+          switch (getRTLOffsetType()) {
+            case 'negative':
+              outerRef.scrollLeft = -scrollLeft;
+              break;
 
-          if (isNegative) {
-            outerRef.scrollLeft = -scrollLeft;
-          } else {
-            var clientWidth = outerRef.clientWidth,
-                scrollWidth = outerRef.scrollWidth;
-            outerRef.scrollLeft = scrollWidth - clientWidth - scrollLeft;
+            case 'positive-ascending':
+              outerRef.scrollLeft = scrollLeft;
+              break;
+
+            default:
+              var clientWidth = outerRef.clientWidth,
+                  scrollWidth = outerRef.scrollWidth;
+              outerRef.scrollLeft = scrollWidth - clientWidth - scrollLeft;
+              break;
           }
         } else {
           outerRef.scrollLeft = Math.max(0, scrollLeft);
@@ -848,7 +874,11 @@ var getOffsetForIndexAndAlignment = function getOffsetForIndexAndAlignment(itemT
     default:
       if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
         return scrollOffset;
-      } else if (scrollOffset - minOffset < maxOffset - scrollOffset) {
+      } else if (minOffset > maxOffset) {
+        // Because we only take into account the scrollbar size when calculating minOffset
+        // this value can be larger than maxOffset when at the end of the list
+        return minOffset;
+      } else if (scrollOffset < minOffset) {
         return minOffset;
       } else {
         return maxOffset;
@@ -1081,16 +1111,21 @@ function createListComponent(_ref) {
         if (itemStyleCache.hasOwnProperty(index)) {
           style = itemStyleCache[index];
         } else {
-          var _style;
-
           var _offset = getItemOffset(_this.props, index, _this._instanceProps);
 
           var size = getItemSize(_this.props, index, _this._instanceProps); // TODO Deprecate direction "horizontal"
 
           var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
-          itemStyleCache[index] = style = (_style = {
-            position: 'absolute'
-          }, _style[direction === 'rtl' ? 'right' : 'left'] = isHorizontal ? _offset : 0, _style.top = !isHorizontal ? _offset : 0, _style.height = !isHorizontal ? size : '100%', _style.width = isHorizontal ? size : '100%', _style);
+          var isRtl = direction === 'rtl';
+          var offsetHorizontal = isHorizontal ? _offset : 0;
+          itemStyleCache[index] = style = {
+            position: 'absolute',
+            left: isRtl ? undefined : offsetHorizontal,
+            right: isRtl ? offsetHorizontal : undefined,
+            top: !isHorizontal ? _offset : 0,
+            height: !isHorizontal ? size : '100%',
+            width: isHorizontal ? size : '100%'
+          };
         }
 
         return style;
@@ -1119,15 +1154,18 @@ function createListComponent(_ref) {
           var scrollOffset = scrollLeft;
 
           if (direction === 'rtl') {
-            var isNegative = isRTLOffsetNegative(); // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+            // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
             // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
             // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
             // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
-
-            if (isNegative) {
-              scrollOffset = -scrollLeft;
-            } else {
-              scrollOffset = scrollWidth - clientWidth - scrollLeft;
+            switch (getRTLOffsetType()) {
+              case 'negative':
+                scrollOffset = -scrollLeft;
+                break;
+
+              case 'positive-descending':
+                scrollOffset = scrollWidth - clientWidth - scrollLeft;
+                break;
             }
           } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
 
@@ -1270,14 +1308,20 @@ function createListComponent(_ref) {
             // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
             // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
             // So we need to determine which browser behavior we're dealing with, and mimic it.
-            var isNegative = isRTLOffsetNegative();
-
-            if (isNegative) {
-              outerRef.scrollLeft = -scrollOffset;
-            } else {
-              var clientWidth = outerRef.clientWidth,
-                  scrollWidth = outerRef.scrollWidth;
-              outerRef.scrollLeft = scrollWidth - clientWidth - scrollOffset;
+            switch (getRTLOffsetType()) {
+              case 'negative':
+                outerRef.scrollLeft = -scrollOffset;
+                break;
+
+              case 'positive-ascending':
+                outerRef.scrollLeft = scrollOffset;
+                break;
+
+              default:
+                var clientWidth = outerRef.clientWidth,
+                    scrollWidth = outerRef.scrollWidth;
+                outerRef.scrollLeft = scrollWidth - clientWidth - scrollOffset;
+                break;
             }
           } else {
             outerRef.scrollLeft = scrollOffset;
@@ -1641,7 +1685,7 @@ createListComponent({
       default:
         if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
           return scrollOffset;
-        } else if (scrollOffset - minOffset < maxOffset - scrollOffset) {
+        } else if (scrollOffset < minOffset) {
           return minOffset;
         } else {
           return maxOffset;
@@ -1746,7 +1790,8 @@ createGridComponent({
     var columnCount = _ref7.columnCount,
         columnWidth = _ref7.columnWidth,
         width = _ref7.width;
-    var maxOffset = Math.max(0, Math.min(columnCount * columnWidth - width, columnIndex * columnWidth));
+    var lastColumnOffset = Math.max(0, columnCount * columnWidth - width);
+    var maxOffset = Math.min(lastColumnOffset, columnIndex * columnWidth);
     var minOffset = Math.max(0, columnIndex * columnWidth - width + scrollbarSize + columnWidth);
 
     if (align === 'smart') {
@@ -1765,13 +1810,27 @@ createGridComponent({
         return minOffset;
 
       case 'center':
-        return Math.round(minOffset + (maxOffset - minOffset) / 2);
+        // "Centered" offset is usually the average of the min and max.
+        // But near the edges of the list, this doesn't hold true.
+        var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
+
+        if (middleOffset < Math.ceil(width / 2)) {
+          return 0; // near the beginning
+        } else if (middleOffset > lastColumnOffset + Math.floor(width / 2)) {
+          return lastColumnOffset; // near the end
+        } else {
+          return middleOffset;
+        }
 
       case 'auto':
       default:
         if (scrollLeft >= minOffset && scrollLeft <= maxOffset) {
           return scrollLeft;
-        } else if (scrollLeft - minOffset < maxOffset - scrollLeft) {
+        } else if (minOffset > maxOffset) {
+          // Because we only take into account the scrollbar size when calculating minOffset
+          // this value can be larger than maxOffset when at the end of the list
+          return minOffset;
+        } else if (scrollLeft < minOffset) {
           return minOffset;
         } else {
           return maxOffset;
@@ -1783,7 +1842,8 @@ createGridComponent({
     var rowHeight = _ref8.rowHeight,
         height = _ref8.height,
         rowCount = _ref8.rowCount;
-    var maxOffset = Math.max(0, Math.min(rowCount * rowHeight - height, rowIndex * rowHeight));
+    var lastRowOffset = Math.max(0, rowCount * rowHeight - height);
+    var maxOffset = Math.min(lastRowOffset, rowIndex * rowHeight);
     var minOffset = Math.max(0, rowIndex * rowHeight - height + scrollbarSize + rowHeight);
 
     if (align === 'smart') {
@@ -1802,13 +1862,27 @@ createGridComponent({
         return minOffset;
 
       case 'center':
-        return Math.round(minOffset + (maxOffset - minOffset) / 2);
+        // "Centered" offset is usually the average of the min and max.
+        // But near the edges of the list, this doesn't hold true.
+        var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
+
+        if (middleOffset < Math.ceil(height / 2)) {
+          return 0; // near the beginning
+        } else if (middleOffset > lastRowOffset + Math.floor(height / 2)) {
+          return lastRowOffset; // near the end
+        } else {
+          return middleOffset;
+        }
 
       case 'auto':
       default:
         if (scrollTop >= minOffset && scrollTop <= maxOffset) {
           return scrollTop;
-        } else if (scrollTop - minOffset < maxOffset - scrollTop) {
+        } else if (minOffset > maxOffset) {
+          // Because we only take into account the scrollbar size when calculating minOffset
+          // this value can be larger than maxOffset when at the end of the list
+          return minOffset;
+        } else if (scrollTop < minOffset) {
           return minOffset;
         } else {
           return maxOffset;
@@ -1826,7 +1900,9 @@ createGridComponent({
         columnCount = _ref10.columnCount,
         width = _ref10.width;
     var left = startIndex * columnWidth;
-    return Math.max(0, Math.min(columnCount - 1, startIndex + Math.floor((width + (scrollLeft - left)) / columnWidth)));
+    var numVisibleColumns = Math.ceil((width + scrollLeft - left) / columnWidth);
+    return Math.max(0, Math.min(columnCount - 1, startIndex + numVisibleColumns - 1 // -1 is because stop index is inclusive
+    ));
   },
   getRowStartIndexForOffset: function getRowStartIndexForOffset(_ref11, scrollTop) {
     var rowHeight = _ref11.rowHeight,
@@ -1837,8 +1913,10 @@ createGridComponent({
     var rowHeight = _ref12.rowHeight,
         rowCount = _ref12.rowCount,
         height = _ref12.height;
-    var left = startIndex * rowHeight;
-    return Math.max(0, Math.min(rowCount - 1, startIndex + Math.floor((height + (scrollTop - left)) / rowHeight)));
+    var top = startIndex * rowHeight;
+    var numVisibleRows = Math.ceil((height + scrollTop - top) / rowHeight);
+    return Math.max(0, Math.min(rowCount - 1, startIndex + numVisibleRows - 1 // -1 is because stop index is inclusive
+    ));
   },
   initInstanceProps: function initInstanceProps(props) {// Noop
   },
@@ -1863,13 +1941,11 @@ var FixedSizeList =
 /*#__PURE__*/
 createListComponent({
   getItemOffset: function getItemOffset(_ref, index) {
-    var itemSize = _ref.itemSize,
-        size = _ref.size;
+    var itemSize = _ref.itemSize;
     return index * itemSize;
   },
   getItemSize: function getItemSize(_ref2, index) {
-    var itemSize = _ref2.itemSize,
-        size = _ref2.size;
+    var itemSize = _ref2.itemSize;
     return itemSize;
   },
   getEstimatedTotalSize: function getEstimatedTotalSize(_ref3) {
@@ -1887,7 +1963,8 @@ createListComponent({
     // TODO Deprecate direction "horizontal"
     var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
     var size = isHorizontal ? width : height;
-    var maxOffset = Math.max(0, Math.min(itemCount * itemSize - size, index * itemSize));
+    var lastItemOffset = Math.max(0, itemCount * itemSize - size);
+    var maxOffset = Math.min(lastItemOffset, index * itemSize);
     var minOffset = Math.max(0, index * itemSize - size + itemSize);
 
     if (align === 'smart') {
@@ -1906,13 +1983,25 @@ createListComponent({
         return minOffset;
 
       case 'center':
-        return Math.round(minOffset + (maxOffset - minOffset) / 2);
+        {
+          // "Centered" offset is usually the average of the min and max.
+          // But near the edges of the list, this doesn't hold true.
+          var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
+
+          if (middleOffset < Math.ceil(size / 2)) {
+            return 0; // near the beginning
+          } else if (middleOffset > lastItemOffset + Math.floor(size / 2)) {
+            return lastItemOffset; // near the end
+          } else {
+            return middleOffset;
+          }
+        }
 
       case 'auto':
       default:
         if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
           return scrollOffset;
-        } else if (scrollOffset - minOffset < maxOffset - scrollOffset) {
+        } else if (scrollOffset < minOffset) {
           return minOffset;
         } else {
           return maxOffset;
@@ -1936,7 +2025,9 @@ createListComponent({
     var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
     var offset = startIndex * itemSize;
     var size = isHorizontal ? width : height;
-    return Math.max(0, Math.min(itemCount - 1, startIndex + Math.floor((size + (scrollOffset - offset)) / itemSize)));
+    var numVisibleItems = Math.ceil((size + scrollOffset - offset) / itemSize);
+    return Math.max(0, Math.min(itemCount - 1, startIndex + numVisibleItems - 1 // -1 is because stop index is inclusive
+    ));
   },
   initInstanceProps: function initInstanceProps(props) {// Noop
   },
@@ -1996,3 +2087,4 @@ exports.FixedSizeGrid = FixedSizeGrid;
 exports.FixedSizeList = FixedSizeList;
 exports.areEqual = areEqual;
 exports.shouldComponentUpdate = shouldComponentUpdate;
+//# sourceMappingURL=index.cjs.js.map