"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); var _typeof = require("@babel/runtime/helpers/typeof"); Object.defineProperty(exports, "__esModule", { value: true }); exports.default = useTouchMove; var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray")); var _react = _interopRequireWildcard(require("react")); var React = _react; function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); } function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } var MIN_SWIPE_DISTANCE = 0.1; var STOP_SWIPE_DISTANCE = 0.01; var REFRESH_INTERVAL = 20; var SPEED_OFF_MULTIPLE = Math.pow(0.995, REFRESH_INTERVAL); // ================================= Hook ================================= function useTouchMove(ref, onOffset) { var _useState = (0, _react.useState)(), _useState2 = (0, _slicedToArray2.default)(_useState, 2), touchPosition = _useState2[0], setTouchPosition = _useState2[1]; var _useState3 = (0, _react.useState)(0), _useState4 = (0, _slicedToArray2.default)(_useState3, 2), lastTimestamp = _useState4[0], setLastTimestamp = _useState4[1]; var _useState5 = (0, _react.useState)(0), _useState6 = (0, _slicedToArray2.default)(_useState5, 2), lastTimeDiff = _useState6[0], setLastTimeDiff = _useState6[1]; var _useState7 = (0, _react.useState)(), _useState8 = (0, _slicedToArray2.default)(_useState7, 2), lastOffset = _useState8[0], setLastOffset = _useState8[1]; var motionRef = (0, _react.useRef)(); // ========================= Events ========================= // >>> Touch events function onTouchStart(e) { var _e$touches$ = e.touches[0], screenX = _e$touches$.screenX, screenY = _e$touches$.screenY; setTouchPosition({ x: screenX, y: screenY }); window.clearInterval(motionRef.current); } function onTouchMove(e) { if (!touchPosition) return; e.preventDefault(); var _e$touches$2 = e.touches[0], screenX = _e$touches$2.screenX, screenY = _e$touches$2.screenY; setTouchPosition({ x: screenX, y: screenY }); var offsetX = screenX - touchPosition.x; var offsetY = screenY - touchPosition.y; onOffset(offsetX, offsetY); var now = Date.now(); setLastTimestamp(now); setLastTimeDiff(now - lastTimestamp); setLastOffset({ x: offsetX, y: offsetY }); } function onTouchEnd() { if (!touchPosition) return; setTouchPosition(null); setLastOffset(null); // Swipe if needed if (lastOffset) { var distanceX = lastOffset.x / lastTimeDiff; var distanceY = lastOffset.y / lastTimeDiff; var absX = Math.abs(distanceX); var absY = Math.abs(distanceY); // Skip swipe if low distance if (Math.max(absX, absY) < MIN_SWIPE_DISTANCE) return; var currentX = distanceX; var currentY = distanceY; motionRef.current = window.setInterval(function () { if (Math.abs(currentX) < STOP_SWIPE_DISTANCE && Math.abs(currentY) < STOP_SWIPE_DISTANCE) { window.clearInterval(motionRef.current); return; } currentX *= SPEED_OFF_MULTIPLE; currentY *= SPEED_OFF_MULTIPLE; onOffset(currentX * REFRESH_INTERVAL, currentY * REFRESH_INTERVAL); }, REFRESH_INTERVAL); } } // >>> Wheel event var lastWheelDirectionRef = (0, _react.useRef)(); function onWheel(e) { var deltaX = e.deltaX, deltaY = e.deltaY; // Convert both to x & y since wheel only happened on PC var mixed = 0; var absX = Math.abs(deltaX); var absY = Math.abs(deltaY); if (absX === absY) { mixed = lastWheelDirectionRef.current === 'x' ? deltaX : deltaY; } else if (absX > absY) { mixed = deltaX; lastWheelDirectionRef.current = 'x'; } else { mixed = deltaY; lastWheelDirectionRef.current = 'y'; } if (onOffset(-mixed, -mixed)) { e.preventDefault(); } } // ========================= Effect ========================= var touchEventsRef = (0, _react.useRef)(null); touchEventsRef.current = { onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onTouchEnd, onWheel: onWheel }; React.useEffect(function () { function onProxyTouchStart(e) { touchEventsRef.current.onTouchStart(e); } function onProxyTouchMove(e) { touchEventsRef.current.onTouchMove(e); } function onProxyTouchEnd(e) { touchEventsRef.current.onTouchEnd(e); } function onProxyWheel(e) { touchEventsRef.current.onWheel(e); } document.addEventListener('touchmove', onProxyTouchMove, { passive: false }); document.addEventListener('touchend', onProxyTouchEnd, { passive: true }); // No need to clean up since element removed ref.current.addEventListener('touchstart', onProxyTouchStart, { passive: true }); ref.current.addEventListener('wheel', onProxyWheel, { passive: false }); return function () { document.removeEventListener('touchmove', onProxyTouchMove); document.removeEventListener('touchend', onProxyTouchEnd); }; }, []); }