From 481f90d5647cc330cdb6c4a3b2f7dd19148772c7 Mon Sep 17 00:00:00 2001 From: Neo Date: Tue, 30 Apr 2019 10:16:33 +0800 Subject: [PATCH] rename overscan props for Gird with deprecation --- src/__tests__/FixedSizeGrid.js | 66 +++++++++++++++---- src/__tests__/VariableSizeGrid.js | 20 +++--- .../__snapshots__/FixedSizeGrid.js.snap | 52 ++++++++++++--- src/createGridComponent.js | 22 +++++-- website/src/routes/api/FixedSizeGrid.js | 30 ++++++++- 5 files changed, 147 insertions(+), 43 deletions(-) diff --git a/src/__tests__/FixedSizeGrid.js b/src/__tests__/FixedSizeGrid.js index 3d7bf90..aa1733a 100644 --- a/src/__tests__/FixedSizeGrid.js +++ b/src/__tests__/FixedSizeGrid.js @@ -211,15 +211,15 @@ describe('FixedSizeGrid', () => { }); }); - describe('overscanColumnsCount and overscanRowsCount', () => { + describe('overscanColumnCount and overscanRowCount', () => { it('should require a minimum of 1 overscan to support tabbing', () => { ReactTestRenderer.create( ); expect(onItemsRendered.mock.calls).toMatchSnapshot(); @@ -231,8 +231,8 @@ describe('FixedSizeGrid', () => { {...defaultProps} initialScrollLeft={250} initialScrollTop={250} - overscanColumnsCount={2} - overscanRowsCount={2} + overscanColumnCount={2} + overscanRowCount={2} /> ); rendered.getInstance().scrollTo({ scrollLeft: 1000, scrollTop: 1000 }); @@ -246,8 +246,8 @@ describe('FixedSizeGrid', () => { {...defaultProps} initialScrollLeft={250} initialScrollTop={250} - overscanColumnsCount={2} - overscanRowsCount={2} + overscanColumnCount={2} + overscanRowCount={2} /> ); expect(onItemsRendered.mock.calls).toMatchSnapshot(); @@ -259,8 +259,8 @@ describe('FixedSizeGrid', () => { {...defaultProps} initialScrollLeft={250} initialScrollTop={250} - overscanColumnsCount={2} - overscanRowsCount={2} + overscanColumnCount={2} + overscanRowCount={2} /> ); expect(onItemsRendered.mock.calls).toMatchSnapshot(); @@ -289,12 +289,17 @@ describe('FixedSizeGrid', () => { spyOn(console, 'warn'); const renderer = ReactTestRenderer.create( - + ); expect(console.warn).toHaveBeenCalledTimes(1); expect(console.warn).toHaveBeenLastCalledWith( - 'The overscanCount prop has been deprecated. ' + - 'Please use the overscanColumnsCount and overscanRowsCount props instead.' + 'The overscanCount, overscanColumnsCount and overscanRowsCount props have been deprecated. ' + + 'Please use the overscanColumnCount and overscanRowCount props instead.' ); renderer.update(); @@ -318,7 +323,7 @@ describe('FixedSizeGrid', () => { expect(onItemsRendered.mock.calls).toMatchSnapshot(); }); - it('should use overscanRowsCount if both it and overscanCount are provided', () => { + it('should use overscanRowCount if both it and overscanCount are provided', () => { spyOn(console, 'warn'); ReactTestRenderer.create( @@ -327,7 +332,25 @@ describe('FixedSizeGrid', () => { initialScrollLeft={100} initialScrollTop={100} overscanCount={2} - overscanRowsCount={3} + overscanRowCount={3} + /> + ); + expect(onItemsRendered.mock.calls).toMatchSnapshot(); + }); + + it('should use overscanColumnCount and overscanRowCount if both them and deprecated props are provided', () => { + spyOn(console, 'warn'); + + ReactTestRenderer.create( + ); expect(onItemsRendered.mock.calls).toMatchSnapshot(); @@ -346,6 +369,21 @@ describe('FixedSizeGrid', () => { ); expect(onItemsRendered.mock.calls).toMatchSnapshot(); }); + + it('should support deprecated overscanColumnsCount and overscanRowsCount', () => { + spyOn(console, 'warn'); + + ReactTestRenderer.create( + + ); + expect(onItemsRendered.mock.calls).toMatchSnapshot(); + }); }); }); diff --git a/src/__tests__/VariableSizeGrid.js b/src/__tests__/VariableSizeGrid.js index 7106539..871321c 100644 --- a/src/__tests__/VariableSizeGrid.js +++ b/src/__tests__/VariableSizeGrid.js @@ -106,8 +106,8 @@ describe('VariableSizeGrid', () => { columnWidth={columnWidth} estimatedColumnWidth={200} estimatedRowHeight={100} - overscanColumnsCount={0} - overscanRowsCount={0} + overscanColumnCount={0} + overscanRowCount={0} rowCount={50} rowHeight={rowHeight} /> @@ -131,8 +131,8 @@ describe('VariableSizeGrid', () => { columnWidth={columnWidth} estimatedColumnWidth={200} estimatedRowHeight={100} - overscanColumnsCount={0} - overscanRowsCount={0} + overscanColumnCount={0} + overscanRowCount={0} rowCount={50} rowHeight={rowHeight} /> @@ -439,8 +439,8 @@ describe('VariableSizeGrid', () => { {...defaultProps} estimatedColumnWidth={30} estimatedRowHeight={30} - overscanColumnsCount={1} - overscanRowsCount={1} + overscanColumnCount={1} + overscanRowCount={1} columnWidth={index => 50} rowHeight={index => 25} /> @@ -458,8 +458,8 @@ describe('VariableSizeGrid', () => { {...defaultProps} estimatedColumnWidth={30} estimatedRowHeight={30} - overscanColumnsCount={1} - overscanRowsCount={1} + overscanColumnCount={1} + overscanRowCount={1} columnWidth={index => 40} rowHeight={index => 20} /> @@ -481,8 +481,8 @@ describe('VariableSizeGrid', () => { {...defaultProps} estimatedColumnWidth={30} estimatedRowHeight={30} - overscanColumnsCount={1} - overscanRowsCount={1} + overscanColumnCount={1} + overscanRowCount={1} columnWidth={index => 40} rowHeight={index => 20} /> diff --git a/src/__tests__/__snapshots__/FixedSizeGrid.js.snap b/src/__tests__/__snapshots__/FixedSizeGrid.js.snap index 188a852..a2aa0ca 100644 --- a/src/__tests__/__snapshots__/FixedSizeGrid.js.snap +++ b/src/__tests__/__snapshots__/FixedSizeGrid.js.snap @@ -96,7 +96,7 @@ Array [ ] `; -exports[`FixedSizeGrid overscanColumnsCount and overscanRowsCount overscanCount should support deprecated overscanCount 1`] = ` +exports[`FixedSizeGrid overscanColumnCount and overscanRowCount overscanCount should support deprecated overscanColumnsCount and overscanRowsCount 1`] = ` Array [ Array [ Object { @@ -113,7 +113,41 @@ Array [ ] `; -exports[`FixedSizeGrid overscanColumnsCount and overscanRowsCount overscanCount should use overscanColumnsCount if both it and overscanCount are provided 1`] = ` +exports[`FixedSizeGrid overscanColumnCount and overscanRowCount overscanCount should support deprecated overscanCount 1`] = ` +Array [ + Array [ + Object { + "overscanColumnStartIndex": 0, + "overscanColumnStopIndex": 5, + "overscanRowStartIndex": 2, + "overscanRowStopIndex": 10, + "visibleColumnStartIndex": 1, + "visibleColumnStopIndex": 3, + "visibleRowStartIndex": 4, + "visibleRowStopIndex": 8, + }, + ], +] +`; + +exports[`FixedSizeGrid overscanColumnCount and overscanRowCount overscanCount should use overscanColumnCount and overscanRowCount if both them and deprecated props are provided 1`] = ` +Array [ + Array [ + Object { + "overscanColumnStartIndex": 0, + "overscanColumnStopIndex": 6, + "overscanRowStartIndex": 1, + "overscanRowStopIndex": 11, + "visibleColumnStartIndex": 1, + "visibleColumnStopIndex": 3, + "visibleRowStartIndex": 4, + "visibleRowStopIndex": 8, + }, + ], +] +`; + +exports[`FixedSizeGrid overscanColumnCount and overscanRowCount overscanCount should use overscanColumnsCount if both it and overscanCount are provided 1`] = ` Array [ Array [ Object { @@ -130,7 +164,7 @@ Array [ ] `; -exports[`FixedSizeGrid overscanColumnsCount and overscanRowsCount overscanCount should use overscanRowsCount if both it and overscanCount are provided 1`] = ` +exports[`FixedSizeGrid overscanColumnCount and overscanRowCount overscanCount should use overscanRowCount if both it and overscanCount are provided 1`] = ` Array [ Array [ Object { @@ -147,7 +181,7 @@ Array [ ] `; -exports[`FixedSizeGrid overscanColumnsCount and overscanRowsCount should accommodate a custom overscan 1`] = ` +exports[`FixedSizeGrid overscanColumnCount and overscanRowCount should accommodate a custom overscan 1`] = ` Array [ Array [ Object { @@ -164,7 +198,7 @@ Array [ ] `; -exports[`FixedSizeGrid overscanColumnsCount and overscanRowsCount should not scan past the beginning of the grid 1`] = ` +exports[`FixedSizeGrid overscanColumnCount and overscanRowCount should not scan past the beginning of the grid 1`] = ` Array [ Array [ Object { @@ -181,7 +215,7 @@ Array [ ] `; -exports[`FixedSizeGrid overscanColumnsCount and overscanRowsCount should not scan past the end of the grid 1`] = ` +exports[`FixedSizeGrid overscanColumnCount and overscanRowCount should not scan past the end of the grid 1`] = ` Array [ Array [ Object { @@ -198,7 +232,7 @@ Array [ ] `; -exports[`FixedSizeGrid overscanColumnsCount and overscanRowsCount should overscan in both directions when not scrolling 1`] = ` +exports[`FixedSizeGrid overscanColumnCount and overscanRowCount should overscan in both directions when not scrolling 1`] = ` Array [ Array [ Object { @@ -215,7 +249,7 @@ Array [ ] `; -exports[`FixedSizeGrid overscanColumnsCount and overscanRowsCount should overscan in the direction being scrolled 1`] = ` +exports[`FixedSizeGrid overscanColumnCount and overscanRowCount should overscan in the direction being scrolled 1`] = ` Array [ Array [ Object { @@ -256,7 +290,7 @@ Array [ ] `; -exports[`FixedSizeGrid overscanColumnsCount and overscanRowsCount should require a minimum of 1 overscan to support tabbing 1`] = ` +exports[`FixedSizeGrid overscanColumnCount and overscanRowCount should require a minimum of 1 overscan to support tabbing 1`] = ` Array [ Array [ Object { diff --git a/src/createGridComponent.js b/src/createGridComponent.js index 9d72582..6f0f65b 100644 --- a/src/createGridComponent.js +++ b/src/createGridComponent.js @@ -69,9 +69,11 @@ export type Props = {| outerRef?: any, outerElementType?: React$ElementType, outerTagName?: string, // deprecated - overscanColumnsCount?: number, + overscanColumnCount?: number, + overscanColumnsCount?: number, // deprecated overscanCount?: number, // deprecated - overscanRowsCount?: number, + overscanRowCount?: number, + overscanRowsCount?: number, // deprecated rowCount: number, rowHeight: itemSize, style?: Object, @@ -586,6 +588,7 @@ export default function createGridComponent({ _getHorizontalRangeToRender(): [number, number, number, number] { const { columnCount, + overscanColumnCount, overscanColumnsCount, overscanCount, rowCount, @@ -593,7 +596,7 @@ export default function createGridComponent({ const { horizontalScrollDirection, isScrolling, scrollLeft } = this.state; const overscanCountResolved: number = - overscanColumnsCount || overscanCount || 1; + overscanColumnCount || overscanColumnsCount || overscanCount || 1; if (columnCount === 0 || rowCount === 0) { return [0, 0, 0, 0]; @@ -634,13 +637,14 @@ export default function createGridComponent({ const { columnCount, overscanCount, + overscanRowCount, overscanRowsCount, rowCount, } = this.props; const { isScrolling, verticalScrollDirection, scrollTop } = this.state; const overscanCountResolved: number = - overscanRowsCount || overscanCount || 1; + overscanRowCount || overscanRowsCount || overscanCount || 1; if (columnCount === 0 || rowCount === 0) { return [0, 0, 0, 0]; @@ -774,12 +778,16 @@ const validateSharedProps = ( { instance }: State ): void => { if (process.env.NODE_ENV !== 'production') { - if (typeof overscanCount === 'number') { + if ( + typeof overscanCount === 'number' || + typeof overscanColumnsCount === 'number' || + typeof overscanRowsCount === 'number' + ) { if (devWarningsOverscanCount && !devWarningsOverscanCount.has(instance)) { devWarningsOverscanCount.add(instance); console.warn( - 'The overscanCount prop has been deprecated. ' + - 'Please use the overscanColumnsCount and overscanRowsCount props instead.' + 'The overscanCount, overscanColumnsCount and overscanRowsCount props have been deprecated. ' + + 'Please use the overscanColumnCount and overscanRowCount props instead.' ); } } diff --git a/website/src/routes/api/FixedSizeGrid.js b/website/src/routes/api/FixedSizeGrid.js index 0ba0261..eba4dd9 100644 --- a/website/src/routes/api/FixedSizeGrid.js +++ b/website/src/routes/api/FixedSizeGrid.js @@ -267,6 +267,18 @@ const PROPS = [ name: 'outerTagName', type: 'string', }, + { + description: ( +

+ + This property has been deprecated. + {' '} + Please use the overscanColumnCount property instead. +

+ ), + name: 'overscanColumnsCount', + type: 'number', + }, { defaultValue: 1, description: ( @@ -291,7 +303,7 @@ const PROPS = [

), - name: 'overscanColumnsCount', + name: 'overscanColumnCount', type: 'number', }, { @@ -300,13 +312,25 @@ const PROPS = [ This property has been deprecated. {' '} - Please use the overscanColumnsCount and{' '} - overscanRowsCount properties instead. + Please use the overscanColumnCount and{' '} + overscanRowCount properties instead.

), name: 'overscanCount', type: 'number', }, + { + description: ( +

+ + This property has been deprecated. + {' '} + Please use the overscanRowCount property instead. +

+ ), + name: 'overscanRowsCount', + type: 'number', + }, { defaultValue: 1, description: (