Added scrollToRow and scrollToColumn support for ssr

bvaughn · Apr 9, 2018 · 94dfb20 · 94dfb20
1 parent 70749f1
commit 94dfb20
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 8 deletions.
diff --git a/source/Grid/Grid.js b/source/Grid/Grid.js
@@ -304,6 +304,9 @@ export default class Grid extends React.PureComponent<Props, State> {
   _rowStartIndex: number;
   _rowStopIndex: number;
 
+  _initialScrollTop: number;
+  _initialScrollLeft: number;
+
   _disablePointerEventsTimeoutId: ?AnimationTimeoutId;
 
   constructor(props: Props) {
@@ -322,6 +325,16 @@ export default class Grid extends React.PureComponent<Props, State> {
       cellSizeGetter: params => this._rowHeightGetter(params),
       estimatedCellSize: this._getEstimatedRowSize(props),
     });
+
+    if (props.scrollToRow > 0) {
+      this._initialScrollTop = this._getCalculatedScrollTop(props, this.state);
+    }
+    if (props.scrollToColumn > 0) {
+      this._initialScrollLeft = this._getCalculatedScrollLeft(
+        props,
+        this.state,
+      );
+    }
   }
 
   /**
@@ -527,6 +540,10 @@ export default class Grid extends React.PureComponent<Props, State> {
       width,
     } = this.props;
 
+    // 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();
@@ -959,12 +976,12 @@ export default class Grid extends React.PureComponent<Props, State> {
       width,
     } = props;
 
-    const {
-      scrollDirectionHorizontal,
-      scrollDirectionVertical,
-      scrollLeft,
-      scrollTop,
-    } = state;
+    const {scrollDirectionHorizontal, scrollDirectionVertical} = 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);
 
@@ -1292,7 +1309,10 @@ export default class Grid extends React.PureComponent<Props, State> {
           ? finalColumn
           : Math.min(finalColumn, scrollToColumn);
       const totalRowsHeight = this._rowSizeAndPositionManager.getTotalSize();
-      const scrollBarSize = totalRowsHeight > height ? this._scrollbarSize : 0;
+      const scrollBarSize =
+        this._scrollbarSizeMeasured && totalRowsHeight > height
+          ? this._scrollbarSize
+          : 0;
 
       return this._columnSizeAndPositionManager.getUpdatedOffsetForIndex({
         align: scrollToAlignment,
@@ -1301,6 +1321,7 @@ export default class Grid extends React.PureComponent<Props, State> {
         targetIndex,
       });
     }
+    return 0;
   }
 
   _updateScrollLeftForScrollToColumn(
@@ -1334,7 +1355,10 @@ export default class Grid extends React.PureComponent<Props, State> {
       const targetIndex =
         scrollToRow < 0 ? finalRow : Math.min(finalRow, scrollToRow);
       const totalColumnsWidth = this._columnSizeAndPositionManager.getTotalSize();
-      const scrollBarSize = totalColumnsWidth > width ? this._scrollbarSize : 0;
+      const scrollBarSize =
+        this._scrollbarSizeMeasured && totalColumnsWidth > width
+          ? this._scrollbarSize
+          : 0;
 
       return this._rowSizeAndPositionManager.getUpdatedOffsetForIndex({
         align: scrollToAlignment,
@@ -1343,6 +1367,7 @@ export default class Grid extends React.PureComponent<Props, State> {
         targetIndex,
       });
     }
+    return 0;
   }
 
   _resetStyleCache() {

diff --git 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(
+    <Grid
+      cellRenderer={({style, key, rowIndex, columnIndex}) => (
+        <div style={style} key={key}>
+          {rowIndex + ':' + columnIndex}
+        </div>
+      )}
+      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');
+});