From 85a6b0af307409ce2f4580808ef983937e664df6 Mon Sep 17 00:00:00 2001 From: Kiril Volskiy Date: Tue, 4 Jun 2024 17:13:13 +0300 Subject: [PATCH 1/5] feat: handle touch events --- components/lib/datatable/DataTable.js | 39 ++++++++++++++++++++++++-- components/lib/datatable/HeaderCell.js | 1 + 2 files changed, 38 insertions(+), 2 deletions(-) diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js index 0c35e77741..8d5f94ec79 100644 --- a/components/lib/datatable/DataTable.js +++ b/components/lib/datatable/DataTable.js @@ -105,6 +105,25 @@ export const DataTable = React.forwardRef((inProps, ref) => { } }); + const [bindDocumentTouchMoveListener, unbindDocumentTouchMoveListener] = useEventListener({ + type: 'touchmove', + listener: (event) => { + if (columnResizing.current) { + onColumnResize(event); + } + } + }); + + const [bindDocumentTouchEndListener, unbindDocumentTouchEndListener] = useEventListener({ + type: 'touchend', + listener: () => { + if (columnResizing.current) { + columnResizing.current = false; + onColumnResizeEnd(); + } + } + }); + const isCustomStateStorage = () => { return props.stateStorage === 'custom'; }; @@ -522,9 +541,16 @@ 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; + + if (event.type == 'touchstart') { + lastResizeHelperX.current = event.changedTouches[0].clientX - containerLeft + elementRef.current.scrollLeft; + } else { + lastResizeHelperX.current = event.pageX - containerLeft + elementRef.current.scrollLeft; + } bindColumnResizeEvents(); }; @@ -536,7 +562,12 @@ 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'; + + if (event.type == 'touchmove') { + resizeHelperRef.current.style.left = event.changedTouches[0].clientX - containerLeft + elementRef.current.scrollLeft + 'px'; + } else { + resizeHelperRef.current.style.left = event.pageX - containerLeft + elementRef.current.scrollLeft + 'px'; + } resizeHelperRef.current.style.display = 'block'; }; @@ -631,11 +662,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..5855698259 100644 --- a/components/lib/datatable/HeaderCell.js +++ b/components/lib/datatable/HeaderCell.js @@ -238,6 +238,7 @@ export const HeaderCell = React.memo((props) => { { className: cx('columnResizer'), onMouseDown: (e) => onResizerMouseDown(e), + // onTouchStart: (e) => onResizerMouseDown(e), onClick: (e) => onResizerClick(e), onDoubleClick: (e) => onResizerDoubleClick(e) }, From e945d60a41be4a6c69ba88dc5efbc9712e8267d2 Mon Sep 17 00:00:00 2001 From: Kiril Volskiy Date: Tue, 4 Jun 2024 18:03:36 +0300 Subject: [PATCH 2/5] update: formatting & rename function --- components/lib/datatable/DataTable.js | 2 +- components/lib/datatable/HeaderCell.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js index 8d5f94ec79..4a28f91d1f 100644 --- a/components/lib/datatable/DataTable.js +++ b/components/lib/datatable/DataTable.js @@ -662,7 +662,7 @@ export const DataTable = React.forwardRef((inProps, ref) => { const bindColumnResizeEvents = () => { bindDocumentMouseMoveListener(); bindDocumentMouseUpListener(); - bindDocumentTouchMoveListener() + bindDocumentTouchMoveListener(); bindDocumentTouchEndListener(); }; diff --git a/components/lib/datatable/HeaderCell.js b/components/lib/datatable/HeaderCell.js index 5855698259..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,8 +237,8 @@ export const HeaderCell = React.memo((props) => { const columnResizerProps = mergeProps( { className: cx('columnResizer'), - onMouseDown: (e) => onResizerMouseDown(e), - // onTouchStart: (e) => onResizerMouseDown(e), + onMouseDown: (e) => onResizeStart(e), + onTouchStart: (e) => onResizeStart(e), onClick: (e) => onResizerClick(e), onDoubleClick: (e) => onResizerDoubleClick(e) }, From b22c4ba73837d0e1149d07e94bf2f3b74638b668 Mon Sep 17 00:00:00 2001 From: Kiril Volskiy Date: Tue, 4 Jun 2024 19:57:18 +0300 Subject: [PATCH 3/5] refactor: improve conditions --- components/lib/datatable/DataTable.js | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js index 4a28f91d1f..a822da058e 100644 --- a/components/lib/datatable/DataTable.js +++ b/components/lib/datatable/DataTable.js @@ -546,11 +546,7 @@ export const DataTable = React.forwardRef((inProps, ref) => { columnResizing.current = true; - if (event.type == 'touchstart') { - lastResizeHelperX.current = event.changedTouches[0].clientX - containerLeft + elementRef.current.scrollLeft; - } else { - lastResizeHelperX.current = event.pageX - containerLeft + elementRef.current.scrollLeft; - } + lastResizeHelperX.current = (event.type === 'touchstart' ? event.changedTouches[0].clientX : event.pageX) - containerLeft + elementRef.current.scrollLeft; bindColumnResizeEvents(); }; @@ -563,11 +559,7 @@ export const DataTable = React.forwardRef((inProps, ref) => { resizeHelperRef.current.style.height = elementRef.current.offsetHeight + 'px'; resizeHelperRef.current.style.top = 0 + 'px'; - if (event.type == 'touchmove') { - resizeHelperRef.current.style.left = event.changedTouches[0].clientX - containerLeft + elementRef.current.scrollLeft + 'px'; - } else { - 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'; }; From 7789f7be660838ccbb1753df73d2f53c5b4a94ed Mon Sep 17 00:00:00 2001 From: Kiril Volskiy Date: Tue, 4 Jun 2024 21:47:15 +0300 Subject: [PATCH 4/5] refactor listeners --- components/lib/datatable/DataTable.js | 30 +++++++-------------------- 1 file changed, 8 insertions(+), 22 deletions(-) diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js index a822da058e..77226a2de6 100644 --- a/components/lib/datatable/DataTable.js +++ b/components/lib/datatable/DataTable.js @@ -86,42 +86,28 @@ export const DataTable = React.forwardRef((inProps, ref) => { setD_rowsState(props.rows); } + const moveListener = (event) => columnResizing.current && onColumnResize(event); + + const endListener = () => columnResizing.current && ((columnResizing.current = false), onColumnResizeEnd()); + const [bindDocumentMouseMoveListener, unbindDocumentMouseMoveListener] = useEventListener({ type: 'mousemove', - listener: (event) => { - if (columnResizing.current) { - onColumnResize(event); - } - } + listener: moveListener }); const [bindDocumentMouseUpListener, unbindDocumentMouseUpListener] = useEventListener({ type: 'mouseup', - listener: () => { - if (columnResizing.current) { - columnResizing.current = false; - onColumnResizeEnd(); - } - } + listener: endListener }); const [bindDocumentTouchMoveListener, unbindDocumentTouchMoveListener] = useEventListener({ type: 'touchmove', - listener: (event) => { - if (columnResizing.current) { - onColumnResize(event); - } - } + listener: moveListener }); const [bindDocumentTouchEndListener, unbindDocumentTouchEndListener] = useEventListener({ type: 'touchend', - listener: () => { - if (columnResizing.current) { - columnResizing.current = false; - onColumnResizeEnd(); - } - } + listener: endListener }); const isCustomStateStorage = () => { From 3abb2d1c73adda05362f9c30941eebc8b7dab1e3 Mon Sep 17 00:00:00 2001 From: Kiril Volskiy Date: Tue, 4 Jun 2024 21:56:38 +0300 Subject: [PATCH 5/5] improve listeners naming --- components/lib/datatable/DataTable.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js index 77226a2de6..fd69c31449 100644 --- a/components/lib/datatable/DataTable.js +++ b/components/lib/datatable/DataTable.js @@ -86,28 +86,28 @@ export const DataTable = React.forwardRef((inProps, ref) => { setD_rowsState(props.rows); } - const moveListener = (event) => columnResizing.current && onColumnResize(event); + const columnResizeStartListener = (event) => columnResizing.current && onColumnResize(event); - const endListener = () => columnResizing.current && ((columnResizing.current = false), onColumnResizeEnd()); + const columnResizeEndListener = () => columnResizing.current && ((columnResizing.current = false), onColumnResizeEnd()); const [bindDocumentMouseMoveListener, unbindDocumentMouseMoveListener] = useEventListener({ type: 'mousemove', - listener: moveListener + listener: columnResizeStartListener }); const [bindDocumentMouseUpListener, unbindDocumentMouseUpListener] = useEventListener({ type: 'mouseup', - listener: endListener + listener: columnResizeEndListener }); const [bindDocumentTouchMoveListener, unbindDocumentTouchMoveListener] = useEventListener({ type: 'touchmove', - listener: moveListener + listener: columnResizeStartListener }); const [bindDocumentTouchEndListener, unbindDocumentTouchEndListener] = useEventListener({ type: 'touchend', - listener: endListener + listener: columnResizeEndListener }); const isCustomStateStorage = () => {