From 5f2241ff9fe1a37831ba8a2dc22bebab6d0362ae Mon Sep 17 00:00:00 2001 From: Dan Alloway Date: Mon, 19 Jun 2017 13:06:12 -0400 Subject: [PATCH 1/5] allow fixed section scrolling --- source/MultiGrid/MultiGrid.js | 36 +++++++++++++++++++++++++++++++---- 1 file changed, 32 insertions(+), 4 deletions(-) diff --git a/source/MultiGrid/MultiGrid.js b/source/MultiGrid/MultiGrid.js index 360662fcb..c5bdb746f 100644 --- a/source/MultiGrid/MultiGrid.js +++ b/source/MultiGrid/MultiGrid.js @@ -52,6 +52,8 @@ export default class MultiGrid extends PureComponent { this._cellRendererTopRightGrid = this._cellRendererTopRightGrid.bind(this) this._columnWidthRightGrid = this._columnWidthRightGrid.bind(this) this._onScroll = this._onScroll.bind(this) + this._onScrollLeft = this._onScrollLeft.bind(this) + this._onScrollTop = this._onScrollTop.bind(this) this._rowHeightBottomGrid = this._rowHeightBottomGrid.bind(this) this._topLeftGridRef = this._topLeftGridRef.bind(this) this._topRightGridRef = this._topRightGridRef.bind(this) @@ -246,12 +248,14 @@ export default class MultiGrid extends PureComponent { {this._renderTopLeftGrid(rest)} {this._renderTopRightGrid({ ...rest, + onScroll, scrollLeft })}
{this._renderBottomLeftGrid({ ...rest, + onScroll, scrollTop })} {this._renderBottomRightGrid({ @@ -501,8 +505,8 @@ export default class MultiGrid extends PureComponent { ) { this._bottomLeftGridStyle = { left: 0, - overflowX: 'hidden', - overflowY: 'hidden', + overflowX: 'auto', + overflowY: 'auto', position: 'absolute', ...styleBottomLeftGrid } @@ -541,8 +545,8 @@ export default class MultiGrid extends PureComponent { ) { this._topRightGridStyle = { left: this._getLeftGridWidth(props), - overflowX: 'hidden', - overflowY: 'hidden', + overflowX: 'auto', + overflowY: 'auto', position: 'absolute', top: 0, ...styleTopRightGrid @@ -562,6 +566,28 @@ export default class MultiGrid extends PureComponent { } } + _onScrollLeft (scrollInfo) { + const {scrollLeft} = scrollInfo + this.setState({ + scrollLeft + }) + const onScroll = this.props.onScroll + if (onScroll) { + onScroll(scrollInfo) + } + } + + _onScrollTop (scrollInfo) { + const {scrollTop} = scrollInfo + this.setState({ + scrollTop + }) + const onScroll = this.props.onScroll + if (onScroll) { + onScroll(scrollInfo) + } + } + _renderBottomLeftGrid (props) { const { fixedColumnCount, @@ -581,6 +607,7 @@ export default class MultiGrid extends PureComponent { columnCount={fixedColumnCount} deferredMeasurementCache={this._deferredMeasurementCacheBottomLeftGrid} height={this._getBottomGridHeight(props)} + onScroll={this._onScrollTop} ref={this._bottomLeftGridRef} rowCount={Math.max(0, rowCount - fixedRowCount) + 1/* See _rowHeightBottomGrid */} rowHeight={this._rowHeightBottomGrid} @@ -666,6 +693,7 @@ export default class MultiGrid extends PureComponent { columnWidth={this._columnWidthRightGrid} deferredMeasurementCache={this._deferredMeasurementCacheTopRightGrid} height={this._getTopGridHeight(props)} + onScroll={this._onScrollLeft} ref={this._topRightGridRef} rowCount={fixedRowCount} scrollLeft={scrollLeft} From 568efa60028db4455dc17440c5a200cfec4dd835 Mon Sep 17 00:00:00 2001 From: Dan Alloway Date: Mon, 19 Jun 2017 13:10:06 -0400 Subject: [PATCH 2/5] fixed tests --- source/MultiGrid/MultiGrid.jest.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/source/MultiGrid/MultiGrid.jest.js b/source/MultiGrid/MultiGrid.jest.js index 5613a7e8e..0ea7b2533 100644 --- a/source/MultiGrid/MultiGrid.jest.js +++ b/source/MultiGrid/MultiGrid.jest.js @@ -50,10 +50,10 @@ describe('MultiGrid', () => { const [topLeft, topRight, bottomLeft, bottomRight] = grids expect(topLeft.style.getPropertyValue('overflow-x')).toEqual('hidden') expect(topLeft.style.getPropertyValue('overflow-y')).toEqual('hidden') - expect(topRight.style.getPropertyValue('overflow-x')).toEqual('hidden') - expect(topRight.style.getPropertyValue('overflow-y')).toEqual('hidden') - expect(bottomLeft.style.getPropertyValue('overflow-x')).toEqual('hidden') - expect(bottomLeft.style.getPropertyValue('overflow-y')).toEqual('hidden') + expect(topRight.style.getPropertyValue('overflow-x')).toEqual('auto') + expect(topRight.style.getPropertyValue('overflow-y')).toEqual('auto') + expect(bottomLeft.style.getPropertyValue('overflow-x')).toEqual('auto') + expect(bottomLeft.style.getPropertyValue('overflow-y')).toEqual('auto') expect(bottomRight.style.getPropertyValue('overflow-x')).toEqual('auto') expect(bottomRight.style.getPropertyValue('overflow-y')).toEqual('auto') }) @@ -66,8 +66,8 @@ describe('MultiGrid', () => { const grids = rendered.querySelectorAll('.ReactVirtualized__Grid') expect(grids.length).toEqual(2) const [bottomLeft, bottomRight] = grids - expect(bottomLeft.style.getPropertyValue('overflow-x')).toEqual('hidden') - expect(bottomLeft.style.getPropertyValue('overflow-y')).toEqual('hidden') + expect(bottomLeft.style.getPropertyValue('overflow-x')).toEqual('auto') + expect(bottomLeft.style.getPropertyValue('overflow-y')).toEqual('auto') expect(bottomRight.style.getPropertyValue('overflow-x')).toEqual('auto') expect(bottomRight.style.getPropertyValue('overflow-y')).toEqual('auto') }) @@ -80,8 +80,8 @@ describe('MultiGrid', () => { const grids = rendered.querySelectorAll('.ReactVirtualized__Grid') expect(grids.length).toEqual(2) const [topRight, bottomRight] = grids - expect(topRight.style.getPropertyValue('overflow-x')).toEqual('hidden') - expect(topRight.style.getPropertyValue('overflow-y')).toEqual('hidden') + expect(topRight.style.getPropertyValue('overflow-x')).toEqual('auto') + expect(topRight.style.getPropertyValue('overflow-y')).toEqual('auto') expect(bottomRight.style.getPropertyValue('overflow-x')).toEqual('auto') expect(bottomRight.style.getPropertyValue('overflow-y')).toEqual('auto') }) From 1d90e71657ff0a7d637827db5bd702085768a3b6 Mon Sep 17 00:00:00 2001 From: Dan Alloway Date: Thu, 22 Jun 2017 16:26:12 -0400 Subject: [PATCH 3/5] fix overflow visibilities --- source/MultiGrid/MultiGrid.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/source/MultiGrid/MultiGrid.js b/source/MultiGrid/MultiGrid.js index c5bdb746f..391cd3cf3 100644 --- a/source/MultiGrid/MultiGrid.js +++ b/source/MultiGrid/MultiGrid.js @@ -505,7 +505,7 @@ export default class MultiGrid extends PureComponent { ) { this._bottomLeftGridStyle = { left: 0, - overflowX: 'auto', + overflowX: 'hidden', overflowY: 'auto', position: 'absolute', ...styleBottomLeftGrid @@ -546,7 +546,7 @@ export default class MultiGrid extends PureComponent { this._topRightGridStyle = { left: this._getLeftGridWidth(props), overflowX: 'auto', - overflowY: 'auto', + overflowY: 'hidden', position: 'absolute', top: 0, ...styleTopRightGrid From b3a086a9377ec70014fe0fa68a6f81c0ac9739a7 Mon Sep 17 00:00:00 2001 From: Dan Alloway Date: Thu, 22 Jun 2017 16:27:11 -0400 Subject: [PATCH 4/5] adjust tests for visibility tweak --- source/MultiGrid/MultiGrid.jest.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/source/MultiGrid/MultiGrid.jest.js b/source/MultiGrid/MultiGrid.jest.js index 0ea7b2533..afe58d471 100644 --- a/source/MultiGrid/MultiGrid.jest.js +++ b/source/MultiGrid/MultiGrid.jest.js @@ -51,8 +51,8 @@ describe('MultiGrid', () => { expect(topLeft.style.getPropertyValue('overflow-x')).toEqual('hidden') expect(topLeft.style.getPropertyValue('overflow-y')).toEqual('hidden') expect(topRight.style.getPropertyValue('overflow-x')).toEqual('auto') - expect(topRight.style.getPropertyValue('overflow-y')).toEqual('auto') - expect(bottomLeft.style.getPropertyValue('overflow-x')).toEqual('auto') + expect(topRight.style.getPropertyValue('overflow-y')).toEqual('hidden') + expect(bottomLeft.style.getPropertyValue('overflow-x')).toEqual('hidden') expect(bottomLeft.style.getPropertyValue('overflow-y')).toEqual('auto') expect(bottomRight.style.getPropertyValue('overflow-x')).toEqual('auto') expect(bottomRight.style.getPropertyValue('overflow-y')).toEqual('auto') @@ -66,7 +66,7 @@ describe('MultiGrid', () => { const grids = rendered.querySelectorAll('.ReactVirtualized__Grid') expect(grids.length).toEqual(2) const [bottomLeft, bottomRight] = grids - expect(bottomLeft.style.getPropertyValue('overflow-x')).toEqual('auto') + expect(bottomLeft.style.getPropertyValue('overflow-x')).toEqual('hidden') expect(bottomLeft.style.getPropertyValue('overflow-y')).toEqual('auto') expect(bottomRight.style.getPropertyValue('overflow-x')).toEqual('auto') expect(bottomRight.style.getPropertyValue('overflow-y')).toEqual('auto') @@ -81,7 +81,7 @@ describe('MultiGrid', () => { expect(grids.length).toEqual(2) const [topRight, bottomRight] = grids expect(topRight.style.getPropertyValue('overflow-x')).toEqual('auto') - expect(topRight.style.getPropertyValue('overflow-y')).toEqual('auto') + expect(topRight.style.getPropertyValue('overflow-y')).toEqual('hidden') expect(bottomRight.style.getPropertyValue('overflow-x')).toEqual('auto') expect(bottomRight.style.getPropertyValue('overflow-y')).toEqual('auto') }) From 8af9e57ee59065a25335ca62d30c2ff8211b2754 Mon Sep 17 00:00:00 2001 From: Dan Alloway Date: Fri, 23 Jun 2017 10:43:46 -0400 Subject: [PATCH 5/5] clean up everything before PR --- source/MultiGrid/MultiGrid.jest.js | 28 ++++++++++++++++++++---- source/MultiGrid/MultiGrid.js | 34 ++++++++++++++++-------------- 2 files changed, 42 insertions(+), 20 deletions(-) diff --git a/source/MultiGrid/MultiGrid.jest.js b/source/MultiGrid/MultiGrid.jest.js index afe58d471..d067ca343 100644 --- a/source/MultiGrid/MultiGrid.jest.js +++ b/source/MultiGrid/MultiGrid.jest.js @@ -50,10 +50,10 @@ describe('MultiGrid', () => { const [topLeft, topRight, bottomLeft, bottomRight] = grids expect(topLeft.style.getPropertyValue('overflow-x')).toEqual('hidden') expect(topLeft.style.getPropertyValue('overflow-y')).toEqual('hidden') - expect(topRight.style.getPropertyValue('overflow-x')).toEqual('auto') + expect(topRight.style.getPropertyValue('overflow-x')).toEqual('hidden') expect(topRight.style.getPropertyValue('overflow-y')).toEqual('hidden') expect(bottomLeft.style.getPropertyValue('overflow-x')).toEqual('hidden') - expect(bottomLeft.style.getPropertyValue('overflow-y')).toEqual('auto') + expect(bottomLeft.style.getPropertyValue('overflow-y')).toEqual('hidden') expect(bottomRight.style.getPropertyValue('overflow-x')).toEqual('auto') expect(bottomRight.style.getPropertyValue('overflow-y')).toEqual('auto') }) @@ -67,7 +67,7 @@ describe('MultiGrid', () => { expect(grids.length).toEqual(2) const [bottomLeft, bottomRight] = grids expect(bottomLeft.style.getPropertyValue('overflow-x')).toEqual('hidden') - expect(bottomLeft.style.getPropertyValue('overflow-y')).toEqual('auto') + expect(bottomLeft.style.getPropertyValue('overflow-y')).toEqual('hidden') expect(bottomRight.style.getPropertyValue('overflow-x')).toEqual('auto') expect(bottomRight.style.getPropertyValue('overflow-y')).toEqual('auto') }) @@ -80,7 +80,7 @@ describe('MultiGrid', () => { const grids = rendered.querySelectorAll('.ReactVirtualized__Grid') expect(grids.length).toEqual(2) const [topRight, bottomRight] = grids - expect(topRight.style.getPropertyValue('overflow-x')).toEqual('auto') + expect(topRight.style.getPropertyValue('overflow-x')).toEqual('hidden') expect(topRight.style.getPropertyValue('overflow-y')).toEqual('hidden') expect(bottomRight.style.getPropertyValue('overflow-x')).toEqual('auto') expect(bottomRight.style.getPropertyValue('overflow-y')).toEqual('auto') @@ -115,6 +115,26 @@ describe('MultiGrid', () => { }))) expect(rendered.querySelectorAll('.ReactVirtualized__Grid').length).toEqual(2) }) + + it('should allow scrolling of fixed Grids when configured for fixed columns and rows with scroll interaction', () => { + const rendered = findDOMNode(render(getMarkup({ + fixedColumnCount: 1, + fixedColumnScrollInteraction: true, + fixedRowCount: 1, + fixedRowScrollInteraction: true + }))) + const grids = rendered.querySelectorAll('.ReactVirtualized__Grid') + expect(grids.length).toEqual(4) + const [topLeft, topRight, bottomLeft, bottomRight] = grids + expect(topLeft.style.getPropertyValue('overflow-x')).toEqual('hidden') + expect(topLeft.style.getPropertyValue('overflow-y')).toEqual('hidden') + expect(topRight.style.getPropertyValue('overflow-x')).toEqual('auto') + expect(topRight.style.getPropertyValue('overflow-y')).toEqual('hidden') + expect(bottomLeft.style.getPropertyValue('overflow-x')).toEqual('hidden') + expect(bottomLeft.style.getPropertyValue('overflow-y')).toEqual('auto') + expect(bottomRight.style.getPropertyValue('overflow-x')).toEqual('auto') + expect(bottomRight.style.getPropertyValue('overflow-y')).toEqual('auto') + }) }) describe('#recomputeGridSize', () => { diff --git a/source/MultiGrid/MultiGrid.js b/source/MultiGrid/MultiGrid.js index 391cd3cf3..038f24244 100644 --- a/source/MultiGrid/MultiGrid.js +++ b/source/MultiGrid/MultiGrid.js @@ -16,7 +16,9 @@ const SCROLLBAR_SIZE_BUFFER = 20 export default class MultiGrid extends PureComponent { static propTypes = { fixedColumnCount: PropTypes.number.isRequired, + fixedColumnScrollInteraction: PropTypes.bool.isRequired, fixedRowCount: PropTypes.number.isRequired, + fixedRowScrollInteraction: PropTypes.bool.isRequired, style: PropTypes.object.isRequired, styleBottomLeftGrid: PropTypes.object.isRequired, styleBottomRightGrid: PropTypes.object.isRequired, @@ -26,7 +28,9 @@ export default class MultiGrid extends PureComponent { static defaultProps = { fixedColumnCount: 0, + fixedColumnScrollInteraction: false, fixedRowCount: 0, + fixedRowScrollInteraction: false, style: {}, styleBottomLeftGrid: {}, styleBottomRightGrid: {}, @@ -440,7 +444,9 @@ export default class MultiGrid extends PureComponent { columnWidth, height, fixedColumnCount, + fixedColumnScrollInteraction, fixedRowCount, + fixedRowScrollInteraction, rowHeight, style, styleBottomLeftGrid, @@ -506,7 +512,7 @@ export default class MultiGrid extends PureComponent { this._bottomLeftGridStyle = { left: 0, overflowX: 'hidden', - overflowY: 'auto', + overflowY: fixedColumnScrollInteraction ? 'auto' : 'hidden', position: 'absolute', ...styleBottomLeftGrid } @@ -545,7 +551,7 @@ export default class MultiGrid extends PureComponent { ) { this._topRightGridStyle = { left: this._getLeftGridWidth(props), - overflowX: 'auto', + overflowX: fixedRowScrollInteraction ? 'auto' : 'hidden', overflowY: 'hidden', position: 'absolute', top: 0, @@ -568,29 +574,24 @@ export default class MultiGrid extends PureComponent { _onScrollLeft (scrollInfo) { const {scrollLeft} = scrollInfo - this.setState({ - scrollLeft + this._onScroll({ + scrollLeft, + scrollTop: this.state.scrollTop }) - const onScroll = this.props.onScroll - if (onScroll) { - onScroll(scrollInfo) - } } _onScrollTop (scrollInfo) { const {scrollTop} = scrollInfo - this.setState({ - scrollTop + this._onScroll({ + scrollTop, + scrollLeft: this.state.scrollLeft }) - const onScroll = this.props.onScroll - if (onScroll) { - onScroll(scrollInfo) - } } _renderBottomLeftGrid (props) { const { fixedColumnCount, + fixedColumnScrollInteraction, fixedRowCount, rowCount, scrollTop @@ -607,7 +608,7 @@ export default class MultiGrid extends PureComponent { columnCount={fixedColumnCount} deferredMeasurementCache={this._deferredMeasurementCacheBottomLeftGrid} height={this._getBottomGridHeight(props)} - onScroll={this._onScrollTop} + onScroll={fixedColumnScrollInteraction ? this._onScrollTop : undefined} ref={this._bottomLeftGridRef} rowCount={Math.max(0, rowCount - fixedRowCount) + 1/* See _rowHeightBottomGrid */} rowHeight={this._rowHeightBottomGrid} @@ -678,6 +679,7 @@ export default class MultiGrid extends PureComponent { columnCount, fixedColumnCount, fixedRowCount, + fixedRowScrollInteraction, scrollLeft } = props @@ -693,7 +695,7 @@ export default class MultiGrid extends PureComponent { columnWidth={this._columnWidthRightGrid} deferredMeasurementCache={this._deferredMeasurementCacheTopRightGrid} height={this._getTopGridHeight(props)} - onScroll={this._onScrollLeft} + onScroll={fixedRowScrollInteraction ? this._onScrollLeft : undefined} ref={this._topRightGridRef} rowCount={fixedRowCount} scrollLeft={scrollLeft}