feat: Slider兼容pc离开元素move事件中断问题

alibaba · Jan 31, 2025 · b270f76 · b270f76
1 parent 3ecb8d6
commit b270f76
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 23 deletions.
diff --git a/packages/bui-core/src/Slider/Slider.tsx b/packages/bui-core/src/Slider/Slider.tsx
@@ -2,7 +2,9 @@ import { GripperBarVerticalIcon } from '@bifrostui/icons';
 import {
   isMini,
   useForkRef,
-  useTouchEmulator,
+  emulateTouchStart,
+  emulateTouchMove,
+  emulateTouchEnd,
   useValue,
   getBoundingClientRect,
 } from '@bifrostui/utils';
@@ -57,7 +59,6 @@ const Slider = React.forwardRef<HTMLDivElement, SliderProps>((props, ref) => {
 
   const [rootRef, setRootRef] = useState(null);
   const handleRef = useForkRef(ref, setRootRef);
-  useTouchEmulator(rootRef);
 
   // Slider BoundingClientRect
   const sliderRect = useRef<Record<string, any>>();
@@ -266,6 +267,18 @@ const Slider = React.forwardRef<HTMLDivElement, SliderProps>((props, ref) => {
     setEndTooltipVisible(false);
   };
 
+  const onMouseUp = (e) => {
+    emulateTouchEnd(e);
+    document.removeEventListener('mousemove', emulateTouchMove);
+    document.removeEventListener('mouseup', onMouseUp);
+  };
+
+  const onMouseDown = (e) => {
+    emulateTouchStart(e);
+    document.addEventListener('mousemove', emulateTouchMove);
+    document.addEventListener('mouseup', onMouseUp);
+  };
+
   const renderButton = (index: number) => {
     const valuenow = internalValue[index];
 
@@ -289,6 +302,7 @@ const Slider = React.forwardRef<HTMLDivElement, SliderProps>((props, ref) => {
         onTouchMove={onTouchMove}
         onTouchEnd={onTouchEnd}
         onTouchCancel={onTouchEnd}
+        onMouseDown={onMouseDown}
       >
         {index === SLIDER_BUTTON.FRONT
           ? startIcon || defaultIcon

diff --git a/packages/bui-utils/src/hooks/index.ts b/packages/bui-utils/src/hooks/index.ts
@@ -1,7 +1,12 @@
 import useDidMountEffect from './useDidMountEffect';
 import useEventCallback from './useEventCallback';
 import useForkRef from './useForkRef';
-import useTouchEmulator, { touchEmulator } from './useTouchEmulator';
+import useTouchEmulator, {
+  touchEmulator,
+  emulateTouchStart,
+  emulateTouchMove,
+  emulateTouchEnd,
+} from './useTouchEmulator';
 import useValue from './useValue';
 import useDomReady from './useDomReady';
 import useSize from './useSize';
@@ -16,6 +21,9 @@ export {
   useDidMountEffect,
   useTouchEmulator,
   touchEmulator,
+  emulateTouchStart,
+  emulateTouchMove,
+  emulateTouchEnd,
   useDomReady,
   useSize,
   useDomCss,

diff --git a/packages/bui-utils/src/hooks/useTouchEmulator.ts b/packages/bui-utils/src/hooks/useTouchEmulator.ts
@@ -140,42 +140,42 @@ function getActiveTouches(mouseEv) {
   return createTouchList(mouseEv);
 }
 
-export default function useTouchEmulator(dom: HTMLElement | Window = window) {
-  const touchStart = onMouse('touchstart');
-  const touchMove = onMouse('touchmove');
-  const touchEnd = onMouse('touchend');
+const emulateTouchStart = onMouse('touchstart');
+const emulateTouchMove = onMouse('touchmove');
+const emulateTouchEnd = onMouse('touchend');
 
+function useTouchEmulator(dom: HTMLElement | Window = window) {
   useEffect(() => {
     if (dom) {
-      dom.addEventListener('mousedown', touchStart, true);
-      dom.addEventListener('mousemove', touchMove, true);
-      dom.addEventListener('mouseup', touchEnd, true);
+      dom.addEventListener('mousedown', emulateTouchStart, true);
+      dom.addEventListener('mousemove', emulateTouchMove, true);
+      dom.addEventListener('mouseup', emulateTouchEnd, true);
     }
 
     return () => {
       if (dom) {
-        dom.removeEventListener('mousedown', touchStart, true);
-        dom.removeEventListener('mousemove', touchMove, true);
-        dom.removeEventListener('mouseup', touchEnd, true);
+        dom.removeEventListener('mousedown', emulateTouchStart, true);
+        dom.removeEventListener('mousemove', emulateTouchMove, true);
+        dom.removeEventListener('mouseup', emulateTouchEnd, true);
       }
     };
   }, [dom]);
 }
 
-export const touchEmulator = (dom: HTMLElement | Window = window) => {
-  const touchStart = onMouse('touchstart');
-  const touchMove = onMouse('touchmove');
-  const touchEnd = onMouse('touchend');
+const touchEmulator = (dom: HTMLElement | Window = window) => {
   if (dom) {
-    dom.addEventListener('mousedown', touchStart, true);
-    dom.addEventListener('mousemove', touchMove, true);
-    dom.addEventListener('mouseup', touchEnd, true);
+    dom.addEventListener('mousedown', emulateTouchStart, true);
+    dom.addEventListener('mousemove', emulateTouchMove, true);
+    dom.addEventListener('mouseup', emulateTouchEnd, true);
   }
   return function () {
     if (dom) {
-      dom.removeEventListener('mousedown', touchStart, true);
-      dom.removeEventListener('mousemove', touchMove, true);
-      dom.removeEventListener('mouseup', touchEnd, true);
+      dom.removeEventListener('mousedown', emulateTouchStart, true);
+      dom.removeEventListener('mousemove', emulateTouchMove, true);
+      dom.removeEventListener('mouseup', emulateTouchEnd, true);
     }
   };
 };
+
+export default useTouchEmulator;
+export { touchEmulator, emulateTouchStart, emulateTouchMove, emulateTouchEnd };
diff --git a/packages/bui-utils/src/index.ts b/packages/bui-utils/src/index.ts
@@ -12,6 +12,9 @@ export {
   useForkRef,
   useTouchEmulator,
   touchEmulator,
+  emulateTouchStart,
+  emulateTouchMove,
+  emulateTouchEnd,
   useValue,
   useDomReady,
   useSize,