useScrollDrag.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. import raf from "rc-util/es/raf";
  2. import * as React from 'react';
  3. function smoothScrollOffset(offset) {
  4. return Math.floor(Math.pow(offset, 0.5));
  5. }
  6. export function getPageXY(e, horizontal) {
  7. var obj = 'touches' in e ? e.touches[0] : e;
  8. return obj[horizontal ? 'pageX' : 'pageY'] - window[horizontal ? 'scrollX' : 'scrollY'];
  9. }
  10. export default function useScrollDrag(inVirtual, componentRef, onScrollOffset) {
  11. React.useEffect(function () {
  12. var ele = componentRef.current;
  13. if (inVirtual && ele) {
  14. var mouseDownLock = false;
  15. var rafId;
  16. var _offset;
  17. var stopScroll = function stopScroll() {
  18. raf.cancel(rafId);
  19. };
  20. var continueScroll = function continueScroll() {
  21. stopScroll();
  22. rafId = raf(function () {
  23. onScrollOffset(_offset);
  24. continueScroll();
  25. });
  26. };
  27. var clearDragState = function clearDragState() {
  28. mouseDownLock = false;
  29. stopScroll();
  30. };
  31. var onMouseDown = function onMouseDown(e) {
  32. // Skip if element set draggable
  33. if (e.target.draggable || e.button !== 0) {
  34. return;
  35. }
  36. // Skip if nest List has handled this event
  37. var event = e;
  38. if (!event._virtualHandled) {
  39. event._virtualHandled = true;
  40. mouseDownLock = true;
  41. }
  42. };
  43. var onMouseMove = function onMouseMove(e) {
  44. if (mouseDownLock) {
  45. var mouseY = getPageXY(e, false);
  46. var _ele$getBoundingClien = ele.getBoundingClientRect(),
  47. top = _ele$getBoundingClien.top,
  48. bottom = _ele$getBoundingClien.bottom;
  49. if (mouseY <= top) {
  50. var diff = top - mouseY;
  51. _offset = -smoothScrollOffset(diff);
  52. continueScroll();
  53. } else if (mouseY >= bottom) {
  54. var _diff = mouseY - bottom;
  55. _offset = smoothScrollOffset(_diff);
  56. continueScroll();
  57. } else {
  58. stopScroll();
  59. }
  60. }
  61. };
  62. ele.addEventListener('mousedown', onMouseDown);
  63. ele.ownerDocument.addEventListener('mouseup', clearDragState);
  64. ele.ownerDocument.addEventListener('mousemove', onMouseMove);
  65. ele.ownerDocument.addEventListener('dragend', clearDragState);
  66. return function () {
  67. ele.removeEventListener('mousedown', onMouseDown);
  68. ele.ownerDocument.removeEventListener('mouseup', clearDragState);
  69. ele.ownerDocument.removeEventListener('mousemove', onMouseMove);
  70. ele.ownerDocument.removeEventListener('dragend', clearDragState);
  71. stopScroll();
  72. };
  73. }
  74. }, [inVirtual]);
  75. }