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) },