Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-virtualized
Advanced tools
react-virtualized - npm Package Compare versions
Comparing version 10.0.0-alpha.3 to 10.0.0-alpha.4
863
index.es.js
@@ -143,6 +143,468 @@ import React from 'react'; | ||
| function createListComponent(_ref) { | ||
| var _class, _temp; | ||
| var getCellOffset = _ref.getCellOffset, | ||
| getCellSize = _ref.getCellSize, | ||
| getEstimatedTotalSize = _ref.getEstimatedTotalSize, | ||
| getOffsetForIndexAndAlignment = _ref.getOffsetForIndexAndAlignment, | ||
| getStartIndexForOffset = _ref.getStartIndexForOffset, | ||
| getStopIndexForStartIndex = _ref.getStopIndexForStartIndex, | ||
| initInstanceProps = _ref.initInstanceProps, | ||
| validateProps = _ref.validateProps; | ||
| return _temp = _class = function (_React$Component) { | ||
| inherits(List, _React$Component); | ||
| function List(props) { | ||
| classCallCheck(this, List); | ||
| var _this = possibleConstructorReturn(this, (List.__proto__ || Object.getPrototypeOf(List)).call(this, props)); | ||
| _this._cellStyleCache = {}; | ||
| _this._resetIsScrollingTimeoutId = null; | ||
| _this.state = { | ||
| isScrolling: false, | ||
| scrollDirection: 'forward', | ||
| scrollOffset: 0 | ||
| }; | ||
| _this.onScrollHorizontal = function (event) { | ||
| var scrollLeft = event.currentTarget.scrollLeft; | ||
| _this.setState(function (prevState) { | ||
| return { | ||
| isScrolling: true, | ||
| scrollDirection: prevState.scrollOffset < scrollLeft ? 'forward' : 'backward', | ||
| scrollOffset: scrollLeft | ||
| }; | ||
| }, _this.resetIsScrollingDebounced); | ||
| }; | ||
| _this.onScrollVertical = function (event) { | ||
| var scrollTop = event.currentTarget.scrollTop; | ||
| _this.setState(function (prevState) { | ||
| return { | ||
| isScrolling: true, | ||
| scrollDirection: prevState.scrollOffset < scrollTop ? 'forward' : 'backward', | ||
| scrollOffset: scrollTop | ||
| }; | ||
| }, _this.resetIsScrollingDebounced); | ||
| }; | ||
| _this.scrollingContainerRef = function (ref) { | ||
| _this._scrollingContainer = ref; | ||
| }; | ||
| _this.resetIsScrollingDebounced = function () { | ||
| if (_this._resetIsScrollingTimeoutId !== null) { | ||
| clearTimeout(_this._resetIsScrollingTimeoutId); | ||
| } | ||
| _this._resetIsScrollingTimeoutId = setTimeout(_this.resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL); | ||
| }; | ||
| _this.resetIsScrolling = function () { | ||
| _this._resetIsScrollingTimeoutId = null; | ||
| _this.setState({ isScrolling: false }, function () { | ||
| // Clear style cache after state update has been committed. | ||
| // This way we don't break pure sCU for cells that don't use isScrolling param. | ||
| _this._cellStyleCache = {}; | ||
| }); | ||
| }; | ||
| _this._instanceProps = initInstanceProps(props, _this); | ||
| return _this; | ||
| } | ||
| createClass(List, [{ | ||
| key: 'scrollTo', | ||
| value: function scrollTo(scrollOffset) { | ||
| if (this._scrollingContainer != null) { | ||
| var _direction = this.props.direction; | ||
| if (_direction === 'horizontal') { | ||
| this._scrollingContainer.scrollLeft = scrollOffset; | ||
| } else { | ||
| this._scrollingContainer.scrollTop = scrollOffset; | ||
| } | ||
| } | ||
| } | ||
| }, { | ||
| key: 'scrollToItem', | ||
| value: function scrollToItem(index) { | ||
| var align = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'auto'; | ||
| if (this._scrollingContainer != null) { | ||
| var _scrollOffset = this.state.scrollOffset; | ||
| this.scrollTo(getOffsetForIndexAndAlignment(this.props, index, align, _scrollOffset, this._instanceProps)); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'componnetWillUnmount', | ||
| value: function componnetWillUnmount() { | ||
| if (this._resetIsScrollingTimeoutId !== null) { | ||
| clearTimeout(this._resetIsScrollingTimeoutId); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'render', | ||
| value: function render() { | ||
| var _props = this.props, | ||
| className = _props.className, | ||
| direction = _props.direction, | ||
| height = _props.height, | ||
| style = _props.style, | ||
| width = _props.width; | ||
| var isScrolling = this.state.isScrolling; | ||
| var onScroll = direction === 'vertical' ? this.onScrollVertical : this.onScrollHorizontal; | ||
| var estimatedTotalSize = getEstimatedTotalSize(this.props, this._instanceProps); | ||
| return React.createElement( | ||
| 'div', | ||
| { | ||
| className: className, | ||
| ref: this.scrollingContainerRef, | ||
| style: _extends({ | ||
| position: 'relative', | ||
| height: height, | ||
| width: width, | ||
| overflow: 'auto' | ||
| }, style), | ||
| onScroll: onScroll | ||
| }, | ||
| React.createElement( | ||
| 'div', | ||
| { | ||
| style: { | ||
| height: direction === 'horizontal' ? height : estimatedTotalSize, | ||
| overflow: 'hidden', | ||
| pointerEvents: isScrolling ? 'none' : '', | ||
| width: direction === 'horizontal' ? estimatedTotalSize : width | ||
| } | ||
| }, | ||
| this.renderCells() | ||
| ) | ||
| ); | ||
| } | ||
| }, { | ||
| key: 'renderCells', | ||
| value: function renderCells() { | ||
| var _props2 = this.props, | ||
| children = _props2.children, | ||
| direction = _props2.direction, | ||
| useIsScrolling = _props2.useIsScrolling; | ||
| var isScrolling = this.state.isScrolling; | ||
| var _getRangeToRender = this.getRangeToRender(), | ||
| _getRangeToRender2 = slicedToArray(_getRangeToRender, 2), | ||
| startIndex = _getRangeToRender2[0], | ||
| stopIndex = _getRangeToRender2[1]; | ||
| var cells = []; | ||
| for (var _index = startIndex; _index <= stopIndex; _index++) { | ||
| var _key = '' + _index; | ||
| // Cache cell styles while scrolling, | ||
| // So that pure component sCU will prevent re-renders. | ||
| var _style = void 0; | ||
| if (this._cellStyleCache.hasOwnProperty(_index)) { | ||
| _style = this._cellStyleCache[_index]; | ||
| } else { | ||
| this._cellStyleCache[_index] = _style = { | ||
| position: 'absolute', | ||
| left: direction === 'horizontal' ? getCellOffset(this.props, _index, this._instanceProps) : 0, | ||
| top: direction === 'vertical' ? getCellOffset(this.props, _index, this._instanceProps) : 0, | ||
| height: direction === 'vertical' ? getCellSize(this.props, _index, this._instanceProps) : '100%', | ||
| width: direction === 'horizontal' ? getCellSize(this.props, _index, this._instanceProps) : '100%' | ||
| }; | ||
| } | ||
| cells.push(children({ | ||
| key: _key, | ||
| index: _index, | ||
| isScrolling: useIsScrolling ? isScrolling : undefined, | ||
| style: _style | ||
| })); | ||
| } | ||
| return cells; | ||
| } | ||
| }, { | ||
| key: 'getRangeToRender', | ||
| value: function getRangeToRender() { | ||
| var _props3 = this.props, | ||
| count = _props3.count, | ||
| overscanCount = _props3.overscanCount; | ||
| var _state = this.state, | ||
| scrollDirection = _state.scrollDirection, | ||
| scrollOffset = _state.scrollOffset; | ||
| var startIndex = getStartIndexForOffset(this.props, scrollOffset, this._instanceProps); | ||
| var stopIndex = getStopIndexForStartIndex(this.props, startIndex, this._instanceProps); | ||
| // Overscan by one cell in each direction so that tab/focus works. | ||
| // If there isn't at least one extra cell, tab loops back around. | ||
| var overscanBackward = scrollDirection === 'backward' ? Math.max(1, overscanCount) : 1; | ||
| var overscanForward = scrollDirection === 'forward' ? Math.max(1, overscanCount) : 1; | ||
| return [Math.max(0, startIndex - overscanBackward), Math.min(count - 1, stopIndex + overscanForward)]; | ||
| } | ||
| }], [{ | ||
| key: 'getDerivedStateFromProps', | ||
| value: function getDerivedStateFromProps(nextProps, prevState) { | ||
| validateSharedProps(nextProps); | ||
| validateProps(nextProps); | ||
| return null; | ||
| } | ||
| }]); | ||
| return List; | ||
| }(React.Component), _class.defaultProps = { | ||
| direction: 'vertical', | ||
| overscanCount: 2, | ||
| useIsScrolling: false | ||
| }, _temp; | ||
| } | ||
| var validateSharedProps = function validateSharedProps(_ref2) { | ||
| var children = _ref2.children, | ||
| direction = _ref2.direction, | ||
| height = _ref2.height, | ||
| width = _ref2.width; | ||
| if (process.env.NODE_ENV !== 'production') { | ||
| if (direction !== 'horizontal' && direction !== 'vertical') { | ||
| throw Error('An invalid "direction" prop has been specified. ' + 'Value should be either "horizontal" or "vertical". ' + ('"' + direction + '" was specified.')); | ||
| } | ||
| if (typeof children !== 'function') { | ||
| throw Error('An invalid "children" prop has been specified. ' + 'Value should be a function that creates a React element. ' + ('"' + (children === null ? 'null' : typeof children === 'undefined' ? 'undefined' : _typeof(children)) + '" was specified.')); | ||
| } | ||
| if (direction === 'horizontal' && typeof width !== 'number') { | ||
| throw Error('An invalid "width" prop has been specified. ' + 'Horizontal lists must specify a number for width. ' + ('"' + (width === null ? 'null' : typeof width === 'undefined' ? 'undefined' : _typeof(width)) + '" was specified.')); | ||
| } else if (direction === 'vertical' && typeof height !== 'number') { | ||
| throw Error('An invalid "height" prop has been specified. ' + 'Vertical lists must specify a number for height. ' + ('"' + (height === null ? 'null' : typeof height === 'undefined' ? 'undefined' : _typeof(height)) + '" was specified.')); | ||
| } | ||
| } | ||
| }; | ||
| var DEFAULT_ESTIMATED_CELL_SIZE = 50; | ||
| var getCellMetadata = function getCellMetadata(props, index, instanceProps) { | ||
| var _ref = props, | ||
| cellSize = _ref.cellSize, | ||
| estimatedCellSize = _ref.estimatedCellSize; | ||
| var cellMetadataMap = instanceProps.cellMetadataMap, | ||
| lastMeasuredIndex = instanceProps.lastMeasuredIndex; | ||
| if (index > lastMeasuredIndex) { | ||
| var _offset = 0; | ||
| if (lastMeasuredIndex >= 0) { | ||
| var cellMetadata = cellMetadataMap[lastMeasuredIndex]; | ||
| _offset = cellMetadata.offset + cellMetadata.size; | ||
| } | ||
| for (var i = lastMeasuredIndex + 1; i <= index; i++) { | ||
| var _size = cellSize(i); | ||
| cellMetadataMap[i] = { | ||
| offset: _offset, | ||
| size: _size | ||
| }; | ||
| _offset += _size; | ||
| instanceProps.lastMeasuredIndex = index; | ||
| } | ||
| } | ||
| return cellMetadataMap[index]; | ||
| }; | ||
| var findNearestCell = function findNearestCell(props, instanceProps, offset) { | ||
| var cellMetadataMap = instanceProps.cellMetadataMap, | ||
| estimatedCellSize = instanceProps.estimatedCellSize, | ||
| lastMeasuredIndex = instanceProps.lastMeasuredIndex; | ||
| var lastMeasuredCellOffset = lastMeasuredIndex > 0 ? cellMetadataMap[lastMeasuredIndex].offset : 0; | ||
| if (lastMeasuredCellOffset >= offset) { | ||
| // If we've already measured cells within this range just use a binary search as it's faster. | ||
| return findNearestCellBinarySearch(props, instanceProps, lastMeasuredIndex, 0, offset); | ||
| } else { | ||
| // If we haven't yet measured this high, fallback to an exponential search with an inner binary search. | ||
| // The exponential search avoids pre-computing sizes for the full set of cells as a binary search would. | ||
| // The overall complexity for this approach is O(log n). | ||
| return findNearestCellExponentialSearch(props, instanceProps, lastMeasuredIndex, offset); | ||
| } | ||
| }; | ||
| var findNearestCellBinarySearch = function findNearestCellBinarySearch(props, instanceProps, high, low, offset) { | ||
| while (low <= high) { | ||
| var middle = low + Math.floor((high - low) / 2); | ||
| var currentOffset = getCellMetadata(props, middle, instanceProps).offset; | ||
| if (currentOffset === offset) { | ||
| return middle; | ||
| } else if (currentOffset < offset) { | ||
| low = middle + 1; | ||
| } else if (currentOffset > offset) { | ||
| high = middle - 1; | ||
| } | ||
| } | ||
| if (low > 0) { | ||
| return low - 1; | ||
| } else { | ||
| return 0; | ||
| } | ||
| }; | ||
| var findNearestCellExponentialSearch = function findNearestCellExponentialSearch(props, instanceProps, index, offset) { | ||
| var count = props.count; | ||
| var interval = 1; | ||
| while (index < count && getCellMetadata(props, index, instanceProps).offset < offset) { | ||
| index += interval; | ||
| interval *= 2; | ||
| } | ||
| return findNearestCellBinarySearch(props, instanceProps, Math.min(index, count - 1), Math.floor(index / 2), offset); | ||
| }; | ||
| var DynamicList = createListComponent({ | ||
| getCellOffset: function getCellOffset(props, index, instanceProps) { | ||
| return getCellMetadata(props, index, instanceProps).offset; | ||
| }, | ||
| getCellSize: function getCellSize(props, index, instanceProps) { | ||
| return instanceProps.cellMetadataMap[index].size; | ||
| }, | ||
| getEstimatedTotalSize: function getEstimatedTotalSize(_ref2, _ref3) { | ||
| var count = _ref2.count; | ||
| var cellMetadataMap = _ref3.cellMetadataMap, | ||
| estimatedCellSize = _ref3.estimatedCellSize, | ||
| lastMeasuredIndex = _ref3.lastMeasuredIndex; | ||
| var totalSizeOfMeasuredCells = 0; | ||
| if (lastMeasuredIndex >= 0) { | ||
| var cellMetadata = cellMetadataMap[lastMeasuredIndex]; | ||
| totalSizeOfMeasuredCells = cellMetadata.offset + cellMetadata.size; | ||
| } | ||
| var numUnmeasuredCells = count - lastMeasuredIndex - 1; | ||
| var totalSizeOfUnmeasuredCells = numUnmeasuredCells * estimatedCellSize; | ||
| return totalSizeOfMeasuredCells + totalSizeOfUnmeasuredCells; | ||
| }, | ||
| getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment(props, index, align, scrollOffset, instanceProps) { | ||
| var direction = props.direction, | ||
| height = props.height, | ||
| width = props.width; | ||
| var size = direction === 'horizontal' ? width : height; | ||
| var cellMetadata = getCellMetadata(props, index, instanceProps); | ||
| var maxOffset = cellMetadata.offset; | ||
| var minOffset = cellMetadata.offset - size + cellMetadata.size; | ||
| switch (align) { | ||
| case 'start': | ||
| return maxOffset; | ||
| case 'end': | ||
| return minOffset; | ||
| case 'center': | ||
| return Math.round(minOffset + (maxOffset - minOffset) / 2); | ||
| case 'auto': | ||
| default: | ||
| if (scrollOffset >= minOffset && scrollOffset <= maxOffset) { | ||
| return scrollOffset; | ||
| } else if (scrollOffset - minOffset < maxOffset - scrollOffset) { | ||
| return minOffset; | ||
| } else { | ||
| return maxOffset; | ||
| } | ||
| } | ||
| }, | ||
| getStartIndexForOffset: function getStartIndexForOffset(props, offset, instanceProps) { | ||
| return findNearestCell(props, instanceProps, offset); | ||
| }, | ||
| getStopIndexForStartIndex: function getStopIndexForStartIndex(props, startIndex, instanceProps) { | ||
| var count = props.count, | ||
| direction = props.direction, | ||
| height = props.height, | ||
| width = props.width; | ||
| var size = direction === 'horizontal' ? width : height; | ||
| var cellMetadata = getCellMetadata(props, startIndex, instanceProps); | ||
| var maxOffset = cellMetadata.offset + size; | ||
| var offset = cellMetadata.offset; | ||
| var stopIndex = startIndex; | ||
| while (stopIndex < count - 1 && offset < maxOffset) { | ||
| stopIndex++; | ||
| offset += getCellMetadata(props, stopIndex, instanceProps).size; | ||
| } | ||
| return stopIndex; | ||
| }, | ||
| initInstanceProps: function initInstanceProps(props, instance) { | ||
| var _ref4 = props, | ||
| estimatedCellSize = _ref4.estimatedCellSize, | ||
| direction = _ref4.direction; | ||
| var instanceProps = { | ||
| cellMetadataMap: {}, | ||
| estimatedCellSize: estimatedCellSize || DEFAULT_ESTIMATED_CELL_SIZE, | ||
| lastMeasuredIndex: -1 | ||
| }; | ||
| instance.resetAfterIndex = function (index) { | ||
| instanceProps.lastMeasuredIndex = index - 1; | ||
| }; | ||
| return instanceProps; | ||
| }, | ||
| validateProps: function validateProps(_ref5) { | ||
| var cellSize = _ref5.cellSize; | ||
| if (process.env.NODE_ENV !== 'production') { | ||
| if (typeof cellSize !== 'function') { | ||
| throw Error('An invalid "cellSize" prop has been specified. ' + 'Value should be a function. ' + ('"' + (cellSize === null ? 'null' : typeof cellSize === 'undefined' ? 'undefined' : _typeof(cellSize)) + '" was specified.')); | ||
| } | ||
| } | ||
| } | ||
| }); | ||
| var IS_SCROLLING_DEBOUNCE_INTERVAL$1 = 150; | ||
| function createGridComponent(_ref) { | ||
| var _class, _temp2; | ||
| var getColumnStartIndexForOffset = _ref.getColumnStartIndexForOffset, | ||
| var getColumnOffset = _ref.getColumnOffset, | ||
| getColumnStartIndexForOffset = _ref.getColumnStartIndexForOffset, | ||
| getColumnStopIndexForStartIndex = _ref.getColumnStopIndexForStartIndex, | ||
@@ -152,5 +614,6 @@ getColumnWidth = _ref.getColumnWidth, | ||
| getEstimatedTotalWidth = _ref.getEstimatedTotalWidth, | ||
| getOffsetForColumn = _ref.getOffsetForColumn, | ||
| getOffsetForRow = _ref.getOffsetForRow, | ||
| getOffsetForColumnAndAlignment = _ref.getOffsetForColumnAndAlignment, | ||
| getOffsetForRowAndAlignment = _ref.getOffsetForRowAndAlignment, | ||
| getRowHeight = _ref.getRowHeight, | ||
| getRowOffset = _ref.getRowOffset, | ||
| getRowStartIndexForOffset = _ref.getRowStartIndexForOffset, | ||
@@ -201,3 +664,3 @@ getRowStopIndexForStartIndex = _ref.getRowStopIndexForStartIndex, | ||
| _this._resetIsScrollingTimeoutId = setTimeout(_this.resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL); | ||
| _this._resetIsScrollingTimeoutId = setTimeout(_this.resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL$1); | ||
| }, _this.resetIsScrolling = function () { | ||
@@ -238,4 +701,4 @@ _this._resetIsScrollingTimeoutId = null; | ||
| this.scrollTo({ | ||
| scrollLeft: getOffsetForColumn(this.props, columnIndex, align, scrollLeft), | ||
| scrollTop: getOffsetForRow(this.props, rowIndex, align, scrollTop) | ||
| scrollLeft: getOffsetForColumnAndAlignment(this.props, columnIndex, align, scrollLeft), | ||
| scrollTop: getOffsetForRowAndAlignment(this.props, rowIndex, align, scrollTop) | ||
| }); | ||
@@ -321,7 +784,6 @@ } | ||
| } else { | ||
| // TODO Get position of cell using helper, not hard-coded number type | ||
| this._cellStyleCache[_key2] = _style = { | ||
| position: 'absolute', | ||
| left: _columnIndex * getColumnWidth(this.props, _columnIndex), | ||
| top: _rowIndex * getRowHeight(this.props, _rowIndex), | ||
| left: getColumnOffset(this.props, _columnIndex), | ||
| top: getRowOffset(this.props, _rowIndex), | ||
| height: getRowHeight(this.props, _rowIndex), | ||
@@ -389,3 +851,3 @@ width: getColumnWidth(this.props, _columnIndex) | ||
| value: function getDerivedStateFromProps(nextProps, prevState) { | ||
| validateSharedProps(nextProps); | ||
| validateSharedProps$1(nextProps); | ||
| validateProps(nextProps); | ||
@@ -402,3 +864,3 @@ return null; | ||
| var validateSharedProps = function validateSharedProps(_ref5) { | ||
| var validateSharedProps$1 = function validateSharedProps(_ref5) { | ||
| var children = _ref5.children, | ||
@@ -424,23 +886,31 @@ height = _ref5.height, | ||
| var FixedSizeGrid = createGridComponent({ | ||
| getColumnWidth: function getColumnWidth(_ref, index) { | ||
| getColumnOffset: function getColumnOffset(_ref, index) { | ||
| var columnWidth = _ref.columnWidth; | ||
| return index * columnWidth; | ||
| }, | ||
| getColumnWidth: function getColumnWidth(_ref2, index) { | ||
| var columnWidth = _ref2.columnWidth; | ||
| return columnWidth; | ||
| }, | ||
| getRowHeight: function getRowHeight(_ref2, index) { | ||
| var rowHeight = _ref2.rowHeight; | ||
| getRowOffset: function getRowOffset(_ref3, index) { | ||
| var rowHeight = _ref3.rowHeight; | ||
| return index * rowHeight; | ||
| }, | ||
| getRowHeight: function getRowHeight(_ref4, index) { | ||
| var rowHeight = _ref4.rowHeight; | ||
| return rowHeight; | ||
| }, | ||
| getEstimatedTotalHeight: function getEstimatedTotalHeight(_ref3) { | ||
| var rowCount = _ref3.rowCount, | ||
| rowHeight = _ref3.rowHeight; | ||
| getEstimatedTotalHeight: function getEstimatedTotalHeight(_ref5) { | ||
| var rowCount = _ref5.rowCount, | ||
| rowHeight = _ref5.rowHeight; | ||
| return rowHeight * rowCount; | ||
| }, | ||
| getEstimatedTotalWidth: function getEstimatedTotalWidth(_ref4) { | ||
| var columnCount = _ref4.columnCount, | ||
| columnWidth = _ref4.columnWidth; | ||
| getEstimatedTotalWidth: function getEstimatedTotalWidth(_ref6) { | ||
| var columnCount = _ref6.columnCount, | ||
| columnWidth = _ref6.columnWidth; | ||
| return columnWidth * columnCount; | ||
| }, | ||
| getOffsetForColumn: function getOffsetForColumn(_ref5, columnIndex, align, scrollLeft) { | ||
| var columnWidth = _ref5.columnWidth, | ||
| width = _ref5.width; | ||
| getOffsetForColumnAndAlignment: function getOffsetForColumnAndAlignment(_ref7, columnIndex, align, scrollLeft) { | ||
| var columnWidth = _ref7.columnWidth, | ||
| width = _ref7.width; | ||
@@ -468,5 +938,5 @@ var maxOffset = columnIndex * columnWidth; | ||
| }, | ||
| getOffsetForRow: function getOffsetForRow(_ref6, rowIndex, align, scrollTop) { | ||
| var rowHeight = _ref6.rowHeight, | ||
| height = _ref6.height; | ||
| getOffsetForRowAndAlignment: function getOffsetForRowAndAlignment(_ref8, rowIndex, align, scrollTop) { | ||
| var rowHeight = _ref8.rowHeight, | ||
| height = _ref8.height; | ||
@@ -494,29 +964,29 @@ var maxOffset = rowIndex * rowHeight; | ||
| }, | ||
| getColumnStartIndexForOffset: function getColumnStartIndexForOffset(_ref7, offset) { | ||
| var columnWidth = _ref7.columnWidth, | ||
| columnCount = _ref7.columnCount; | ||
| getColumnStartIndexForOffset: function getColumnStartIndexForOffset(_ref9, offset) { | ||
| var columnWidth = _ref9.columnWidth, | ||
| columnCount = _ref9.columnCount; | ||
| return Math.min(columnCount - 1, Math.floor(offset / columnWidth)); | ||
| }, | ||
| getColumnStopIndexForStartIndex: function getColumnStopIndexForStartIndex(_ref8, startIndex) { | ||
| var columnWidth = _ref8.columnWidth, | ||
| columnCount = _ref8.columnCount, | ||
| width = _ref8.width; | ||
| getColumnStopIndexForStartIndex: function getColumnStopIndexForStartIndex(_ref10, startIndex) { | ||
| var columnWidth = _ref10.columnWidth, | ||
| columnCount = _ref10.columnCount, | ||
| width = _ref10.width; | ||
| return Math.min(columnCount - 1, Math.round(startIndex + width / columnWidth)); | ||
| }, | ||
| getRowStartIndexForOffset: function getRowStartIndexForOffset(_ref9, offset) { | ||
| var rowHeight = _ref9.rowHeight, | ||
| rowCount = _ref9.rowCount; | ||
| getRowStartIndexForOffset: function getRowStartIndexForOffset(_ref11, offset) { | ||
| var rowHeight = _ref11.rowHeight, | ||
| rowCount = _ref11.rowCount; | ||
| return Math.min(rowCount - 1, Math.floor(offset / rowHeight)); | ||
| }, | ||
| getRowStopIndexForStartIndex: function getRowStopIndexForStartIndex(_ref10, startIndex) { | ||
| var rowHeight = _ref10.rowHeight, | ||
| rowCount = _ref10.rowCount, | ||
| height = _ref10.height; | ||
| getRowStopIndexForStartIndex: function getRowStopIndexForStartIndex(_ref12, startIndex) { | ||
| var rowHeight = _ref12.rowHeight, | ||
| rowCount = _ref12.rowCount, | ||
| height = _ref12.height; | ||
| return Math.min(rowCount - 1, Math.round(startIndex + height / rowHeight)); | ||
| }, | ||
| validateProps: function validateProps(_ref11) { | ||
| var columnWidth = _ref11.columnWidth, | ||
| rowHeight = _ref11.rowHeight; | ||
| validateProps: function validateProps(_ref13) { | ||
| var columnWidth = _ref13.columnWidth, | ||
| rowHeight = _ref13.rowHeight; | ||
@@ -535,268 +1005,27 @@ if (process.env.NODE_ENV !== 'production') { | ||
| var IS_SCROLLING_DEBOUNCE_INTERVAL$1 = 150; | ||
| function createListComponent(_ref) { | ||
| var _class, _temp2; | ||
| var getCellSize = _ref.getCellSize, | ||
| getEstimatedTotalSize = _ref.getEstimatedTotalSize, | ||
| getOffsetForIndex = _ref.getOffsetForIndex, | ||
| getStartIndexForOffset = _ref.getStartIndexForOffset, | ||
| getStopIndexForStartIndex = _ref.getStopIndexForStartIndex, | ||
| validateProps = _ref.validateProps; | ||
| return _temp2 = _class = function (_React$Component) { | ||
| inherits(List, _React$Component); | ||
| function List() { | ||
| var _ref2; | ||
| var _temp, _this, _ret; | ||
| classCallCheck(this, List); | ||
| for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | ||
| args[_key] = arguments[_key]; | ||
| } | ||
| return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref2 = List.__proto__ || Object.getPrototypeOf(List)).call.apply(_ref2, [this].concat(args))), _this), _this._cellStyleCache = {}, _this._resetIsScrollingTimeoutId = null, _this.state = { | ||
| isScrolling: false, | ||
| scrollDirection: 'forward', | ||
| scrollOffset: 0 | ||
| }, _this.onScrollHorizontal = function (event) { | ||
| var scrollLeft = event.currentTarget.scrollLeft; | ||
| _this.setState(function (prevState) { | ||
| return { | ||
| isScrolling: true, | ||
| scrollDirection: prevState.scrollOffset < scrollLeft ? 'forward' : 'backward', | ||
| scrollOffset: scrollLeft | ||
| }; | ||
| }, _this.resetIsScrollingDebounced); | ||
| }, _this.onScrollVertical = function (event) { | ||
| var scrollTop = event.currentTarget.scrollTop; | ||
| _this.setState(function (prevState) { | ||
| return { | ||
| isScrolling: true, | ||
| scrollDirection: prevState.scrollOffset < scrollTop ? 'forward' : 'backward', | ||
| scrollOffset: scrollTop | ||
| }; | ||
| }, _this.resetIsScrollingDebounced); | ||
| }, _this.scrollingContainerRef = function (ref) { | ||
| _this._scrollingContainer = ref; | ||
| }, _this.resetIsScrollingDebounced = function () { | ||
| if (_this._resetIsScrollingTimeoutId !== null) { | ||
| clearTimeout(_this._resetIsScrollingTimeoutId); | ||
| } | ||
| _this._resetIsScrollingTimeoutId = setTimeout(_this.resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL$1); | ||
| }, _this.resetIsScrolling = function () { | ||
| _this._resetIsScrollingTimeoutId = null; | ||
| _this.setState({ isScrolling: false }, function () { | ||
| // Clear style cache after state update has been committed. | ||
| // This way we don't break pure sCU for cells that don't use isScrolling param. | ||
| _this._cellStyleCache = {}; | ||
| }); | ||
| }, _temp), possibleConstructorReturn(_this, _ret); | ||
| } | ||
| createClass(List, [{ | ||
| key: 'scrollTo', | ||
| value: function scrollTo(scrollOffset) { | ||
| if (this._scrollingContainer != null) { | ||
| var _direction = this.props.direction; | ||
| if (_direction === 'horizontal') { | ||
| this._scrollingContainer.scrollLeft = scrollOffset; | ||
| } else { | ||
| this._scrollingContainer.scrollTop = scrollOffset; | ||
| } | ||
| } | ||
| } | ||
| }, { | ||
| key: 'scrollToItem', | ||
| value: function scrollToItem(index) { | ||
| var align = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'auto'; | ||
| if (this._scrollingContainer != null) { | ||
| var _scrollOffset = this.state.scrollOffset; | ||
| this.scrollTo(getOffsetForIndex(this.props, index, align, _scrollOffset)); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'componnetWillUnmount', | ||
| value: function componnetWillUnmount() { | ||
| if (this._resetIsScrollingTimeoutId !== null) { | ||
| clearTimeout(this._resetIsScrollingTimeoutId); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'render', | ||
| value: function render() { | ||
| var _props = this.props, | ||
| className = _props.className, | ||
| direction = _props.direction, | ||
| height = _props.height, | ||
| style = _props.style, | ||
| width = _props.width; | ||
| var isScrolling = this.state.isScrolling; | ||
| var onScroll = direction === 'vertical' ? this.onScrollVertical : this.onScrollHorizontal; | ||
| var estimatedTotalSize = getEstimatedTotalSize(this.props); | ||
| return React.createElement( | ||
| 'div', | ||
| { | ||
| className: className, | ||
| ref: this.scrollingContainerRef, | ||
| style: _extends({ | ||
| position: 'relative', | ||
| height: height, | ||
| width: width, | ||
| overflow: 'auto' | ||
| }, style), | ||
| onScroll: onScroll | ||
| }, | ||
| React.createElement( | ||
| 'div', | ||
| { | ||
| style: { | ||
| height: direction === 'horizontal' ? height : estimatedTotalSize, | ||
| overflow: 'hidden', | ||
| pointerEvents: isScrolling ? 'none' : '', | ||
| width: direction === 'horizontal' ? estimatedTotalSize : width | ||
| } | ||
| }, | ||
| this.renderCells() | ||
| ) | ||
| ); | ||
| } | ||
| }, { | ||
| key: 'renderCells', | ||
| value: function renderCells() { | ||
| var _props2 = this.props, | ||
| children = _props2.children, | ||
| direction = _props2.direction, | ||
| useIsScrolling = _props2.useIsScrolling; | ||
| var isScrolling = this.state.isScrolling; | ||
| var _getRangeToRender = this.getRangeToRender(), | ||
| _getRangeToRender2 = slicedToArray(_getRangeToRender, 2), | ||
| startIndex = _getRangeToRender2[0], | ||
| stopIndex = _getRangeToRender2[1]; | ||
| var cells = []; | ||
| for (var _index = startIndex; _index <= stopIndex; _index++) { | ||
| var _key2 = '' + _index; | ||
| // Cache cell styles while scrolling, | ||
| // So that pure component sCU will prevent re-renders. | ||
| var _style = void 0; | ||
| if (this._cellStyleCache.hasOwnProperty(_index)) { | ||
| _style = this._cellStyleCache[_index]; | ||
| } else { | ||
| // TODO Get position of cell using helper, not hard-coded number type | ||
| this._cellStyleCache[_index] = _style = { | ||
| position: 'absolute', | ||
| left: direction === 'horizontal' ? _index * getCellSize(this.props, _index) : 0, | ||
| top: direction === 'vertical' ? _index * getCellSize(this.props, _index) : 0, | ||
| height: direction === 'vertical' ? getCellSize(this.props, _index) : '100%', | ||
| width: direction === 'horizontal' ? getCellSize(this.props, _index) : '100%' | ||
| }; | ||
| } | ||
| cells.push(children({ | ||
| key: _key2, | ||
| index: _index, | ||
| isScrolling: useIsScrolling ? isScrolling : undefined, | ||
| style: _style | ||
| })); | ||
| } | ||
| return cells; | ||
| } | ||
| }, { | ||
| key: 'getRangeToRender', | ||
| value: function getRangeToRender() { | ||
| var _props3 = this.props, | ||
| count = _props3.count, | ||
| overscanCount = _props3.overscanCount; | ||
| var _state = this.state, | ||
| scrollDirection = _state.scrollDirection, | ||
| scrollOffset = _state.scrollOffset; | ||
| var startIndex = getStartIndexForOffset(this.props, scrollOffset); | ||
| var stopIndex = getStopIndexForStartIndex(this.props, startIndex); | ||
| // Overscan by one cell in each direction so that tab/focus works. | ||
| // If there isn't at least one extra cell, tab loops back around. | ||
| var overscanBackward = scrollDirection === 'backward' ? Math.max(1, overscanCount) : 1; | ||
| var overscanForward = scrollDirection === 'forward' ? Math.max(1, overscanCount) : 1; | ||
| return [Math.max(0, startIndex - overscanBackward), Math.min(count - 1, stopIndex + overscanForward)]; | ||
| } | ||
| }], [{ | ||
| key: 'getDerivedStateFromProps', | ||
| value: function getDerivedStateFromProps(nextProps, prevState) { | ||
| validateSharedProps$1(nextProps); | ||
| validateProps(nextProps); | ||
| return null; | ||
| } | ||
| }]); | ||
| return List; | ||
| }(React.Component), _class.defaultProps = { | ||
| direction: 'vertical', | ||
| overscanCount: 2, | ||
| useIsScrolling: false | ||
| }, _temp2; | ||
| } | ||
| var validateSharedProps$1 = function validateSharedProps(_ref3) { | ||
| var children = _ref3.children, | ||
| direction = _ref3.direction, | ||
| height = _ref3.height, | ||
| width = _ref3.width; | ||
| if (process.env.NODE_ENV !== 'production') { | ||
| if (direction !== 'horizontal' && direction !== 'vertical') { | ||
| throw Error('An invalid "direction" prop has been specified. ' + 'Value should be either "horizontal" or "vertical". ' + ('"' + direction + '" was specified.')); | ||
| } | ||
| if (typeof children !== 'function') { | ||
| throw Error('An invalid "children" prop has been specified. ' + 'Value should be a function that creates a React element. ' + ('"' + (children === null ? 'null' : typeof children === 'undefined' ? 'undefined' : _typeof(children)) + '" was specified.')); | ||
| } | ||
| if (direction === 'horizontal' && typeof width !== 'number') { | ||
| throw Error('An invalid "width" prop has been specified. ' + 'Horizontal lists must specify a number for width. ' + ('"' + (width === null ? 'null' : typeof width === 'undefined' ? 'undefined' : _typeof(width)) + '" was specified.')); | ||
| } else if (direction === 'vertical' && typeof height !== 'number') { | ||
| throw Error('An invalid "height" prop has been specified. ' + 'Vertical lists must specify a number for height. ' + ('"' + (height === null ? 'null' : typeof height === 'undefined' ? 'undefined' : _typeof(height)) + '" was specified.')); | ||
| } | ||
| } | ||
| }; | ||
| var FixedSizeList = createListComponent({ | ||
| getCellSize: function getCellSize(_ref, index) { | ||
| getCellOffset: function getCellOffset(_ref, index) { | ||
| var cellSize = _ref.cellSize, | ||
| size = _ref.size; | ||
| return index * cellSize; | ||
| }, | ||
| getCellSize: function getCellSize(_ref2, index) { | ||
| var cellSize = _ref2.cellSize, | ||
| size = _ref2.size; | ||
| return cellSize; | ||
| }, | ||
| getEstimatedTotalSize: function getEstimatedTotalSize(_ref2) { | ||
| var cellSize = _ref2.cellSize, | ||
| count = _ref2.count; | ||
| getEstimatedTotalSize: function getEstimatedTotalSize(_ref3) { | ||
| var cellSize = _ref3.cellSize, | ||
| count = _ref3.count; | ||
| return cellSize * count; | ||
| }, | ||
| getOffsetForIndex: function getOffsetForIndex(_ref3, index, align, scrollOffset) { | ||
| var cellSize = _ref3.cellSize, | ||
| direction = _ref3.direction, | ||
| height = _ref3.height, | ||
| width = _ref3.width; | ||
| getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment(_ref4, index, align, scrollOffset) { | ||
| var cellSize = _ref4.cellSize, | ||
| direction = _ref4.direction, | ||
| height = _ref4.height, | ||
| width = _ref4.width; | ||
| var maxOffset = index * cellSize; | ||
@@ -823,20 +1052,28 @@ var minOffset = index * cellSize - (direction === 'horizontal' ? width : height) + cellSize; | ||
| }, | ||
| getStartIndexForOffset: function getStartIndexForOffset(_ref4, offset) { | ||
| var cellSize = _ref4.cellSize, | ||
| count = _ref4.count; | ||
| getStartIndexForOffset: function getStartIndexForOffset(_ref5, offset) { | ||
| var cellSize = _ref5.cellSize, | ||
| count = _ref5.count; | ||
| return Math.min(count - 1, Math.floor(offset / cellSize)); | ||
| }, | ||
| getStopIndexForStartIndex: function getStopIndexForStartIndex(_ref5, startIndex) { | ||
| var cellSize = _ref5.cellSize, | ||
| count = _ref5.count, | ||
| direction = _ref5.direction, | ||
| height = _ref5.height, | ||
| width = _ref5.width; | ||
| getStopIndexForStartIndex: function getStopIndexForStartIndex(_ref6, startIndex) { | ||
| var cellSize = _ref6.cellSize, | ||
| count = _ref6.count, | ||
| direction = _ref6.direction, | ||
| height = _ref6.height, | ||
| width = _ref6.width; | ||
| var size = direction === 'horizontal' ? width : height; | ||
| return Math.min(count - 1, Math.round(startIndex + size / cellSize)); | ||
| }, | ||
| validateProps: function validateProps(_ref6) { | ||
| var cellSize = _ref6.cellSize; | ||
| initInstanceProps: function initInstanceProps(props) { | ||
| // Noop | ||
| }, | ||
| validateProps: function validateProps(_ref7) { | ||
| var cellSize = _ref7.cellSize; | ||
| if (process.env.NODE_ENV !== 'production') { | ||
@@ -850,2 +1087,2 @@ if (typeof cellSize !== 'number') { | ||
| export { FixedSizeGrid, FixedSizeList }; | ||
| export { DynamicList, FixedSizeGrid, FixedSizeList }; |
862
index.js
@@ -149,6 +149,468 @@ 'use strict'; | ||
| function createListComponent(_ref) { | ||
| var _class, _temp; | ||
| var getCellOffset = _ref.getCellOffset, | ||
| getCellSize = _ref.getCellSize, | ||
| getEstimatedTotalSize = _ref.getEstimatedTotalSize, | ||
| getOffsetForIndexAndAlignment = _ref.getOffsetForIndexAndAlignment, | ||
| getStartIndexForOffset = _ref.getStartIndexForOffset, | ||
| getStopIndexForStartIndex = _ref.getStopIndexForStartIndex, | ||
| initInstanceProps = _ref.initInstanceProps, | ||
| validateProps = _ref.validateProps; | ||
| return _temp = _class = function (_React$Component) { | ||
| inherits(List, _React$Component); | ||
| function List(props) { | ||
| classCallCheck(this, List); | ||
| var _this = possibleConstructorReturn(this, (List.__proto__ || Object.getPrototypeOf(List)).call(this, props)); | ||
| _this._cellStyleCache = {}; | ||
| _this._resetIsScrollingTimeoutId = null; | ||
| _this.state = { | ||
| isScrolling: false, | ||
| scrollDirection: 'forward', | ||
| scrollOffset: 0 | ||
| }; | ||
| _this.onScrollHorizontal = function (event) { | ||
| var scrollLeft = event.currentTarget.scrollLeft; | ||
| _this.setState(function (prevState) { | ||
| return { | ||
| isScrolling: true, | ||
| scrollDirection: prevState.scrollOffset < scrollLeft ? 'forward' : 'backward', | ||
| scrollOffset: scrollLeft | ||
| }; | ||
| }, _this.resetIsScrollingDebounced); | ||
| }; | ||
| _this.onScrollVertical = function (event) { | ||
| var scrollTop = event.currentTarget.scrollTop; | ||
| _this.setState(function (prevState) { | ||
| return { | ||
| isScrolling: true, | ||
| scrollDirection: prevState.scrollOffset < scrollTop ? 'forward' : 'backward', | ||
| scrollOffset: scrollTop | ||
| }; | ||
| }, _this.resetIsScrollingDebounced); | ||
| }; | ||
| _this.scrollingContainerRef = function (ref) { | ||
| _this._scrollingContainer = ref; | ||
| }; | ||
| _this.resetIsScrollingDebounced = function () { | ||
| if (_this._resetIsScrollingTimeoutId !== null) { | ||
| clearTimeout(_this._resetIsScrollingTimeoutId); | ||
| } | ||
| _this._resetIsScrollingTimeoutId = setTimeout(_this.resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL); | ||
| }; | ||
| _this.resetIsScrolling = function () { | ||
| _this._resetIsScrollingTimeoutId = null; | ||
| _this.setState({ isScrolling: false }, function () { | ||
| // Clear style cache after state update has been committed. | ||
| // This way we don't break pure sCU for cells that don't use isScrolling param. | ||
| _this._cellStyleCache = {}; | ||
| }); | ||
| }; | ||
| _this._instanceProps = initInstanceProps(props, _this); | ||
| return _this; | ||
| } | ||
| createClass(List, [{ | ||
| key: 'scrollTo', | ||
| value: function scrollTo(scrollOffset) { | ||
| if (this._scrollingContainer != null) { | ||
| var _direction = this.props.direction; | ||
| if (_direction === 'horizontal') { | ||
| this._scrollingContainer.scrollLeft = scrollOffset; | ||
| } else { | ||
| this._scrollingContainer.scrollTop = scrollOffset; | ||
| } | ||
| } | ||
| } | ||
| }, { | ||
| key: 'scrollToItem', | ||
| value: function scrollToItem(index) { | ||
| var align = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'auto'; | ||
| if (this._scrollingContainer != null) { | ||
| var _scrollOffset = this.state.scrollOffset; | ||
| this.scrollTo(getOffsetForIndexAndAlignment(this.props, index, align, _scrollOffset, this._instanceProps)); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'componnetWillUnmount', | ||
| value: function componnetWillUnmount() { | ||
| if (this._resetIsScrollingTimeoutId !== null) { | ||
| clearTimeout(this._resetIsScrollingTimeoutId); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'render', | ||
| value: function render() { | ||
| var _props = this.props, | ||
| className = _props.className, | ||
| direction = _props.direction, | ||
| height = _props.height, | ||
| style = _props.style, | ||
| width = _props.width; | ||
| var isScrolling = this.state.isScrolling; | ||
| var onScroll = direction === 'vertical' ? this.onScrollVertical : this.onScrollHorizontal; | ||
| var estimatedTotalSize = getEstimatedTotalSize(this.props, this._instanceProps); | ||
| return React.createElement( | ||
| 'div', | ||
| { | ||
| className: className, | ||
| ref: this.scrollingContainerRef, | ||
| style: _extends({ | ||
| position: 'relative', | ||
| height: height, | ||
| width: width, | ||
| overflow: 'auto' | ||
| }, style), | ||
| onScroll: onScroll | ||
| }, | ||
| React.createElement( | ||
| 'div', | ||
| { | ||
| style: { | ||
| height: direction === 'horizontal' ? height : estimatedTotalSize, | ||
| overflow: 'hidden', | ||
| pointerEvents: isScrolling ? 'none' : '', | ||
| width: direction === 'horizontal' ? estimatedTotalSize : width | ||
| } | ||
| }, | ||
| this.renderCells() | ||
| ) | ||
| ); | ||
| } | ||
| }, { | ||
| key: 'renderCells', | ||
| value: function renderCells() { | ||
| var _props2 = this.props, | ||
| children = _props2.children, | ||
| direction = _props2.direction, | ||
| useIsScrolling = _props2.useIsScrolling; | ||
| var isScrolling = this.state.isScrolling; | ||
| var _getRangeToRender = this.getRangeToRender(), | ||
| _getRangeToRender2 = slicedToArray(_getRangeToRender, 2), | ||
| startIndex = _getRangeToRender2[0], | ||
| stopIndex = _getRangeToRender2[1]; | ||
| var cells = []; | ||
| for (var _index = startIndex; _index <= stopIndex; _index++) { | ||
| var _key = '' + _index; | ||
| // Cache cell styles while scrolling, | ||
| // So that pure component sCU will prevent re-renders. | ||
| var _style = void 0; | ||
| if (this._cellStyleCache.hasOwnProperty(_index)) { | ||
| _style = this._cellStyleCache[_index]; | ||
| } else { | ||
| this._cellStyleCache[_index] = _style = { | ||
| position: 'absolute', | ||
| left: direction === 'horizontal' ? getCellOffset(this.props, _index, this._instanceProps) : 0, | ||
| top: direction === 'vertical' ? getCellOffset(this.props, _index, this._instanceProps) : 0, | ||
| height: direction === 'vertical' ? getCellSize(this.props, _index, this._instanceProps) : '100%', | ||
| width: direction === 'horizontal' ? getCellSize(this.props, _index, this._instanceProps) : '100%' | ||
| }; | ||
| } | ||
| cells.push(children({ | ||
| key: _key, | ||
| index: _index, | ||
| isScrolling: useIsScrolling ? isScrolling : undefined, | ||
| style: _style | ||
| })); | ||
| } | ||
| return cells; | ||
| } | ||
| }, { | ||
| key: 'getRangeToRender', | ||
| value: function getRangeToRender() { | ||
| var _props3 = this.props, | ||
| count = _props3.count, | ||
| overscanCount = _props3.overscanCount; | ||
| var _state = this.state, | ||
| scrollDirection = _state.scrollDirection, | ||
| scrollOffset = _state.scrollOffset; | ||
| var startIndex = getStartIndexForOffset(this.props, scrollOffset, this._instanceProps); | ||
| var stopIndex = getStopIndexForStartIndex(this.props, startIndex, this._instanceProps); | ||
| // Overscan by one cell in each direction so that tab/focus works. | ||
| // If there isn't at least one extra cell, tab loops back around. | ||
| var overscanBackward = scrollDirection === 'backward' ? Math.max(1, overscanCount) : 1; | ||
| var overscanForward = scrollDirection === 'forward' ? Math.max(1, overscanCount) : 1; | ||
| return [Math.max(0, startIndex - overscanBackward), Math.min(count - 1, stopIndex + overscanForward)]; | ||
| } | ||
| }], [{ | ||
| key: 'getDerivedStateFromProps', | ||
| value: function getDerivedStateFromProps(nextProps, prevState) { | ||
| validateSharedProps(nextProps); | ||
| validateProps(nextProps); | ||
| return null; | ||
| } | ||
| }]); | ||
| return List; | ||
| }(React.Component), _class.defaultProps = { | ||
| direction: 'vertical', | ||
| overscanCount: 2, | ||
| useIsScrolling: false | ||
| }, _temp; | ||
| } | ||
| var validateSharedProps = function validateSharedProps(_ref2) { | ||
| var children = _ref2.children, | ||
| direction = _ref2.direction, | ||
| height = _ref2.height, | ||
| width = _ref2.width; | ||
| if (process.env.NODE_ENV !== 'production') { | ||
| if (direction !== 'horizontal' && direction !== 'vertical') { | ||
| throw Error('An invalid "direction" prop has been specified. ' + 'Value should be either "horizontal" or "vertical". ' + ('"' + direction + '" was specified.')); | ||
| } | ||
| if (typeof children !== 'function') { | ||
| throw Error('An invalid "children" prop has been specified. ' + 'Value should be a function that creates a React element. ' + ('"' + (children === null ? 'null' : typeof children === 'undefined' ? 'undefined' : _typeof(children)) + '" was specified.')); | ||
| } | ||
| if (direction === 'horizontal' && typeof width !== 'number') { | ||
| throw Error('An invalid "width" prop has been specified. ' + 'Horizontal lists must specify a number for width. ' + ('"' + (width === null ? 'null' : typeof width === 'undefined' ? 'undefined' : _typeof(width)) + '" was specified.')); | ||
| } else if (direction === 'vertical' && typeof height !== 'number') { | ||
| throw Error('An invalid "height" prop has been specified. ' + 'Vertical lists must specify a number for height. ' + ('"' + (height === null ? 'null' : typeof height === 'undefined' ? 'undefined' : _typeof(height)) + '" was specified.')); | ||
| } | ||
| } | ||
| }; | ||
| var DEFAULT_ESTIMATED_CELL_SIZE = 50; | ||
| var getCellMetadata = function getCellMetadata(props, index, instanceProps) { | ||
| var _ref = props, | ||
| cellSize = _ref.cellSize, | ||
| estimatedCellSize = _ref.estimatedCellSize; | ||
| var cellMetadataMap = instanceProps.cellMetadataMap, | ||
| lastMeasuredIndex = instanceProps.lastMeasuredIndex; | ||
| if (index > lastMeasuredIndex) { | ||
| var _offset = 0; | ||
| if (lastMeasuredIndex >= 0) { | ||
| var cellMetadata = cellMetadataMap[lastMeasuredIndex]; | ||
| _offset = cellMetadata.offset + cellMetadata.size; | ||
| } | ||
| for (var i = lastMeasuredIndex + 1; i <= index; i++) { | ||
| var _size = cellSize(i); | ||
| cellMetadataMap[i] = { | ||
| offset: _offset, | ||
| size: _size | ||
| }; | ||
| _offset += _size; | ||
| instanceProps.lastMeasuredIndex = index; | ||
| } | ||
| } | ||
| return cellMetadataMap[index]; | ||
| }; | ||
| var findNearestCell = function findNearestCell(props, instanceProps, offset) { | ||
| var cellMetadataMap = instanceProps.cellMetadataMap, | ||
| estimatedCellSize = instanceProps.estimatedCellSize, | ||
| lastMeasuredIndex = instanceProps.lastMeasuredIndex; | ||
| var lastMeasuredCellOffset = lastMeasuredIndex > 0 ? cellMetadataMap[lastMeasuredIndex].offset : 0; | ||
| if (lastMeasuredCellOffset >= offset) { | ||
| // If we've already measured cells within this range just use a binary search as it's faster. | ||
| return findNearestCellBinarySearch(props, instanceProps, lastMeasuredIndex, 0, offset); | ||
| } else { | ||
| // If we haven't yet measured this high, fallback to an exponential search with an inner binary search. | ||
| // The exponential search avoids pre-computing sizes for the full set of cells as a binary search would. | ||
| // The overall complexity for this approach is O(log n). | ||
| return findNearestCellExponentialSearch(props, instanceProps, lastMeasuredIndex, offset); | ||
| } | ||
| }; | ||
| var findNearestCellBinarySearch = function findNearestCellBinarySearch(props, instanceProps, high, low, offset) { | ||
| while (low <= high) { | ||
| var middle = low + Math.floor((high - low) / 2); | ||
| var currentOffset = getCellMetadata(props, middle, instanceProps).offset; | ||
| if (currentOffset === offset) { | ||
| return middle; | ||
| } else if (currentOffset < offset) { | ||
| low = middle + 1; | ||
| } else if (currentOffset > offset) { | ||
| high = middle - 1; | ||
| } | ||
| } | ||
| if (low > 0) { | ||
| return low - 1; | ||
| } else { | ||
| return 0; | ||
| } | ||
| }; | ||
| var findNearestCellExponentialSearch = function findNearestCellExponentialSearch(props, instanceProps, index, offset) { | ||
| var count = props.count; | ||
| var interval = 1; | ||
| while (index < count && getCellMetadata(props, index, instanceProps).offset < offset) { | ||
| index += interval; | ||
| interval *= 2; | ||
| } | ||
| return findNearestCellBinarySearch(props, instanceProps, Math.min(index, count - 1), Math.floor(index / 2), offset); | ||
| }; | ||
| var DynamicList = createListComponent({ | ||
| getCellOffset: function getCellOffset(props, index, instanceProps) { | ||
| return getCellMetadata(props, index, instanceProps).offset; | ||
| }, | ||
| getCellSize: function getCellSize(props, index, instanceProps) { | ||
| return instanceProps.cellMetadataMap[index].size; | ||
| }, | ||
| getEstimatedTotalSize: function getEstimatedTotalSize(_ref2, _ref3) { | ||
| var count = _ref2.count; | ||
| var cellMetadataMap = _ref3.cellMetadataMap, | ||
| estimatedCellSize = _ref3.estimatedCellSize, | ||
| lastMeasuredIndex = _ref3.lastMeasuredIndex; | ||
| var totalSizeOfMeasuredCells = 0; | ||
| if (lastMeasuredIndex >= 0) { | ||
| var cellMetadata = cellMetadataMap[lastMeasuredIndex]; | ||
| totalSizeOfMeasuredCells = cellMetadata.offset + cellMetadata.size; | ||
| } | ||
| var numUnmeasuredCells = count - lastMeasuredIndex - 1; | ||
| var totalSizeOfUnmeasuredCells = numUnmeasuredCells * estimatedCellSize; | ||
| return totalSizeOfMeasuredCells + totalSizeOfUnmeasuredCells; | ||
| }, | ||
| getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment(props, index, align, scrollOffset, instanceProps) { | ||
| var direction = props.direction, | ||
| height = props.height, | ||
| width = props.width; | ||
| var size = direction === 'horizontal' ? width : height; | ||
| var cellMetadata = getCellMetadata(props, index, instanceProps); | ||
| var maxOffset = cellMetadata.offset; | ||
| var minOffset = cellMetadata.offset - size + cellMetadata.size; | ||
| switch (align) { | ||
| case 'start': | ||
| return maxOffset; | ||
| case 'end': | ||
| return minOffset; | ||
| case 'center': | ||
| return Math.round(minOffset + (maxOffset - minOffset) / 2); | ||
| case 'auto': | ||
| default: | ||
| if (scrollOffset >= minOffset && scrollOffset <= maxOffset) { | ||
| return scrollOffset; | ||
| } else if (scrollOffset - minOffset < maxOffset - scrollOffset) { | ||
| return minOffset; | ||
| } else { | ||
| return maxOffset; | ||
| } | ||
| } | ||
| }, | ||
| getStartIndexForOffset: function getStartIndexForOffset(props, offset, instanceProps) { | ||
| return findNearestCell(props, instanceProps, offset); | ||
| }, | ||
| getStopIndexForStartIndex: function getStopIndexForStartIndex(props, startIndex, instanceProps) { | ||
| var count = props.count, | ||
| direction = props.direction, | ||
| height = props.height, | ||
| width = props.width; | ||
| var size = direction === 'horizontal' ? width : height; | ||
| var cellMetadata = getCellMetadata(props, startIndex, instanceProps); | ||
| var maxOffset = cellMetadata.offset + size; | ||
| var offset = cellMetadata.offset; | ||
| var stopIndex = startIndex; | ||
| while (stopIndex < count - 1 && offset < maxOffset) { | ||
| stopIndex++; | ||
| offset += getCellMetadata(props, stopIndex, instanceProps).size; | ||
| } | ||
| return stopIndex; | ||
| }, | ||
| initInstanceProps: function initInstanceProps(props, instance) { | ||
| var _ref4 = props, | ||
| estimatedCellSize = _ref4.estimatedCellSize, | ||
| direction = _ref4.direction; | ||
| var instanceProps = { | ||
| cellMetadataMap: {}, | ||
| estimatedCellSize: estimatedCellSize || DEFAULT_ESTIMATED_CELL_SIZE, | ||
| lastMeasuredIndex: -1 | ||
| }; | ||
| instance.resetAfterIndex = function (index) { | ||
| instanceProps.lastMeasuredIndex = index - 1; | ||
| }; | ||
| return instanceProps; | ||
| }, | ||
| validateProps: function validateProps(_ref5) { | ||
| var cellSize = _ref5.cellSize; | ||
| if (process.env.NODE_ENV !== 'production') { | ||
| if (typeof cellSize !== 'function') { | ||
| throw Error('An invalid "cellSize" prop has been specified. ' + 'Value should be a function. ' + ('"' + (cellSize === null ? 'null' : typeof cellSize === 'undefined' ? 'undefined' : _typeof(cellSize)) + '" was specified.')); | ||
| } | ||
| } | ||
| } | ||
| }); | ||
| var IS_SCROLLING_DEBOUNCE_INTERVAL$1 = 150; | ||
| function createGridComponent(_ref) { | ||
| var _class, _temp2; | ||
| var getColumnStartIndexForOffset = _ref.getColumnStartIndexForOffset, | ||
| var getColumnOffset = _ref.getColumnOffset, | ||
| getColumnStartIndexForOffset = _ref.getColumnStartIndexForOffset, | ||
| getColumnStopIndexForStartIndex = _ref.getColumnStopIndexForStartIndex, | ||
@@ -158,5 +620,6 @@ getColumnWidth = _ref.getColumnWidth, | ||
| getEstimatedTotalWidth = _ref.getEstimatedTotalWidth, | ||
| getOffsetForColumn = _ref.getOffsetForColumn, | ||
| getOffsetForRow = _ref.getOffsetForRow, | ||
| getOffsetForColumnAndAlignment = _ref.getOffsetForColumnAndAlignment, | ||
| getOffsetForRowAndAlignment = _ref.getOffsetForRowAndAlignment, | ||
| getRowHeight = _ref.getRowHeight, | ||
| getRowOffset = _ref.getRowOffset, | ||
| getRowStartIndexForOffset = _ref.getRowStartIndexForOffset, | ||
@@ -207,3 +670,3 @@ getRowStopIndexForStartIndex = _ref.getRowStopIndexForStartIndex, | ||
| _this._resetIsScrollingTimeoutId = setTimeout(_this.resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL); | ||
| _this._resetIsScrollingTimeoutId = setTimeout(_this.resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL$1); | ||
| }, _this.resetIsScrolling = function () { | ||
@@ -244,4 +707,4 @@ _this._resetIsScrollingTimeoutId = null; | ||
| this.scrollTo({ | ||
| scrollLeft: getOffsetForColumn(this.props, columnIndex, align, scrollLeft), | ||
| scrollTop: getOffsetForRow(this.props, rowIndex, align, scrollTop) | ||
| scrollLeft: getOffsetForColumnAndAlignment(this.props, columnIndex, align, scrollLeft), | ||
| scrollTop: getOffsetForRowAndAlignment(this.props, rowIndex, align, scrollTop) | ||
| }); | ||
@@ -327,7 +790,6 @@ } | ||
| } else { | ||
| // TODO Get position of cell using helper, not hard-coded number type | ||
| this._cellStyleCache[_key2] = _style = { | ||
| position: 'absolute', | ||
| left: _columnIndex * getColumnWidth(this.props, _columnIndex), | ||
| top: _rowIndex * getRowHeight(this.props, _rowIndex), | ||
| left: getColumnOffset(this.props, _columnIndex), | ||
| top: getRowOffset(this.props, _rowIndex), | ||
| height: getRowHeight(this.props, _rowIndex), | ||
@@ -395,3 +857,3 @@ width: getColumnWidth(this.props, _columnIndex) | ||
| value: function getDerivedStateFromProps(nextProps, prevState) { | ||
| validateSharedProps(nextProps); | ||
| validateSharedProps$1(nextProps); | ||
| validateProps(nextProps); | ||
@@ -408,3 +870,3 @@ return null; | ||
| var validateSharedProps = function validateSharedProps(_ref5) { | ||
| var validateSharedProps$1 = function validateSharedProps(_ref5) { | ||
| var children = _ref5.children, | ||
@@ -430,23 +892,31 @@ height = _ref5.height, | ||
| var FixedSizeGrid = createGridComponent({ | ||
| getColumnWidth: function getColumnWidth(_ref, index) { | ||
| getColumnOffset: function getColumnOffset(_ref, index) { | ||
| var columnWidth = _ref.columnWidth; | ||
| return index * columnWidth; | ||
| }, | ||
| getColumnWidth: function getColumnWidth(_ref2, index) { | ||
| var columnWidth = _ref2.columnWidth; | ||
| return columnWidth; | ||
| }, | ||
| getRowHeight: function getRowHeight(_ref2, index) { | ||
| var rowHeight = _ref2.rowHeight; | ||
| getRowOffset: function getRowOffset(_ref3, index) { | ||
| var rowHeight = _ref3.rowHeight; | ||
| return index * rowHeight; | ||
| }, | ||
| getRowHeight: function getRowHeight(_ref4, index) { | ||
| var rowHeight = _ref4.rowHeight; | ||
| return rowHeight; | ||
| }, | ||
| getEstimatedTotalHeight: function getEstimatedTotalHeight(_ref3) { | ||
| var rowCount = _ref3.rowCount, | ||
| rowHeight = _ref3.rowHeight; | ||
| getEstimatedTotalHeight: function getEstimatedTotalHeight(_ref5) { | ||
| var rowCount = _ref5.rowCount, | ||
| rowHeight = _ref5.rowHeight; | ||
| return rowHeight * rowCount; | ||
| }, | ||
| getEstimatedTotalWidth: function getEstimatedTotalWidth(_ref4) { | ||
| var columnCount = _ref4.columnCount, | ||
| columnWidth = _ref4.columnWidth; | ||
| getEstimatedTotalWidth: function getEstimatedTotalWidth(_ref6) { | ||
| var columnCount = _ref6.columnCount, | ||
| columnWidth = _ref6.columnWidth; | ||
| return columnWidth * columnCount; | ||
| }, | ||
| getOffsetForColumn: function getOffsetForColumn(_ref5, columnIndex, align, scrollLeft) { | ||
| var columnWidth = _ref5.columnWidth, | ||
| width = _ref5.width; | ||
| getOffsetForColumnAndAlignment: function getOffsetForColumnAndAlignment(_ref7, columnIndex, align, scrollLeft) { | ||
| var columnWidth = _ref7.columnWidth, | ||
| width = _ref7.width; | ||
@@ -474,5 +944,5 @@ var maxOffset = columnIndex * columnWidth; | ||
| }, | ||
| getOffsetForRow: function getOffsetForRow(_ref6, rowIndex, align, scrollTop) { | ||
| var rowHeight = _ref6.rowHeight, | ||
| height = _ref6.height; | ||
| getOffsetForRowAndAlignment: function getOffsetForRowAndAlignment(_ref8, rowIndex, align, scrollTop) { | ||
| var rowHeight = _ref8.rowHeight, | ||
| height = _ref8.height; | ||
@@ -500,29 +970,29 @@ var maxOffset = rowIndex * rowHeight; | ||
| }, | ||
| getColumnStartIndexForOffset: function getColumnStartIndexForOffset(_ref7, offset) { | ||
| var columnWidth = _ref7.columnWidth, | ||
| columnCount = _ref7.columnCount; | ||
| getColumnStartIndexForOffset: function getColumnStartIndexForOffset(_ref9, offset) { | ||
| var columnWidth = _ref9.columnWidth, | ||
| columnCount = _ref9.columnCount; | ||
| return Math.min(columnCount - 1, Math.floor(offset / columnWidth)); | ||
| }, | ||
| getColumnStopIndexForStartIndex: function getColumnStopIndexForStartIndex(_ref8, startIndex) { | ||
| var columnWidth = _ref8.columnWidth, | ||
| columnCount = _ref8.columnCount, | ||
| width = _ref8.width; | ||
| getColumnStopIndexForStartIndex: function getColumnStopIndexForStartIndex(_ref10, startIndex) { | ||
| var columnWidth = _ref10.columnWidth, | ||
| columnCount = _ref10.columnCount, | ||
| width = _ref10.width; | ||
| return Math.min(columnCount - 1, Math.round(startIndex + width / columnWidth)); | ||
| }, | ||
| getRowStartIndexForOffset: function getRowStartIndexForOffset(_ref9, offset) { | ||
| var rowHeight = _ref9.rowHeight, | ||
| rowCount = _ref9.rowCount; | ||
| getRowStartIndexForOffset: function getRowStartIndexForOffset(_ref11, offset) { | ||
| var rowHeight = _ref11.rowHeight, | ||
| rowCount = _ref11.rowCount; | ||
| return Math.min(rowCount - 1, Math.floor(offset / rowHeight)); | ||
| }, | ||
| getRowStopIndexForStartIndex: function getRowStopIndexForStartIndex(_ref10, startIndex) { | ||
| var rowHeight = _ref10.rowHeight, | ||
| rowCount = _ref10.rowCount, | ||
| height = _ref10.height; | ||
| getRowStopIndexForStartIndex: function getRowStopIndexForStartIndex(_ref12, startIndex) { | ||
| var rowHeight = _ref12.rowHeight, | ||
| rowCount = _ref12.rowCount, | ||
| height = _ref12.height; | ||
| return Math.min(rowCount - 1, Math.round(startIndex + height / rowHeight)); | ||
| }, | ||
| validateProps: function validateProps(_ref11) { | ||
| var columnWidth = _ref11.columnWidth, | ||
| rowHeight = _ref11.rowHeight; | ||
| validateProps: function validateProps(_ref13) { | ||
| var columnWidth = _ref13.columnWidth, | ||
| rowHeight = _ref13.rowHeight; | ||
@@ -541,268 +1011,27 @@ if (process.env.NODE_ENV !== 'production') { | ||
| var IS_SCROLLING_DEBOUNCE_INTERVAL$1 = 150; | ||
| function createListComponent(_ref) { | ||
| var _class, _temp2; | ||
| var getCellSize = _ref.getCellSize, | ||
| getEstimatedTotalSize = _ref.getEstimatedTotalSize, | ||
| getOffsetForIndex = _ref.getOffsetForIndex, | ||
| getStartIndexForOffset = _ref.getStartIndexForOffset, | ||
| getStopIndexForStartIndex = _ref.getStopIndexForStartIndex, | ||
| validateProps = _ref.validateProps; | ||
| return _temp2 = _class = function (_React$Component) { | ||
| inherits(List, _React$Component); | ||
| function List() { | ||
| var _ref2; | ||
| var _temp, _this, _ret; | ||
| classCallCheck(this, List); | ||
| for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | ||
| args[_key] = arguments[_key]; | ||
| } | ||
| return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref2 = List.__proto__ || Object.getPrototypeOf(List)).call.apply(_ref2, [this].concat(args))), _this), _this._cellStyleCache = {}, _this._resetIsScrollingTimeoutId = null, _this.state = { | ||
| isScrolling: false, | ||
| scrollDirection: 'forward', | ||
| scrollOffset: 0 | ||
| }, _this.onScrollHorizontal = function (event) { | ||
| var scrollLeft = event.currentTarget.scrollLeft; | ||
| _this.setState(function (prevState) { | ||
| return { | ||
| isScrolling: true, | ||
| scrollDirection: prevState.scrollOffset < scrollLeft ? 'forward' : 'backward', | ||
| scrollOffset: scrollLeft | ||
| }; | ||
| }, _this.resetIsScrollingDebounced); | ||
| }, _this.onScrollVertical = function (event) { | ||
| var scrollTop = event.currentTarget.scrollTop; | ||
| _this.setState(function (prevState) { | ||
| return { | ||
| isScrolling: true, | ||
| scrollDirection: prevState.scrollOffset < scrollTop ? 'forward' : 'backward', | ||
| scrollOffset: scrollTop | ||
| }; | ||
| }, _this.resetIsScrollingDebounced); | ||
| }, _this.scrollingContainerRef = function (ref) { | ||
| _this._scrollingContainer = ref; | ||
| }, _this.resetIsScrollingDebounced = function () { | ||
| if (_this._resetIsScrollingTimeoutId !== null) { | ||
| clearTimeout(_this._resetIsScrollingTimeoutId); | ||
| } | ||
| _this._resetIsScrollingTimeoutId = setTimeout(_this.resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL$1); | ||
| }, _this.resetIsScrolling = function () { | ||
| _this._resetIsScrollingTimeoutId = null; | ||
| _this.setState({ isScrolling: false }, function () { | ||
| // Clear style cache after state update has been committed. | ||
| // This way we don't break pure sCU for cells that don't use isScrolling param. | ||
| _this._cellStyleCache = {}; | ||
| }); | ||
| }, _temp), possibleConstructorReturn(_this, _ret); | ||
| } | ||
| createClass(List, [{ | ||
| key: 'scrollTo', | ||
| value: function scrollTo(scrollOffset) { | ||
| if (this._scrollingContainer != null) { | ||
| var _direction = this.props.direction; | ||
| if (_direction === 'horizontal') { | ||
| this._scrollingContainer.scrollLeft = scrollOffset; | ||
| } else { | ||
| this._scrollingContainer.scrollTop = scrollOffset; | ||
| } | ||
| } | ||
| } | ||
| }, { | ||
| key: 'scrollToItem', | ||
| value: function scrollToItem(index) { | ||
| var align = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'auto'; | ||
| if (this._scrollingContainer != null) { | ||
| var _scrollOffset = this.state.scrollOffset; | ||
| this.scrollTo(getOffsetForIndex(this.props, index, align, _scrollOffset)); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'componnetWillUnmount', | ||
| value: function componnetWillUnmount() { | ||
| if (this._resetIsScrollingTimeoutId !== null) { | ||
| clearTimeout(this._resetIsScrollingTimeoutId); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'render', | ||
| value: function render() { | ||
| var _props = this.props, | ||
| className = _props.className, | ||
| direction = _props.direction, | ||
| height = _props.height, | ||
| style = _props.style, | ||
| width = _props.width; | ||
| var isScrolling = this.state.isScrolling; | ||
| var onScroll = direction === 'vertical' ? this.onScrollVertical : this.onScrollHorizontal; | ||
| var estimatedTotalSize = getEstimatedTotalSize(this.props); | ||
| return React.createElement( | ||
| 'div', | ||
| { | ||
| className: className, | ||
| ref: this.scrollingContainerRef, | ||
| style: _extends({ | ||
| position: 'relative', | ||
| height: height, | ||
| width: width, | ||
| overflow: 'auto' | ||
| }, style), | ||
| onScroll: onScroll | ||
| }, | ||
| React.createElement( | ||
| 'div', | ||
| { | ||
| style: { | ||
| height: direction === 'horizontal' ? height : estimatedTotalSize, | ||
| overflow: 'hidden', | ||
| pointerEvents: isScrolling ? 'none' : '', | ||
| width: direction === 'horizontal' ? estimatedTotalSize : width | ||
| } | ||
| }, | ||
| this.renderCells() | ||
| ) | ||
| ); | ||
| } | ||
| }, { | ||
| key: 'renderCells', | ||
| value: function renderCells() { | ||
| var _props2 = this.props, | ||
| children = _props2.children, | ||
| direction = _props2.direction, | ||
| useIsScrolling = _props2.useIsScrolling; | ||
| var isScrolling = this.state.isScrolling; | ||
| var _getRangeToRender = this.getRangeToRender(), | ||
| _getRangeToRender2 = slicedToArray(_getRangeToRender, 2), | ||
| startIndex = _getRangeToRender2[0], | ||
| stopIndex = _getRangeToRender2[1]; | ||
| var cells = []; | ||
| for (var _index = startIndex; _index <= stopIndex; _index++) { | ||
| var _key2 = '' + _index; | ||
| // Cache cell styles while scrolling, | ||
| // So that pure component sCU will prevent re-renders. | ||
| var _style = void 0; | ||
| if (this._cellStyleCache.hasOwnProperty(_index)) { | ||
| _style = this._cellStyleCache[_index]; | ||
| } else { | ||
| // TODO Get position of cell using helper, not hard-coded number type | ||
| this._cellStyleCache[_index] = _style = { | ||
| position: 'absolute', | ||
| left: direction === 'horizontal' ? _index * getCellSize(this.props, _index) : 0, | ||
| top: direction === 'vertical' ? _index * getCellSize(this.props, _index) : 0, | ||
| height: direction === 'vertical' ? getCellSize(this.props, _index) : '100%', | ||
| width: direction === 'horizontal' ? getCellSize(this.props, _index) : '100%' | ||
| }; | ||
| } | ||
| cells.push(children({ | ||
| key: _key2, | ||
| index: _index, | ||
| isScrolling: useIsScrolling ? isScrolling : undefined, | ||
| style: _style | ||
| })); | ||
| } | ||
| return cells; | ||
| } | ||
| }, { | ||
| key: 'getRangeToRender', | ||
| value: function getRangeToRender() { | ||
| var _props3 = this.props, | ||
| count = _props3.count, | ||
| overscanCount = _props3.overscanCount; | ||
| var _state = this.state, | ||
| scrollDirection = _state.scrollDirection, | ||
| scrollOffset = _state.scrollOffset; | ||
| var startIndex = getStartIndexForOffset(this.props, scrollOffset); | ||
| var stopIndex = getStopIndexForStartIndex(this.props, startIndex); | ||
| // Overscan by one cell in each direction so that tab/focus works. | ||
| // If there isn't at least one extra cell, tab loops back around. | ||
| var overscanBackward = scrollDirection === 'backward' ? Math.max(1, overscanCount) : 1; | ||
| var overscanForward = scrollDirection === 'forward' ? Math.max(1, overscanCount) : 1; | ||
| return [Math.max(0, startIndex - overscanBackward), Math.min(count - 1, stopIndex + overscanForward)]; | ||
| } | ||
| }], [{ | ||
| key: 'getDerivedStateFromProps', | ||
| value: function getDerivedStateFromProps(nextProps, prevState) { | ||
| validateSharedProps$1(nextProps); | ||
| validateProps(nextProps); | ||
| return null; | ||
| } | ||
| }]); | ||
| return List; | ||
| }(React.Component), _class.defaultProps = { | ||
| direction: 'vertical', | ||
| overscanCount: 2, | ||
| useIsScrolling: false | ||
| }, _temp2; | ||
| } | ||
| var validateSharedProps$1 = function validateSharedProps(_ref3) { | ||
| var children = _ref3.children, | ||
| direction = _ref3.direction, | ||
| height = _ref3.height, | ||
| width = _ref3.width; | ||
| if (process.env.NODE_ENV !== 'production') { | ||
| if (direction !== 'horizontal' && direction !== 'vertical') { | ||
| throw Error('An invalid "direction" prop has been specified. ' + 'Value should be either "horizontal" or "vertical". ' + ('"' + direction + '" was specified.')); | ||
| } | ||
| if (typeof children !== 'function') { | ||
| throw Error('An invalid "children" prop has been specified. ' + 'Value should be a function that creates a React element. ' + ('"' + (children === null ? 'null' : typeof children === 'undefined' ? 'undefined' : _typeof(children)) + '" was specified.')); | ||
| } | ||
| if (direction === 'horizontal' && typeof width !== 'number') { | ||
| throw Error('An invalid "width" prop has been specified. ' + 'Horizontal lists must specify a number for width. ' + ('"' + (width === null ? 'null' : typeof width === 'undefined' ? 'undefined' : _typeof(width)) + '" was specified.')); | ||
| } else if (direction === 'vertical' && typeof height !== 'number') { | ||
| throw Error('An invalid "height" prop has been specified. ' + 'Vertical lists must specify a number for height. ' + ('"' + (height === null ? 'null' : typeof height === 'undefined' ? 'undefined' : _typeof(height)) + '" was specified.')); | ||
| } | ||
| } | ||
| }; | ||
| var FixedSizeList = createListComponent({ | ||
| getCellSize: function getCellSize(_ref, index) { | ||
| getCellOffset: function getCellOffset(_ref, index) { | ||
| var cellSize = _ref.cellSize, | ||
| size = _ref.size; | ||
| return index * cellSize; | ||
| }, | ||
| getCellSize: function getCellSize(_ref2, index) { | ||
| var cellSize = _ref2.cellSize, | ||
| size = _ref2.size; | ||
| return cellSize; | ||
| }, | ||
| getEstimatedTotalSize: function getEstimatedTotalSize(_ref2) { | ||
| var cellSize = _ref2.cellSize, | ||
| count = _ref2.count; | ||
| getEstimatedTotalSize: function getEstimatedTotalSize(_ref3) { | ||
| var cellSize = _ref3.cellSize, | ||
| count = _ref3.count; | ||
| return cellSize * count; | ||
| }, | ||
| getOffsetForIndex: function getOffsetForIndex(_ref3, index, align, scrollOffset) { | ||
| var cellSize = _ref3.cellSize, | ||
| direction = _ref3.direction, | ||
| height = _ref3.height, | ||
| width = _ref3.width; | ||
| getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment(_ref4, index, align, scrollOffset) { | ||
| var cellSize = _ref4.cellSize, | ||
| direction = _ref4.direction, | ||
| height = _ref4.height, | ||
| width = _ref4.width; | ||
| var maxOffset = index * cellSize; | ||
@@ -829,20 +1058,28 @@ var minOffset = index * cellSize - (direction === 'horizontal' ? width : height) + cellSize; | ||
| }, | ||
| getStartIndexForOffset: function getStartIndexForOffset(_ref4, offset) { | ||
| var cellSize = _ref4.cellSize, | ||
| count = _ref4.count; | ||
| getStartIndexForOffset: function getStartIndexForOffset(_ref5, offset) { | ||
| var cellSize = _ref5.cellSize, | ||
| count = _ref5.count; | ||
| return Math.min(count - 1, Math.floor(offset / cellSize)); | ||
| }, | ||
| getStopIndexForStartIndex: function getStopIndexForStartIndex(_ref5, startIndex) { | ||
| var cellSize = _ref5.cellSize, | ||
| count = _ref5.count, | ||
| direction = _ref5.direction, | ||
| height = _ref5.height, | ||
| width = _ref5.width; | ||
| getStopIndexForStartIndex: function getStopIndexForStartIndex(_ref6, startIndex) { | ||
| var cellSize = _ref6.cellSize, | ||
| count = _ref6.count, | ||
| direction = _ref6.direction, | ||
| height = _ref6.height, | ||
| width = _ref6.width; | ||
| var size = direction === 'horizontal' ? width : height; | ||
| return Math.min(count - 1, Math.round(startIndex + size / cellSize)); | ||
| }, | ||
| validateProps: function validateProps(_ref6) { | ||
| var cellSize = _ref6.cellSize; | ||
| initInstanceProps: function initInstanceProps(props) { | ||
| // Noop | ||
| }, | ||
| validateProps: function validateProps(_ref7) { | ||
| var cellSize = _ref7.cellSize; | ||
| if (process.env.NODE_ENV !== 'production') { | ||
@@ -856,3 +1093,4 @@ if (typeof cellSize !== 'number') { | ||
| exports.DynamicList = DynamicList; | ||
| exports.FixedSizeGrid = FixedSizeGrid; | ||
| exports.FixedSizeList = FixedSizeList; |
| { | ||
| "name": "react-virtualized", | ||
| "version": "10.0.0-alpha.3", | ||
| "version": "10.0.0-alpha.4", | ||
| "main": "index.js", | ||
@@ -5,0 +5,0 @@ "module": "index.es.js", |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Native code
Supply chain riskContains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by12.36%
74473
- Lines of code
- increased by25.53%
1765
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Number of package files
- decreased by-25%
3
- Number of low supply chain risk alerts
- increased by22.22%
11
No dependency changes