Update index.tsx

Author: lxsmnsyc

packages/scan/src/web/components/slider/index.tsx

@@ -1,5 +1,5 @@
-import { useCallback, useEffect, useRef } from "preact/hooks";
-import { cn } from "~web/utils/helpers";
+import { useCallback, useEffect, useRef } from 'preact/hooks';
+import { cn } from '~web/utils/helpers';
 
 interface SliderProps {
   className?: string;
@@ -21,15 +21,26 @@ export const Slider = ({
   const refThumb = useRef<HTMLSpanElement>(null);
   const refLastValue = useRef<number>(value);
 
-  const updateThumbPosition = useCallback((value: number) => {
-    if (!refThumb.current) return;
+  // TODO(Alexis): This one needs some rework.
+  // Aside the fact that this needs to be a computed value
+  // rather than a side-effect, we need this component
+  // to be "controlled" rather than uncontrolled at the same time
+  // Basically we want to either use value or lastValue but not both.
+  const updateThumbPosition = useCallback(
+    (value: number) => {
+      if (!refThumb.current) return;
 
-    const range = Math.max(1, max - min);
-    const valueOffset = value - min;
-    const percentage = min === max ? 0 : Math.min(100, Math.round((valueOffset / range) * 100));
+      const range = Math.max(1, max - min);
+      const valueOffset = value - min;
+      const percentage =
+        min === max
+          ? 0
+          : Math.min(100, Math.round((valueOffset / range) * 100));
 
-    refThumb.current.style.setProperty('left', `${percentage}%`);
-  }, [min, max]);
+      refThumb.current.style.setProperty('left', `${percentage}%`);
+    },
+    [min, max],
+  );
 
   /**
    * biome-ignore lint/correctness/useExhaustiveDependencies:
@@ -39,31 +50,30 @@ export const Slider = ({
     updateThumbPosition(value);
   }, [min, max, value]);
 
-  const handleChange = useCallback((e: Event) => {
-    const target = e.target as HTMLInputElement;
-    const newValue = Number.parseInt(target.value, 10);
+  const handleChange = useCallback(
+    (e: Event) => {
+      const target = e.target as HTMLInputElement;
+      const newValue = Number.parseInt(target.value, 10);
 
-    if (newValue >= totalUpdates) {
-      return;
-    }
+      if (newValue >= totalUpdates) {
+        return;
+      }
 
-    if (refLastValue.current !== newValue) {
-      refLastValue.current = newValue;
-      updateThumbPosition(newValue);
-      onChange(e);
-    }
-  }, [onChange, updateThumbPosition, totalUpdates]);
+      if (refLastValue.current !== newValue) {
+        refLastValue.current = newValue;
+        updateThumbPosition(newValue);
+        onChange(e);
+      }
+    },
+    [onChange, updateThumbPosition, totalUpdates],
+  );
 
   return (
     <div
       onMouseDown={(e) => {
         e.stopPropagation();
       }}
-      className={cn(
-        'react-scan-slider relative',
-        'flex-1',
-        className
-      )}
+      className={cn('react-scan-slider relative', 'flex-1', className)}
     >
       <input
         type="range"
@@ -79,15 +89,10 @@ export const Slider = ({
           'rounded-lg',
           'appearance-none',
           'cursor-pointer',
-          className
+          className,
         )}
       />
-      <div
-        className={cn(
-          'absolute inset-0 right-2',
-          'pointer-events-none',
-        )}
-      >
+      <div className={cn('absolute inset-0 right-2', 'pointer-events-none')}>
         <span ref={refThumb} />
       </div>
     </div>