react-virtualized
Version:
React components for efficiently rendering large, scrollable lists and tabular data
216 lines (178 loc) • 7.76 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DEFAULT_MAX_SCROLL_SIZE = undefined;
var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _CellSizeAndPositionManager = require('./CellSizeAndPositionManager');
var _CellSizeAndPositionManager2 = _interopRequireDefault(_CellSizeAndPositionManager);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
/**
* Browsers have scroll offset limitations (eg Chrome stops scrolling at ~33.5M pixels where as Edge tops out at ~1.5M pixels).
* After a certain position, the browser won't allow the user to scroll further (even via JavaScript scroll offset adjustments).
* This util picks a lower ceiling for max size and artificially adjusts positions within to make it transparent for users.
*/
var DEFAULT_MAX_SCROLL_SIZE = exports.DEFAULT_MAX_SCROLL_SIZE = 1500000;
/**
* Extends CellSizeAndPositionManager and adds scaling behavior for lists that are too large to fit within a browser's native limits.
*/
var ScalingCellSizeAndPositionManager = function () {
function ScalingCellSizeAndPositionManager(_ref) {
var _ref$maxScrollSize = _ref.maxScrollSize;
var maxScrollSize = _ref$maxScrollSize === undefined ? DEFAULT_MAX_SCROLL_SIZE : _ref$maxScrollSize;
var params = _objectWithoutProperties(_ref, ['maxScrollSize']);
_classCallCheck(this, ScalingCellSizeAndPositionManager);
// Favor composition over inheritance to simplify IE10 support
this._cellSizeAndPositionManager = new _CellSizeAndPositionManager2.default(params);
this._maxScrollSize = maxScrollSize;
}
_createClass(ScalingCellSizeAndPositionManager, [{
key: 'configure',
value: function configure(params) {
this._cellSizeAndPositionManager.configure(params);
}
}, {
key: 'getCellCount',
value: function getCellCount() {
return this._cellSizeAndPositionManager.getCellCount();
}
}, {
key: 'getEstimatedCellSize',
value: function getEstimatedCellSize() {
return this._cellSizeAndPositionManager.getEstimatedCellSize();
}
}, {
key: 'getLastMeasuredIndex',
value: function getLastMeasuredIndex() {
return this._cellSizeAndPositionManager.getLastMeasuredIndex();
}
/**
* Number of pixels a cell at the given position (offset) should be shifted in order to fit within the scaled container.
* The offset passed to this function is scalled (safe) as well.
*/
}, {
key: 'getOffsetAdjustment',
value: function getOffsetAdjustment(_ref2) {
var containerSize = _ref2.containerSize;
var offset = _ref2.offset;
var totalSize = this._cellSizeAndPositionManager.getTotalSize();
var safeTotalSize = this.getTotalSize();
var offsetPercentage = this._getOffsetPercentage({
containerSize: containerSize,
offset: offset,
totalSize: safeTotalSize
});
return Math.round(offsetPercentage * (safeTotalSize - totalSize));
}
}, {
key: 'getSizeAndPositionOfCell',
value: function getSizeAndPositionOfCell(index) {
return this._cellSizeAndPositionManager.getSizeAndPositionOfCell(index);
}
}, {
key: 'getSizeAndPositionOfLastMeasuredCell',
value: function getSizeAndPositionOfLastMeasuredCell() {
return this._cellSizeAndPositionManager.getSizeAndPositionOfLastMeasuredCell();
}
/** See CellSizeAndPositionManager#getTotalSize */
}, {
key: 'getTotalSize',
value: function getTotalSize() {
return Math.min(this._maxScrollSize, this._cellSizeAndPositionManager.getTotalSize());
}
/** See CellSizeAndPositionManager#getUpdatedOffsetForIndex */
}, {
key: 'getUpdatedOffsetForIndex',
value: function getUpdatedOffsetForIndex(_ref3) {
var _ref3$align = _ref3.align;
var align = _ref3$align === undefined ? 'auto' : _ref3$align;
var containerSize = _ref3.containerSize;
var currentOffset = _ref3.currentOffset;
var targetIndex = _ref3.targetIndex;
var totalSize = _ref3.totalSize;
currentOffset = this._safeOffsetToOffset({
containerSize: containerSize,
offset: currentOffset
});
var offset = this._cellSizeAndPositionManager.getUpdatedOffsetForIndex({
align: align,
containerSize: containerSize,
currentOffset: currentOffset,
targetIndex: targetIndex,
totalSize: totalSize
});
return this._offsetToSafeOffset({
containerSize: containerSize,
offset: offset
});
}
/** See CellSizeAndPositionManager#getVisibleCellRange */
}, {
key: 'getVisibleCellRange',
value: function getVisibleCellRange(_ref4) {
var containerSize = _ref4.containerSize;
var offset = _ref4.offset;
offset = this._safeOffsetToOffset({
containerSize: containerSize,
offset: offset
});
return this._cellSizeAndPositionManager.getVisibleCellRange({
containerSize: containerSize,
offset: offset
});
}
}, {
key: 'resetCell',
value: function resetCell(index) {
this._cellSizeAndPositionManager.resetCell(index);
}
}, {
key: '_getOffsetPercentage',
value: function _getOffsetPercentage(_ref5) {
var containerSize = _ref5.containerSize;
var offset = _ref5.offset;
var totalSize = _ref5.totalSize;
return totalSize <= containerSize ? 0 : offset / (totalSize - containerSize);
}
}, {
key: '_offsetToSafeOffset',
value: function _offsetToSafeOffset(_ref6) {
var containerSize = _ref6.containerSize;
var offset = _ref6.offset;
var totalSize = this._cellSizeAndPositionManager.getTotalSize();
var safeTotalSize = this.getTotalSize();
if (totalSize === safeTotalSize) {
return offset;
} else {
var offsetPercentage = this._getOffsetPercentage({
containerSize: containerSize,
offset: offset,
totalSize: totalSize
});
return Math.round(offsetPercentage * (safeTotalSize - containerSize));
}
}
}, {
key: '_safeOffsetToOffset',
value: function _safeOffsetToOffset(_ref7) {
var containerSize = _ref7.containerSize;
var offset = _ref7.offset;
var totalSize = this._cellSizeAndPositionManager.getTotalSize();
var safeTotalSize = this.getTotalSize();
if (totalSize === safeTotalSize) {
return offset;
} else {
var offsetPercentage = this._getOffsetPercentage({
containerSize: containerSize,
offset: offset,
totalSize: safeTotalSize
});
return Math.round(offsetPercentage * (totalSize - containerSize));
}
}
}]);
return ScalingCellSizeAndPositionManager;
}();
exports.default = ScalingCellSizeAndPositionManager;