react-virtualized - npm Package Compare versions

Comparing version 5.5.1 to 5.5.2

CHANGELOG.md

 Changelog
 ------------
 
+##### 5.5.2
+Removed two unnecessary method calls in `Grid` and replaced them with cached properties. Should offer a minor performance boost.
+Added better bounds-checking to util function `getVisibleCellIndices()`
+
 ##### 5.5.1
@@ -5,0 +9,0 @@ Removed unnecessary `setImmediate` in `Grid` initialization code.

dist/commonjs/Grid/Grid.js

@@ -330,3 +330,3 @@ 'use strict';
       if (height > 0 && width > 0) {
-        var _getVisibleCellIndice = (0, _utils.getVisibleCellIndices)({
+        var visibleColumnIndices = (0, _utils.getVisibleCellIndices)({
           cellsCount: columnsCount,
@@ -338,6 +338,3 @@ cellMetadata: this._columnMetadata,
 
-        var columnStartIndex = _getVisibleCellIndice.start;
-        var columnStopIndex = _getVisibleCellIndice.stop;
-
-        var _getVisibleCellIndice2 = (0, _utils.getVisibleCellIndices)({
+        var visibleRowIndices = (0, _utils.getVisibleCellIndices)({
           cellsCount: rowsCount,
@@ -349,17 +346,13 @@ cellMetadata: this._rowMetadata,
 
-        var rowStartIndex = _getVisibleCellIndice2.start;
-        var rowStopIndex = _getVisibleCellIndice2.stop;
+        // Store for _invokeOnGridRenderedHelper()
+        this._renderedColumnStartIndex = visibleColumnIndices.start;
+        this._renderedColumnStopIndex = visibleColumnIndices.stop;
+        this._renderedRowStartIndex = visibleRowIndices.start;
+        this._renderedRowStopIndex = visibleRowIndices.stop;
 
-        // Store for :onSectionRendered callback in componentDidUpdate
-
-        this._renderedColumnStartIndex = columnStartIndex;
-        this._renderedColumnStopIndex = columnStopIndex;
-        this._renderedRowStartIndex = rowStartIndex;
-        this._renderedRowStopIndex = rowStopIndex;
-
         var overscanColumnIndices = (0, _utils.getOverscanIndices)({
           cellsCount: columnsCount,
           overscanCellsCount: overscanColumnsCount,
-          startIndex: columnStartIndex,
-          stopIndex: columnStopIndex
+          startIndex: this._renderedColumnStartIndex,
+          stopIndex: this._renderedColumnStopIndex
         });
@@ -370,15 +363,16 @@
           overscanCellsCount: overscanRowsCount,
-          startIndex: rowStartIndex,
-          stopIndex: rowStopIndex
+          startIndex: this._renderedRowStartIndex,
+          stopIndex: this._renderedRowStopIndex
         });
 
-        columnStartIndex = overscanColumnIndices.overscanStartIndex;
-        columnStopIndex = overscanColumnIndices.overscanStopIndex;
-        rowStartIndex = overscanRowIndices.overscanStartIndex;
-        rowStopIndex = overscanRowIndices.overscanStopIndex;
+        // Store for _invokeOnGridRenderedHelper()
+        this._columnStartIndex = overscanColumnIndices.overscanStartIndex;
+        this._columnStopIndex = overscanColumnIndices.overscanStopIndex;
+        this._rowStartIndex = overscanRowIndices.overscanStartIndex;
+        this._rowStopIndex = overscanRowIndices.overscanStopIndex;
 
-        for (var rowIndex = rowStartIndex; rowIndex <= rowStopIndex; rowIndex++) {
+        for (var rowIndex = this._rowStartIndex; rowIndex <= this._rowStopIndex; rowIndex++) {
           var rowDatum = this._rowMetadata[rowIndex];
 
-          for (var columnIndex = columnStartIndex; columnIndex <= columnStopIndex; columnIndex++) {
+          for (var columnIndex = this._columnStartIndex; columnIndex <= this._columnStopIndex; columnIndex++) {
             var columnDatum = this._columnMetadata[columnIndex];
@@ -536,39 +530,14 @@ var renderedCell = renderCell({ columnIndex: columnIndex, rowIndex: rowIndex });
     value: function _invokeOnGridRenderedHelper() {
-      var _props4 = this.props;
-      var columnsCount = _props4.columnsCount;
-      var onSectionRendered = _props4.onSectionRendered;
-      var overscanColumnsCount = _props4.overscanColumnsCount;
-      var overscanRowsCount = _props4.overscanRowsCount;
-      var rowsCount = _props4.rowsCount;
+      var onSectionRendered = this.props.onSectionRendered;
 
-      var _getOverscanIndices = (0, _utils.getOverscanIndices)({
-        cellsCount: columnsCount,
-        overscanCellsCount: overscanColumnsCount,
-        startIndex: this._renderedColumnStartIndex,
-        stopIndex: this._renderedColumnStopIndex
-      });
 
-      var columnOverscanStartIndex = _getOverscanIndices.overscanStartIndex;
-      var columnOverscanStopIndex = _getOverscanIndices.overscanStopIndex;
-
-      var _getOverscanIndices2 = (0, _utils.getOverscanIndices)({
-        cellsCount: rowsCount,
-        overscanCellsCount: overscanRowsCount,
-        startIndex: this._renderedRowStartIndex,
-        stopIndex: this._renderedRowStopIndex
-      });
-
-      var rowOverscanStartIndex = _getOverscanIndices2.overscanStartIndex;
-      var rowOverscanStopIndex = _getOverscanIndices2.overscanStopIndex;
-
-
       this._onGridRenderedMemoizer({
         callback: onSectionRendered,
         indices: {
-          columnOverscanStartIndex: columnOverscanStartIndex,
-          columnOverscanStopIndex: columnOverscanStopIndex,
+          columnOverscanStartIndex: this._columnStartIndex,
+          columnOverscanStopIndex: this._columnStopIndex,
           columnStartIndex: this._renderedColumnStartIndex,
           columnStopIndex: this._renderedColumnStopIndex,
-          rowOverscanStartIndex: rowOverscanStartIndex,
-          rowOverscanStopIndex: rowOverscanStopIndex,
+          rowOverscanStartIndex: this._rowStartIndex,
+          rowOverscanStopIndex: this._rowStopIndex,
           rowStartIndex: this._renderedRowStartIndex,
@@ -586,6 +555,6 @@ rowStopIndex: this._renderedRowStopIndex
       var totalRowsHeight = _ref3.totalRowsHeight;
-      var _props5 = this.props;
-      var height = _props5.height;
-      var onScroll = _props5.onScroll;
-      var width = _props5.width;
+      var _props4 = this.props;
+      var height = _props4.height;
+      var onScroll = _props4.onScroll;
+      var width = _props4.width;
 
@@ -635,7 +604,2 @@
   }, {
-    key: '_stopEvent',
-    value: function _stopEvent(event) {
-      event.preventDefault();
-    }
-  }, {
     key: '_updateScrollLeftForScrollToColumn',
@@ -694,7 +658,7 @@ value: function _updateScrollLeftForScrollToColumn(scrollToColumnOverride) {
     value: function _onKeyPress(event) {
-      var _props6 = this.props;
-      var columnsCount = _props6.columnsCount;
-      var height = _props6.height;
-      var rowsCount = _props6.rowsCount;
-      var width = _props6.width;
+      var _props5 = this.props;
+      var columnsCount = _props5.columnsCount;
+      var height = _props5.height;
+      var rowsCount = _props5.rowsCount;
+      var width = _props5.width;
       var _state3 = this.state;
@@ -705,4 +669,3 @@ var scrollLeft = _state3.scrollLeft;
 
-      var start = undefined,
-          datum = undefined,
+      var datum = undefined,
           newScrollLeft = undefined,
@@ -717,11 +680,5 @@ newScrollTop = undefined;
         case 'ArrowDown':
-          this._stopEvent(event); // Prevent key from also scrolling surrounding window
+          event.preventDefault(); // Prevent key from also scrolling surrounding window
 
-          start = (0, _utils.getVisibleCellIndices)({
-            cellsCount: rowsCount,
-            cellMetadata: this._rowMetadata,
-            containerSize: height,
-            currentOffset: scrollTop
-          }).start;
-          datum = this._rowMetadata[start];
+          datum = this._rowMetadata[this._renderedRowStartIndex];
           newScrollTop = Math.min(this._getTotalRowsHeight() - height, scrollTop + datum.size);
@@ -734,13 +691,6 @@
         case 'ArrowLeft':
-          this._stopEvent(event); // Prevent key from also scrolling surrounding window
+          event.preventDefault(); // Prevent key from also scrolling surrounding window
 
-          start = (0, _utils.getVisibleCellIndices)({
-            cellsCount: columnsCount,
-            cellMetadata: this._columnMetadata,
-            containerSize: width,
-            currentOffset: scrollLeft
-          }).start;
-
           this.scrollToCell({
-            scrollToColumn: Math.max(0, start - 1),
+            scrollToColumn: Math.max(0, this._renderedColumnStartIndex - 1),
             scrollToRow: this.props.scrollToRow
@@ -750,11 +700,5 @@ });
         case 'ArrowRight':
-          this._stopEvent(event); // Prevent key from also scrolling surrounding window
+          event.preventDefault(); // Prevent key from also scrolling surrounding window
 
-          start = (0, _utils.getVisibleCellIndices)({
-            cellsCount: columnsCount,
-            cellMetadata: this._columnMetadata,
-            containerSize: width,
-            currentOffset: scrollLeft
-          }).start;
-          datum = this._columnMetadata[start];
+          datum = this._columnMetadata[this._renderedColumnStartIndex];
           newScrollLeft = Math.min(this._getTotalColumnsWidth() - width, scrollLeft + datum.size);
@@ -767,14 +711,7 @@
         case 'ArrowUp':
-          this._stopEvent(event); // Prevent key from also scrolling surrounding window
+          event.preventDefault(); // Prevent key from also scrolling surrounding window
 
-          start = (0, _utils.getVisibleCellIndices)({
-            cellsCount: rowsCount,
-            cellMetadata: this._rowMetadata,
-            containerSize: height,
-            currentOffset: scrollTop
-          }).start;
-
           this.scrollToCell({
             scrollToColumn: this.props.scrollToColumn,
-            scrollToRow: Math.max(0, start - 1)
+            scrollToRow: Math.max(0, this._renderedRowStartIndex - 1)
           });
@@ -801,5 +738,5 @@ break;
       // We can avoid that by doing some simple bounds checking to ensure that scrollTop never exceeds the total height.
-      var _props7 = this.props;
-      var height = _props7.height;
-      var width = _props7.width;
+      var _props6 = this.props;
+      var height = _props6.height;
+      var width = _props6.width;
 
@@ -806,0 +743,0 @@ var totalRowsHeight = this._getTotalRowsHeight();

dist/commonjs/utils.js

@@ -181,8 +181,12 @@ 'use strict';
 
-  currentOffset = Math.max(0, currentOffset);
+  // TODO Add better guards here against NaN offset
 
-  var maxOffset = currentOffset + containerSize;
+  var lastDatum = cellMetadata[cellMetadata.length - 1];
+  var totalCellSize = lastDatum.offset + lastDatum.size;
 
-  // TODO Add better guards here against NaN offset
+  // Ensure offset is within reasonable bounds
+  currentOffset = Math.max(0, Math.min(totalCellSize - containerSize, currentOffset));
 
+  var maxOffset = Math.min(totalCellSize, currentOffset + containerSize);
+
   var start = findNearestCell({
@@ -189,0 +193,0 @@ cellMetadata: cellMetadata,

dist/es/Grid/Grid.js

@@ -303,3 +303,3 @@
       if (height > 0 && width > 0) {
-        var _getVisibleCellIndice = getVisibleCellIndices({
+        var visibleColumnIndices = getVisibleCellIndices({
           cellsCount: columnsCount,
@@ -311,6 +311,3 @@ cellMetadata: this._columnMetadata,
 
-        var columnStartIndex = _getVisibleCellIndice.start;
-        var columnStopIndex = _getVisibleCellIndice.stop;
-
-        var _getVisibleCellIndice2 = getVisibleCellIndices({
+        var visibleRowIndices = getVisibleCellIndices({
           cellsCount: rowsCount,
@@ -322,17 +319,13 @@ cellMetadata: this._rowMetadata,
 
-        var rowStartIndex = _getVisibleCellIndice2.start;
-        var rowStopIndex = _getVisibleCellIndice2.stop;
+        // Store for _invokeOnGridRenderedHelper()
+        this._renderedColumnStartIndex = visibleColumnIndices.start;
+        this._renderedColumnStopIndex = visibleColumnIndices.stop;
+        this._renderedRowStartIndex = visibleRowIndices.start;
+        this._renderedRowStopIndex = visibleRowIndices.stop;
 
-        // Store for :onSectionRendered callback in componentDidUpdate
-
-        this._renderedColumnStartIndex = columnStartIndex;
-        this._renderedColumnStopIndex = columnStopIndex;
-        this._renderedRowStartIndex = rowStartIndex;
-        this._renderedRowStopIndex = rowStopIndex;
-
         var overscanColumnIndices = getOverscanIndices({
           cellsCount: columnsCount,
           overscanCellsCount: overscanColumnsCount,
-          startIndex: columnStartIndex,
-          stopIndex: columnStopIndex
+          startIndex: this._renderedColumnStartIndex,
+          stopIndex: this._renderedColumnStopIndex
         });
@@ -343,15 +336,16 @@
           overscanCellsCount: overscanRowsCount,
-          startIndex: rowStartIndex,
-          stopIndex: rowStopIndex
+          startIndex: this._renderedRowStartIndex,
+          stopIndex: this._renderedRowStopIndex
         });
 
-        columnStartIndex = overscanColumnIndices.overscanStartIndex;
-        columnStopIndex = overscanColumnIndices.overscanStopIndex;
-        rowStartIndex = overscanRowIndices.overscanStartIndex;
-        rowStopIndex = overscanRowIndices.overscanStopIndex;
+        // Store for _invokeOnGridRenderedHelper()
+        this._columnStartIndex = overscanColumnIndices.overscanStartIndex;
+        this._columnStopIndex = overscanColumnIndices.overscanStopIndex;
+        this._rowStartIndex = overscanRowIndices.overscanStartIndex;
+        this._rowStopIndex = overscanRowIndices.overscanStopIndex;
 
-        for (var rowIndex = rowStartIndex; rowIndex <= rowStopIndex; rowIndex++) {
+        for (var rowIndex = this._rowStartIndex; rowIndex <= this._rowStopIndex; rowIndex++) {
           var rowDatum = this._rowMetadata[rowIndex];
 
-          for (var columnIndex = columnStartIndex; columnIndex <= columnStopIndex; columnIndex++) {
+          for (var columnIndex = this._columnStartIndex; columnIndex <= this._columnStopIndex; columnIndex++) {
             var columnDatum = this._columnMetadata[columnIndex];
@@ -509,39 +503,14 @@ var renderedCell = renderCell({ columnIndex: columnIndex, rowIndex: rowIndex });
     value: function _invokeOnGridRenderedHelper() {
-      var _props4 = this.props;
-      var columnsCount = _props4.columnsCount;
-      var onSectionRendered = _props4.onSectionRendered;
-      var overscanColumnsCount = _props4.overscanColumnsCount;
-      var overscanRowsCount = _props4.overscanRowsCount;
-      var rowsCount = _props4.rowsCount;
+      var onSectionRendered = this.props.onSectionRendered;
 
-      var _getOverscanIndices = getOverscanIndices({
-        cellsCount: columnsCount,
-        overscanCellsCount: overscanColumnsCount,
-        startIndex: this._renderedColumnStartIndex,
-        stopIndex: this._renderedColumnStopIndex
-      });
 
-      var columnOverscanStartIndex = _getOverscanIndices.overscanStartIndex;
-      var columnOverscanStopIndex = _getOverscanIndices.overscanStopIndex;
-
-      var _getOverscanIndices2 = getOverscanIndices({
-        cellsCount: rowsCount,
-        overscanCellsCount: overscanRowsCount,
-        startIndex: this._renderedRowStartIndex,
-        stopIndex: this._renderedRowStopIndex
-      });
-
-      var rowOverscanStartIndex = _getOverscanIndices2.overscanStartIndex;
-      var rowOverscanStopIndex = _getOverscanIndices2.overscanStopIndex;
-
-
       this._onGridRenderedMemoizer({
         callback: onSectionRendered,
         indices: {
-          columnOverscanStartIndex: columnOverscanStartIndex,
-          columnOverscanStopIndex: columnOverscanStopIndex,
+          columnOverscanStartIndex: this._columnStartIndex,
+          columnOverscanStopIndex: this._columnStopIndex,
           columnStartIndex: this._renderedColumnStartIndex,
           columnStopIndex: this._renderedColumnStopIndex,
-          rowOverscanStartIndex: rowOverscanStartIndex,
-          rowOverscanStopIndex: rowOverscanStopIndex,
+          rowOverscanStartIndex: this._rowStartIndex,
+          rowOverscanStopIndex: this._rowStopIndex,
           rowStartIndex: this._renderedRowStartIndex,
@@ -559,6 +528,6 @@ rowStopIndex: this._renderedRowStopIndex
       var totalRowsHeight = _ref3.totalRowsHeight;
-      var _props5 = this.props;
-      var height = _props5.height;
-      var onScroll = _props5.onScroll;
-      var width = _props5.width;
+      var _props4 = this.props;
+      var height = _props4.height;
+      var onScroll = _props4.onScroll;
+      var width = _props4.width;
 
@@ -608,7 +577,2 @@
   }, {
-    key: '_stopEvent',
-    value: function _stopEvent(event) {
-      event.preventDefault();
-    }
-  }, {
     key: '_updateScrollLeftForScrollToColumn',
@@ -667,7 +631,7 @@ value: function _updateScrollLeftForScrollToColumn(scrollToColumnOverride) {
     value: function _onKeyPress(event) {
-      var _props6 = this.props;
-      var columnsCount = _props6.columnsCount;
-      var height = _props6.height;
-      var rowsCount = _props6.rowsCount;
-      var width = _props6.width;
+      var _props5 = this.props;
+      var columnsCount = _props5.columnsCount;
+      var height = _props5.height;
+      var rowsCount = _props5.rowsCount;
+      var width = _props5.width;
       var _state3 = this.state;
@@ -678,4 +642,3 @@ var scrollLeft = _state3.scrollLeft;
 
-      var start = undefined,
-          datum = undefined,
+      var datum = undefined,
           newScrollLeft = undefined,
@@ -690,11 +653,5 @@ newScrollTop = undefined;
         case 'ArrowDown':
-          this._stopEvent(event); // Prevent key from also scrolling surrounding window
+          event.preventDefault(); // Prevent key from also scrolling surrounding window
 
-          start = getVisibleCellIndices({
-            cellsCount: rowsCount,
-            cellMetadata: this._rowMetadata,
-            containerSize: height,
-            currentOffset: scrollTop
-          }).start;
-          datum = this._rowMetadata[start];
+          datum = this._rowMetadata[this._renderedRowStartIndex];
           newScrollTop = Math.min(this._getTotalRowsHeight() - height, scrollTop + datum.size);
@@ -707,13 +664,6 @@
         case 'ArrowLeft':
-          this._stopEvent(event); // Prevent key from also scrolling surrounding window
+          event.preventDefault(); // Prevent key from also scrolling surrounding window
 
-          start = getVisibleCellIndices({
-            cellsCount: columnsCount,
-            cellMetadata: this._columnMetadata,
-            containerSize: width,
-            currentOffset: scrollLeft
-          }).start;
-
           this.scrollToCell({
-            scrollToColumn: Math.max(0, start - 1),
+            scrollToColumn: Math.max(0, this._renderedColumnStartIndex - 1),
             scrollToRow: this.props.scrollToRow
@@ -723,11 +673,5 @@ });
         case 'ArrowRight':
-          this._stopEvent(event); // Prevent key from also scrolling surrounding window
+          event.preventDefault(); // Prevent key from also scrolling surrounding window
 
-          start = getVisibleCellIndices({
-            cellsCount: columnsCount,
-            cellMetadata: this._columnMetadata,
-            containerSize: width,
-            currentOffset: scrollLeft
-          }).start;
-          datum = this._columnMetadata[start];
+          datum = this._columnMetadata[this._renderedColumnStartIndex];
           newScrollLeft = Math.min(this._getTotalColumnsWidth() - width, scrollLeft + datum.size);
@@ -740,14 +684,7 @@
         case 'ArrowUp':
-          this._stopEvent(event); // Prevent key from also scrolling surrounding window
+          event.preventDefault(); // Prevent key from also scrolling surrounding window
 
-          start = getVisibleCellIndices({
-            cellsCount: rowsCount,
-            cellMetadata: this._rowMetadata,
-            containerSize: height,
-            currentOffset: scrollTop
-          }).start;
-
           this.scrollToCell({
             scrollToColumn: this.props.scrollToColumn,
-            scrollToRow: Math.max(0, start - 1)
+            scrollToRow: Math.max(0, this._renderedRowStartIndex - 1)
           });
@@ -774,5 +711,5 @@ break;
       // We can avoid that by doing some simple bounds checking to ensure that scrollTop never exceeds the total height.
-      var _props7 = this.props;
-      var height = _props7.height;
-      var width = _props7.width;
+      var _props6 = this.props;
+      var height = _props6.height;
+      var width = _props6.width;
 
@@ -779,0 +716,0 @@ var totalRowsHeight = this._getTotalRowsHeight();

dist/es/utils.js

@@ -168,8 +168,12 @@ /**
 
-  currentOffset = Math.max(0, currentOffset);
+  // TODO Add better guards here against NaN offset
 
-  var maxOffset = currentOffset + containerSize;
+  var lastDatum = cellMetadata[cellMetadata.length - 1];
+  var totalCellSize = lastDatum.offset + lastDatum.size;
 
-  // TODO Add better guards here against NaN offset
+  // Ensure offset is within reasonable bounds
+  currentOffset = Math.max(0, Math.min(totalCellSize - containerSize, currentOffset));
 
+  var maxOffset = Math.min(totalCellSize, currentOffset + containerSize);
+
   var start = findNearestCell({
@@ -176,0 +180,0 @@ cellMetadata: cellMetadata,

package.json

@@ -6,3 +6,3 @@ {
   "user": "bvaughn",
-  "version": "5.5.1",
+  "version": "5.5.2",
   "homepage": "https://github.com/bvaughn/react-virtualized",
@@ -9,0 +9,0 @@ "main": "dist/commonjs/index.js",

No alert changes

Worsened metrics

Total package byte prevSize

604985

decreased by-1.55%

Lines of code

7190

decreased by-1.88%

No dependency changes