Revert Slider event propagation as it messed up behavior of NumberRange

Nuvotion-Visuals · May 27, 2024 · 2f415e5 · 2f415e5
1 parent 04d824d
commit 2f415e5
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 41 deletions.
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "version": "1.0.129",
+  "version": "1.0.130",
   "description": "Formation is a comprehensive component library powered by React, Styled Components, and CSS variables for creating apps and websites that demand responsive, unified cross-platform experiences.",
   "resolutions": {
     "string-width": "^4",

diff --git a/src/components/Sliders/RC-Slider/Slider.tsx b/src/components/Sliders/RC-Slider/Slider.tsx
@@ -160,44 +160,6 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<SliderRef>)
   const handlesRef = React.useRef<HandlesRef>();
   const containerRef = React.useRef<HTMLDivElement>();
 
-  React.useEffect(() => {
-    const element = containerRef.current
-
-    const onSliderMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
-      e.stopPropagation()
-      e.preventDefault()
-      const { clientX, clientY } = e
-      handleStartDrag(clientX, clientY, e)
-    }
-
-    const onSliderTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {
-      e.stopPropagation()
-      e.preventDefault()
-      const touch = e.touches[0]
-      const { clientX, clientY } = touch
-      handleStartDrag(clientX, clientY, e)
-    }
-
-    const onContextMenu = (e: MouseEvent) => {
-      e.stopPropagation()
-      e.preventDefault()
-    }
-
-    if (element) {
-      element.addEventListener('touchstart', onSliderTouchStart as unknown as EventListener)
-      element.addEventListener('mousedown', onSliderMouseDown as unknown as EventListener)
-      element.addEventListener('contextmenu', onContextMenu)
-    }
-
-    return () => {
-      if (element) {
-        element.removeEventListener('touchstart', onSliderTouchStart as unknown as EventListener)
-        element.removeEventListener('mousedown', onSliderMouseDown as unknown as EventListener)
-        element.removeEventListener('contextmenu', onContextMenu)
-      }
-    }
-  }, [])
-
   const direction: Direction = React.useMemo(() => {
     if (vertical) {
       return reverse ? 'ttb' : 'btt';
@@ -385,7 +347,18 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<SliderRef>)
     onStartDrag(originalEvent, -1, formattedValue)
   }
 
+  const onSliderMouseDown: React.MouseEventHandler<HTMLDivElement> = (e) => {
+    e.preventDefault()
+    const { clientX, clientY } = e
+    handleStartDrag(clientX, clientY, e)
+  }
 
+  const onSliderTouchStart: React.TouchEventHandler<HTMLDivElement> = (e) => {
+    e.preventDefault()
+    const touch = e.touches[0]
+    const { clientX, clientY } = touch
+    handleStartDrag(clientX, clientY, e)
+  }
 
   // =========================== Keyboard ===========================
   const [keyboardValue, setKeyboardValue] = React.useState<number | null>(null);
@@ -540,8 +513,8 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<SliderRef>)
           [`${prefixCls}-with-marks`]: markList.length,
         })}
         style={style}
-        // onMouseDown={onSliderMouseDown}
-        // onTouchStart={onSliderTouchStart}
+        onMouseDown={onSliderMouseDown}
+        onTouchStart={onSliderTouchStart}
       >
         <div className={`${prefixCls}-rail`} style={railStyle}>
         {