Added scrollToRow and scrollToColumn support for ssr (#1072)

bvaughn · May 7, 2018 · b1f5a3c · b1f5a3c
1 parent 319ad45
commit b1f5a3c
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 5 deletions.
diff --git a/source/Grid/Grid.js b/source/Grid/Grid.js
@@ -298,12 +298,14 @@ class Grid extends React.PureComponent<Props, State> {
   _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<Props, State> {
 
       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<Props, State> {
 
     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<Props, State> {
     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<Props, State> {
           : 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<Props, State> {
         },
       );
     }
+    return 0;
   }
 
   _getCalculatedScrollLeft(
@@ -1505,7 +1527,9 @@ class Grid extends React.PureComponent<Props, State> {
         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<Props, State> {
         targetIndex,
       });
     }
+    return 0;
   }
 
   _getCalculatedScrollTop(

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');
+});