UNPKG

react-virtualized

Version:

React components for efficiently rendering large, scrollable lists and tabular data

225 lines (184 loc) 7.39 kB
'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;