diff --git a/src/__tests__/FixedSizeGrid.js b/src/__tests__/FixedSizeGrid.js index dbc4303..3a2325f 100644 --- a/src/__tests__/FixedSizeGrid.js +++ b/src/__tests__/FixedSizeGrid.js @@ -475,6 +475,10 @@ describe('FixedSizeGrid', () => { rendered .getInstance() .scrollToItem({ columnIndex: 2, rowIndex: 2, align: 'auto' }); + // Scroll down to row 10, without changing scrollLeft + rendered.getInstance().scrollToItem({ rowIndex: 10, align: 'auto' }); + // Scroll left to column 0, without changing scrollTop + rendered.getInstance().scrollToItem({ columnIndex: 0, align: 'auto' }); expect(onItemsRendered.mock.calls).toMatchSnapshot(); }); @@ -497,6 +501,10 @@ describe('FixedSizeGrid', () => { rendered .getInstance() .scrollToItem({ columnIndex: 99, rowIndex: 99, align: 'start' }); + // Scroll up to row 10, without changing scrollLeft + rendered.getInstance().scrollToItem({ rowIndex: 10, align: 'start' }); + // Scroll left to column 0, without changing scrollTop + rendered.getInstance().scrollToItem({ columnIndex: 0, align: 'start' }); expect(onItemsRendered.mock.calls).toMatchSnapshot(); }); @@ -519,6 +527,10 @@ describe('FixedSizeGrid', () => { rendered .getInstance() .scrollToItem({ columnIndex: 1, rowIndex: 1, align: 'end' }); + // Scroll down to row 10, without changing scrollLeft + rendered.getInstance().scrollToItem({ rowIndex: 10, align: 'end' }); + // Scroll right to column 9, without changing scrollTop + rendered.getInstance().scrollToItem({ columnIndex: 9, align: 'end' }); expect(onItemsRendered.mock.calls).toMatchSnapshot(); }); @@ -547,6 +559,10 @@ describe('FixedSizeGrid', () => { rendered .getInstance() .scrollToItem({ columnIndex: 99, rowIndex: 99, align: 'center' }); + // Scroll up to row 10, without changing scrollLeft + rendered.getInstance().scrollToItem({ rowIndex: 10, align: 'center' }); + // Scroll left to column 3, without changing scrollTop + rendered.getInstance().scrollToItem({ columnIndex: 3, align: 'center' }); expect(onItemsRendered.mock.calls).toMatchSnapshot(); }); diff --git a/src/__tests__/VariableSizeGrid.js b/src/__tests__/VariableSizeGrid.js index de665b1..645e589 100644 --- a/src/__tests__/VariableSizeGrid.js +++ b/src/__tests__/VariableSizeGrid.js @@ -190,6 +190,10 @@ describe('VariableSizeGrid', () => { rendered .getInstance() .scrollToItem({ columnIndex: 2, rowIndex: 2, align: 'auto' }); + // Scroll down to row 10, without changing scrollLeft + rendered.getInstance().scrollToItem({ rowIndex: 10, align: 'auto' }); + // Scroll left to column 0, without changing scrollTop + rendered.getInstance().scrollToItem({ columnIndex: 0, align: 'auto' }); expect(onItemsRendered.mock.calls).toMatchSnapshot(); }); @@ -212,6 +216,10 @@ describe('VariableSizeGrid', () => { rendered .getInstance() .scrollToItem({ columnIndex: 9, rowIndex: 19, align: 'start' }); + // Scroll up to row 10, without changing scrollLeft + rendered.getInstance().scrollToItem({ rowIndex: 10, align: 'start' }); + // Scroll left to column 0, without changing scrollTop + rendered.getInstance().scrollToItem({ columnIndex: 0, align: 'start' }); expect(onItemsRendered.mock.calls).toMatchSnapshot(); }); @@ -234,6 +242,10 @@ describe('VariableSizeGrid', () => { rendered .getInstance() .scrollToItem({ columnIndex: 1, rowIndex: 1, align: 'end' }); + // Scroll down to row 10, without changing scrollLeft + rendered.getInstance().scrollToItem({ rowIndex: 10, align: 'end' }); + // Scroll right to column 9, without changing scrollTop + rendered.getInstance().scrollToItem({ columnIndex: 9, align: 'end' }); expect(onItemsRendered.mock.calls).toMatchSnapshot(); }); @@ -262,6 +274,10 @@ describe('VariableSizeGrid', () => { rendered .getInstance() .scrollToItem({ columnIndex: 9, rowIndex: 19, align: 'center' }); + // Scroll up to row 10, without changing scrollLeft + rendered.getInstance().scrollToItem({ rowIndex: 10, align: 'center' }); + // Scroll left to column 3, without changing scrollTop + rendered.getInstance().scrollToItem({ columnIndex: 3, align: 'center' }); expect(onItemsRendered.mock.calls).toMatchSnapshot(); }); diff --git a/src/__tests__/__snapshots__/FixedSizeGrid.js.snap b/src/__tests__/__snapshots__/FixedSizeGrid.js.snap index b38eaac..356b369 100644 --- a/src/__tests__/__snapshots__/FixedSizeGrid.js.snap +++ b/src/__tests__/__snapshots__/FixedSizeGrid.js.snap @@ -311,6 +311,30 @@ Array [ "visibleRowStopIndex": 6, }, ], + Array [ + Object { + "overscanColumnStartIndex": 1, + "overscanColumnStopIndex": 5, + "overscanRowStartIndex": 6, + "overscanRowStopIndex": 12, + "visibleColumnStartIndex": 2, + "visibleColumnStopIndex": 4, + "visibleRowStartIndex": 7, + "visibleRowStopIndex": 11, + }, + ], + Array [ + Object { + "overscanColumnStartIndex": 0, + "overscanColumnStopIndex": 3, + "overscanRowStartIndex": 6, + "overscanRowStopIndex": 12, + "visibleColumnStartIndex": 0, + "visibleColumnStopIndex": 2, + "visibleRowStartIndex": 7, + "visibleRowStopIndex": 11, + }, + ], ] `; @@ -376,6 +400,30 @@ Array [ "visibleRowStopIndex": 99, }, ], + Array [ + Object { + "overscanColumnStartIndex": 97, + "overscanColumnStopIndex": 99, + "overscanRowStartIndex": 7, + "overscanRowStopIndex": 13, + "visibleColumnStartIndex": 98, + "visibleColumnStopIndex": 99, + "visibleRowStartIndex": 8, + "visibleRowStopIndex": 12, + }, + ], + Array [ + Object { + "overscanColumnStartIndex": 1, + "overscanColumnStopIndex": 5, + "overscanRowStartIndex": 7, + "overscanRowStopIndex": 13, + "visibleColumnStartIndex": 2, + "visibleColumnStopIndex": 4, + "visibleRowStartIndex": 8, + "visibleRowStopIndex": 12, + }, + ], ] `; @@ -429,6 +477,30 @@ Array [ "visibleRowStopIndex": 4, }, ], + Array [ + Object { + "overscanColumnStartIndex": 0, + "overscanColumnStopIndex": 3, + "overscanRowStartIndex": 6, + "overscanRowStopIndex": 12, + "visibleColumnStartIndex": 0, + "visibleColumnStopIndex": 2, + "visibleRowStartIndex": 7, + "visibleRowStopIndex": 11, + }, + ], + Array [ + Object { + "overscanColumnStartIndex": 7, + "overscanColumnStopIndex": 11, + "overscanRowStartIndex": 6, + "overscanRowStopIndex": 12, + "visibleColumnStartIndex": 8, + "visibleColumnStopIndex": 10, + "visibleRowStartIndex": 7, + "visibleRowStopIndex": 11, + }, + ], ] `; @@ -482,6 +554,30 @@ Array [ "visibleRowStopIndex": 99, }, ], + Array [ + Object { + "overscanColumnStartIndex": 97, + "overscanColumnStopIndex": 99, + "overscanRowStartIndex": 9, + "overscanRowStopIndex": 15, + "visibleColumnStartIndex": 98, + "visibleColumnStopIndex": 99, + "visibleRowStartIndex": 10, + "visibleRowStopIndex": 14, + }, + ], + Array [ + Object { + "overscanColumnStartIndex": 0, + "overscanColumnStopIndex": 3, + "overscanRowStartIndex": 9, + "overscanRowStopIndex": 15, + "visibleColumnStartIndex": 0, + "visibleColumnStopIndex": 2, + "visibleRowStartIndex": 10, + "visibleRowStopIndex": 14, + }, + ], ] `; diff --git a/src/__tests__/__snapshots__/VariableSizeGrid.js.snap b/src/__tests__/__snapshots__/VariableSizeGrid.js.snap index f2c689e..407f806 100644 --- a/src/__tests__/__snapshots__/VariableSizeGrid.js.snap +++ b/src/__tests__/__snapshots__/VariableSizeGrid.js.snap @@ -26,6 +26,30 @@ Array [ "visibleRowStopIndex": 5, }, ], + Array [ + Object { + "overscanColumnStartIndex": 1, + "overscanColumnStopIndex": 6, + "overscanRowStartIndex": 7, + "overscanRowStopIndex": 11, + "visibleColumnStartIndex": 2, + "visibleColumnStopIndex": 5, + "visibleRowStartIndex": 8, + "visibleRowStopIndex": 10, + }, + ], + Array [ + Object { + "overscanColumnStartIndex": 0, + "overscanColumnStopIndex": 4, + "overscanRowStartIndex": 7, + "overscanRowStopIndex": 11, + "visibleColumnStartIndex": 0, + "visibleColumnStopIndex": 3, + "visibleRowStartIndex": 8, + "visibleRowStopIndex": 10, + }, + ], ] `; @@ -91,6 +115,30 @@ Array [ "visibleRowStopIndex": 19, }, ], + Array [ + Object { + "overscanColumnStartIndex": 5, + "overscanColumnStopIndex": 9, + "overscanRowStartIndex": 8, + "overscanRowStopIndex": 12, + "visibleColumnStartIndex": 6, + "visibleColumnStopIndex": 9, + "visibleRowStartIndex": 9, + "visibleRowStopIndex": 11, + }, + ], + Array [ + Object { + "overscanColumnStartIndex": 0, + "overscanColumnStopIndex": 6, + "overscanRowStartIndex": 8, + "overscanRowStopIndex": 12, + "visibleColumnStartIndex": 1, + "visibleColumnStopIndex": 5, + "visibleRowStartIndex": 9, + "visibleRowStopIndex": 11, + }, + ], ] `; @@ -144,6 +192,30 @@ Array [ "visibleRowStopIndex": 3, }, ], + Array [ + Object { + "overscanColumnStartIndex": 0, + "overscanColumnStopIndex": 4, + "overscanRowStartIndex": 7, + "overscanRowStopIndex": 11, + "visibleColumnStartIndex": 0, + "visibleColumnStopIndex": 3, + "visibleRowStartIndex": 8, + "visibleRowStopIndex": 10, + }, + ], + Array [ + Object { + "overscanColumnStartIndex": 5, + "overscanColumnStopIndex": 9, + "overscanRowStartIndex": 7, + "overscanRowStopIndex": 11, + "visibleColumnStartIndex": 6, + "visibleColumnStopIndex": 9, + "visibleRowStartIndex": 8, + "visibleRowStopIndex": 10, + }, + ], ] `; @@ -197,5 +269,29 @@ Array [ "visibleRowStopIndex": 19, }, ], + Array [ + Object { + "overscanColumnStartIndex": 5, + "overscanColumnStopIndex": 9, + "overscanRowStartIndex": 9, + "overscanRowStopIndex": 13, + "visibleColumnStartIndex": 6, + "visibleColumnStopIndex": 9, + "visibleRowStartIndex": 10, + "visibleRowStopIndex": 12, + }, + ], + Array [ + Object { + "overscanColumnStartIndex": 0, + "overscanColumnStopIndex": 4, + "overscanRowStartIndex": 9, + "overscanRowStopIndex": 13, + "visibleColumnStartIndex": 0, + "visibleColumnStopIndex": 3, + "visibleRowStartIndex": 10, + "visibleRowStopIndex": 12, + }, + ], ] `; diff --git a/src/createGridComponent.js b/src/createGridComponent.js index ddf2417..72d5c52 100644 --- a/src/createGridComponent.js +++ b/src/createGridComponent.js @@ -247,8 +247,8 @@ export default function createGridComponent({ rowIndex, }: { align: ScrollToAlign, - columnIndex: number, - rowIndex: number, + columnIndex?: number, + rowIndex?: number, }): void { const { height, width } = this.props; const { scrollLeft, scrollTop } = this.state; @@ -272,22 +272,28 @@ export default function createGridComponent({ estimatedTotalHeight > height ? scrollbarSize : 0; this.scrollTo({ - scrollLeft: getOffsetForColumnAndAlignment( - this.props, - columnIndex, - align, - scrollLeft, - this._instanceProps, - verticalScrollbarSize - ), - scrollTop: getOffsetForRowAndAlignment( - this.props, - rowIndex, - align, - scrollTop, - this._instanceProps, - horizontalScrollbarSize - ), + scrollLeft: + columnIndex !== undefined + ? getOffsetForColumnAndAlignment( + this.props, + columnIndex, + align, + scrollLeft, + this._instanceProps, + verticalScrollbarSize + ) + : scrollLeft, + scrollTop: + rowIndex !== undefined + ? getOffsetForRowAndAlignment( + this.props, + rowIndex, + align, + scrollTop, + this._instanceProps, + horizontalScrollbarSize + ) + : scrollTop, }); }