Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Column Resizer Double Click Listener #617

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Column Resizer Double Click Listener #617

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions src/FixedDataTable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -436,6 +436,16 @@ class FixedDataTable extends React.Component {
* ```
*/
onColumnReorderEndCallback: PropTypes.func,
/**
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

add a new line to separate the prop types

* Callback that is called when column resizer is doubled clicked
*
* ```
* function(
* columnKey: string,
* )
* ```
*/
onColumnResizerDoubleClick: PropTypes.func,

/**
* Whether a column is currently being resized.
Expand Down Expand Up @@ -885,6 +895,7 @@ class FixedDataTable extends React.Component {
scrollableColumns={scrollableColumns.header}
touchEnabled={touchScrollEnabled}
onColumnResize={this._onColumnResize}
onColumnResizerDoubleClick={this.props.onColumnResizerDoubleClick}
onColumnReorder={onColumnReorder}
onColumnReorderMove={this._onColumnReorderMove}
onColumnReorderEnd={this._onColumnReorderEnd}
Expand Down
6 changes: 6 additions & 0 deletions src/FixedDataTableCell.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ class FixedDataTableCell extends React.Component {
* @param object event
*/
onColumnResize: PropTypes.func,
onColumnResizerDoubleClick: PropTypes.func,
onColumnReorder: PropTypes.func,

/**
Expand Down Expand Up @@ -253,6 +254,7 @@ class FixedDataTableCell extends React.Component {
className={cx('fixedDataTableCellLayout/columnResizerContainer')}
style={columnResizerStyle}
onMouseDown={this._onColumnResizerMouseDown}
onDoubleClick={this._onColumnResizerDoubleClick}
Comment on lines 256 to +257
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How does onMouseDown work when the user double clicks the resizer? Is it going to be called twice? Do you see any issues that might pop up (eg: does the resize event trigger twice?)

Copy link
Author

@singharpit94 singharpit94 Jan 13, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How does onMouseDown work when the user double clicks the resizer? Is it going to be called twice? Do you see any issues that might pop up (eg: does the resize event trigger twice?)

Yes the resize does gets called twice, right now I have handled it to ignore the event if the new column width and current column width is same. Can we do something similar in fdt only. I also think this can potentially leave the column resize blue bar to not re render if we do not trigger mouse up?

The simplest way will be to leave upto the consumer to decide here similar to the way I am handling in my use case.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably in this line, we can just do setState and do not call onResizeEnd if the props initialWidth and state width are equal?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, I see there is a need to re render FDT with prop isColumnResizing set as false because of this line

Copy link
Author

@singharpit94 singharpit94 Jan 13, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay after taking a deeper look, I think we should introduce a COLUMN_RESIZE_END action type similar to COLUMN_RESIZE and call it on when column resize ends. This new action type can set isColumnResizing as false and also clear the columnResizing data in the state and at the same time decide to whether to call the user passed onColumnResizeEnd callback. This approach has two benefits, it takes away need to re render fdt to remove the column reisizer blue line and also will not call onColumnResizerEnd callback unnecessarily when the new and current column width are equal.

Let me know your thoughts on this

Copy link
Collaborator

@pradeepnschrodinger pradeepnschrodinger Feb 3, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should introduce a COLUMN_RESIZE_END action type similar to COLUMN_RESIZE and call it on when column resize ends. This new action type can set isColumnResizing as false and also clear the columnResizing data in the state and at the same time decide to whether to call the user passed onColumnResizeEnd callback.

This sounds good to me. We should probably leave it up to the user to decide if they want to ignore the onColumnResizeEnd callback when the new and old widths are identical.

This new action type can set isColumnResizing as false and also clear the columnResizing data in the state

I got a question here: will there be any scenarios where the user doesn't want isColumnResizing to be false?
Maybe they want to ignore the current resize due to some reason, so in this case they'll plan to keep isColumnResizing as true.
Ideally we want the user to be able to control column resizing through the isColumnResizing prop but I'm not aware of any examples in the wild that set the prop dynamically. In both our application and in the resize example here, the prop is always set to false.

onTouchStart={
this.props.touchEnabled ? this._onColumnResizerMouseDown : null
}
Expand Down Expand Up @@ -338,6 +340,10 @@ class FixedDataTableCell extends React.Component {
}
};

_onColumnResizerDoubleClick = () => {
this.props.onColumnResizerDoubleClick(this.props.columnKey);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since this is essentially a wrapper over the onDoubleClick event handler, it's a good idea to also pass the original html event to the user.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good, will add it

}

_onColumnReorderMouseDown = (/*object*/ event) => {
this.props.onColumnReorder(
this.props.columnKey,
Expand Down
2 changes: 2 additions & 0 deletions src/FixedDataTableCellGroup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ class FixedDataTableCellGroupImpl extends React.Component {
left: PropTypes.number,

onColumnResize: PropTypes.func,
onColumnResizerDoubleClick: PropTypes.func,

onColumnReorder: PropTypes.func,
onColumnReorderMove: PropTypes.func,
Expand Down Expand Up @@ -170,6 +171,7 @@ class FixedDataTableCellGroupImpl extends React.Component {
minWidth={columnProps.minWidth}
touchEnabled={this.props.touchEnabled}
onColumnResize={onColumnResize}
onColumnResizerDoubleClick={this.props.onColumnResizerDoubleClick}
onColumnReorder={onColumnReorder}
onColumnReorderMove={this.props.onColumnReorderMove}
onColumnReorderEnd={this.props.onColumnReorderEnd}
Expand Down
4 changes: 4 additions & 0 deletions src/FixedDataTableRow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,7 @@ class FixedDataTableRowImpl extends React.Component {
* @param object event
*/
onColumnResize: PropTypes.func,
onColumnResizerDoubleClick: PropTypes.func,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you update the jsdoc for this prop as well?


isColumnReordering: PropTypes.bool,
/**
Expand Down Expand Up @@ -220,6 +221,7 @@ class FixedDataTableRowImpl extends React.Component {
columns={this.props.fixedColumns}
touchEnabled={this.props.touchEnabled}
onColumnResize={this.props.onColumnResize}
onColumnResizerDoubleClick={this.props.onColumnResizerDoubleClick}
onColumnReorder={this.props.onColumnReorder}
onColumnReorderMove={this.props.onColumnReorderMove}
onColumnReorderEnd={this.props.onColumnReorderEnd}
Expand Down Expand Up @@ -248,6 +250,7 @@ class FixedDataTableRowImpl extends React.Component {
columns={this.props.fixedRightColumns}
touchEnabled={this.props.touchEnabled}
onColumnResize={this.props.onColumnResize}
onColumnResizerDoubleClick={this.props.onColumnResizerDoubleClick}
onColumnReorder={this.props.onColumnReorder}
onColumnReorderMove={this.props.onColumnReorderMove}
onColumnReorderEnd={this.props.onColumnReorderEnd}
Expand Down Expand Up @@ -283,6 +286,7 @@ class FixedDataTableRowImpl extends React.Component {
columns={this.props.scrollableColumns}
touchEnabled={this.props.touchEnabled}
onColumnResize={this.props.onColumnResize}
onColumnResizerDoubleClick={this.props.onColumnResizerDoubleClick}
onColumnReorder={this.props.onColumnReorder}
onColumnReorderMove={this.props.onColumnReorderMove}
onColumnReorderEnd={this.props.onColumnReorderEnd}
Expand Down