react-virtualized
Version:
React components for efficiently rendering large, scrollable lists and tabular data
1,056 lines (970 loc) • 66.9 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof3 = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.DEFAULT_SCROLLING_RESET_TIME_INTERVAL = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _calculateSizeAndPositionDataAndUpdateScrollOffset = _interopRequireDefault(require("./utils/calculateSizeAndPositionDataAndUpdateScrollOffset"));
var _ScalingCellSizeAndPositionManager = _interopRequireDefault(require("./utils/ScalingCellSizeAndPositionManager"));
var _createCallbackMemoizer = _interopRequireDefault(require("../utils/createCallbackMemoizer"));
var _defaultOverscanIndicesGetter = _interopRequireWildcard(require("./defaultOverscanIndicesGetter"));
var _updateScrollIndexHelper = _interopRequireDefault(require("./utils/updateScrollIndexHelper"));
var _defaultCellRangeRenderer = _interopRequireDefault(require("./defaultCellRangeRenderer"));
var _scrollbarSize = _interopRequireDefault(require("dom-helpers/scrollbarSize"));
var _reactLifecyclesCompat = require("react-lifecycles-compat");
var _requestAnimationTimeout = require("../utils/requestAnimationTimeout");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /*:: import type {
CellRenderer,
CellRangeRenderer,
CellPosition,
CellSize,
CellSizeGetter,
NoContentRenderer,
Scroll,
ScrollbarPresenceChange,
RenderedSection,
OverscanIndicesGetter,
Alignment,
CellCache,
StyleCache,
} from './types';*/ /*:: import type {AnimationTimeoutId} from '../utils/requestAnimationTimeout';*/
/**
* Specifies the number of milliseconds during which to disable pointer events while a scroll is in progress.
* This improves performance and makes scrolling smoother.
*/
var DEFAULT_SCROLLING_RESET_TIME_INTERVAL = exports.DEFAULT_SCROLLING_RESET_TIME_INTERVAL = 150;
/**
* Controls whether the Grid updates the DOM element's scrollLeft/scrollTop based on the current state or just observes it.
* This prevents Grid from interrupting mouse-wheel animations (see issue #2).
*/
var SCROLL_POSITION_CHANGE_REASONS = {
OBSERVED: 'observed',
REQUESTED: 'requested'
};
var renderNull /*: NoContentRenderer*/ = function renderNull() {
return null;
};
/*:: type ScrollPosition = {
scrollTop?: number,
scrollLeft?: number,
};*/
/*:: type Props = {
'aria-label': string,
'aria-readonly'?: boolean,
/**
* Set the width of the inner scrollable container to 'auto'.
* This is useful for single-column Grids to ensure that the column doesn't extend below a vertical scrollbar.
*-/
autoContainerWidth: boolean,
/**
* Removes fixed height from the scrollingContainer so that the total height of rows can stretch the window.
* Intended for use with WindowScroller
*-/
autoHeight: boolean,
/**
* Removes fixed width from the scrollingContainer so that the total width of rows can stretch the window.
* Intended for use with WindowScroller
*-/
autoWidth: boolean,
/** Responsible for rendering a cell given an row and column index. *-/
cellRenderer: CellRenderer,
/** Responsible for rendering a group of cells given their index ranges. *-/
cellRangeRenderer: CellRangeRenderer,
/** Optional custom CSS class name to attach to root Grid element. *-/
className?: string,
/** Number of columns in grid. *-/
columnCount: number,
/** Either a fixed column width (number) or a function that returns the width of a column given its index. *-/
columnWidth: CellSize,
/** Unfiltered props for the Grid container. *-/
containerProps?: Object,
/** ARIA role for the cell-container. *-/
containerRole: string,
/** Optional inline style applied to inner cell-container *-/
containerStyle: Object,
/**
* If CellMeasurer is used to measure this Grid's children, this should be a pointer to its CellMeasurerCache.
* A shared CellMeasurerCache reference enables Grid and CellMeasurer to share measurement data.
*-/
deferredMeasurementCache?: Object,
/**
* Used to estimate the total width of a Grid before all of its columns have actually been measured.
* The estimated total width is adjusted as columns are rendered.
*-/
estimatedColumnSize: number,
/**
* Used to estimate the total height of a Grid before all of its rows have actually been measured.
* The estimated total height is adjusted as rows are rendered.
*-/
estimatedRowSize: number,
/** Exposed for testing purposes only. *-/
getScrollbarSize: () => number,
/** Height of Grid; this property determines the number of visible (vs virtualized) rows. *-/
height: number,
/** Optional custom id to attach to root Grid element. *-/
id?: string,
/**
* Override internal is-scrolling state tracking.
* This property is primarily intended for use with the WindowScroller component.
*-/
isScrolling?: boolean,
/**
* Opt-out of isScrolling param passed to cellRangeRenderer.
* To avoid the extra render when scroll stops.
*-/
isScrollingOptOut: boolean,
/** Optional renderer to be used in place of rows when either :rowCount or :columnCount is 0. *-/
noContentRenderer: NoContentRenderer,
/**
* Callback invoked whenever the scroll offset changes within the inner scrollable region.
* This callback can be used to sync scrolling between lists, tables, or grids.
*-/
onScroll: (params: Scroll) => void,
/**
* Called whenever a horizontal or vertical scrollbar is added or removed.
* This prop is not intended for end-user use;
* It is used by MultiGrid to support fixed-row/fixed-column scroll syncing.
*-/
onScrollbarPresenceChange: (params: ScrollbarPresenceChange) => void,
/** Callback invoked with information about the section of the Grid that was just rendered. *-/
onSectionRendered: (params: RenderedSection) => void,
/**
* Number of columns to render before/after the visible section of the grid.
* These columns can help for smoother scrolling on touch devices or browsers that send scroll events infrequently.
*-/
overscanColumnCount: number,
/**
* Calculates the number of cells to overscan before and after a specified range.
* This function ensures that overscanning doesn't exceed the available cells.
*-/
overscanIndicesGetter: OverscanIndicesGetter,
/**
* Number of rows to render above/below the visible section of the grid.
* These rows can help for smoother scrolling on touch devices or browsers that send scroll events infrequently.
*-/
overscanRowCount: number,
/** ARIA role for the grid element. *-/
role: string,
/**
* Either a fixed row height (number) or a function that returns the height of a row given its index.
* Should implement the following interface: ({ index: number }): number
*-/
rowHeight: CellSize,
/** Number of rows in grid. *-/
rowCount: number,
/** Wait this amount of time after the last scroll event before resetting Grid `pointer-events`. *-/
scrollingResetTimeInterval: number,
/** Horizontal offset. *-/
scrollLeft?: number,
/**
* Controls scroll-to-cell behavior of the Grid.
* The default ("auto") scrolls the least amount possible to ensure that the specified cell is fully visible.
* Use "start" to align cells to the top/left of the Grid and "end" to align bottom/right.
*-/
scrollToAlignment: Alignment,
/** Column index to ensure visible (by forcefully scrolling if necessary) *-/
scrollToColumn: number,
/** Vertical offset. *-/
scrollTop?: number,
/** Row index to ensure visible (by forcefully scrolling if necessary) *-/
scrollToRow: number,
/** Optional inline style *-/
style: Object,
/** Tab index for focus *-/
tabIndex: ?number,
/** Width of Grid; this property determines the number of visible (vs virtualized) columns. *-/
width: number,
/** Reference to DOM node *-/
elementRef?: React.Ref<React.ElementType>,
};*/
/*:: type InstanceProps = {
prevColumnWidth: CellSize,
prevRowHeight: CellSize,
prevColumnCount: number,
prevRowCount: number,
prevIsScrolling: boolean,
prevScrollToColumn: number,
prevScrollToRow: number,
columnSizeAndPositionManager: ScalingCellSizeAndPositionManager,
rowSizeAndPositionManager: ScalingCellSizeAndPositionManager,
scrollbarSize: number,
scrollbarSizeMeasured: boolean,
};*/
/*:: type State = {
instanceProps: InstanceProps,
isScrolling: boolean,
scrollDirectionHorizontal: -1 | 1,
scrollDirectionVertical: -1 | 1,
scrollLeft: number,
scrollTop: number,
scrollPositionChangeReason: 'observed' | 'requested' | null,
needToResetStyleCache: boolean,
};*/
/**
* Renders tabular data with virtualization along the vertical and horizontal axes.
* Row heights and column widths must be known ahead of time and specified as properties.
*/
var Grid = /*#__PURE__*/function (_React$PureComponent) {
function Grid(props /*: Props*/) {
var _this;
(0, _classCallCheck2["default"])(this, Grid);
_this = _callSuper(this, Grid, [props]);
// Invokes onSectionRendered callback only when start/stop row or column indices change
(0, _defineProperty2["default"])(_this, "_onGridRenderedMemoizer", (0, _createCallbackMemoizer["default"])());
(0, _defineProperty2["default"])(_this, "_onScrollMemoizer", (0, _createCallbackMemoizer["default"])(false));
(0, _defineProperty2["default"])(_this, "_deferredInvalidateColumnIndex", null);
(0, _defineProperty2["default"])(_this, "_deferredInvalidateRowIndex", null);
(0, _defineProperty2["default"])(_this, "_recomputeScrollLeftFlag", false);
(0, _defineProperty2["default"])(_this, "_recomputeScrollTopFlag", false);
(0, _defineProperty2["default"])(_this, "_horizontalScrollBarSize", 0);
(0, _defineProperty2["default"])(_this, "_verticalScrollBarSize", 0);
(0, _defineProperty2["default"])(_this, "_scrollbarPresenceChanged", false);
(0, _defineProperty2["default"])(_this, "_scrollingContainer", void 0);
(0, _defineProperty2["default"])(_this, "_childrenToDisplay", void 0);
(0, _defineProperty2["default"])(_this, "_columnStartIndex", void 0);
(0, _defineProperty2["default"])(_this, "_columnStopIndex", void 0);
(0, _defineProperty2["default"])(_this, "_rowStartIndex", void 0);
(0, _defineProperty2["default"])(_this, "_rowStopIndex", void 0);
(0, _defineProperty2["default"])(_this, "_renderedColumnStartIndex", 0);
(0, _defineProperty2["default"])(_this, "_renderedColumnStopIndex", 0);
(0, _defineProperty2["default"])(_this, "_renderedRowStartIndex", 0);
(0, _defineProperty2["default"])(_this, "_renderedRowStopIndex", 0);
(0, _defineProperty2["default"])(_this, "_initialScrollTop", void 0);
(0, _defineProperty2["default"])(_this, "_initialScrollLeft", void 0);
(0, _defineProperty2["default"])(_this, "_disablePointerEventsTimeoutId", void 0);
(0, _defineProperty2["default"])(_this, "_styleCache", {});
(0, _defineProperty2["default"])(_this, "_cellCache", {});
(0, _defineProperty2["default"])(_this, "_debounceScrollEndedCallback", function () {
_this._disablePointerEventsTimeoutId = null;
// isScrolling is used to determine if we reset styleCache
_this.setState({
isScrolling: false,
needToResetStyleCache: false
});
});
(0, _defineProperty2["default"])(_this, "_invokeOnGridRenderedHelper", function () {
var onSectionRendered = _this.props.onSectionRendered;
_this._onGridRenderedMemoizer({
callback: onSectionRendered,
indices: {
columnOverscanStartIndex: _this._columnStartIndex,
columnOverscanStopIndex: _this._columnStopIndex,
columnStartIndex: _this._renderedColumnStartIndex,
columnStopIndex: _this._renderedColumnStopIndex,
rowOverscanStartIndex: _this._rowStartIndex,
rowOverscanStopIndex: _this._rowStopIndex,
rowStartIndex: _this._renderedRowStartIndex,
rowStopIndex: _this._renderedRowStopIndex
}
});
});
(0, _defineProperty2["default"])(_this, "_setScrollingContainerRef", function (ref /*: Element*/) {
_this._scrollingContainer = ref;
if (typeof _this.props.elementRef === 'function') {
_this.props.elementRef(ref);
} else if ((0, _typeof2["default"])(_this.props.elementRef) === 'object') {
_this.props.elementRef.current = ref;
}
});
(0, _defineProperty2["default"])(_this, "_onScroll", function (event /*: Event*/) {
// In certain edge-cases React dispatches an onScroll event with an invalid target.scrollLeft / target.scrollTop.
// This invalid event can be detected by comparing event.target to this component's scrollable DOM element.
// See issue #404 for more information.
if (event.target === _this._scrollingContainer) {
_this.handleScrollEvent((event.target /*: any*/));
}
});
var columnSizeAndPositionManager = new _ScalingCellSizeAndPositionManager["default"]({
cellCount: props.columnCount,
cellSizeGetter: function cellSizeGetter(params) {
return Grid._wrapSizeGetter(props.columnWidth)(params);
},
estimatedCellSize: Grid._getEstimatedColumnSize(props)
});
var rowSizeAndPositionManager = new _ScalingCellSizeAndPositionManager["default"]({
cellCount: props.rowCount,
cellSizeGetter: function cellSizeGetter(params) {
return Grid._wrapSizeGetter(props.rowHeight)(params);
},
estimatedCellSize: Grid._getEstimatedRowSize(props)
});
_this.state = {
instanceProps: {
columnSizeAndPositionManager: columnSizeAndPositionManager,
rowSizeAndPositionManager: rowSizeAndPositionManager,
prevColumnWidth: props.columnWidth,
prevRowHeight: props.rowHeight,
prevColumnCount: props.columnCount,
prevRowCount: props.rowCount,
prevIsScrolling: props.isScrolling === true,
prevScrollToColumn: props.scrollToColumn,
prevScrollToRow: props.scrollToRow,
scrollbarSize: 0,
scrollbarSizeMeasured: false
},
isScrolling: false,
scrollDirectionHorizontal: _defaultOverscanIndicesGetter.SCROLL_DIRECTION_FORWARD,
scrollDirectionVertical: _defaultOverscanIndicesGetter.SCROLL_DIRECTION_FORWARD,
scrollLeft: 0,
scrollTop: 0,
scrollPositionChangeReason: null,
needToResetStyleCache: false
};
if (props.scrollToRow > 0) {
_this._initialScrollTop = _this._getCalculatedScrollTop(props, _this.state);
}
if (props.scrollToColumn > 0) {
_this._initialScrollLeft = _this._getCalculatedScrollLeft(props, _this.state);
}
return _this;
}
/**
* Gets offsets for a given cell and alignment.
*/
(0, _inherits2["default"])(Grid, _React$PureComponent);
return (0, _createClass2["default"])(Grid, [{
key: "getOffsetForCell",
value: function getOffsetForCell() {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
_ref$alignment = _ref.alignment,
alignment = _ref$alignment === void 0 ? this.props.scrollToAlignment : _ref$alignment,
_ref$columnIndex = _ref.columnIndex,
columnIndex = _ref$columnIndex === void 0 ? this.props.scrollToColumn : _ref$columnIndex,
_ref$rowIndex = _ref.rowIndex,
rowIndex = _ref$rowIndex === void 0 ? this.props.scrollToRow : _ref$rowIndex;
var offsetProps = _objectSpread(_objectSpread({}, this.props), {}, {
scrollToAlignment: alignment,
scrollToColumn: columnIndex,
scrollToRow: rowIndex
});
return {
scrollLeft: this._getCalculatedScrollLeft(offsetProps),
scrollTop: this._getCalculatedScrollTop(offsetProps)
};
}
/**
* Gets estimated total rows' height.
*/
}, {
key: "getTotalRowsHeight",
value: function getTotalRowsHeight() {
return this.state.instanceProps.rowSizeAndPositionManager.getTotalSize();
}
/**
* Gets estimated total columns' width.
*/
}, {
key: "getTotalColumnsWidth",
value: function getTotalColumnsWidth() {
return this.state.instanceProps.columnSizeAndPositionManager.getTotalSize();
}
/**
* This method handles a scroll event originating from an external scroll control.
* It's an advanced method and should probably not be used unless you're implementing a custom scroll-bar solution.
*/
}, {
key: "handleScrollEvent",
value: function handleScrollEvent(_ref2 /*:: */) {
var _ref2$scrollLeft = _ref2 /*:: */.scrollLeft,
scrollLeftParam = _ref2$scrollLeft === void 0 ? 0 : _ref2$scrollLeft,
_ref2$scrollTop = _ref2 /*:: */.scrollTop,
scrollTopParam = _ref2$scrollTop === void 0 ? 0 : _ref2$scrollTop;
// On iOS, we can arrive at negative offsets by swiping past the start.
// To prevent flicker here, we make playing in the negative offset zone cause nothing to happen.
if (scrollTopParam < 0) {
return;
}
// Prevent pointer events from interrupting a smooth scroll
this._debounceScrollEnded();
var _this$props = this.props,
autoHeight = _this$props.autoHeight,
autoWidth = _this$props.autoWidth,
height = _this$props.height,
width = _this$props.width;
var instanceProps = this.state.instanceProps;
// When this component is shrunk drastically, React dispatches a series of back-to-back scroll events,
// Gradually converging on a scrollTop that is within the bounds of the new, smaller height.
// This causes a series of rapid renders that is slow for long lists.
// We can avoid that by doing some simple bounds checking to ensure that scroll offsets never exceed their bounds.
var scrollbarSize = instanceProps.scrollbarSize;
var totalRowsHeight = instanceProps.rowSizeAndPositionManager.getTotalSize();
var totalColumnsWidth = instanceProps.columnSizeAndPositionManager.getTotalSize();
var scrollLeft = Math.min(Math.max(0, totalColumnsWidth - width + scrollbarSize), scrollLeftParam);
var scrollTop = Math.min(Math.max(0, totalRowsHeight - height + scrollbarSize), scrollTopParam);
// Certain devices (like Apple touchpad) rapid-fire duplicate events.
// Don't force a re-render if this is the case.
// The mouse may move faster then the animation frame does.
// Use requestAnimationFrame to avoid over-updating.
if (this.state.scrollLeft !== scrollLeft || this.state.scrollTop !== scrollTop) {
// Track scrolling direction so we can more efficiently overscan rows to reduce empty space around the edges while scrolling.
// Don't change direction for an axis unless scroll offset has changed.
var scrollDirectionHorizontal = scrollLeft !== this.state.scrollLeft ? scrollLeft > this.state.scrollLeft ? _defaultOverscanIndicesGetter.SCROLL_DIRECTION_FORWARD : _defaultOverscanIndicesGetter.SCROLL_DIRECTION_BACKWARD : this.state.scrollDirectionHorizontal;
var scrollDirectionVertical = scrollTop !== this.state.scrollTop ? scrollTop > this.state.scrollTop ? _defaultOverscanIndicesGetter.SCROLL_DIRECTION_FORWARD : _defaultOverscanIndicesGetter.SCROLL_DIRECTION_BACKWARD : this.state.scrollDirectionVertical;
var newState /*: $Shape<State>*/ = {
isScrolling: true,
scrollDirectionHorizontal: scrollDirectionHorizontal,
scrollDirectionVertical: scrollDirectionVertical,
scrollPositionChangeReason: SCROLL_POSITION_CHANGE_REASONS.OBSERVED
};
if (!autoHeight) {
newState.scrollTop = scrollTop;
}
if (!autoWidth) {
newState.scrollLeft = scrollLeft;
}
newState.needToResetStyleCache = false;
this.setState(newState);
}
this._invokeOnScrollMemoizer({
scrollLeft: scrollLeft,
scrollTop: scrollTop,
totalColumnsWidth: totalColumnsWidth,
totalRowsHeight: totalRowsHeight
});
}
/**
* Invalidate Grid size and recompute visible cells.
* This is a deferred wrapper for recomputeGridSize().
* It sets a flag to be evaluated on cDM/cDU to avoid unnecessary renders.
* This method is intended for advanced use-cases like CellMeasurer.
*/
// @TODO (bvaughn) Add automated test coverage for this.
}, {
key: "invalidateCellSizeAfterRender",
value: function invalidateCellSizeAfterRender(_ref3 /*:: */) {
var columnIndex = _ref3 /*:: */.columnIndex,
rowIndex = _ref3 /*:: */.rowIndex;
this._deferredInvalidateColumnIndex = typeof this._deferredInvalidateColumnIndex === 'number' ? Math.min(this._deferredInvalidateColumnIndex, columnIndex) : columnIndex;
this._deferredInvalidateRowIndex = typeof this._deferredInvalidateRowIndex === 'number' ? Math.min(this._deferredInvalidateRowIndex, rowIndex) : rowIndex;
}
/**
* Pre-measure all columns and rows in a Grid.
* Typically cells are only measured as needed and estimated sizes are used for cells that have not yet been measured.
* This method ensures that the next call to getTotalSize() returns an exact size (as opposed to just an estimated one).
*/
}, {
key: "measureAllCells",
value: function measureAllCells() {
var _this$props2 = this.props,
columnCount = _this$props2.columnCount,
rowCount = _this$props2.rowCount;
var instanceProps = this.state.instanceProps;
instanceProps.columnSizeAndPositionManager.getSizeAndPositionOfCell(columnCount - 1);
instanceProps.rowSizeAndPositionManager.getSizeAndPositionOfCell(rowCount - 1);
}
/**
* Forced recompute of row heights and column widths.
* This function should be called if dynamic column or row sizes have changed but nothing else has.
* Since Grid only receives :columnCount and :rowCount it has no way of detecting when the underlying data changes.
*/
}, {
key: "recomputeGridSize",
value: function recomputeGridSize() {
var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
_ref4$columnIndex = _ref4.columnIndex,
columnIndex = _ref4$columnIndex === void 0 ? 0 : _ref4$columnIndex,
_ref4$rowIndex = _ref4.rowIndex,
rowIndex = _ref4$rowIndex === void 0 ? 0 : _ref4$rowIndex;
var _this$props3 = this.props,
scrollToColumn = _this$props3.scrollToColumn,
scrollToRow = _this$props3.scrollToRow;
var instanceProps = this.state.instanceProps;
instanceProps.columnSizeAndPositionManager.resetCell(columnIndex);
instanceProps.rowSizeAndPositionManager.resetCell(rowIndex);
// Cell sizes may be determined by a function property.
// In this case the cDU handler can't know if they changed.
// Store this flag to let the next cDU pass know it needs to recompute the scroll offset.
this._recomputeScrollLeftFlag = scrollToColumn >= 0 && (this.state.scrollDirectionHorizontal === _defaultOverscanIndicesGetter.SCROLL_DIRECTION_FORWARD ? columnIndex <= scrollToColumn : columnIndex >= scrollToColumn);
this._recomputeScrollTopFlag = scrollToRow >= 0 && (this.state.scrollDirectionVertical === _defaultOverscanIndicesGetter.SCROLL_DIRECTION_FORWARD ? rowIndex <= scrollToRow : rowIndex >= scrollToRow);
// Clear cell cache in case we are scrolling;
// Invalid row heights likely mean invalid cached content as well.
this._styleCache = {};
this._cellCache = {};
this.forceUpdate();
}
/**
* Ensure column and row are visible.
*/
}, {
key: "scrollToCell",
value: function scrollToCell(_ref5 /*:: */) {
var columnIndex = _ref5 /*:: */.columnIndex,
rowIndex = _ref5 /*:: */.rowIndex;
var columnCount = this.props.columnCount;
var props = this.props;
// Don't adjust scroll offset for single-column grids (eg List, Table).
// This can cause a funky scroll offset because of the vertical scrollbar width.
if (columnCount > 1 && columnIndex !== undefined) {
this._updateScrollLeftForScrollToColumn(_objectSpread(_objectSpread({}, props), {}, {
scrollToColumn: columnIndex
}));
}
if (rowIndex !== undefined) {
this._updateScrollTopForScrollToRow(_objectSpread(_objectSpread({}, props), {}, {
scrollToRow: rowIndex
}));
}
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
var _this$props4 = this.props,
getScrollbarSize = _this$props4.getScrollbarSize,
height = _this$props4.height,
scrollLeft = _this$props4.scrollLeft,
scrollToColumn = _this$props4.scrollToColumn,
scrollTop = _this$props4.scrollTop,
scrollToRow = _this$props4.scrollToRow,
width = _this$props4.width;
var instanceProps = this.state.instanceProps;
// Reset initial offsets to be ignored in browser
this._initialScrollTop = 0;
this._initialScrollLeft = 0;
// If cell sizes have been invalidated (eg we are using CellMeasurer) then reset cached positions.
// We must do this at the start of the method as we may calculate and update scroll position below.
this._handleInvalidatedGridSize();
// If this component was first rendered server-side, scrollbar size will be undefined.
// In that event we need to remeasure.
if (!instanceProps.scrollbarSizeMeasured) {
this.setState(function (prevState) {
var stateUpdate = _objectSpread(_objectSpread({}, prevState), {}, {
needToResetStyleCache: false
});
stateUpdate.instanceProps.scrollbarSize = getScrollbarSize();
stateUpdate.instanceProps.scrollbarSizeMeasured = true;
return stateUpdate;
});
}
if (typeof scrollLeft === 'number' && scrollLeft >= 0 || typeof scrollTop === 'number' && scrollTop >= 0) {
var stateUpdate = Grid._getScrollToPositionStateUpdate({
prevState: this.state,
scrollLeft: scrollLeft,
scrollTop: scrollTop
});
if (stateUpdate) {
stateUpdate.needToResetStyleCache = false;
this.setState(stateUpdate);
}
}
// refs don't work in `react-test-renderer`
if (this._scrollingContainer) {
// setting the ref's scrollLeft and scrollTop.
// Somehow in MultiGrid the main grid doesn't trigger a update on mount.
if (this._scrollingContainer.scrollLeft !== this.state.scrollLeft) {
this._scrollingContainer.scrollLeft = this.state.scrollLeft;
}
if (this._scrollingContainer.scrollTop !== this.state.scrollTop) {
this._scrollingContainer.scrollTop = this.state.scrollTop;
}
}
// Don't update scroll offset if the size is 0; we don't render any cells in this case.
// Setting a state may cause us to later thing we've updated the offce when we haven't.
var sizeIsBiggerThanZero = height > 0 && width > 0;
if (scrollToColumn >= 0 && sizeIsBiggerThanZero) {
this._updateScrollLeftForScrollToColumn();
}
if (scrollToRow >= 0 && sizeIsBiggerThanZero) {
this._updateScrollTopForScrollToRow();
}
// Update onRowsRendered callback
this._invokeOnGridRenderedHelper();
// Initialize onScroll callback
this._invokeOnScrollMemoizer({
scrollLeft: scrollLeft || 0,
scrollTop: scrollTop || 0,
totalColumnsWidth: instanceProps.columnSizeAndPositionManager.getTotalSize(),
totalRowsHeight: instanceProps.rowSizeAndPositionManager.getTotalSize()
});
this._maybeCallOnScrollbarPresenceChange();
}
/**
* @private
* This method updates scrollLeft/scrollTop in state for the following conditions:
* 1) New scroll-to-cell props have been set
*/
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps /*: Props*/, prevState /*: State*/) {
var _this2 = this;
var _this$props5 = this.props,
autoHeight = _this$props5.autoHeight,
autoWidth = _this$props5.autoWidth,
columnCount = _this$props5.columnCount,
height = _this$props5.height,
rowCount = _this$props5.rowCount,
scrollToAlignment = _this$props5.scrollToAlignment,
scrollToColumn = _this$props5.scrollToColumn,
scrollToRow = _this$props5.scrollToRow,
width = _this$props5.width;
var _this$state = this.state,
scrollLeft = _this$state.scrollLeft,
scrollPositionChangeReason = _this$state.scrollPositionChangeReason,
scrollTop = _this$state.scrollTop,
instanceProps = _this$state.instanceProps;
// If cell sizes have been invalidated (eg we are using CellMeasurer) then reset cached positions.
// We must do this at the start of the method as we may calculate and update scroll position below.
this._handleInvalidatedGridSize();
// Handle edge case where column or row count has only just increased over 0.
// In this case we may have to restore a previously-specified scroll offset.
// For more info see bvaughn/react-virtualized/issues/218
var columnOrRowCountJustIncreasedFromZero = columnCount > 0 && prevProps.columnCount === 0 || rowCount > 0 && prevProps.rowCount === 0;
// Make sure requested changes to :scrollLeft or :scrollTop get applied.
// Assigning to scrollLeft/scrollTop tells the browser to interrupt any running scroll animations,
// And to discard any pending async changes to the scroll position that may have happened in the meantime (e.g. on a separate scrolling thread).
// So we only set these when we require an adjustment of the scroll position.
// See issue #2 for more information.
if (scrollPositionChangeReason === SCROLL_POSITION_CHANGE_REASONS.REQUESTED) {
// @TRICKY :autoHeight and :autoWidth properties instructs Grid to leave :scrollTop and :scrollLeft management to an external HOC (eg WindowScroller).
// In this case we should avoid checking scrollingContainer.scrollTop and scrollingContainer.scrollLeft since it forces layout/flow.
if (!autoWidth && scrollLeft >= 0 && (scrollLeft !== this._scrollingContainer.scrollLeft || columnOrRowCountJustIncreasedFromZero)) {
this._scrollingContainer.scrollLeft = scrollLeft;
}
if (!autoHeight && scrollTop >= 0 && (scrollTop !== this._scrollingContainer.scrollTop || columnOrRowCountJustIncreasedFromZero)) {
this._scrollingContainer.scrollTop = scrollTop;
}
}
// Special case where the previous size was 0:
// In this case we don't show any windowed cells at all.
// So we should always recalculate offset afterwards.
var sizeJustIncreasedFromZero = (prevProps.width === 0 || prevProps.height === 0) && height > 0 && width > 0;
// Update scroll offsets if the current :scrollToColumn or :scrollToRow values requires it
// @TODO Do we also need this check or can the one in componentWillUpdate() suffice?
if (this._recomputeScrollLeftFlag) {
this._recomputeScrollLeftFlag = false;
this._updateScrollLeftForScrollToColumn(this.props);
} else {
(0, _updateScrollIndexHelper["default"])({
cellSizeAndPositionManager: instanceProps.columnSizeAndPositionManager,
previousCellsCount: prevProps.columnCount,
previousCellSize: prevProps.columnWidth,
previousScrollToAlignment: prevProps.scrollToAlignment,
previousScrollToIndex: prevProps.scrollToColumn,
previousSize: prevProps.width,
scrollOffset: scrollLeft,
scrollToAlignment: scrollToAlignment,
scrollToIndex: scrollToColumn,
size: width,
sizeJustIncreasedFromZero: sizeJustIncreasedFromZero,
updateScrollIndexCallback: function updateScrollIndexCallback() {
return _this2._updateScrollLeftForScrollToColumn(_this2.props);
}
});
}
if (this._recomputeScrollTopFlag) {
this._recomputeScrollTopFlag = false;
this._updateScrollTopForScrollToRow(this.props);
} else {
(0, _updateScrollIndexHelper["default"])({
cellSizeAndPositionManager: instanceProps.rowSizeAndPositionManager,
previousCellsCount: prevProps.rowCount,
previousCellSize: prevProps.rowHeight,
previousScrollToAlignment: prevProps.scrollToAlignment,
previousScrollToIndex: prevProps.scrollToRow,
previousSize: prevProps.height,
scrollOffset: scrollTop,
scrollToAlignment: scrollToAlignment,
scrollToIndex: scrollToRow,
size: height,
sizeJustIncreasedFromZero: sizeJustIncreasedFromZero,
updateScrollIndexCallback: function updateScrollIndexCallback() {
return _this2._updateScrollTopForScrollToRow(_this2.props);
}
});
}
// Update onRowsRendered callback if start/stop indices have changed
this._invokeOnGridRenderedHelper();
// Changes to :scrollLeft or :scrollTop should also notify :onScroll listeners
if (scrollLeft !== prevState.scrollLeft || scrollTop !== prevState.scrollTop) {
var totalRowsHeight = instanceProps.rowSizeAndPositionManager.getTotalSize();
var totalColumnsWidth = instanceProps.columnSizeAndPositionManager.getTotalSize();
this._invokeOnScrollMemoizer({
scrollLeft: scrollLeft,
scrollTop: scrollTop,
totalColumnsWidth: totalColumnsWidth,
totalRowsHeight: totalRowsHeight
});
}
this._maybeCallOnScrollbarPresenceChange();
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
if (this._disablePointerEventsTimeoutId) {
(0, _requestAnimationTimeout.cancelAnimationTimeout)(this._disablePointerEventsTimeoutId);
}
}
/**
* This method updates scrollLeft/scrollTop in state for the following conditions:
* 1) Empty content (0 rows or columns)
* 2) New scroll props overriding the current state
* 3) Cells-count or cells-size has changed, making previous scroll offsets invalid
*/
}, {
key: "render",
value: function render() {
var _this$props6 = this.props,
autoContainerWidth = _this$props6.autoContainerWidth,
autoHeight = _this$props6.autoHeight,
autoWidth = _this$props6.autoWidth,
className = _this$props6.className,
containerProps = _this$props6.containerProps,
containerRole = _this$props6.containerRole,
containerStyle = _this$props6.containerStyle,
height = _this$props6.height,
id = _this$props6.id,
noContentRenderer = _this$props6.noContentRenderer,
role = _this$props6.role,
style = _this$props6.style,
tabIndex = _this$props6.tabIndex,
width = _this$props6.width;
var _this$state2 = this.state,
instanceProps = _this$state2.instanceProps,
needToResetStyleCache = _this$state2.needToResetStyleCache;
var isScrolling = this._isScrolling();
var gridStyle /*: Object*/ = {
boxSizing: 'border-box',
direction: 'ltr',
height: autoHeight ? 'auto' : height,
position: 'relative',
width: autoWidth ? 'auto' : width,
WebkitOverflowScrolling: 'touch',
willChange: 'transform'
};
if (needToResetStyleCache) {
this._styleCache = {};
}
// calculate _styleCache here
// if state.isScrolling (not from _isScrolling) then reset
if (!this.state.isScrolling) {
this._resetStyleCache();
}
// calculate children to render here
this._calculateChildrenToRender(this.props, this.state);
var totalColumnsWidth = instanceProps.columnSizeAndPositionManager.getTotalSize();
var totalRowsHeight = instanceProps.rowSizeAndPositionManager.getTotalSize();
// Force browser to hide scrollbars when we know they aren't necessary.
// Otherwise once scrollbars appear they may not disappear again.
// For more info see issue #116
var verticalScrollBarSize = totalRowsHeight > height ? instanceProps.scrollbarSize : 0;
var horizontalScrollBarSize = totalColumnsWidth > width ? instanceProps.scrollbarSize : 0;
if (horizontalScrollBarSize !== this._horizontalScrollBarSize || verticalScrollBarSize !== this._verticalScrollBarSize) {
this._horizontalScrollBarSize = horizontalScrollBarSize;
this._verticalScrollBarSize = verticalScrollBarSize;
this._scrollbarPresenceChanged = true;
}
// Also explicitly init styles to 'auto' if scrollbars are required.
// This works around an obscure edge case where external CSS styles have not yet been loaded,
// But an initial scroll index of offset is set as an external prop.
// Without this style, Grid would render the correct range of cells but would NOT update its internal offset.
// This was originally reported via clauderic/react-infinite-calendar/issues/23
gridStyle.overflowX = totalColumnsWidth + verticalScrollBarSize <= width ? 'hidden' : 'auto';
gridStyle.overflowY = totalRowsHeight + horizontalScrollBarSize <= height ? 'hidden' : 'auto';
var childrenToDisplay = this._childrenToDisplay;
var showNoContentRenderer = childrenToDisplay.length === 0 && height > 0 && width > 0;
return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
ref: this._setScrollingContainerRef
}, containerProps, {
"aria-label": this.props['aria-label'],
"aria-readonly": this.props['aria-readonly'],
className: (0, _clsx["default"])('ReactVirtualized__Grid', className),
id: id,
onScroll: this._onScroll,
role: role,
style: _objectSpread(_objectSpread({}, gridStyle), style),
tabIndex: tabIndex
}), childrenToDisplay.length > 0 && /*#__PURE__*/React.createElement("div", {
className: "ReactVirtualized__Grid__innerScrollContainer",
role: containerRole,
style: _objectSpread({
width: autoContainerWidth ? 'auto' : totalColumnsWidth,
height: totalRowsHeight,
maxWidth: totalColumnsWidth,
maxHeight: totalRowsHeight,
overflow: 'hidden',
pointerEvents: isScrolling ? 'none' : '',
position: 'relative'
}, containerStyle)
}, childrenToDisplay), showNoContentRenderer && noContentRenderer());
}
/* ---------------------------- Helper methods ---------------------------- */
}, {
key: "_calculateChildrenToRender",
value: function _calculateChildrenToRender() {
var props /*: Props*/ = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
var state /*: State*/ = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.state;
var cellRenderer = props.cellRenderer,
cellRangeRenderer = props.cellRangeRenderer,
columnCount = props.columnCount,
deferredMeasurementCache = props.deferredMeasurementCache,
height = props.height,
overscanColumnCount = props.overscanColumnCount,
overscanIndicesGetter = props.overscanIndicesGetter,
overscanRowCount = props.overscanRowCount,
rowCount = props.rowCount,
width = props.width,
isScrollingOptOut = props.isScrollingOptOut;
var scrollDirectionHorizontal = state.scrollDirectionHorizontal,
scrollDirectionVertical = state.scrollDirectionVertical,
instanceProps = state.instanceProps;
var scrollTop = this._initialScrollTop > 0 ? this._initialScrollTop : state.scrollTop;
var scrollLeft = this._initialScrollLeft > 0 ? this._initialScrollLeft : state.scrollLeft;
var isScrolling = this._isScrolling(props, state);
this._childrenToDisplay = [];
// Render only enough columns and rows to cover the visible area of the grid.
if (height > 0 && width > 0) {
var visibleColumnIndices = instanceProps.columnSizeAndPositionManager.getVisibleCellRange({
containerSize: width,
offset: scrollLeft
});
var visibleRowIndices = instanceProps.rowSizeAndPositionManager.getVisibleCellRange({
containerSize: height,
offset: scrollTop
});
var horizontalOffsetAdjustment = instanceProps.columnSizeAndPositionManager.getOffsetAdjustment({
containerSize: width,
offset: scrollLeft
});
var verticalOffsetAdjustment = instanceProps.rowSizeAndPositionManager.getOffsetAdjustment({
containerSize: height,
offset: scrollTop
});
// Store for _invokeOnGridRenderedHelper()
this._renderedColumnStartIndex = visibleColumnIndices.start;
this._renderedColumnStopIndex = visibleColumnIndices.stop;
this._renderedRowStartIndex = visibleRowIndices.start;
this._renderedRowStopIndex = visibleRowIndices.stop;
var overscanColumnIndices = overscanIndicesGetter({
direction: 'horizontal',
cellCount: columnCount,
overscanCellsCount: overscanColumnCount,
scrollDirection: scrollDirectionHorizontal,
startIndex: typeof visibleColumnIndices.start === 'number' ? visibleColumnIndices.start : 0,
stopIndex: typeof visibleColumnIndices.stop === 'number' ? visibleColumnIndices.stop : -1
});
var overscanRowIndices = overscanIndicesGetter({
direction: 'vertical',
cellCount: rowCount,
overscanCellsCount: overscanRowCount,
scrollDirection: scrollDirectionVertical,
startIndex: typeof visibleRowIndices.start === 'number' ? visibleRowIndices.start : 0,
stopIndex: typeof visibleRowIndices.stop === 'number' ? visibleRowIndices.stop : -1
});
// Store for _invokeOnGridRenderedHelper()
var columnStartIndex = overscanColumnIndices.overscanStartIndex;
var columnStopIndex = overscanColumnIndices.overscanStopIndex;
var rowStartIndex = overscanRowIndices.overscanStartIndex;
var rowStopIndex = overscanRowIndices.overscanStopIndex;
// Advanced use-cases (eg CellMeasurer) require batched measurements to determine accurate sizes.
if (deferredMeasurementCache) {
// If rows have a dynamic height, scan the rows we are about to render.
// If any have not yet been measured, then we need to render all columns initially,
// Because the height of the row is equal to the tallest cell within that row,
// (And so we can't know the height without measuring all column-cells first).
if (!deferredMeasurementCache.hasFixedHeight()) {
for (var rowIndex = rowStartIndex; rowIndex <= rowStopIndex; rowIndex++) {
if (!deferredMeasurementCache.has(rowIndex, 0)) {
columnStartIndex = 0;
columnStopIndex = columnCount - 1;
break;
}
}
}
// If columns have a dynamic width, scan the columns we are about to render.
// If any have not yet been measured, then we need to render all rows initially,
// Because the width of the column is equal to the widest cell within that column,
// (And so we can't know the width without measuring all row-cells first).
if (!deferredMeasurementCache.hasFixedWidth()) {
for (var columnIndex = columnStartIndex; columnIndex <= columnStopIndex; columnIndex++) {
if (!deferredMeasurementCache.has(0, columnIndex)) {
rowStartIndex = 0;
rowStopIndex = rowCount - 1;
break;
}
}
}
}
this._childrenToDisplay = cellRangeRenderer({
cellCache: this._cellCache,
cellRenderer: cellRenderer,
columnSizeAndPositionManager: instanceProps.columnSizeAndPositionManager,
columnStartIndex: columnStartIndex,
columnStopIndex: columnStopIndex,
deferredMeasurementCache: deferredMeasurementCache,
horizontalOffsetAdjustment: horizontalOffsetAdjustment,
isScrolling: isScrolling,
isScrollingOptOut: isScrollingOptOut,
parent: this,
rowSizeAndPositionManager: instanceProps.rowSizeAndPositionManager,
rowStartIndex: rowStartIndex,
rowStopIndex: rowStopIndex,
scrollLeft: scrollLeft,
scrollTop: scrollTop,
styleCache: this._styleCache,
verticalOffsetAdjustment: verticalOffsetAdjustment,
visibleColumnIndices: visibleColumnIndices,
visibleRowIndices: visibleRowIndices
});
// update the indices
this._columnStartIndex = columnStartIndex;
this._columnStopIndex = columnStopIndex;
this._rowStartIndex = rowStartIndex;
this._rowStopIndex = rowStopIndex;
}
}
/**
* Sets an :isScrolling flag for a small window of time.
* This flag is used to disable pointer events on the scrollable portion of the Grid.
* This prevents jerky/stuttery mouse-wheel scrolling.
*/
}, {
key: "_debounceScrollEnded",
value: function _debounceScrollEnded() {
var scrollingResetTimeInterval = this.props.scrollingResetTimeInterval;
if (this._disablePointerEventsTimeoutId) {
(0, _requestAnimationTimeout.cancelAnimationTimeout)(this._disablePointerEventsTimeoutId);
}
this._disablePointerEventsTimeoutId = (0, _requestAnimationTimeout.requestAnimationTimeout)(this._debounceScrollEndedCallback, scrollingResetTimeInterval);
}
}, {
key: "_handleInvalidatedGridSize",
value:
/**
* Check for batched CellMeasurer size invalidations.
* This will occur the first time one or more previously unmeasured cells are rendered.
*/
function _handleInvalidatedGridSize() {
if (typeof this._deferredInvalidateColumnIndex === 'number' && typeof this._deferredInvalidateRowIndex === 'number') {
var columnIndex = this._deferredInvalidateColumnIndex;
var rowIndex = this._deferredInvalidateRowIndex;
this._deferredInvalidateColumnIndex = null;
this._deferredInvalidateRowIndex = null;
this.recomputeGridSize({
columnIndex: columnIndex,
rowIndex: rowIndex
});
}
}
}, {
key: "_invokeOnScrollMemoizer",
value: function _invokeOnScrollMemoizer(_ref6 /*:: */) {
var _this3 = this;
var scrollLeft = _ref6 /*:: */.scrollLeft,
scrollTop = _ref6 /*:: */.scrollTop,
totalColumnsWidth = _ref6 /*:: */.totalColumnsWidth,
totalRowsHeight = _ref6 /*:: */.totalRowsHeight;