Skip to content

Commit 22135ed

Browse files
committed
Added more pass-thru props from to to ensure that when re-renders (due to changed props) so does its inner .
Both components are still pure (from a shallow comparison perspective). This just avoids the unintuitive use-case where some table properties (eg headers) may change while others (eg rows) do not.
1 parent ff822fe commit 22135ed

File tree

4 files changed

+58
-24
lines changed

4 files changed

+58
-24
lines changed

CHANGELOG.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
Changelog
22
------------
33

4+
##### 7.11.2
5+
Added more pass-thru props from `FlexTable` to `Grid` to ensure that when `FlexTable` re-renders (due to changed props) so does its inner `Grid`.
6+
Both components are still "pure" (from a shallow comparison perspective).
7+
This just avoids the unintuitive use-case where some table properties (eg headers) may change while others (eg rows) do not.
8+
49
##### 7.11.1
510
Updated UMD build to remove `react-addons-shallow-compare` from the build.
611
UMD users should use `react-with-addons.min.js` (should have already been using it in fact) instead of `react.min.js`.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"description": "React components for efficiently rendering large, scrollable lists and tabular data",
44
"author": "Brian Vaughn <[email protected]>",
55
"user": "bvaughn",
6-
"version": "7.11.1",
6+
"version": "7.11.2",
77
"homepage": "https://github.com/bvaughn/react-virtualized",
88
"main": "dist/commonjs/index.js",
99
"jsnext:main": "dist/es/index.js",

source/FlexTable/FlexTable.js

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -224,28 +224,18 @@ export default class FlexTable extends Component {
224224

225225
render () {
226226
const {
227-
autoHeight,
228227
children,
229228
className,
230229
disableHeader,
231-
estimatedRowSize,
232230
gridClassName,
233231
gridStyle,
234232
headerHeight,
235233
height,
236234
noRowsRenderer,
237-
overscanRowCount,
238235
rowClassName,
239-
rowHeight,
240-
rowCount,
241236
rowStyle,
242-
scrollToAlignment,
243237
scrollToIndex,
244-
scrollTop,
245-
sortBy,
246-
sortDirection,
247238
style,
248-
tabIndex,
249239
width
250240
} = this.props
251241
const { scrollbarWidth } = this.state
@@ -283,33 +273,21 @@ export default class FlexTable extends Component {
283273
)}
284274

285275
<Grid
286-
aria-label={this.props['aria-label']}
287-
autoHeight={autoHeight}
276+
{...this.props}
288277
className={cn('FlexTable__Grid', gridClassName)}
289278
cellClassName={this._cellClassName}
290279
cellRenderer={this._createRow}
291280
cellStyle={this._cellStyle}
292281
columnWidth={width}
293282
columnCount={1}
294-
estimatedRowSize={estimatedRowSize}
295283
height={availableRowsHeight}
296284
noContentRenderer={noRowsRenderer}
297-
numChildren={this._cachedColumnStyles.length}
298285
onScroll={this._onScroll}
299286
onSectionRendered={this._onSectionRendered}
300-
overscanRowCount={overscanRowCount}
301287
ref='Grid'
302-
rowHeight={rowHeight}
303-
rowCount={rowCount}
304288
scrollbarWidth={scrollbarWidth}
305-
scrollToAlignment={scrollToAlignment}
306289
scrollToRow={scrollToIndex}
307-
scrollTop={scrollTop}
308-
sortBy={sortBy}
309-
sortDirection={sortDirection}
310290
style={gridStyle}
311-
tabIndex={tabIndex}
312-
width={width}
313291
/>
314292
</div>
315293
)

source/FlexTable/FlexTable.test.js

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -922,5 +922,56 @@ describe('FlexTable', () => {
922922
expect(headerRendererCalled).toEqual(false)
923923
expect(cellRendererCalled).toEqual(false)
924924
})
925+
926+
it('should re-render both the FlexTable and the inner Grid whenever an external property changes', () => {
927+
let headerRendererCalled = false
928+
let cellRendererCalled = false
929+
function headerRenderer () {
930+
headerRendererCalled = true
931+
return 'foo'
932+
}
933+
function cellRenderer () {
934+
cellRendererCalled = true
935+
return 'foo'
936+
}
937+
const initialProperties = {
938+
autoHeight: false,
939+
cellRenderer,
940+
estimatedRowSize: 15,
941+
headerRenderer,
942+
overscanRowCount: 1,
943+
rowHeight: 15,
944+
rowCount: 20,
945+
scrollToAlignment: 'auto',
946+
scrollTop: 0,
947+
sortBy: 'name',
948+
sortDirection: SortDirection.ASC,
949+
tabIndex: null
950+
}
951+
const changedProperties = {
952+
autoHeight: true,
953+
estimatedRowSize: 10,
954+
overscanRowCount: 0,
955+
rowHeight: 10,
956+
rowCount: 10,
957+
scrollToAlignment: 'center',
958+
scrollTop: 1,
959+
sortBy: 'email',
960+
sortDirection: SortDirection.DESC,
961+
tabIndex: 1
962+
}
963+
Object.entries(changedProperties).forEach(([key, value]) => {
964+
render.unmount() // Reset
965+
render(getMarkup(initialProperties))
966+
headerRendererCalled = true
967+
cellRendererCalled = false
968+
render(getMarkup({
969+
...initialProperties,
970+
[key]: value
971+
}))
972+
expect(headerRendererCalled).toEqual(true)
973+
expect(cellRendererCalled).toEqual(true)
974+
})
975+
})
925976
})
926977
})

0 commit comments

Comments
 (0)