From b49bab680e1cd8d800e88ecc7d22ee077df57cd9 Mon Sep 17 00:00:00 2001 From: Neo Date: Thu, 2 Aug 2018 11:22:18 +0800 Subject: [PATCH] add shouldForceUpdate to resetAfterIndex --- src/VariableSizeGrid.js | 21 ++++-- src/VariableSizeList.js | 10 ++- src/__tests__/VariableSizeGrid.js | 13 ++++ src/__tests__/VariableSizeList.js | 9 +++ website/src/routes/api/VariableSizeGrid.js | 76 ++++++++++++++-------- website/src/routes/api/VariableSizeList.js | 23 ++++--- 6 files changed, 109 insertions(+), 43 deletions(-) diff --git a/src/VariableSizeGrid.js b/src/VariableSizeGrid.js index f2b8aaa..950c627 100644 --- a/src/VariableSizeGrid.js +++ b/src/VariableSizeGrid.js @@ -396,20 +396,28 @@ const VariableSizeGrid = createGridComponent({ rowMetadataMap: {}, }; - instance.resetAfterColumnIndex = (columnIndex: number) => { - this.resetAfterIndices({ columnIndex }); + instance.resetAfterColumnIndex = ( + columnIndex: number, + shouldForceUpdate?: boolean = true + ) => { + this.resetAfterIndices({ columnIndex, shouldForceUpdate }); }; - instance.resetAfterRowIndex = (rowIndex: number) => { - this.resetAfterIndices({ rowIndex }); + instance.resetAfterRowIndex = ( + rowIndex: number, + shouldForceUpdate?: boolean = true + ) => { + this.resetAfterIndices({ rowIndex, shouldForceUpdate }); }; instance.resetAfterIndices = ({ columnIndex, rowIndex, + shouldForceUpdate = true, }: { columnIndex?: number, rowIndex?: number, + shouldForceUpdate?: boolean, }) => { if (typeof columnIndex === 'number') { instanceProps.lastMeasuredColumnIndex = Math.min( @@ -429,7 +437,10 @@ const VariableSizeGrid = createGridComponent({ // It seems an unnecessary optimization. // It's unlikely that resetAfterIndex() will be called while a user is scrolling. instance._itemStyleCache = {}; - instance.forceUpdate(); + + if (shouldForceUpdate) { + instance.forceUpdate(); + } }; return instanceProps; diff --git a/src/VariableSizeList.js b/src/VariableSizeList.js index d7737f2..6475c23 100644 --- a/src/VariableSizeList.js +++ b/src/VariableSizeList.js @@ -251,7 +251,10 @@ const VariableSizeList = createListComponent({ lastMeasuredIndex: -1, }; - instance.resetAfterIndex = (index: number) => { + instance.resetAfterIndex = ( + index: number, + shouldForceUpdate?: boolean = true + ) => { instanceProps.lastMeasuredIndex = Math.min( instanceProps.lastMeasuredIndex, index - 1 @@ -262,7 +265,10 @@ const VariableSizeList = createListComponent({ // It seems an unnecessary optimization. // It's unlikely that resetAfterIndex() will be called while a user is scrolling. instance._itemStyleCache = {}; - instance.forceUpdate(); + + if (shouldForceUpdate) { + instance.forceUpdate(); + } }; return instanceProps; diff --git a/src/__tests__/VariableSizeGrid.js b/src/__tests__/VariableSizeGrid.js index b89ce81..4568a4c 100644 --- a/src/__tests__/VariableSizeGrid.js +++ b/src/__tests__/VariableSizeGrid.js @@ -206,6 +206,19 @@ describe('VariableSizeGrid', () => { }); describe('resetAfterIndex method', () => { + it('should not call forceUpdate if shouldForceUpdate is false', () => { + const rendered = ReactTestRenderer.create( + + ); + rendered.getInstance().forceUpdate = jest.fn(); + rendered.getInstance().resetAfterIndices({ + columnIndex: 5, + rowIndex: 15, + shouldForceUpdate: false, + }); + expect(rendered.getInstance().forceUpdate).toHaveBeenCalledTimes(0); + }); + it('should recalculate the estimated total size', () => { const columnWidth = jest.fn(() => 75); const rowHeight = jest.fn(() => 35); diff --git a/src/__tests__/VariableSizeList.js b/src/__tests__/VariableSizeList.js index 6a3af8b..4e6c250 100644 --- a/src/__tests__/VariableSizeList.js +++ b/src/__tests__/VariableSizeList.js @@ -168,6 +168,15 @@ describe('VariableSizeList', () => { }); describe('resetAfterIndex method', () => { + it('should not call forceUpdate if shouldForceUpdate is false', () => { + const rendered = ReactTestRenderer.create( + + ); + rendered.getInstance().forceUpdate = jest.fn(); + rendered.getInstance().resetAfterIndex(15, false); + expect(rendered.getInstance().forceUpdate).toHaveBeenCalledTimes(0); + }); + it('should recalculate the estimated total size', () => { const itemSize = jest.fn(() => 75); const rendered = ReactTestRenderer.create( diff --git a/website/src/routes/api/VariableSizeGrid.js b/website/src/routes/api/VariableSizeGrid.js index 52e1335..b39f3ce 100644 --- a/website/src/routes/api/VariableSizeGrid.js +++ b/website/src/routes/api/VariableSizeGrid.js @@ -96,39 +96,59 @@ const PROPS = [ const METHODS = [ { description: ( -

- VariableSizeGrid caches offsets and measurements for each - column index for performance purposes. This method clears that cached - data for all columns after (and including) the specified index. It - should be called whenever a column's width changes. (Note that this is - not a typical occurrance.) -

- ), - signature: 'resetAfterColumnIndex(index: number): void', - }, - { - description: ( -

- VariableSizeGrid caches offsets and measurements for each - item for performance purposes. This method clears that cached data for - all items after (and including) the specified indices. It should be - called whenever an items size changes. (Note that this is not a typical - occurrance.) -

+ +

+ VariableSizeGrid caches offsets and measurements for each + column index for performance purposes. This method clears that cached + data for all columns after (and including) the specified index. It + should be called whenever a column's width changes. (Note that this is + not a typical occurrance.) +

+

+ You can set shouldForceUpdate to false + to prevent the list calling forceUpdate internally. +

+ ), signature: - 'resetAfterIndices({ columnIndex: number, rowIndex: number }): void', + 'resetAfterColumnIndex(index: number, shouldForceUpdate: boolean = true): void', }, { description: ( -

- VariableSizeGrid caches offsets and measurements for each - row index for performance purposes. This method clears that cached data - for all rows after (and including) the specified index. It should be - called whenever a row's height changes. (Note that this is not a typical - occurrance.) -

+ +

+ VariableSizeGrid caches offsets and measurements for each + item for performance purposes. This method clears that cached data for + all items after (and including) the specified indices. It should be + called whenever an items size changes. (Note that this is not a + typical occurrance.) +

+

+ You can set shouldForceUpdate to false + to prevent the list calling forceUpdate internally. +

+ ), - signature: 'resetAfterRowIndex(index: number): void', + signature: + 'resetAfterIndices({ columnIndex: number, rowIndex: number, shouldForceUpdate: boolean = true }): void', + }, + { + description: ( + +

+ VariableSizeGrid caches offsets and measurements for each + row index for performance purposes. This method clears that cached + data for all rows after (and including) the specified index. It should + be called whenever a row's height changes. (Note that this is not a + typical occurrance.) +

+

+ You can set shouldForceUpdate to false + to prevent the list calling forceUpdate internally. +

+ + ), + signature: + 'resetAfterRowIndex(index: number, shouldForceUpdate: boolean = true): void', }, ]; diff --git a/website/src/routes/api/VariableSizeList.js b/website/src/routes/api/VariableSizeList.js index 4ac7e02..7f08e32 100644 --- a/website/src/routes/api/VariableSizeList.js +++ b/website/src/routes/api/VariableSizeList.js @@ -74,14 +74,21 @@ const PROPS = [ const METHODS = [ { description: ( -

- VariableSizeList caches offsets and measurements for each - index for performance purposes. This method clears that cached data for - all items after (and including) the specified index. It should be called - whenever a item's size changes. (Note that this is not a typical - occurrance.) -

+ +

+ VariableSizeList caches offsets and measurements for each + index for performance purposes. This method clears that cached data + for all items after (and including) the specified index. It should be + called whenever a item's size changes. (Note that this is not a + typical occurrance.) +

+

+ You can set shouldForceUpdate to false + to prevent the list calling forceUpdate internally. +

+ ), - signature: 'resetAfterIndex(index: number): void', + signature: + 'resetAfterIndex(index: number, shouldForceUpdate: boolean = true): void', }, ];