useMobileTouchMove.js 3.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = useMobileTouchMove;
  7. var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
  8. var _react = require("react");
  9. var SMOOTH_PTG = 14 / 15;
  10. function useMobileTouchMove(inVirtual, listRef, callback) {
  11. var touchedRef = (0, _react.useRef)(false);
  12. var touchXRef = (0, _react.useRef)(0);
  13. var touchYRef = (0, _react.useRef)(0);
  14. var elementRef = (0, _react.useRef)(null);
  15. // Smooth scroll
  16. var intervalRef = (0, _react.useRef)(null);
  17. /* eslint-disable prefer-const */
  18. var cleanUpEvents;
  19. var onTouchMove = function onTouchMove(e) {
  20. if (touchedRef.current) {
  21. var currentX = Math.ceil(e.touches[0].pageX);
  22. var currentY = Math.ceil(e.touches[0].pageY);
  23. var offsetX = touchXRef.current - currentX;
  24. var offsetY = touchYRef.current - currentY;
  25. var _isHorizontal = Math.abs(offsetX) > Math.abs(offsetY);
  26. if (_isHorizontal) {
  27. touchXRef.current = currentX;
  28. } else {
  29. touchYRef.current = currentY;
  30. }
  31. var scrollHandled = callback(_isHorizontal, _isHorizontal ? offsetX : offsetY, false, e);
  32. if (scrollHandled) {
  33. e.preventDefault();
  34. }
  35. // Smooth interval
  36. clearInterval(intervalRef.current);
  37. if (scrollHandled) {
  38. intervalRef.current = setInterval(function () {
  39. if (_isHorizontal) {
  40. offsetX *= SMOOTH_PTG;
  41. } else {
  42. offsetY *= SMOOTH_PTG;
  43. }
  44. var offset = Math.floor(_isHorizontal ? offsetX : offsetY);
  45. if (!callback(_isHorizontal, offset, true) || Math.abs(offset) <= 0.1) {
  46. clearInterval(intervalRef.current);
  47. }
  48. }, 16);
  49. }
  50. }
  51. };
  52. var onTouchEnd = function onTouchEnd() {
  53. touchedRef.current = false;
  54. cleanUpEvents();
  55. };
  56. var onTouchStart = function onTouchStart(e) {
  57. cleanUpEvents();
  58. if (e.touches.length === 1 && !touchedRef.current) {
  59. touchedRef.current = true;
  60. touchXRef.current = Math.ceil(e.touches[0].pageX);
  61. touchYRef.current = Math.ceil(e.touches[0].pageY);
  62. elementRef.current = e.target;
  63. elementRef.current.addEventListener('touchmove', onTouchMove, {
  64. passive: false
  65. });
  66. elementRef.current.addEventListener('touchend', onTouchEnd, {
  67. passive: true
  68. });
  69. }
  70. };
  71. cleanUpEvents = function cleanUpEvents() {
  72. if (elementRef.current) {
  73. elementRef.current.removeEventListener('touchmove', onTouchMove);
  74. elementRef.current.removeEventListener('touchend', onTouchEnd);
  75. }
  76. };
  77. (0, _useLayoutEffect.default)(function () {
  78. if (inVirtual) {
  79. listRef.current.addEventListener('touchstart', onTouchStart, {
  80. passive: true
  81. });
  82. }
  83. return function () {
  84. var _listRef$current;
  85. (_listRef$current = listRef.current) === null || _listRef$current === void 0 || _listRef$current.removeEventListener('touchstart', onTouchStart);
  86. cleanUpEvents();
  87. clearInterval(intervalRef.current);
  88. };
  89. }, [inVirtual]);
  90. }