|
@@ -1,6 +1,7 @@
|
|
|
import { useState, useRef, useCallback, useEffect } from 'react';
|
|
|
import { fromEvent, Subscription } from 'rxjs';
|
|
|
import { throttleTime } from 'rxjs/operators';
|
|
|
+import MobileDetect from 'mobile-detect';
|
|
|
|
|
|
import { getAbsoluteCoordinate } from '../helpers/position';
|
|
|
|
|
@@ -83,6 +84,8 @@ const useCursorPosition: UseCursorPositionType = (time = defaultTime) => {
|
|
|
);
|
|
|
|
|
|
useEffect(() => {
|
|
|
+ const md = new MobileDetect(window.navigator.userAgent);
|
|
|
+
|
|
|
let mouseSubscription: Subscription | null = null;
|
|
|
let touchSubscription: Subscription | null = null;
|
|
|
|
|
@@ -116,31 +119,40 @@ const useCursorPosition: UseCursorPositionType = (time = defaultTime) => {
|
|
|
};
|
|
|
|
|
|
if (element) {
|
|
|
- mouseSubscription = fromEvent(element, 'mousemove')
|
|
|
- .pipe(throttleTime(time))
|
|
|
- .subscribe(onMouseMoveEvent);
|
|
|
- touchSubscription = fromEvent(element, 'touchmove')
|
|
|
- .pipe(throttleTime(time))
|
|
|
- .subscribe(onTouchMoveEvent);
|
|
|
-
|
|
|
const addEvent = element.addEventListener.bind(element);
|
|
|
- addEvent('mouseenter', onEnter);
|
|
|
- addEvent('mouseleave', onLeave);
|
|
|
- addEvent('mousedown', onDown);
|
|
|
- addEvent('touchstart', onTouch);
|
|
|
- addEvent('mouseup', onUp);
|
|
|
- addEvent('touchend', onUp);
|
|
|
+
|
|
|
+ if (md.mobile() || md.tablet()) {
|
|
|
+ touchSubscription = fromEvent(element, 'touchmove')
|
|
|
+ .pipe(throttleTime(time))
|
|
|
+ .subscribe(onTouchMoveEvent);
|
|
|
+
|
|
|
+ addEvent('touchstart', onTouch);
|
|
|
+ addEvent('touchend', onUp);
|
|
|
+ } else {
|
|
|
+ mouseSubscription = fromEvent(element, 'mousemove')
|
|
|
+ .pipe(throttleTime(time))
|
|
|
+ .subscribe(onMouseMoveEvent);
|
|
|
+
|
|
|
+ addEvent('mouseenter', onEnter);
|
|
|
+ addEvent('mouseleave', onLeave);
|
|
|
+ addEvent('mousedown', onDown);
|
|
|
+ addEvent('mouseup', onUp);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
return (): void => {
|
|
|
if (element) {
|
|
|
const removeEvent = element.removeEventListener.bind(element);
|
|
|
- removeEvent('mouseenter', onEnter);
|
|
|
- removeEvent('mouseleave', onLeave);
|
|
|
- removeEvent('mousedown', onDown);
|
|
|
- removeEvent('touchstart', onTouch);
|
|
|
- removeEvent('mouseup', onUp);
|
|
|
- removeEvent('touchend', onUp);
|
|
|
+
|
|
|
+ if (md.mobile() || md.tablet()) {
|
|
|
+ removeEvent('touchstart', onTouch);
|
|
|
+ removeEvent('touchend', onUp);
|
|
|
+ } else {
|
|
|
+ removeEvent('mouseenter', onEnter);
|
|
|
+ removeEvent('mouseleave', onLeave);
|
|
|
+ removeEvent('mousedown', onDown);
|
|
|
+ removeEvent('mouseup', onUp);
|
|
|
+ }
|
|
|
}
|
|
|
};
|
|
|
}, [element]);
|