From b270f7629cae462f1a5cf99de5e4d0ab2aa19d62 Mon Sep 17 00:00:00 2001 From: zhubeniii Date: Fri, 31 Jan 2025 16:54:43 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20Slider=E5=85=BC=E5=AE=B9pc=E7=A6=BB?= =?UTF-8?q?=E5=BC=80=E5=85=83=E7=B4=A0move=E4=BA=8B=E4=BB=B6=E4=B8=AD?= =?UTF-8?q?=E6=96=AD=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/bui-core/src/Slider/Slider.tsx | 18 ++++++++- packages/bui-utils/src/hooks/index.ts | 10 ++++- .../bui-utils/src/hooks/useTouchEmulator.ts | 40 +++++++++---------- packages/bui-utils/src/index.ts | 3 ++ 4 files changed, 48 insertions(+), 23 deletions(-) diff --git a/packages/bui-core/src/Slider/Slider.tsx b/packages/bui-core/src/Slider/Slider.tsx index f972cff7..1317f111 100644 --- 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((props, ref) => { const [rootRef, setRootRef] = useState(null); const handleRef = useForkRef(ref, setRootRef); - useTouchEmulator(rootRef); // Slider BoundingClientRect const sliderRect = useRef>(); @@ -266,6 +267,18 @@ const Slider = React.forwardRef((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((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 index 6b5713e6..c9ead084 100644 --- 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 index be14ef33..2e84c103 100644 --- 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 index dad5f0c4..a4e90542 100644 --- 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,