Fix touch handlers and make them passive

schrodinger · Nov 10, 2023 · 4d87da2 · 4d87da2
1 parent 28e518a
commit 4d87da2
Show file tree

Hide file tree

Showing 11 changed files with 100 additions and 21 deletions.
diff --git a/examples/ColumnGroupsResizeReorderExample.js b/examples/ColumnGroupsResizeReorderExample.js
@@ -156,6 +156,7 @@ class ColumnGroupsExample extends React.Component {
         rowsCount={dataList.getSize()}
         width={1000}
         height={500}
+        touchScrollEnabled={true}
         {...this.props}
       >
         {this.state.columnGroupOrder.map(function (columnGroupKey, i) {

diff --git a/examples/ReorderExample.js b/examples/ReorderExample.js
@@ -90,6 +90,7 @@ class ReorderExample extends React.Component {
         rowsCount={dataList.getSize()}
         width={1000}
         height={500}
+        touchScrollEnabled={true}
         {...this.props}
       >
         {this.state.columnOrder.map(function (columnKey, i) {

diff --git a/src/FixedDataTable.js b/src/FixedDataTable.js
@@ -794,6 +794,7 @@ class FixedDataTable extends React.Component {
           fixedRightColumns={fixedRightColumnGroups}
           scrollableColumns={scrollableColumnGroups}
           visible={true}
+          touchEnabled={touchScrollEnabled}
           onColumnResizeEndCallback={onColumnResizeEndCallback}
           onColumnReorderEndCallback={onColumnReorderEndCallback}
           showScrollbarY={scrollEnabledY}

diff --git a/src/FixedDataTableCell.js b/src/FixedDataTableCell.js
@@ -177,6 +177,7 @@ class FixedDataTableCell extends React.Component {
       isVisible,
       columnKey,
       isHeaderOrFooter,
+      touchEnabled,
       ...props
     } = this.props;
 
@@ -205,6 +206,7 @@ class FixedDataTableCell extends React.Component {
     );
 
     let cellProps = {
+      touchEnabled,
       isVisible,
       isHeader: this.props.isHeader,
       isGroupHeader: this.props.isGroupHeader,

diff --git a/src/FixedDataTableCellDefault.js b/src/FixedDataTableCellDefault.js
@@ -91,6 +91,7 @@ class FixedDataTableCellDefault extends React.Component {
       isGroupHeader,
       maxWidth,
       minWidth,
+      touchEnabled,
       ...props
     } = this.props;
 

diff --git a/src/FixedDataTableCellDefaultDeprecated.js b/src/FixedDataTableCellDefaultDeprecated.js
@@ -96,6 +96,7 @@ class FixedDataTableCellDefault extends React.Component {
       isGroupHeader,
       maxWidth,
       minWidth,
+      touchEnabled,
       ...props
     } = this.props;
 

diff --git a/src/api/apiData.js b/src/api/apiData.js
@@ -20,14 +20,16 @@ const getApiDataSelector = () =>
       (state) => state.maxScrollX,
       (state) => columnWidths(state).availableScrollWidth,
       (state) => state.isRTL,
+      (state) => state.touchScrollEnabled,
     ],
     (
       /*number*/ tableHeight,
       /*number*/ groupHeaderHeight,
       /*number*/ scrollX,
       /*number*/ maxScrollX,
       /*number*/ availableScrollWidth,
-      /*boolean*/ isRTL
+      /*boolean*/ isRTL,
+      /*boolean*/ touchEnabled
     ) => {
       return {
         tableHeight,
@@ -36,6 +38,7 @@ const getApiDataSelector = () =>
         maxScrollX,
         availableScrollWidth,
         isRTL,
+        touchEnabled,
       };
     }
   );

diff --git a/src/plugins/ResizeReorder/ReorderCell.js b/src/plugins/ResizeReorder/ReorderCell.js
@@ -115,11 +115,10 @@ class ReorderCell extends React.PureComponent {
       onColumnReorderStart,
       onColumnReorderEnd,
       reorderStartEvent,
+      children,
       ...props
     } = this.props;
 
-    const { children, left } = props;
-
     let className = joinClasses(
       cx({
         'public/fixedDataTableCell/resizeReorderCellContainer': true,
@@ -167,17 +166,27 @@ class ReorderCell extends React.PureComponent {
 
     return (
       <div
+        ref={this.setReorderHandle}
         className={cx({
           'fixedDataTableCellLayout/columnReorderContainer': true,
           'fixedDataTableCellLayout/columnReorderContainer/active': false,
         })}
-        onMouseDown={this.onMouseDown}
-        onTouchStart={this.onTouchStart}
         style={style}
       />
     );
   }
 
+  setReorderHandle = (element) => {
+    if (element) {
+      element.addEventListener('mousedown', this.onMouseDown, {
+        passive: false,
+      });
+      element.addEventListener('touchstart', this.onTouchStart, {
+        passive: false,
+      });
+    }
+  };
+
   onTouchStart = (ev) => {
     if (!this.props.touchEnabled) {
       return;

diff --git a/src/plugins/ResizeReorder/ResizerKnob.js b/src/plugins/ResizeReorder/ResizerKnob.js
@@ -48,7 +48,7 @@ class ResizerKnob extends React.PureComponent {
    * Ref to ResizerKnob
    * @type {HTMLDivElement}
    */
-  curRef = null;
+  resizerKnobRef = null;
 
   /**
    *
@@ -62,8 +62,14 @@ class ResizerKnob extends React.PureComponent {
 
   componentDidMount() {
     this.setState({
-      top: this.curRef.getBoundingClientRect().top,
+      top: this.resizerKnobRef.getBoundingClientRect().top,
     });
+
+    this.setupHandlers();
+  }
+
+  componentWillUnmount() {
+    this.cleanupHandlers();
   }
 
   render() {
@@ -82,18 +88,56 @@ class ResizerKnob extends React.PureComponent {
     return (
       <div
         className={cx('fixedDataTableCellLayout/columnResizerContainer')}
-        ref={(element) => (this.curRef = element)}
+        ref={this.setResizerKnobRef}
         style={resizerKnobStyle}
-        onMouseDown={this.onMouseDown}
-        onTouchStart={this.props.touchEnabled ? this.onMouseDown : null}
-        onTouchEnd={this.props.touchEnabled ? this.suppressEvent : null}
-        onTouchMove={this.props.touchEnabled ? this.suppressEvent : null}
       >
         {resizerLine}
       </div>
     );
   }
 
+  setResizerKnobRef = (element) => {
+    this.resizerKnobRef = element;
+  };
+
+  setupHandlers() {
+    this.resizerKnobRef.addEventListener('mousedown', this.onMouseDown, {
+      passive: false,
+    });
+    this.resizerKnobRef.addEventListener('touchstart', this.onTouchStart, {
+      passive: false,
+    });
+    this.resizerKnobRef.addEventListener(
+      'touchmove',
+      this.suppressEventIfInTouchMode,
+      { passive: false }
+    );
+    this.resizerKnobRef.addEventListener(
+      'touchend',
+      this.suppressEventIfInTouchMode,
+      { passive: false }
+    );
+  }
+
+  cleanupHandlers() {
+    this.resizerKnobRef.removeEventListener('mousedown', this.onMouseDown, {
+      passive: false,
+    });
+    this.resizerKnobRef.removeEventListener('touchstart', this.onTouchStart, {
+      passive: false,
+    });
+    this.resizerKnobRef.removeEventListener(
+      'touchmove',
+      this.suppressEventIfInTouchMode,
+      { passive: false }
+    );
+    this.resizerKnobRef.removeEventListener(
+      'touchend',
+      this.suppressEventIfInTouchMode,
+      { passive: false }
+    );
+  }
+
   /**
    * Registers event listeners for mouse tracking
    * @param {MouseEvent} event
@@ -108,6 +152,15 @@ class ResizerKnob extends React.PureComponent {
     this.mouseMoveTracker.captureMouseMoves(event);
   };
 
+  /**
+   * @param {TouchEvent} event The touch start event
+   */
+  onTouchStart = (event) => {
+    if (this.props.touchEnabled) {
+      this.onMouseDown(event);
+    }
+  };
+
   /**
    * @param {MouseEvent} ev Mouse down event
    */
@@ -185,7 +238,10 @@ class ResizerKnob extends React.PureComponent {
   /**
    * @param {Object} event
    */
-  suppressEvent = (event) => {
+  suppressEventIfInTouchMode = (event) => {
+    if (!this.props.touchEnabled) {
+      return;
+    }
     event.preventDefault();
     event.stopPropagation();
   };

diff --git a/src/vendor_upstream/dom/DOMMouseMoveTracker.js b/src/vendor_upstream/dom/DOMMouseMoveTracker.js
@@ -86,17 +86,20 @@ class DOMMouseMoveTracker {
       this._eventTouchStartToken = EventListener.listen(
         this._domNode,
         'touchstart',
-        this._onMouseMove
+        this._onMouseMove,
+        { passive: false }
       );
       this._eventTouchMoveToken = EventListener.listen(
-        this._domNode,
+        event.target,
         'touchmove',
-        this._onMouseMove
+        this._onMouseMove,
+        { passive: false }
       );
       this._eventTouchEndToken = EventListener.listen(
-        this._domNode,
+        event.target,
         'touchend',
-        this._onMouseUp
+        this._onMouseUp,
+        { passive: false }
       );
     }
 

diff --git a/src/vendor_upstream/stubs/EventListener.js b/src/vendor_upstream/stubs/EventListener.js
@@ -23,14 +23,15 @@ const EventListener = {
    * @param {DOMEventTarget} target DOM element to register listener on.
    * @param {string} eventType Event type, e.g. 'click' or 'mouseover'.
    * @param {function} callback Callback function.
+   * @param {object} options Extra options to customize the listener
    * @return {object} Object with a `remove` method.
    */
-  listen(target, eventType, callback) {
+  listen(target, eventType, callback, options = {}) {
     if (target.addEventListener) {
-      target.addEventListener(eventType, callback, false);
+      target.addEventListener(eventType, callback, options || false);
       return {
         remove() {
-          target.removeEventListener(eventType, callback, false);
+          target.removeEventListener(eventType, callback, options || false);
         },
       };
     } else if (target.attachEvent) {