virtual-scroller 1.7.9 → 1.9.0

package/commonjs/Layout.js

@@ -1,58 +1,87 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LAYOUT_REASON = exports["default"] = void 0;
+exports["default"] = exports.LAYOUT_REASON = void 0;
+
+var _debug = _interopRequireWildcard(require("./utility/debug.js"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-var _debug = _interopRequireDefault(require("./utility/debug"));
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
-var Layout =
-/*#__PURE__*/
-function () {
+var Layout = /*#__PURE__*/function () {
   function Layout(_ref) {
     var bypass = _ref.bypass,
         estimatedItemHeight = _ref.estimatedItemHeight,
         measureItemsBatchSize = _ref.measureItemsBatchSize,
+        getPrerenderMargin = _ref.getPrerenderMargin,
         getVerticalSpacing = _ref.getVerticalSpacing,
+        getVerticalSpacingBeforeResize = _ref.getVerticalSpacingBeforeResize,
         getColumnsCount = _ref.getColumnsCount,
+        getColumnsCountBeforeResize = _ref.getColumnsCountBeforeResize,
         getItemHeight = _ref.getItemHeight,
-        getAverageItemHeight = _ref.getAverageItemHeight;
+        getItemHeightBeforeResize = _ref.getItemHeightBeforeResize,
+        getBeforeResizeItemsCount = _ref.getBeforeResizeItemsCount,
+        getAverageItemHeight = _ref.getAverageItemHeight,
+        getMaxVisibleAreaHeight = _ref.getMaxVisibleAreaHeight,
+        getPreviouslyCalculatedLayout = _ref.getPreviouslyCalculatedLayout;
 
     _classCallCheck(this, Layout);
 
     this.bypass = bypass;
     this.estimatedItemHeight = estimatedItemHeight;
     this.measureItemsBatchSize = measureItemsBatchSize;
+    this.getPrerenderMargin = getPrerenderMargin;
     this.getVerticalSpacing = getVerticalSpacing;
+    this.getVerticalSpacingBeforeResize = getVerticalSpacingBeforeResize;
     this.getColumnsCount = getColumnsCount;
+    this.getColumnsCountBeforeResize = getColumnsCountBeforeResize;
     this.getItemHeight = getItemHeight;
+    this.getItemHeightBeforeResize = getItemHeightBeforeResize;
+    this.getBeforeResizeItemsCount = getBeforeResizeItemsCount;
     this.getAverageItemHeight = getAverageItemHeight;
+    this.getMaxVisibleAreaHeight = getMaxVisibleAreaHeight; //
+    // The "previously calculated layout" feature is not currently used.
+    //
+    // The current layout snapshot could be stored as a "previously calculated layout" variable
+    // so that it could theoretically be used when calculating new layout incrementally
+    // rather than from scratch, which would be an optimization.
+    //
+
+    this.getPreviouslyCalculatedLayout = getPreviouslyCalculatedLayout;
   }
 
   _createClass(Layout, [{
     key: "getInitialLayoutValues",
     value: function getInitialLayoutValues(_ref2) {
-      var bypass = _ref2.bypass,
-          itemsCount = _ref2.itemsCount,
-          visibleAreaHeightIncludingMargins = _ref2.visibleAreaHeightIncludingMargins;
-      // On server side, at initialization time, there's no "visible area height",
-      // so default to `1` estimated rows count.
-      var estimatedRowsCount = visibleAreaHeightIncludingMargins ? this.getEstimatedRowsCountForHeight(visibleAreaHeightIncludingMargins) : 1;
+      var itemsCount = _ref2.itemsCount,
+          columnsCount = _ref2.columnsCount;
       var firstShownItemIndex;
       var lastShownItemIndex; // If there're no items then `firstShownItemIndex` stays `undefined`.
 
       if (itemsCount > 0) {
         firstShownItemIndex = 0;
-        lastShownItemIndex = this.getLastShownItemIndex(firstShownItemIndex, itemsCount, estimatedRowsCount, bypass);
+        lastShownItemIndex = this.getInitialLastShownItemIndex({
+          itemsCount: itemsCount,
+          columnsCount: columnsCount,
+          firstShownItemIndex: firstShownItemIndex
+        });
       }
 
       return {
@@ -63,21 +92,35 @@ function () {
       };
     }
   }, {
-    key: "getLastShownItemIndex",
-    value: function getLastShownItemIndex(firstShownItemIndex, itemsCount, estimatedRowsCount, bypass) {
-      if (this.bypass || bypass) {
+    key: "getInitialLastShownItemIndex",
+    value: function getInitialLastShownItemIndex(_ref3) {
+      var itemsCount = _ref3.itemsCount,
+          columnsCount = _ref3.columnsCount,
+          firstShownItemIndex = _ref3.firstShownItemIndex;
+
+      if (this.bypass) {
         return itemsCount - 1;
+      } // On server side, at initialization time,
+      // `scrollableContainer` is `undefined`,
+      // so default to `1` estimated rows count.
+
+
+      var estimatedRowsCount = 1;
+
+      if (this.getMaxVisibleAreaHeight()) {
+        estimatedRowsCount = this.getEstimatedRowsCountForHeight(this.getMaxVisibleAreaHeight() + this.getPrerenderMargin());
       }
 
-      return Math.min(firstShownItemIndex + (estimatedRowsCount * this.getColumnsCount() - 1), itemsCount - 1);
+      return Math.min(firstShownItemIndex + (estimatedRowsCount * columnsCount - 1), itemsCount - 1);
     }
   }, {
     key: "getEstimatedRowsCountForHeight",
     value: function getEstimatedRowsCountForHeight(height) {
       var estimatedItemHeight = this.getEstimatedItemHeight();
+      var verticalSpacing = this.getVerticalSpacing();
 
       if (estimatedItemHeight) {
-        return Math.ceil((height + this.getVerticalSpacing()) / (estimatedItemHeight + this.getVerticalSpacing()));
+        return Math.ceil((height + verticalSpacing) / (estimatedItemHeight + verticalSpacing));
       } else {
         // If no items have been rendered yet, and no `estimatedItemHeight` option
         // has been passed, then default to `1` estimated rows count in any `height`.
@@ -96,286 +139,616 @@ function () {
       return this.getAverageItemHeight() || this.estimatedItemHeight || 0;
     }
   }, {
-    key: "updateLayoutForItemsDiff",
-    value: function updateLayoutForItemsDiff(layout, _ref3, _ref4) {
-      var prependedItemsCount = _ref3.prependedItemsCount,
-          appendedItemsCount = _ref3.appendedItemsCount;
-      var itemsCount = _ref4.itemsCount;
-      layout.firstShownItemIndex += prependedItemsCount;
-      layout.lastShownItemIndex += prependedItemsCount;
+    key: "getLayoutUpdateForItemsDiff",
+    value: function getLayoutUpdateForItemsDiff(_ref4, _ref5, _ref6) {
+      var firstShownItemIndex = _ref4.firstShownItemIndex,
+          lastShownItemIndex = _ref4.lastShownItemIndex,
+          beforeItemsHeight = _ref4.beforeItemsHeight,
+          afterItemsHeight = _ref4.afterItemsHeight;
+      var prependedItemsCount = _ref5.prependedItemsCount,
+          appendedItemsCount = _ref5.appendedItemsCount;
+      var itemsCount = _ref6.itemsCount,
+          columnsCount = _ref6.columnsCount,
+          shouldRestoreScrollPosition = _ref6.shouldRestoreScrollPosition,
+          onResetGridLayout = _ref6.onResetGridLayout;
+      // const layoutUpdate = {}
+      // If the layout stays the same, then simply increase
+      // the top and bottom margins proportionally to the amount
+      // of the items added.
+      var averageItemHeight = this.getAverageItemHeight();
+      var verticalSpacing = this.getVerticalSpacing();
+
+      if (appendedItemsCount > 0) {
+        var appendedRowsCount = Math.ceil(appendedItemsCount / columnsCount);
+        var addedHeightAfter = appendedRowsCount * (verticalSpacing + averageItemHeight);
+        afterItemsHeight += addedHeightAfter; // layoutUpdate = {
+        // 	...layoutUpdate,
+        // 	afterItemsHeight
+        // }
+      }
+
+      if (prependedItemsCount > 0) {
+        var prependedRowsCount = Math.ceil(prependedItemsCount / columnsCount);
+        var addedHeightBefore = prependedRowsCount * (averageItemHeight + verticalSpacing);
+        firstShownItemIndex += prependedItemsCount;
+        lastShownItemIndex += prependedItemsCount;
+        beforeItemsHeight += addedHeightBefore; // If the currently shown items position on screen should be preserved
+        // when prepending new items, then it means that:
+        // * The current scroll position should be snapshotted.
+        // * The current list height should be snapshotted.
+        // * All prepended items should be shown so that their height could be
+        //   measured after they're rendered. Based on the prepended items' height,
+        //   the scroll position will be restored so that there's no "jump of content".
+
+        if (shouldRestoreScrollPosition) {
+          firstShownItemIndex = 0;
+          beforeItemsHeight = 0;
+        }
+
+        if (prependedItemsCount % columnsCount > 0) {
+          // Rows will be rebalanced as a result of prepending new items,
+          // and row heights can change as a result, so re-layout items
+          // after they've been measured (after the upcoming re-render).
+          //
+          // For example, consider a web page where item rows are `display: flex`.
+          // Suppose there're 3 columns and it shows items from 4 to 6.
+          //
+          // ------------------------------------------
+          // | Apples are  | Bananas    | Cranberries |
+          // | green       |            |             |
+          // ------------------------------------------
+          // | Dates       | Elderberry | Figs are    |
+          // |             |            | tasty       |
+          // ------------------------------------------
+          //
+          // Now, 1 item gets prepended. As a result, all existing rows will have
+          // a different set of items, which means that the row heights will change.
+          //
+          // ------------------------------------------
+          // | Zucchini    | Apples are | Bananas     |
+          // |             | green      |             |
+          // ------------------------------------------
+          // | Cranberries | Dates      | Elderberry  |
+          // ------------------------------------------
+          // | Figs        |
+          // | are tasty   |
+          // ---------------
+          //
+          // As it can be seen above, the second row's height has changed from 2 to 1.
+          // Not only that, but `itemHeights` have changed as well, so if you thought
+          // that the library could easily recalculate row heights using `Math.max()` — 
+          // turns out it's not always the case.
+          //
+          // There could be an explicit opt-in option for automatically recalculating
+          // row heights, but I don't want to write code for such an extremely rare
+          // use case. Instead, use the `getColumnsCount()` parameter function when
+          // fetching previous items.
+          onResetGridLayout();
+          (0, _debug.warn)('~ Prepended items count', prependedItemsCount, 'is not divisible by Columns Count', columnsCount, '~');
+          (0, _debug.warn)('Layout reset required');
+          var shownItemsCountBeforeItemsUpdate = lastShownItemIndex - firstShownItemIndex + 1;
+          firstShownItemIndex = 0;
+          beforeItemsHeight = 0;
+
+          if (!shouldRestoreScrollPosition) {
+            // Limit shown items count if too many items have been prepended.
+            if (prependedItemsCount > shownItemsCountBeforeItemsUpdate) {
+              lastShownItemIndex = this.getInitialLastShownItemIndex({
+                itemsCount: itemsCount,
+                columnsCount: columnsCount,
+                firstShownItemIndex: firstShownItemIndex
+              }); // Approximate `afterItemsHeight` calculation.
+
+              var afterItemsCount = itemsCount - (lastShownItemIndex + 1);
+              afterItemsHeight = Math.ceil(afterItemsCount / columnsCount) * (verticalSpacing + averageItemHeight); // layoutUpdate = {
+              // 	...layoutUpdate,
+              // 	afterItemsHeight
+              // }
+            }
+          }
+        } // layoutUpdate = {
+        // 	...layoutUpdate,
+        // 	beforeItemsHeight,
+        // 	firstShownItemIndex,
+        // 	lastShownItemIndex
+        // }
+
+      } // return layoutUpdate
+      // Overwrite all four props in all scenarios.
+      // The reason is that only this way subsequent `setItems()` calls
+      // will be truly "stateless" when a chain of `setItems()` calls
+      // could be replaced with just the last one in a scenario when
+      // `updateState()` calls are "asynchronous" (delayed execution).
+      //
+      // So, for example, the user calls `setItems()` with one set of items.
+      // A `updateState()` call has been dispatched but the `state` hasn't been updated yet.
+      // Then the user calls `setItems()` with another set of items.
+      // If this function only returned a minimal set of properties that actually change,
+      // the other layout properties of the second `setItems()` call wouldn't overwrite the ones
+      // scheduled for update during the first `setItems()` call, resulting in an inconsistent `state`.
+      //
+      // For example, the first `setItems()` call does a `updateState()` call where it updates
+      // `afterItemsHeight`, and then the second `setItems()` call only updates `beforeItemsHeight`
+      // and `firstShownItemIndex` and `lastShownItemIndex`. If the second `setItems()` call was to
+      // overwrite any effects of the pending-but-not-yet-applied first `setItems()` call, it would
+      // have to call `updateState()` with an `afterItemsHeight` property too, even though it hasn't change.
+      // That would be just to revert the change to `afterItemsHeight` state property already scheduled
+      // by the first `setItems()` call.
+      //
+
+
+      return {
+        beforeItemsHeight: beforeItemsHeight,
+        afterItemsHeight: afterItemsHeight,
+        firstShownItemIndex: firstShownItemIndex,
+        lastShownItemIndex: lastShownItemIndex
+      };
+    } // If an item that hasn't been shown (and measured) yet is encountered
+    // then show such item and then retry after it has been measured.
+
+  }, {
+    key: "getItemNotMeasuredIndexes",
+    value: function getItemNotMeasuredIndexes(i, _ref7) {
+      var itemsCount = _ref7.itemsCount,
+          firstShownItemIndex = _ref7.firstShownItemIndex,
+          nonMeasuredAreaHeight = _ref7.nonMeasuredAreaHeight,
+          indexOfTheFirstItemInTheRow = _ref7.indexOfTheFirstItemInTheRow;
+      (0, _debug["default"])('Item index', i, 'height is required for calculations but hasn\'t been measured yet. Mark the item as "shown", rerender the list, measure the item\'s height and redo the layout.');
       var columnsCount = this.getColumnsCount();
+      var itemsCountToRenderForMeasurement = Math.min(this.getEstimatedRowsCountForHeight(nonMeasuredAreaHeight) * columnsCount, this.measureItemsBatchSize || Infinity);
 
-      if (prependedItemsCount % columnsCount === 0) {
-        // If the layout stays the same, then simply increase
-        // the top and bottom margins proportionally to the amount
-        // of the items added.
-        var prependedRowsCount = prependedItemsCount / columnsCount;
-        var appendedRowsCount = Math.ceil(appendedItemsCount / columnsCount);
-        var averageItemHeight = this.getAverageItemHeight();
-        var verticalSpacing = this.getVerticalSpacing();
-        layout.beforeItemsHeight += prependedRowsCount * (averageItemHeight + verticalSpacing);
-        layout.afterItemsHeight += appendedRowsCount * (verticalSpacing + averageItemHeight);
-      } else {
-        // Rows will be rebalanced as a result of prepending the items,
-        // and the row heights can change as a result, so recalculate
-        // `beforeItemsHeight` and `afterItemsHeight` from scratch.
-        // `this.itemHeights[]` and `firstShownItemIndex`/`lastShownItemIndex`
-        // have already been updated at this point.
-        layout.beforeItemsHeight = this.getBeforeItemsHeight(layout.firstShownItemIndex, layout.lastShownItemIndex);
-        layout.afterItemsHeight = this.getAfterItemsHeight(layout.firstShownItemIndex, layout.lastShownItemIndex, itemsCount);
+      if (firstShownItemIndex === undefined) {
+        firstShownItemIndex = indexOfTheFirstItemInTheRow;
       }
+
+      var lastShownItemIndex = Math.min(indexOfTheFirstItemInTheRow + itemsCountToRenderForMeasurement - 1, // Guard against index overflow.
+      itemsCount - 1);
+      return {
+        firstNonMeasuredItemIndex: i,
+        firstShownItemIndex: firstShownItemIndex,
+        lastShownItemIndex: lastShownItemIndex
+      };
     }
+    /**
+     * Finds the indexes of the currently visible items.
+     * @return {object} `{ firstShownItemIndex: number, lastShownItemIndex: number, firstNonMeasuredItemIndex: number? }`
+     */
+
   }, {
-    key: "_getVisibleItemIndexes",
-    value: function _getVisibleItemIndexes(visibleAreaTop, visibleAreaBottom, listTopOffset, itemsCount) {
-      var columnsCount = this.getColumnsCount();
-      var firstShownItemIndex;
-      var lastShownItemIndex;
-      var previousRowsHeight = 0;
-      var rowsCount = Math.ceil(itemsCount / columnsCount);
-      var rowIndex = 0;
+    key: "getShownItemIndexes",
+    value: function getShownItemIndexes(_ref8) {
+      var itemsCount = _ref8.itemsCount,
+          visibleAreaTop = _ref8.visibleAreaTop,
+          visibleAreaBottom = _ref8.visibleAreaBottom;
+
+      var indexes = this._getShownItemIndex({
+        itemsCount: itemsCount,
+        fromIndex: 0,
+        visibleAreaTop: visibleAreaTop,
+        visibleAreaBottom: visibleAreaBottom,
+        findFirstShownItemIndex: true
+      });
+
+      if (indexes === null) {
+        return this.getNonVisibleListShownItemIndexes();
+      }
 
-      while (rowIndex < rowsCount) {
-        var hasMoreRows = itemsCount > (rowIndex + 1) * columnsCount;
-        var verticalSpaceAfterCurrentRow = hasMoreRows ? this.getVerticalSpacing() : 0;
-        var currentRowHeight = 0;
-        var columnIndex = 0;
-        var i = void 0;
+      if (indexes.firstNonMeasuredItemIndex !== undefined) {
+        return indexes;
+      }
 
-        while (columnIndex < columnsCount && (i = rowIndex * columnsCount + columnIndex) < itemsCount) {
-          var itemHeight = this.getItemHeight(i); // If an item that hasn't been shown (and measured) yet is encountered
-          // then show such item and then retry after it has been measured.
+      var _indexes = indexes,
+          firstShownItemIndex = _indexes.firstShownItemIndex,
+          beforeItemsHeight = _indexes.beforeItemsHeight;
+      indexes = this._getShownItemIndex({
+        itemsCount: itemsCount,
+        fromIndex: firstShownItemIndex,
+        beforeItemsHeight: beforeItemsHeight,
+        visibleAreaTop: visibleAreaTop,
+        visibleAreaBottom: visibleAreaBottom,
+        findLastShownItemIndex: true
+      });
+
+      if (indexes === null) {
+        return this.getNonVisibleListShownItemIndexes();
+      }
 
-          if (itemHeight === undefined) {
-            (0, _debug["default"])("Item index ".concat(i, " lies within the visible area or its \"margins\", but its height hasn't been measured yet. Mark the item as \"shown\", render the list, measure the item's height and redo the layout."));
+      if (indexes.firstNonMeasuredItemIndex !== undefined) {
+        return indexes;
+      }
 
-            if (firstShownItemIndex === undefined) {
-              firstShownItemIndex = rowIndex * columnsCount;
-            }
+      var _indexes2 = indexes,
+          lastShownItemIndex = _indexes2.lastShownItemIndex;
+      return {
+        firstShownItemIndex: firstShownItemIndex,
+        lastShownItemIndex: lastShownItemIndex
+      };
+    }
+  }, {
+    key: "_getShownItemIndex",
+    value: function _getShownItemIndex(parameters) {
+      var beforeResize = parameters.beforeResize,
+          itemsCount = parameters.itemsCount,
+          visibleAreaTop = parameters.visibleAreaTop,
+          visibleAreaBottom = parameters.visibleAreaBottom,
+          findFirstShownItemIndex = parameters.findFirstShownItemIndex,
+          findLastShownItemIndex = parameters.findLastShownItemIndex;
+      var fromIndex = parameters.fromIndex,
+          beforeItemsHeight = parameters.beforeItemsHeight; // This function could potentially also use `this.getPreviouslyCalculatedLayout()`
+      // in order to skip calculating visible item indexes from scratch
+      // and instead just calculate the difference from a "previously calculated layout".
+      //
+      // I did a simple test in a web browser and found out that running the following
+      // piece of code is less than 10 milliseconds:
+      //
+      // var startedAt = Date.now()
+      // var i = 0
+      // while (i < 1000000) {
+      //   i++
+      // }
+      // console.log(Date.now() - startedAt)
+      //
+      // Which becomes negligible in my project's use case (a couple thousands items max).
+      //
+      // If someone would attempt to use a "previously calculated layout" here
+      // then `shownItemsHeight` would also have to be returned from this function:
+      // the total height of all shown items including vertical spacing between them.
+      //
+      // If "previously calculated layout" would be used then it would first find
+      // `firstShownItemIndex` and then find `lastShownItemIndex` as part of two
+      // separate calls of this function, each with or without `backwards` flag,
+      // depending on whether `visibleAreaTop` and `visibleAreBottom` have shifted up or down.
+
+      var firstShownItemIndex;
+      var lastShownItemIndex; // It's not always required to pass `beforeItemsHeight` parameter:
+      // when `fromIndex` is `0`, it's also assumed to be `0`.
+
+      if (fromIndex === 0) {
+        beforeItemsHeight = 0;
+      }
+
+      if (beforeItemsHeight === undefined) {
+        throw new Error('[virtual-scroller] `beforeItemsHeight` not passed to `Layout.getShownItemIndexes()` when starting from index ' + fromIndex);
+      } // const backwards = false
+      // while (backwards ? i >= 0 : i < itemsCount) {}
+
+
+      if (!beforeResize) {
+        var beforeResizeItemsCount = this.getBeforeResizeItemsCount();
+
+        if (beforeResizeItemsCount > fromIndex) {
+          // First search for the item in "before resize" items.
+          var _this$_getShownItemIn = this._getShownItemIndex(_objectSpread(_objectSpread({}, parameters), {}, {
+            beforeResize: true,
+            itemsCount: beforeResizeItemsCount
+          })),
+              notFound = _this$_getShownItemIn.notFound,
+              beforeResizeItemsHeight = _this$_getShownItemIn.beforeItemsHeight,
+              _firstShownItemIndex = _this$_getShownItemIn.firstShownItemIndex,
+              _lastShownItemIndex = _this$_getShownItemIn.lastShownItemIndex; // If the item was not found in "before resize" items
+          // then search in regular items skipping "before resize" ones.
+
+
+          if (notFound) {
+            beforeItemsHeight = beforeResizeItemsHeight;
+            fromIndex += beforeResizeItemsCount;
+          } else {
+            // If the item was found in "before resize" items
+            // then return the result.
+            // Rebalance first / last shown item indexes based on
+            // the current columns count, if required.
+            var _columnsCount = this.getColumnsCount();
 
-            var heightLeft = visibleAreaBottom - (listTopOffset + previousRowsHeight);
-            lastShownItemIndex = Math.min((rowIndex + this.getEstimatedRowsCountForHeight(heightLeft)) * columnsCount - 1, // Guard against index overflow.
-            itemsCount - 1);
             return {
-              firstNonMeasuredItemIndex: i,
-              firstShownItemIndex: firstShownItemIndex,
-              lastShownItemIndex: lastShownItemIndex
+              firstShownItemIndex: _firstShownItemIndex === undefined ? undefined : Math.floor(_firstShownItemIndex / _columnsCount) * _columnsCount,
+              lastShownItemIndex: _lastShownItemIndex === undefined ? undefined : Math.floor(_lastShownItemIndex / _columnsCount) * _columnsCount,
+              beforeItemsHeight: beforeResizeItemsHeight
             };
           }
+        }
+      }
 
-          currentRowHeight = Math.max(currentRowHeight, itemHeight); // If this is the first item visible
-          // then start showing items from this row.
-
-          if (firstShownItemIndex === undefined) {
-            if (listTopOffset + previousRowsHeight + currentRowHeight > visibleAreaTop) {
-              (0, _debug["default"])('First shown row index', rowIndex);
-              firstShownItemIndex = rowIndex * columnsCount;
-            }
-          } // If this item is the last one visible in the viewport then exit.
+      var columnsCount = beforeResize ? this.getColumnsCountBeforeResize() : this.getColumnsCount();
+      var verticalSpacing = beforeResize ? this.getVerticalSpacingBeforeResize() : this.getVerticalSpacing();
+      var i = fromIndex;
 
+      while (i < itemsCount) {
+        var currentRowFirstItemIndex = i;
+        var hasMoreRows = itemsCount > currentRowFirstItemIndex + columnsCount;
+        var verticalSpacingAfterCurrentRow = hasMoreRows ? verticalSpacing : 0;
+        var currentRowHeight = 0; // Calculate current row height.
 
-          if (listTopOffset + previousRowsHeight + currentRowHeight + verticalSpaceAfterCurrentRow > visibleAreaBottom) {
-            (0, _debug["default"])('Last shown row index', rowIndex); // The list height is estimated until all items have been seen,
-            // so it's possible that even when the list DOM element happens
-            // to be in the viewport in reality the list isn't visible
-            // in which case `firstShownItemIndex` will be `undefined`.
+        var columnIndex = 0;
 
-            if (firstShownItemIndex !== undefined) {
-              lastShownItemIndex = Math.min( // The index of the last item in the current row.
-              (rowIndex + 1) * columnsCount - 1, // Guards against index overflow.
-              itemsCount - 1);
-            }
+        while (columnIndex < columnsCount && i < itemsCount) {
+          var itemHeight = beforeResize ? this.getItemHeightBeforeResize(i) : this.getItemHeight(i); // If this item hasn't been measured yet (or re-measured after a resize)
+          // then mark it as the first non-measured one.
+          //
+          // Can't happen by definition when `beforeResize` parameter is `true`.
+          //
 
-            return {
-              firstShownItemIndex: firstShownItemIndex,
-              lastShownItemIndex: lastShownItemIndex
-            };
+          if (itemHeight === undefined) {
+            return this.getItemNotMeasuredIndexes(i, {
+              itemsCount: itemsCount,
+              firstShownItemIndex: findLastShownItemIndex ? fromIndex : undefined,
+              indexOfTheFirstItemInTheRow: currentRowFirstItemIndex,
+              nonMeasuredAreaHeight: visibleAreaBottom + this.getPrerenderMargin() - beforeItemsHeight
+            });
           }
 
+          currentRowHeight = Math.max(currentRowHeight, itemHeight);
           columnIndex++;
+          i++;
         }
 
-        previousRowsHeight += currentRowHeight; // If there're more rows below the current row, then add vertical spacing.
-
-        previousRowsHeight += verticalSpaceAfterCurrentRow;
-        rowIndex++;
-      } // If there're no more items then the last item is the last one to show.
-
+        var itemsHeightFromFirstRowToThisRow = beforeItemsHeight + currentRowHeight;
+        var rowStepsIntoVisibleAreaTop = itemsHeightFromFirstRowToThisRow > visibleAreaTop - this.getPrerenderMargin();
+        var rowStepsOutOfVisibleAreaBottomOrIsAtTheBorder = itemsHeightFromFirstRowToThisRow + verticalSpacingAfterCurrentRow >= visibleAreaBottom + this.getPrerenderMargin(); // if (backwards) {
+        // 	if (findFirstShownItemIndex) {
+        // 		if (rowStepsOutOfVisibleAreaTop) {
+        // 			return {
+        // 				firstShownItemIndex: currentRowFirstItemIndex + columnsCount
+        // 			}
+        // 		}
+        // 	} else if (findLastShownItemIndex) {
+        // 		if (rowStepsIntoVisibleAreaBottom) {
+        // 			return {
+        // 				lastShownItemIndex: currentRowFirstItemIndex + columnsCount - 1
+        // 			}
+        // 		}
+        // 	}
+        // }
+
+        if (findFirstShownItemIndex) {
+          if (rowStepsIntoVisibleAreaTop) {
+            // If item is the first one visible in the viewport
+            // then start showing items from this row.
+            return {
+              firstShownItemIndex: currentRowFirstItemIndex,
+              beforeItemsHeight: beforeItemsHeight
+            };
+          }
+        } else if (findLastShownItemIndex) {
+          if (rowStepsOutOfVisibleAreaBottomOrIsAtTheBorder) {
+            return {
+              lastShownItemIndex: Math.min( // The index of the last item in the current row.
+              currentRowFirstItemIndex + columnsCount - 1, // Guards against index overflow.
+              itemsCount - 1)
+            };
+          }
+        }
 
-      if (firstShownItemIndex !== undefined && lastShownItemIndex === undefined) {
-        lastShownItemIndex = itemsCount - 1;
-        (0, _debug["default"])('Last item index (is fully visible)', lastShownItemIndex);
-      }
+        beforeItemsHeight += currentRowHeight + verticalSpacingAfterCurrentRow; // if (backwards) {
+        // 	// Set `i` to be the first item of the current row.
+        // 	i -= columnsCount
+        // 	const prevoiusRowIsBeforeResize = i - 1 < this.getBeforeResizeItemsCount()
+        // 	const previousRowColumnsCount = prevoiusRowIsBeforeResize ? this.getColumnsCountBeforeResize() : this.getColumnsCount()
+        // 	// Set `i` to be the first item of the previous row.
+        // 	i -= previousRowColumnsCount
+        // }
+      } // if (backwards) {
+      // 	if (findFirstShownItemIndex) {
+      // 		warn('The list is supposed to be visible but no visible item has been found (while traversing backwards)')
+      // 		return null
+      // 	} else if (findLastShownItemIndex) {
+      // 		return {
+      // 			firstShownItemIndex: 0
+      // 		}
+      // 	}
+      // }
+
+
+      if (beforeResize) {
+        return {
+          notFound: true,
+          beforeItemsHeight: beforeItemsHeight
+        };
+      } // This case isn't supposed to happen but it could hypothetically happen
+      // because the list height is measured from the user's screen and
+      // not necessarily can be trusted.
 
-      return {
-        firstShownItemIndex: firstShownItemIndex,
-        lastShownItemIndex: lastShownItemIndex
-      };
-    } // Finds the items which are displayed in the viewport.
 
-  }, {
-    key: "getVisibleItemIndexes",
-    value: function getVisibleItemIndexes(visibleAreaTop, visibleAreaBottom, listTopOffset, itemsCount) {
-      var _this$_getVisibleItem = this._getVisibleItemIndexes(visibleAreaTop, visibleAreaBottom, listTopOffset, itemsCount),
-          firstNonMeasuredItemIndex = _this$_getVisibleItem.firstNonMeasuredItemIndex,
-          firstShownItemIndex = _this$_getVisibleItem.firstShownItemIndex,
-          lastShownItemIndex = _this$_getVisibleItem.lastShownItemIndex;
-
-      var redoLayoutAfterMeasuringItemHeights = firstNonMeasuredItemIndex !== undefined; // If some items will be rendered in order to measure their height,
-      // and it's not a `preserveScrollPositionOnPrependItems` case,
-      // then limit the amount of such items being measured in a single pass.
-
-      if (redoLayoutAfterMeasuringItemHeights && this.measureItemsBatchSize) {
-        var maxAllowedLastShownItemIndex = firstNonMeasuredItemIndex + this.measureItemsBatchSize - 1;
-        var columnsCount = this.getColumnsCount();
-        lastShownItemIndex = Math.min( // Also guards against index overflow.
-        lastShownItemIndex, // The index of the last item in the row.
-        Math.ceil(maxAllowedLastShownItemIndex / columnsCount) * columnsCount - 1);
+      if (findFirstShownItemIndex) {
+        (0, _debug.warn)('The list is supposed to be visible but no visible item has been found');
+        return null;
+      } else if (findLastShownItemIndex) {
+        return {
+          lastShownItemIndex: itemsCount - 1
+        };
       }
-
-      return {
-        firstShownItemIndex: firstShownItemIndex,
-        lastShownItemIndex: lastShownItemIndex,
-        redoLayoutAfterMeasuringItemHeights: redoLayoutAfterMeasuringItemHeights
-      };
     }
   }, {
     key: "getNonVisibleListShownItemIndexes",
     value: function getNonVisibleListShownItemIndexes() {
-      return {
+      var layout = {
         firstShownItemIndex: 0,
-        lastShownItemIndex: 0,
-        redoLayoutAfterMeasuringItemHeights: this.getItemHeight(0) === undefined
+        lastShownItemIndex: 0
       };
-    }
-  }, {
-    key: "getItemIndexes",
-    value: function getItemIndexes(visibleAreaTop, visibleAreaBottom, listTopOffset, listHeight, itemsCount) {
-      var isVisible = listTopOffset + listHeight > visibleAreaTop && listTopOffset < visibleAreaBottom;
-
-      if (!isVisible) {
-        (0, _debug["default"])('The entire list is off-screen. No items are visible.');
-        return;
-      } // Find the items which are displayed in the viewport.
-
-
-      var indexes = this.getVisibleItemIndexes(visibleAreaTop, visibleAreaBottom, listTopOffset, itemsCount); // The list height is estimated until all items have been seen,
-      // so it's possible that even when the list DOM element happens
-      // to be in the viewport, in reality the list isn't visible
-      // in which case `firstShownItemIndex` will be `undefined`.
 
-      if (indexes.firstShownItemIndex === undefined) {
-        (0, _debug["default"])('The entire list is off-screen. No items are visible.');
-        return;
+      if (this.getItemHeight(0) === undefined) {
+        layout.firstNonMeasuredItemIndex = 0;
       }
 
-      return indexes;
+      return layout;
     }
     /**
      * Measures "before" items height.
-     * @param  {number} firstShownItemIndex — New first shown item index.
-     * @param  {number} lastShownItemIndex — New last shown item index.
+     * @param  {number} beforeItemsCount — Basically, first shown item index.
      * @return {number}
      */
 
   }, {
     key: "getBeforeItemsHeight",
-    value: function getBeforeItemsHeight(firstShownItemIndex, lastShownItemIndex) {
-      var columnsCount = this.getColumnsCount();
-      var firstShownRowIndex = Math.floor(firstShownItemIndex / columnsCount);
-      var beforeItemsHeight = 0; // Add all "before" items height.
+    value: function getBeforeItemsHeight(beforeItemsCount) {
+      var _ref9 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+          beforeResize = _ref9.beforeResize;
+
+      // This function could potentially also use `this.getPreviouslyCalculatedLayout()`
+      // in order to skip calculating visible item indexes from scratch
+      // and instead just calculate the difference from a "previously calculated layout".
+      //
+      // I did a simple test in a web browser and found out that running the following
+      // piece of code is less than 10 milliseconds:
+      //
+      // var startedAt = Date.now()
+      // var i = 0
+      // while (i < 1000000) {
+      //   i++
+      // }
+      // console.log(Date.now() - startedAt)
+      //
+      // Which becomes negligible in my project's use case (a couple thousands items max).
+      var beforeItemsHeight = 0;
+      var i = 0;
+
+      if (!beforeResize) {
+        var beforeResizeItemsCount = this.getBeforeResizeItemsCount();
+
+        if (beforeResizeItemsCount > 0) {
+          // First add all "before resize" item heights.
+          beforeItemsHeight = this.getBeforeItemsHeight( // `firstShownItemIndex` (called `beforeItemsCount`) could be greater than
+          // `beforeResizeItemsCount` when the user scrolls down.
+          // `firstShownItemIndex` (called `beforeItemsCount`) could be less than
+          // `beforeResizeItemsCount` when the user scrolls up.
+          Math.min(beforeItemsCount, beforeResizeItemsCount), {
+            beforeResize: true
+          });
+          i = beforeResizeItemsCount;
+        }
+      }
 
-      var rowIndex = 0;
+      var columnsCount = beforeResize ? this.getColumnsCountBeforeResize() : this.getColumnsCount();
+      var verticalSpacing = beforeResize ? this.getVerticalSpacingBeforeResize() : this.getVerticalSpacing();
 
-      while (rowIndex < firstShownRowIndex) {
+      while (i < beforeItemsCount) {
+        var currentRowFirstItemIndex = i;
         var rowHeight = 0;
-        var columnIndex = 0;
+        var columnIndex = 0; // Not checking for `itemsCount` overflow here because `i = beforeItemsCount`
+        // can only start at the start of a row, meaning that when calculating
+        // "before items height" it's not supposed to add item heights from the
+        // last row of items because in that case it would have to iterate from
+        // `i === beforeItemsCount` and that condition is already checked above.
+        // while (i < itemsCount) {
 
         while (columnIndex < columnsCount) {
-          rowHeight = Math.max(rowHeight, this.getItemHeight(rowIndex * columnsCount + columnIndex) || this.getAverageItemHeight());
+          var itemHeight = beforeResize ? this.getItemHeightBeforeResize(i) : this.getItemHeight(i);
+
+          if (itemHeight === undefined) {
+            // `itemHeight` can only be `undefined` when not `beforeResize`.
+            // Use the current "average item height" as a substitute.
+            itemHeight = this.getAverageItemHeight();
+          }
+
+          rowHeight = Math.max(rowHeight, itemHeight);
+          i++;
           columnIndex++;
         }
 
         beforeItemsHeight += rowHeight;
-        beforeItemsHeight += this.getVerticalSpacing();
-        rowIndex++;
+        beforeItemsHeight += verticalSpacing;
       }
 
       return beforeItemsHeight;
     }
     /**
      * Measures "after" items height.
-     * @param  {number} firstShownItemIndex — New first shown item index.
-     * @param  {number} lastShownItemIndex — New last shown item index.
-     * @param  {number} averageItemHeight — Average item height.
-     * @param  {number} verticalSpacing — Item vertical spacing.
+     * @param  {number} lastShownItemIndex — Last shown item index.
      * @param  {number} itemsCount — Items count.
      * @return {number}
      */
 
   }, {
     key: "getAfterItemsHeight",
-    value: function getAfterItemsHeight(firstShownItemIndex, lastShownItemIndex, itemsCount) {
+    value: function getAfterItemsHeight(lastShownItemIndex, itemsCount) {
+      // This function could potentially also use `this.getPreviouslyCalculatedLayout()`
+      // in order to skip calculating visible item indexes from scratch
+      // and instead just calculate the difference from a "previously calculated layout".
+      //
+      // I did a simple test in a web browser and found out that running the following
+      // piece of code is less than 10 milliseconds:
+      //
+      // var startedAt = Date.now()
+      // var i = 0
+      // while (i < 1000000) {
+      //   i++
+      // }
+      // console.log(Date.now() - startedAt)
+      //
+      // Which becomes negligible in my project's use case (a couple thousands items max).
       var columnsCount = this.getColumnsCount();
-      var rowsCount = Math.ceil(itemsCount / columnsCount);
       var lastShownRowIndex = Math.floor(lastShownItemIndex / columnsCount);
       var afterItemsHeight = 0;
-      var rowIndex = lastShownRowIndex + 1;
+      var i = lastShownItemIndex + 1;
 
-      while (rowIndex < rowsCount) {
+      while (i < itemsCount) {
         var rowHeight = 0;
         var columnIndex = 0;
-        var i = void 0;
 
-        while (columnIndex < columnsCount && (i = rowIndex * columnsCount + columnIndex) < itemsCount) {
-          rowHeight = Math.max(rowHeight, this.getItemHeight(i) || this.getAverageItemHeight());
+        while (columnIndex < columnsCount && i < itemsCount) {
+          var itemHeight = this.getItemHeight(i);
+
+          if (itemHeight === undefined) {
+            itemHeight = this.getAverageItemHeight();
+          }
+
+          rowHeight = Math.max(rowHeight, itemHeight);
+          i++;
           columnIndex++;
         } // Add all "after" items height.
 
 
         afterItemsHeight += this.getVerticalSpacing();
         afterItemsHeight += rowHeight;
-        rowIndex++;
       }
 
       return afterItemsHeight;
     }
     /**
-     * Finds the indexes of the currently visible items.
-     * @return {object} `{ firstShownItemIndex: number, lastShownItemIndex: number, redoLayoutAfterMeasuringItemHeights: boolean }`
+     * Returns the items's top offset relative to the top edge of the first item.
+     * @param {number} i — Item index
+     * @return {[number]} Returns `undefined` if any of the previous items haven't been rendered yet.
      */
 
   }, {
-    key: "getShownItemIndexes",
-    value: function getShownItemIndexes(_ref5) {
-      var listHeight = _ref5.listHeight,
-          itemsCount = _ref5.itemsCount,
-          visibleAreaIncludingMargins = _ref5.visibleAreaIncludingMargins,
-          listTopOffsetInsideScrollableContainer = _ref5.listTopOffsetInsideScrollableContainer;
+    key: "getItemTopOffset",
+    value: function getItemTopOffset(i) {
+      var topOffsetInsideScrollableContainer = 0;
+      var beforeResizeItemsCount = this.getBeforeResizeItemsCount();
+      var beforeResizeRowsCount = beforeResizeItemsCount === 0 ? 0 : Math.ceil(beforeResizeItemsCount / this.getColumnsCountBeforeResize());
+      var maxBeforeResizeRowsCount = i < beforeResizeItemsCount ? Math.floor(i / this.getColumnsCountBeforeResize()) : beforeResizeRowsCount;
+      var beforeResizeRowIndex = 0;
+
+      while (beforeResizeRowIndex < maxBeforeResizeRowsCount) {
+        var rowHeight = this.getItemHeightBeforeResize(beforeResizeRowIndex * this.getColumnsCountBeforeResize());
+        topOffsetInsideScrollableContainer += rowHeight;
+        topOffsetInsideScrollableContainer += this.getVerticalSpacingBeforeResize();
+        beforeResizeRowIndex++;
+      }
 
-      if (this.bypass) {
-        return {
-          firstShownItemIndex: 0,
-          lastShownItemIndex: itemsCount - 1
-        };
-      } // Finds the indexes of the items that are currently visible
-      // (or close to being visible) in the scrollable container.
-      // For scrollable containers other than the main screen, it could also
-      // check the visibility of such scrollable container itself, because it
-      // might be not visible.
-      // If such kind of an optimization would hypothetically be implemented,
-      // then it would also require listening for "scroll" events on the screen.
-      // Overall, I suppose that such "actual visibility" feature would be
-      // a very minor optimization and not something I'd deal with.
-
-
-      return this.getItemIndexes(visibleAreaIncludingMargins.top, visibleAreaIncludingMargins.bottom, listTopOffsetInsideScrollableContainer, listHeight, itemsCount) || this.getNonVisibleListShownItemIndexes();
-    }
-  }, {
-    key: "showItemsFromTheStart",
-    value: function showItemsFromTheStart(layout) {
-      layout.firstShownItemIndex = 0;
-      layout.beforeItemsHeight = 0;
+      var itemRowIndex = Math.floor((i - beforeResizeItemsCount) / this.getColumnsCount());
+      var rowIndex = 0;
+
+      while (rowIndex < itemRowIndex) {
+        var _rowHeight = 0;
+        var columnIndex = 0;
+
+        while (columnIndex < this.getColumnsCount()) {
+          var itemHeight = this.getItemHeight(beforeResizeItemsCount + rowIndex * this.getColumnsCount() + columnIndex);
+
+          if (itemHeight === undefined) {
+            return;
+          }
+
+          _rowHeight = Math.max(_rowHeight, itemHeight);
+          columnIndex++;
+        }
+
+        topOffsetInsideScrollableContainer += _rowHeight;
+        topOffsetInsideScrollableContainer += this.getVerticalSpacing();
+        rowIndex++;
+      }
+
+      return topOffsetInsideScrollableContainer;
     }
   }]);
 
@@ -387,9 +760,11 @@ var LAYOUT_REASON = {
   SCROLL: 'scroll',
   STOPPED_SCROLLING: 'stopped scrolling',
   MANUAL: 'manual',
-  MOUNT: 'mount',
-  ITEM_HEIGHT_NOT_MEASURED: 'some item height wasn\'t measured',
-  RESIZE: 'resize',
+  STARTED: 'started',
+  NON_MEASURED_ITEMS_HAVE_BEEN_MEASURED: 'non-measured item heights have been measured',
+  VIEWPORT_WIDTH_CHANGED: 'viewport width changed',
+  VIEWPORT_HEIGHT_CHANGED: 'viewport height changed',
+  VIEWPORT_SIZE_UNCHANGED: 'viewport size unchanged',
   ITEM_HEIGHT_CHANGED: 'item height changed',
   ITEMS_CHANGED: 'items changed',
   TOP_OFFSET_CHANGED: 'list top offset changed'