From 6b78911133ad7a6195d2d754ea3b3dd81c1ec9d9 Mon Sep 17 00:00:00 2001
From: Kiril Volskyi <118115736+KirilCycle@users.noreply.github.com>
Date: Mon, 1 Jul 2024 22:06:49 +0300
Subject: [PATCH] Fix: #6684 DataTable column resize on touchscreens (#6726)

* feat: handle touch events

* update: formatting & rename function

* refactor: improve conditions

* refactor listeners

* improve listeners naming
---
 components/lib/datatable/DataTable.js  | 39 +++++++++++++++++---------
 components/lib/datatable/HeaderCell.js |  5 ++--
 2 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js
index a20afd3a12..2dbf8acc1d 100644
--- a/components/lib/datatable/DataTable.js
+++ b/components/lib/datatable/DataTable.js
@@ -87,23 +87,28 @@ export const DataTable = React.forwardRef((inProps, ref) => {
         setD_rowsState(props.rows);
     }
 
+    const columnResizeStartListener = (event) => columnResizing.current && onColumnResize(event);
+
+    const columnResizeEndListener = () => columnResizing.current && ((columnResizing.current = false), onColumnResizeEnd());
+
     const [bindDocumentMouseMoveListener, unbindDocumentMouseMoveListener] = useEventListener({
         type: 'mousemove',
-        listener: (event) => {
-            if (columnResizing.current) {
-                onColumnResize(event);
-            }
-        }
+        listener: columnResizeStartListener
     });
 
     const [bindDocumentMouseUpListener, unbindDocumentMouseUpListener] = useEventListener({
         type: 'mouseup',
-        listener: () => {
-            if (columnResizing.current) {
-                columnResizing.current = false;
-                onColumnResizeEnd();
-            }
-        }
+        listener: columnResizeEndListener
+    });
+
+    const [bindDocumentTouchMoveListener, unbindDocumentTouchMoveListener] = useEventListener({
+        type: 'touchmove',
+        listener: columnResizeStartListener
+    });
+
+    const [bindDocumentTouchEndListener, unbindDocumentTouchEndListener] = useEventListener({
+        type: 'touchend',
+        listener: columnResizeEndListener
     });
 
     const isCustomStateStorage = () => {
@@ -507,9 +512,12 @@ export const DataTable = React.forwardRef((inProps, ref) => {
         const containerLeft = DomHandler.getOffset(elementRef.current).left;
 
         resizeColumn.current = column;
+
         resizeColumnElement.current = event.currentTarget.parentElement;
+
         columnResizing.current = true;
-        lastResizeHelperX.current = event.pageX - containerLeft + elementRef.current.scrollLeft;
+
+        lastResizeHelperX.current = (event.type === 'touchstart' ? event.changedTouches[0].clientX : event.pageX) - containerLeft + elementRef.current.scrollLeft;
 
         bindColumnResizeEvents();
     };
@@ -521,7 +529,8 @@ export const DataTable = React.forwardRef((inProps, ref) => {
 
         resizeHelperRef.current.style.height = elementRef.current.offsetHeight + 'px';
         resizeHelperRef.current.style.top = 0 + 'px';
-        resizeHelperRef.current.style.left = event.pageX - containerLeft + elementRef.current.scrollLeft + 'px';
+
+        resizeHelperRef.current.style.left = (event.type === 'touchmove' ? event.changedTouches[0].clientX : event.pageX) - containerLeft + elementRef.current.scrollLeft + 'px';
 
         resizeHelperRef.current.style.display = 'block';
     };
@@ -616,11 +625,15 @@ export const DataTable = React.forwardRef((inProps, ref) => {
     const bindColumnResizeEvents = () => {
         bindDocumentMouseMoveListener();
         bindDocumentMouseUpListener();
+        bindDocumentTouchMoveListener();
+        bindDocumentTouchEndListener();
     };
 
     const unbindColumnResizeEvents = () => {
         unbindDocumentMouseMoveListener();
         unbindDocumentMouseUpListener();
+        unbindDocumentTouchMoveListener();
+        unbindDocumentTouchEndListener();
     };
 
     const onColumnHeaderMouseDown = (e) => {
diff --git a/components/lib/datatable/HeaderCell.js b/components/lib/datatable/HeaderCell.js
index 5e60892e5f..a387a0de44 100644
--- a/components/lib/datatable/HeaderCell.js
+++ b/components/lib/datatable/HeaderCell.js
@@ -196,7 +196,7 @@ export const HeaderCell = React.memo((props) => {
         props.onColumnDrop({ originalEvent: event, column: props.column });
     };
 
-    const onResizerMouseDown = (event) => {
+    const onResizeStart = (event) => {
         props.onColumnResizeStart({ originalEvent: event, column: props.column });
     };
 
@@ -237,7 +237,8 @@ export const HeaderCell = React.memo((props) => {
             const columnResizerProps = mergeProps(
                 {
                     className: cx('columnResizer'),
-                    onMouseDown: (e) => onResizerMouseDown(e),
+                    onMouseDown: (e) => onResizeStart(e),
+                    onTouchStart: (e) => onResizeStart(e),
                     onClick: (e) => onResizerClick(e),
                     onDoubleClick: (e) => onResizerDoubleClick(e)
                 },