diff --git a/source/CellMeasurer/CellMeasurer.jest.js b/source/CellMeasurer/CellMeasurer.jest.js index b9c6561fc..8fa53c419 100644 --- a/source/CellMeasurer/CellMeasurer.jest.js +++ b/source/CellMeasurer/CellMeasurer.jest.js @@ -223,8 +223,10 @@ describe('CellMeasurer', () => { (params) =>
) + let measurer; const node = findDOMNode(render( { measurer = ref }} cache={cache} columnIndex={0} parent={parent} @@ -235,12 +237,43 @@ describe('CellMeasurer', () => { )) - node.style.width = 100 - node.style.height = 30 - - child.mock.calls[0][0].measure() + const { height, width } = measurer._getCellMeasures(node) + expect(height).toBeGreaterThan(0) + expect(width).toBeGreaterThan(0) expect(node.style.height).toBe('auto') expect(node.style.width).not.toBe('auto') }) + + // See issue #660 + it('should set widht/height style to values before measuring with style "auto"', () => { + const cache = new CellMeasurerCache({ + fixedHeight: true + }) + const parent = createParent({ cache }) + const child = jest.fn() + child.mockImplementation( + (params) =>
+ ) + + const node = findDOMNode(render( + + {child} + + )) + + node.style.width = 200 + node.style.height = 60 + + child.mock.calls[0][0].measure() + + expect(node.style.height).toBe('30px') + expect(node.style.width).toBe('100px') + }) }) diff --git a/source/CellMeasurer/CellMeasurer.js b/source/CellMeasurer/CellMeasurer.js index b031e463e..9bdce94d7 100644 --- a/source/CellMeasurer/CellMeasurer.js +++ b/source/CellMeasurer/CellMeasurer.js @@ -41,6 +41,22 @@ export default class CellMeasurer extends PureComponent { : children } + _getCellMeasures (node) { + const { cache } = this.props + + if (!cache.hasFixedWidth()) { + node.style.width = 'auto' + } + if (!cache.hasFixedHeight()) { + node.style.height = 'auto' + } + + const height = Math.ceil(node.offsetHeight) + const width = Math.ceil(node.offsetWidth) + + return { height, width }; + } + _maybeMeasureCell () { const { cache, @@ -51,6 +67,8 @@ export default class CellMeasurer extends PureComponent { if (!cache.has(rowIndex, columnIndex)) { const node = findDOMNode(this) + const oldWidth = node.style.width + const oldHeight = node.style.height // TODO Check for a bad combination of fixedWidth and missing numeric width or vice versa with height @@ -58,16 +76,15 @@ export default class CellMeasurer extends PureComponent { // Explicitly clear width/height before measuring to avoid being tainted by another Grid. // eg top/left Grid renders before bottom/right Grid // Since the CellMeasurerCache is shared between them this taints derived cell size values. - if (!cache.hasFixedWidth()) { - node.style.width = 'auto' + const { height, width } = this._getCellMeasures(node); + + if (oldWidth) { + node.style.width = oldWidth } - if (!cache.hasFixedHeight()) { - node.style.height = 'auto' + if (oldHeight) { + node.style.height = oldHeight } - const height = Math.ceil(node.offsetHeight) - const width = Math.ceil(node.offsetWidth) - cache.set( rowIndex, columnIndex, @@ -97,22 +114,23 @@ export default class CellMeasurer extends PureComponent { } = this.props const node = findDOMNode(this) + const oldWidth = node.style.width + const oldHeight = node.style.height // If we are re-measuring a cell that has already been measured, // It will have a hard-coded width/height from the previous measurement. // The fact that we are measuring indicates this measurement is probably stale, // So explicitly clear it out (eg set to "auto") so we can recalculate. // See issue #593 for more info. - if (!cache.hasFixedWidth()) { - node.style.width = 'auto' + const { height, width } = this._getCellMeasures(node) + + if (oldWidth) { + node.style.width = oldWidth } - if (!cache.hasFixedHeight()) { - node.style.height = 'auto' + if (oldHeight) { + node.style.height = oldHeight } - const height = Math.ceil(node.offsetHeight) - const width = Math.ceil(node.offsetWidth) - if ( height !== cache.getHeight(rowIndex, columnIndex) || width !== cache.getWidth(rowIndex, columnIndex)