Skip to content

Commit cda63c3

Browse files
wcjordanwcjordan
authored
Merge pull request schrodinger#377 from pradeepnschrodinger/merge-13-Suppress-Bubbling-onWheel
Changes for the merging range of commits [839dc0f, f3696c1] from master into v1.0-beta
2 parents 91da33b + c4c13c2 commit cda63c3

11 files changed

+79
-25
lines changed

‎.github/ISSUE_TEMPLATE.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414

1515
## Steps to Reproduce (for bugs)
1616
<!--- Provide a link to a live example, or - -->
17-
<!--- Fork the jsfiddle to reproduce https://jsfiddle.net/uq8osbp1/ ->
17+
<!--- Fork the CodePen to reproduce https://codepen.io/alphalpha/pen/oqKJgG ->
1818
1919
## Context
2020
<!--- How has this issue affected you? What are you trying to accomplish? -->

‎examples/ResizeExample.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ class ResizeExample extends React.Component {
4444
rowsCount={dataList.getSize()}
4545
onColumnResizeEndCallback={this._onColumnResizeEndCallback}
4646
isColumnResizing={false}
47+
touchScrollEnabled={true}
4748
width={1000}
4849
height={500}
4950
{...this.props}>

‎examples/SortExample.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ class SortExample extends React.Component {
9999
if (valueA < valueB) {
100100
sortVal = -1;
101101
}
102-
if (sortVal !== 0 && sortDir === SortTypes.ASC) {
102+
if (sortVal !== 0 && sortDir === SortTypes.DESC) {
103103
sortVal = sortVal * -1;
104104
}
105105

‎src/FixedDataTable.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -306,6 +306,11 @@ class FixedDataTable extends React.Component {
306306
*/
307307
onScrollEnd: PropTypes.func,
308308

309+
/**
310+
* If enabled scroll events will not be propagated outside of the table.
311+
*/
312+
stopReactWheelPropagation: PropTypes.bool,
313+
309314
/**
310315
* If enabled scroll events will not be propagated outside of the table.
311316
*/
@@ -323,6 +328,11 @@ class FixedDataTable extends React.Component {
323328
*/
324329
onRowClick: PropTypes.func,
325330

331+
/**
332+
* Callback that is called when a contextual-menu event happens on a row.
333+
*/
334+
onRowContextMenu: PropTypes.func,
335+
326336
/**
327337
* Callback that is called when a row is double clicked.
328338
*/
@@ -784,6 +794,7 @@ class FixedDataTable extends React.Component {
784794
onTouchEnd={this._touchHandler.onTouchEnd}
785795
onTouchMove={this._touchHandler.onTouchMove}
786796
onTouchCancel={this._touchHandler.onTouchCancel}
797+
ref={this._onRef}
787798
style={{
788799
height: componentHeight,
789800
width
@@ -820,6 +831,7 @@ class FixedDataTable extends React.Component {
820831
height={bodyHeight}
821832
offsetTop={offsetTop}
822833
onRowClick={props.onRowClick}
834+
onRowContextMenu={props.onRowContextMenu}
823835
onRowDoubleClick={props.onRowDoubleClick}
824836
onRowMouseUp={props.onRowMouseUp}
825837
onRowMouseDown={props.onRowMouseDown}
@@ -844,6 +856,12 @@ class FixedDataTable extends React.Component {
844856
);
845857
}
846858

859+
_onRef = (div) => {
860+
if (this.props.stopReactWheelPropagation) {
861+
this._wheelHandler.setRoot(div);
862+
}
863+
}
864+
847865
/**
848866
* This is called when a cell that is in the header of a column has its
849867
* resizer knob clicked on. It displays the resizer and puts in the correct

‎src/FixedDataTableBufferedRows.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ class FixedDataTableBufferedRows extends React.Component {
2525
height: PropTypes.number.isRequired,
2626
offsetTop: PropTypes.number.isRequired,
2727
onRowClick: PropTypes.func,
28+
onRowContextMenu: PropTypes.func,
2829
onRowDoubleClick: PropTypes.func,
2930
onRowMouseDown: PropTypes.func,
3031
onRowMouseUp: PropTypes.func,
@@ -94,6 +95,7 @@ class FixedDataTableBufferedRows extends React.Component {
9495
scrollLeft={Math.round(props.scrollLeft)}
9596
visible={false}
9697
fixedColumns={props.fixedColumns}
98+
fixedRightColumns={props.fixedRightColumns}
9799
scrollableColumns={props.scrollableColumns}
98100
/>
99101
);
@@ -123,6 +125,7 @@ class FixedDataTableBufferedRows extends React.Component {
123125
fixedRightColumns={props.fixedRightColumns}
124126
scrollableColumns={props.scrollableColumns}
125127
onClick={props.onRowClick}
128+
onContextMenu={props.onRowContextMenu}
126129
onDoubleClick={props.onRowDoubleClick}
127130
onMouseDown={props.onRowMouseDown}
128131
onMouseUp={props.onRowMouseUp}

‎src/FixedDataTableCell.js

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -242,8 +242,8 @@ class FixedDataTableCell extends React.Component {
242242
style={columnResizerStyle}
243243
onMouseDown={this._onColumnResizerMouseDown}
244244
onTouchStart={this.props.touchEnabled ? this._onColumnResizerMouseDown : null}
245-
onTouchEnd={this.props.touchEnabled ? e => e.stopPropagation() : null}
246-
onTouchMove={this.props.touchEnabled ? e => e.stopPropagation() : null}>
245+
onTouchEnd={this.props.touchEnabled ? this._suppressEvent : null}
246+
onTouchMove={this.props.touchEnabled ? this._suppressEvent : null}>
247247
<div
248248
className={joinClasses(
249249
cx('fixedDataTableCellLayout/columnResizerKnob'),
@@ -315,7 +315,8 @@ class FixedDataTableCell extends React.Component {
315315
* This prevents the rows from moving around when we resize the
316316
* headers on touch devices.
317317
*/
318-
if(this.props.touchEnabled) {
318+
if (this.props.touchEnabled) {
319+
event.preventDefault();
319320
event.stopPropagation();
320321
}
321322
}
@@ -328,6 +329,11 @@ class FixedDataTableCell extends React.Component {
328329
event
329330
);
330331
}
332+
333+
_suppressEvent = (/*object*/ event) => {
334+
event.preventDefault();
335+
event.stopPropagation();
336+
}
331337
};
332338

333339
module.exports = FixedDataTableCell;

‎src/FixedDataTableRow.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,11 @@ class FixedDataTableRowImpl extends React.Component {
104104
*/
105105
onClick: PropTypes.func,
106106

107+
/**
108+
* Fire when a contextual-menu is requested above a row.
109+
*/
110+
onContextMenu: PropTypes.func,
111+
107112
/**
108113
* Fire when a row is double clicked.
109114
*/
@@ -260,6 +265,7 @@ class FixedDataTableRowImpl extends React.Component {
260265
<div
261266
className={joinClasses(className, this.props.className)}
262267
onClick={this.props.onClick ? this._onClick : null}
268+
onContextMenu={this.props.onContextMenu ? this._onContextMenu : null}
263269
onDoubleClick={this.props.onDoubleClick ? this._onDoubleClick : null}
264270
onMouseDown={this.props.onMouseDown ? this._onMouseDown : null}
265271
onMouseUp={this.props.onMouseUp ? this._onMouseUp : null}
@@ -357,6 +363,10 @@ class FixedDataTableRowImpl extends React.Component {
357363
this.props.onClick(event, this.props.index);
358364
};
359365

366+
_onContextMenu = (/*object*/ event) => {
367+
this.props.onContextMenu(event, this.props.index)
368+
};
369+
360370
_onDoubleClick = (/*object*/ event) => {
361371
this.props.onDoubleClick(event, this.props.index);
362372
};

‎src/Scrollbar.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,8 @@ class Scrollbar extends React.PureComponent {
9090
zIndex: 99,
9191
}
9292

93+
_onRefFace = (ref) => this._faceRef = ref;
94+
9395
render() /*?object*/ {
9496
if (!this.state.scrollable) {
9597
return null;
@@ -160,7 +162,7 @@ class Scrollbar extends React.PureComponent {
160162
style={mainStyle}
161163
tabIndex={0}>
162164
<div
163-
ref={(r) => this._faceRef = r}
165+
ref={this._onRefFace}
164166
className={faceClassName}
165167
style={faceStyle}
166168
/>

‎src/vendor_upstream/dom/DOMMouseMoveTracker.js

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,7 @@ class DOMMouseMoveTracker {
5454
* in order to grab inital state.
5555
*/
5656
captureMouseMoves(/*object*/ event) {
57-
if (!this._eventMoveToken && !this._eventUpToken &&
58-
!this._eventLeaveToken && !this._eventOutToken) {
57+
if (!this._eventMoveToken && !this._eventUpToken && !this._eventLeaveToken) {
5958
this._eventMoveToken = EventListener.listen(
6059
this._domNode,
6160
'mousemove',
@@ -71,11 +70,6 @@ class DOMMouseMoveTracker {
7170
'mouseleave',
7271
this._onMouseEnd
7372
);
74-
this._eventOutToken = EventListener.listen(
75-
this._domNode,
76-
'mouseout',
77-
this.onMouseEnd
78-
);
7973
}
8074

8175
if (this._isTouchEnabled && !this._eventTouchStartToken &&
@@ -111,29 +105,26 @@ class DOMMouseMoveTracker {
111105
}
112106

113107
/**
114-
* These releases all of the listeners on document.body.
108+
* This releases all of the listeners on document.body.
115109
*/
116110
releaseMouseMoves() {
117-
if (this._eventMoveToken && this._eventUpToken &&
118-
this._eventLeaveToken && this._eventOutToken) {
111+
if (this._eventMoveToken && this._eventUpToken && this._eventLeaveToken) {
119112
this._eventMoveToken.remove();
120113
this._eventMoveToken = null;
121114
this._eventUpToken.remove();
122115
this._eventUpToken = null;
123116
this._eventLeaveToken.remove();
124117
this._eventLeaveToken = null;
125-
this._eventOutToken.remove();
126-
this._eventOutToken = null;
127118
}
128119

129120
if (this._isTouchEnabled && this._eventTouchStartToken &&
130121
this._eventTouchMoveToken && this._eventTouchEndToken) {
131-
this._eventTouchStartToken.remove();
132-
this._eventTouchStartToken = null;
133-
this._eventTouchMoveToken.remove();
134-
this._eventTouchMoveToken = null;
135-
this._eventTouchEndToken.remove();
136-
this._eventTouchEndToken = null;
122+
this._eventTouchStartToken.remove();
123+
this._eventTouchStartToken = null;
124+
this._eventTouchMoveToken.remove();
125+
this._eventTouchMoveToken = null;
126+
this._eventTouchEndToken.remove();
127+
this._eventTouchEndToken = null;
137128
}
138129

139130
if (this._animationFrameID !== null) {

‎src/vendor_upstream/dom/ReactWheelHandler.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@ class ReactWheelHandler {
3636
this._deltaX = 0;
3737
this._deltaY = 0;
3838
this._didWheel = this._didWheel.bind(this);
39+
this._rootRef = null;
40+
3941
if (typeof handleScrollX !== 'function') {
4042
handleScrollX = handleScrollX ?
4143
emptyFunction.thatReturnsTrue :
@@ -71,6 +73,10 @@ class ReactWheelHandler {
7173
return;
7274
}
7375

76+
if (this._rootRef && !this._contains(event.target)) {
77+
return;
78+
}
79+
7480
this._deltaX += handleScrollX ? normalizedEvent.pixelX : 0;
7581
this._deltaY += handleScrollY ? normalizedEvent.pixelY : 0;
7682
event.preventDefault();
@@ -88,12 +94,27 @@ class ReactWheelHandler {
8894
}
8995
}
9096

97+
setRoot(rootRef) {
98+
this._rootRef = rootRef;
99+
}
100+
91101
_didWheel() {
92102
this._animationFrameID = null;
93103
this._onWheelCallback(this._deltaX, this._deltaY);
94104
this._deltaX = 0;
95105
this._deltaY = 0;
96106
}
107+
108+
_contains(target) {
109+
var parent = target;
110+
while (parent != document.body) {
111+
if (parent === this._rootRef) {
112+
return true;
113+
}
114+
parent = parent.parentNode;
115+
}
116+
return false;
117+
}
97118
}
98119

99120
module.exports = ReactWheelHandler;

0 commit comments

Comments
 (0)