type erroes

jpmorganchase · May 24, 2024 · d81ffe8 · d81ffe8
1 parent 0c5c0d6
commit d81ffe8
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 7 deletions.
diff --git a/packages/lab/src/slider/internal/SliderThumb.tsx b/packages/lab/src/slider/internal/SliderThumb.tsx
@@ -20,6 +20,8 @@ export function SliderThumb(props: SliderThumbProps): JSX.Element {
 
   const onKeyDown = useKeyDownThumb(min, max, step, value, onChange, index);
 
+  console.log(index);
+
   const { thumbProps, tooltipVisible } = useMouseDownThumb(
     trackRef,
     min,

diff --git a/packages/lab/src/slider/internal/useMouseDownThumb.ts b/packages/lab/src/slider/internal/useMouseDownThumb.ts
@@ -12,8 +12,6 @@ export function useMouseDownThumb(
   index: number,
 ) {
 
-
-
   const [tooltipVisible, setTooltipVisible] = useState(false);
   const [ mouseDown, setMouseDown ] = useState(false)
   const activeThumbIndex = useRef<{ index: number | undefined}>({
@@ -33,7 +31,7 @@ export function useMouseDownThumb(
     document.removeEventListener("pointerup", onMouseUp);
     setTooltipVisible(false);
     setMouseDown(false)
-    activeThumbIndex.current.index = undefined
+    activeThumbIndex.current.index = 0
   };
 
   const onMouseMove = (event: MouseEvent): void => {
@@ -55,7 +53,7 @@ export function useMouseDownThumb(
         onDownThumb();
       },
       onMouseOver() {
-        activeThumbIndex.current.index === index && setTooltipVisible(true);
+   setTooltipVisible(true)
       },
       onFocus() {
         setTooltipVisible(true);

diff --git a/packages/lab/src/slider/internal/utils.ts b/packages/lab/src/slider/internal/utils.ts
@@ -1,5 +1,5 @@
 import { SliderChangeHandler } from "../types";
-import { RefObject, useRef } from "react";
+import { RefObject } from "react";
 
 export const getValue = (
   trackRef: RefObject<Element>,
@@ -30,8 +30,10 @@ export function setRangeValue(
     Math.abs(value[1] - newValue) < step
   )
     return;
-  if (index === 0 && newValue > value[1]) return;
-  if (index === 1 && newValue < value[0]) return;
+  if (index === 0 && newValue > value[1])
+    return onChange([value[1] - step, value[1]]);
+  if (index === 1 && newValue < value[0])
+    return onChange([value[0], value[0] + step]);
   index ? onChange?.([value[0], newValue]) : onChange?.([newValue, value[1]]);
 }
 

diff --git a/packages/lab/stories/slider/slider.stories.tsx b/packages/lab/stories/slider/slider.stories.tsx
@@ -155,6 +155,7 @@ export const RangeWithInput = () => {
           min={0}
           max={50}
           value={value}
+          // @ts-ignore
           onChange={handleSliderChange}
           aria-label="withInput"
         />