Add options to hide MultiGrid top-right and bottom-left grid scrollbars but still make the scroll events work on those grids #1040
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -30,6 +30,8 @@ class MultiGrid extends React.PureComponent { | |
| styleBottomRightGrid: PropTypes.object.isRequired, | ||
| styleTopLeftGrid: PropTypes.object.isRequired, | ||
| styleTopRightGrid: PropTypes.object.isRequired, | ||
| hideTopRightGridScrollbar: PropTypes.bool, | ||
| hideBottomLeftGridScrollbar: PropTypes.bool, | ||
| }; | ||
|
|
||
| static defaultProps = { | ||
|
|
@@ -48,6 +50,8 @@ class MultiGrid extends React.PureComponent { | |
| styleBottomRightGrid: {}, | ||
| styleTopLeftGrid: {}, | ||
| styleTopRightGrid: {}, | ||
| hideTopRightGridScrollbar: false, | ||
| hideBottomLeftGridScrollbar: false, | ||
| }; | ||
|
|
||
| state = { | ||
|
|
@@ -611,32 +615,54 @@ class MultiGrid extends React.PureComponent { | |
| fixedColumnCount, | ||
| fixedRowCount, | ||
| rowCount, | ||
| scrollTop, | ||
| hideBottomLeftGridScrollbar, | ||
| } = props; | ||
| const {showVerticalScrollbar} = this.state; | ||
|
|
||
| if (!fixedColumnCount) { | ||
| return null; | ||
| } | ||
|
|
||
| const additionalRowCount = showVerticalScrollbar ? 1 : 0, | ||
| height = this._getBottomGridHeight(props), | ||
| width = this._getLeftGridWidth(props), | ||
| scrollbarSize = this.state.showVerticalScrollbar ? this.state.scrollbarSize : 0, | ||
|
There was a problem hiding this comment.
There was a problem hiding this comment. I think state structure change in Grid but not in MutliGrid so it is working fine. So we are good here? |
||
| gridWidth = hideBottomLeftGridScrollbar ? width + scrollbarSize : width; | ||
|
|
||
| const bottomLeftGrid = ( | ||
| <Grid | ||
| {...props} | ||
| cellRenderer={this._cellRendererBottomLeftGrid} | ||
| className={this.props.classNameBottomLeftGrid} | ||
| columnCount={fixedColumnCount} | ||
| deferredMeasurementCache={this._deferredMeasurementCacheBottomLeftGrid} | ||
| height={height} | ||
| onScroll={enableFixedColumnScroll ? this._onScrollTop : undefined} | ||
| ref={this._bottomLeftGridRef} | ||
| rowCount={Math.max(0, rowCount - fixedRowCount) + additionalRowCount} | ||
| rowHeight={this._rowHeightBottomGrid} | ||
| style={this._bottomLeftGridStyle} | ||
| tabIndex={null} | ||
| width={gridWidth} | ||
| /> | ||
| ); | ||
|
|
||
| if (hideBottomLeftGridScrollbar) { | ||
| return ( | ||
| <div | ||
| className="BottomLeftGrid_ScrollWrapper" | ||
| style={{ | ||
| ...this._bottomLeftGridStyle, | ||
| height, | ||
| width, | ||
| overflowY: 'hidden', | ||
| }}> | ||
| {bottomLeftGrid} | ||
| </div> | ||
| ); | ||
| } | ||
| return bottomLeftGrid; | ||
| } | ||
|
|
||
| _renderBottomRightGrid(props) { | ||
|
|
@@ -700,16 +726,31 @@ class MultiGrid extends React.PureComponent { | |
| fixedColumnCount, | ||
| fixedRowCount, | ||
| scrollLeft, | ||
| hideTopRightGridScrollbar, | ||
| } = props; | ||
| const {showHorizontalScrollbar, scrollbarSize} = this.state; | ||
|
|
||
| if (!fixedRowCount) { | ||
| return null; | ||
| } | ||
|
|
||
| const additionalColumnCount = showHorizontalScrollbar ? 1 : 0, | ||
| height = this._getTopGridHeight(props), | ||
| width = this._getRightGridWidth(props), | ||
| additionalHeight = showHorizontalScrollbar ? scrollbarSize : 0; | ||
|
|
||
| let gridHeight = height, | ||
| style = this._topRightGridStyle; | ||
|
|
||
| if (hideTopRightGridScrollbar) { | ||
| gridHeight = height + additionalHeight; | ||
| style = { | ||
| ...this._topRightGridStyle, | ||
| left: 0, | ||
| }; | ||
| } | ||
|
|
||
| const topRightGrid = ( | ||
| <Grid | ||
| {...props} | ||
| cellRenderer={this._cellRendererTopRightGrid} | ||
|
|
@@ -719,16 +760,32 @@ class MultiGrid extends React.PureComponent { | |
| } | ||
| columnWidth={this._columnWidthRightGrid} | ||
| deferredMeasurementCache={this._deferredMeasurementCacheTopRightGrid} | ||
| height={gridHeight} | ||
| onScroll={enableFixedRowScroll ? this._onScrollLeft : undefined} | ||
| ref={this._topRightGridRef} | ||
| rowCount={fixedRowCount} | ||
| scrollLeft={scrollLeft} | ||
| style={style} | ||
| tabIndex={null} | ||
| width={width} | ||
| /> | ||
| ); | ||
|
|
||
| if (hideTopRightGridScrollbar) { | ||
| return ( | ||
| <div | ||
| className="TopRightGrid_ScrollWrapper" | ||
| style={{ | ||
| ...this._topRightGridStyle, | ||
| height, | ||
| width, | ||
| overflowX: 'hidden', | ||
|
There was a problem hiding this comment. I don't think you need to wrap it in another div If you need to. you can just modify this._topRightGridStyle = {
...this._topRightGridStyle,
height,
width,
overflowX: 'hidden'
}Unless Im misunderstanding something :) There was a problem hiding this comment. Yes. We need this extra wrapper so we can hide the scrollbar with a hack. There was a problem hiding this comment. @wuweiweiwu , are you waiting for some change here? |
||
| }}> | ||
| {topRightGrid} | ||
| </div> | ||
| ); | ||
| } | ||
| return topRightGrid; | ||
| } | ||
|
|
||
| _rowHeightBottomGrid = ({index}) => { | ||
|
|
||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit: I don't think there is a need to specify defaultProps for these. Since it would be
undefinedif not passed in. Which is a falsey valueThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I added because there was an existing pattern for
enableFixedColumnScrollandenableFixedRowScroll. So followed it.