Add options to hide MultiGrid top-right and bottom-left grid scrollbars but still make the scroll events work on those grids #1040
Conversation
RaviDasari
changed the title
|
I am running tests and will add tests soon. @bvaughn what do you think of this fix? |
| ...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 = {
...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?
RaviDasari
changed the title
source/MultiGrid/MultiGrid.js
Outdated
| const additionalColumnCount = showHorizontalScrollbar ? 1 : 0, | ||
| height = this._getTopGridHeight(props), | ||
| width = this._getRightGridWidth(props), | ||
| scrollbarSize = this.state.showHorizontalScrollbar ? this.state.scrollbarSize : 0; |
There was a problem hiding this comment.
nit: showHorizontalScrollbar is already deconstructed above. scrollbarSize can also be put there.
| @@ -47,6 +49,8 @@ export default class MultiGrid extends React.PureComponent { | |||
| styleBottomRightGrid: {}, | |||
| styleTopLeftGrid: {}, | |||
| styleTopRightGrid: {}, | |||
| hideTopRightGridScrollbar: false, | |||
There was a problem hiding this comment.
nit: I don't think there is a need to specify defaultProps for these. Since it would be undefined if not passed in. Which is a falsey value
There was a problem hiding this comment.
I added because there was an existing pattern for enableFixedColumnScroll and enableFixedRowScroll. So followed it.
|
What's the status on this PR? |
|
Was busy with work, will update the PR soon. |
|
@wuweiweiwu , I think I addressed all the comments and added tests. Also added docs. |
|
Any updates on this PR? |
|
@RaviDasari @DGulshan looks good to me. I want to wait for #1053 to get in first |
|
I'll to make sure that the test pass with the new changes in Grid. but it looks good so far! |
source/MultiGrid/MultiGrid.js
Outdated
| 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.
scrollbarSize is now in state.instanceProps.
There was a problem hiding this comment.
I think state structure change in Grid but not in MutliGrid so it is working fine.
Also, I ran yarn lint and it seem to be all good too.
So we are good here?
…into hide-multigrid-scrollbars
|
@wuweiweiwu looks like my code had couple of lint errors, fixed them along with few other issues I found in other parts of the code. Though it is irrelevant as part of this PR but I hope it is fine. Update: all tests are green. |
|
Looks good! tests pass. I think this can land in the 9.19.0 release |
The main issue here is that we want scroll events to work on top-right and bottom-left grids but dont want those scrollbars. I fixed this issue with simple css and an extra container. This stackoverflow is the inspiration for my solution. here is how it looks - observe that in the below demo, I could use mouse scroll to scroll through the MultiGrid though the top-right and bottom-left grids doesn't show any scrollbars.
I tested this in latest chrome, firefox, edge and IE11 and it works. in short, I am simply hiding the scrollbar by adding an extra container. So I am sure this works in all browsers.