react-virtualized
Version:
React components for efficiently rendering large, scrollable lists and tabular data
225 lines (184 loc) • 7.39 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require('babel-runtime/helpers/createClass');
var _createClass3 = _interopRequireDefault(_createClass2);
var _CellSizeAndPositionManager = require('./CellSizeAndPositionManager');
var _CellSizeAndPositionManager2 = _interopRequireDefault(_CellSizeAndPositionManager);
var _maxElementSize = require('./maxElementSize.js');
var _types = require('../types');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Extends CellSizeAndPositionManager and adds scaling behavior for lists that are too large to fit within a browser's native limits.
*/
/**
* 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 ScalingCellSizeAndPositionManager = function () {
function ScalingCellSizeAndPositionManager(_ref) {
var _ref$maxScrollSize = _ref.maxScrollSize,
maxScrollSize = _ref$maxScrollSize === undefined ? (0, _maxElementSize.getMaxElementSize)() : _ref$maxScrollSize,
params = (0, _objectWithoutProperties3.default)(_ref, ['maxScrollSize']);
(0, _classCallCheck3.default)(this, ScalingCellSizeAndPositionManager);
// Favor composition over inheritance to simplify IE10 support
this._cellSizeAndPositionManager = new _CellSizeAndPositionManager2.default(params);
this._maxScrollSize = maxScrollSize;
}
(0, _createClass3.default)(ScalingCellSizeAndPositionManager, [{
key: 'areOffsetsAdjusted',
value: function areOffsetsAdjusted() {
return this._cellSizeAndPositionManager.getTotalSize() > this._maxScrollSize;
}
}, {
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 scaled (safe) as well.
*/
}, {
key: 'getOffsetAdjustment',
value: function getOffsetAdjustment(_ref2) {
var containerSize = _ref2.containerSize,
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,
align = _ref3$align === undefined ? 'auto' : _ref3$align,
containerSize = _ref3.containerSize,
currentOffset = _ref3.currentOffset,
targetIndex = _ref3.targetIndex;
currentOffset = this._safeOffsetToOffset({
containerSize: containerSize,
offset: currentOffset
});
var offset = this._cellSizeAndPositionManager.getUpdatedOffsetForIndex({
align: align,
containerSize: containerSize,
currentOffset: currentOffset,
targetIndex: targetIndex
});
return this._offsetToSafeOffset({
containerSize: containerSize,
offset: offset
});
}
/** See CellSizeAndPositionManager#getVisibleCellRange */
}, {
key: 'getVisibleCellRange',
value: function getVisibleCellRange(_ref4) {
var containerSize = _ref4.containerSize,
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,
offset = _ref5.offset,
totalSize = _ref5.totalSize;
return totalSize <= containerSize ? 0 : offset / (totalSize - containerSize);
}
}, {
key: '_offsetToSafeOffset',
value: function _offsetToSafeOffset(_ref6) {
var containerSize = _ref6.containerSize,
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,
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;