From 87fea875d9ec477d1d8e51578871f91e309d09ba Mon Sep 17 00:00:00 2001 From: Micwaits Microcood Date: Mon, 9 Apr 2018 22:45:04 +0300 Subject: [PATCH] Added scrollToRow and scrollToColumn support for ssr --- source/Grid/Grid.js | 35 ++++++++++++++++++++++++++++++----- source/Grid/Grid.ssr.js | 23 +++++++++++++++++++++++ 2 files changed, 53 insertions(+), 5 deletions(-) diff --git a/source/Grid/Grid.js b/source/Grid/Grid.js index ab5123fe8..a3e0fc3b7 100644 --- a/source/Grid/Grid.js +++ b/source/Grid/Grid.js @@ -298,12 +298,14 @@ class Grid extends React.PureComponent { _columnStopIndex: number; _rowStartIndex: number; _rowStopIndex: number; - _renderedColumnStartIndex = 0; _renderedColumnStopIndex = 0; _renderedRowStartIndex = 0; _renderedRowStopIndex = 0; + _initialScrollTop: number; + _initialScrollLeft: number; + _disablePointerEventsTimeoutId: ?AnimationTimeoutId; _styleCache: StyleCache = {}; @@ -347,6 +349,16 @@ class Grid extends React.PureComponent { needToResetStyleCache: false, }; + + if (props.scrollToRow > 0) { + this._initialScrollTop = this._getCalculatedScrollTop(props, this.state); + } + if (props.scrollToColumn > 0) { + this._initialScrollLeft = this._getCalculatedScrollLeft( + props, + this.state, + ); + } } /** @@ -559,6 +571,10 @@ class Grid extends React.PureComponent { const {instanceProps} = this.state; + // 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(); @@ -1068,11 +1084,14 @@ class Grid extends React.PureComponent { const { scrollDirectionHorizontal, scrollDirectionVertical, - scrollLeft, - scrollTop, instanceProps, } = state; + const scrollTop = + this._initialScrollTop > 0 ? this._initialScrollTop : state.scrollTop; + const scrollLeft = + this._initialScrollLeft > 0 ? this._initialScrollLeft : state.scrollLeft; + const isScrolling = this._isScrolling(props, state); this._childrenToDisplay = []; @@ -1437,7 +1456,9 @@ class Grid extends React.PureComponent { : Math.min(finalColumn, scrollToColumn); const totalRowsHeight = instanceProps.rowSizeAndPositionManager.getTotalSize(); const scrollBarSize = - totalRowsHeight > height ? instanceProps.scrollbarSize : 0; + instanceProps.scrollbarSizeMeasured && totalRowsHeight > height + ? instanceProps.scrollbarSize + : 0; return instanceProps.columnSizeAndPositionManager.getUpdatedOffsetForIndex( { @@ -1448,6 +1469,7 @@ class Grid extends React.PureComponent { }, ); } + return 0; } _getCalculatedScrollLeft( @@ -1505,7 +1527,9 @@ class Grid extends React.PureComponent { scrollToRow < 0 ? finalRow : Math.min(finalRow, scrollToRow); const totalColumnsWidth = instanceProps.columnSizeAndPositionManager.getTotalSize(); const scrollBarSize = - totalColumnsWidth > width ? instanceProps.scrollbarSize : 0; + instanceProps.scrollbarSizeMeasured && totalColumnsWidth > width + ? instanceProps.scrollbarSize + : 0; return instanceProps.rowSizeAndPositionManager.getUpdatedOffsetForIndex({ align: scrollToAlignment, @@ -1514,6 +1538,7 @@ class Grid extends React.PureComponent { targetIndex, }); } + return 0; } _getCalculatedScrollTop( diff --git a/source/Grid/Grid.ssr.js b/source/Grid/Grid.ssr.js index 10f6be4c5..eed80cf15 100644 --- a/source/Grid/Grid.ssr.js +++ b/source/Grid/Grid.ssr.js @@ -31,3 +31,26 @@ test('should render Grid with dom server', () => { expect(rendered).toContain('24:24'); expect(rendered).not.toContain('25:25'); }); + +test('should support :scrollToColumn and :scrollToRow in server render', () => { + const rendered = ReactDOMServer.renderToString( + ( +
+ {rowIndex + ':' + columnIndex} +
+ )} + columnCount={1000} + columnWidth={20} + scrollToColumn={250} + height={500} + rowCount={1000} + rowHeight={20} + scrollToRow={250} + width={500} + />, + ); + + expect(rendered).toContain('250:250'); + expect(rendered).not.toContain('0:0'); +});