diff --git a/.size-snapshot.json b/.size-snapshot.json index 051eb6b..1334502 100644 --- a/.size-snapshot.json +++ b/.size-snapshot.json @@ -17,5 +17,24 @@ "code": 8904 } } + }, + "dist\\index.js": { + "bundled": 105386, + "minified": 49565, + "gzipped": 13008 + }, + "dist\\index.es.js": { + "bundled": 104543, + "minified": 48815, + "gzipped": 12856, + "treeshaked": { + "rollup": { + "code": 80, + "import_statements": 21 + }, + "webpack": { + "code": 8444 + } + } } } diff --git a/examples/column-resizing/src/App.js b/examples/column-resizing/src/App.js index 4355c4e..7048e2a 100644 --- a/examples/column-resizing/src/App.js +++ b/examples/column-resizing/src/App.js @@ -35,18 +35,18 @@ const Styles = styled.div` border-right: 0; } - ${'' /* The resizer styles! */} - .resizer { display: inline-block; background: blue; - width: 5px; + width: 10px; height: 100%; position: absolute; right: 0; top: 0; transform: translateX(50%); z-index: 1; + ${'' /* prevents from scrolling while dragging on touch devices */} + touch-action:none; &.isResizing { background: red; diff --git a/sizes-cjs.json b/sizes-cjs.json index d4af6d1..303719a 100644 --- a/sizes-cjs.json +++ b/sizes-cjs.json @@ -1,4 +1,14 @@ [ + { + "timestamp": 1575985310396, + "files": [ + { + "filename": "index.js", + "size": 21968, + "delta": 323 + } + ] + }, { "timestamp": 1575910923566, "files": [ diff --git a/sizes-es.json b/sizes-es.json index e56aa56..413aed3 100644 --- a/sizes-es.json +++ b/sizes-es.json @@ -1,4 +1,14 @@ [ + { + "timestamp": 1575985317929, + "files": [ + { + "filename": "index.es.js", + "size": 21782, + "delta": 324 + } + ] + }, { "timestamp": 1575910931774, "files": [ diff --git a/src/plugin-hooks/useResizeColumns.js b/src/plugin-hooks/useResizeColumns.js index 2a3b9e8..276fe22 100644 --- a/src/plugin-hooks/useResizeColumns.js +++ b/src/plugin-hooks/useResizeColumns.js @@ -24,27 +24,76 @@ export const useResizeColumns = hooks => { const defaultGetResizerProps = (props, instance, header) => { const { dispatch } = instance - const onMouseDown = (e, header) => { + const onResizeStart = (e, header) => { + let isTouchEvent = false + if (e.type === 'touchstart') { + // lets not respond to multiple touches (e.g. 2 or 3 fingers) + if (e.touches && e.touches.length > 1) { + return + } + isTouchEvent = true + } const headersToResize = getLeafHeaders(header) const headerIdWidths = headersToResize.map(d => [d.id, d.totalWidth]) - const clientX = e.clientX + const clientX = isTouchEvent ? Math.round(e.touches[0].clientX) : e.clientX - const onMouseMove = e => { - const clientX = e.clientX + const dispatchMove = clientXPos => { + dispatch({ type: actions.columnResizing, clientX: clientXPos }) + } + const dispatchEnd = () => dispatch({ type: actions.columnDoneResizing }) - dispatch({ type: actions.columnResizing, clientX }) + const handlersAndEvents = { + mouse: { + moveEvent: 'mousemove', + moveHandler: e => dispatchMove(e.clientX), + upEvent: 'mouseup', + upHandler: e => { + document.removeEventListener( + 'mousemove', + handlersAndEvents.mouse.moveHandler + ) + document.removeEventListener( + 'mouseup', + handlersAndEvents.mouse.upHandler + ) + dispatchEnd() + }, + }, + touch: { + moveEvent: 'touchmove', + moveHandler: e => { + if (e.cancelable) { + e.preventDefault() + e.stopPropagation() + } + dispatchMove(e.touches[0].clientX) + return false + }, + upEvent: 'touchend', + upHandler: e => { + document.removeEventListener( + handlersAndEvents.touch.moveEvent, + handlersAndEvents.touch.moveHandler + ) + document.removeEventListener( + handlersAndEvents.touch.upEvent, + handlersAndEvents.touch.moveHandler + ) + dispatchEnd() + }, + }, } - const onMouseUp = e => { - document.removeEventListener('mousemove', onMouseMove) - document.removeEventListener('mouseup', onMouseUp) - - dispatch({ type: actions.columnDoneResizing }) - } - - document.addEventListener('mousemove', onMouseMove) - document.addEventListener('mouseup', onMouseUp) + const events = isTouchEvent + ? handlersAndEvents.touch + : handlersAndEvents.mouse + document.addEventListener(events.moveEvent, events.moveHandler, { + passive: false, + }) + document.addEventListener(events.upEvent, events.upHandler, { + passive: false, + }) dispatch({ type: actions.columnStartResizing, @@ -58,7 +107,8 @@ const defaultGetResizerProps = (props, instance, header) => { return [ props, { - onMouseDown: e => e.persist() || onMouseDown(e, header), + onMouseDown: e => e.persist() || onResizeStart(e, header), + onTouchStart: e => e.persist() || onResizeStart(e, header), style: { cursor: 'ew-resize', },