diff --git a/source/MultiGrid/MultiGrid.jest.js b/source/MultiGrid/MultiGrid.jest.js index 5e426b598..37023dbd3 100644 --- a/source/MultiGrid/MultiGrid.jest.js +++ b/source/MultiGrid/MultiGrid.jest.js @@ -300,4 +300,47 @@ describe('MultiGrid', () => { expect(bottomRightGrid.style.backgroundColor).toEqual('red') }) }) + describe('scrollTop and scrollLeft', () => { + it('should adjust :scrollLeft for top-right and main grids when scrollLeft is used', () => { + const rendered = findDOMNode(render(getMarkup({ + columnWidth: 50, + fixedColumnCount: 2, + scrollLeft: 850 + }))) + const grids = rendered.querySelectorAll('.ReactVirtualized__Grid') + const topRightGrid = grids[1] + const bottomRightGrid = grids[3] + expect(topRightGrid.scrollLeft).toEqual(850) + expect(bottomRightGrid.scrollLeft).toEqual(850) + }) + + it('should adjust :scrollTop for bottom-left and main grids when scrollTop is used', () => { + const rendered = findDOMNode(render(getMarkup({ + columnWidth: 50, + fixedColumnCount: 2, + scrollTop: 500 + }))) + const grids = rendered.querySelectorAll('.ReactVirtualized__Grid') + const bottomLeftGrid = grids[2] + const bottomRightGrid = grids[3] + expect(bottomLeftGrid.scrollTop).toEqual(500) + expect(bottomRightGrid.scrollTop).toEqual(500) + }) + + it('should adjust :scrollTop and :scrollLeft when scrollTop and scrollLeft change', () => { + render(getMarkup()) + const rendered = findDOMNode(render(getMarkup({ + scrollTop: 750, + scrollLeft: 900 + }))) + const grids = rendered.querySelectorAll('.ReactVirtualized__Grid') + const topRightGrid = grids[1] + const bottomLeftGrid = grids[2] + const bottomRightGrid = grids[3] + expect(topRightGrid.scrollLeft).toEqual(900) + expect(bottomRightGrid.scrollLeft).toEqual(900) + expect(bottomLeftGrid.scrollTop).toEqual(750) + expect(bottomRightGrid.scrollTop).toEqual(750) + }) + }) }) diff --git a/source/MultiGrid/MultiGrid.js b/source/MultiGrid/MultiGrid.js index bcfeb554b..9d4c469f2 100644 --- a/source/MultiGrid/MultiGrid.js +++ b/source/MultiGrid/MultiGrid.js @@ -116,6 +116,21 @@ export default class MultiGrid extends PureComponent { } componentDidMount () { + const { scrollLeft, scrollTop } = this.props + + if (scrollLeft > 0 || scrollTop > 0) { + const newState = {} + + if (scrollLeft > 0) { + newState.scrollLeft = scrollLeft + } + + if (scrollTop > 0) { + newState.scrollTop = scrollTop + } + + this.setState(newState) + } this._handleInvalidatedGridSize() } @@ -144,6 +159,29 @@ export default class MultiGrid extends PureComponent { this._topGridHeight = null } + if ( + nextProps.scrollLeft !== this.props.scrollLeft || + nextProps.scrollTop !== this.props.scrollTop + ) { + const newState = {} + + if ( + nextProps.scrollLeft != null && + nextProps.scrollLeft >= 0 + ) { + newState.scrollLeft = nextProps.scrollLeft + } + + if ( + nextProps.scrollTop != null && + nextProps.scrollTop >= 0 + ) { + newState.scrollTop = nextProps.scrollTop + } + + this.setState(newState) + } + this._maybeCalculateCachedStyles(this.props, nextProps, this.state, nextState) } @@ -165,7 +203,7 @@ export default class MultiGrid extends PureComponent { return null } - // scrollTop and scrollToRow props are explicitly filtered out and ignored + // scrollTop and scrollLeft props are explicitly filtered out and ignored const { scrollLeft,