cleanup

Author: mj12albert

packages/mui-material/src/Slider/useSlider.ts

@@ -42,7 +42,7 @@ function findClosest(values: number[], currentValue: number) {
       (acc, value: number, index: number) => {
         const distance = Math.abs(currentValue - value);
 
-        if (acc == null || distance < acc.distance || distance === acc.distance) {
+        if (acc == null || distance <= acc.distance) {
           return {
             distance,
             index,
@@ -109,31 +109,18 @@ function roundValueToStep(value: number, step: number, min: number) {
   return Number(nearest.toFixed(getDecimalPrecision(step)));
 }
 
-function setValueIndex({
-  values,
-  newValue,
-  index,
-}: {
-  values: number[];
-  newValue: number;
-  index: number;
-}) {
+function setValueIndex(values: number[], newValue: number, index: number) {
   const output = values.slice();
   output[index] = newValue;
   return output.sort(asc);
 }
 
-function focusThumb({
-  sliderRef,
-  activeIndex,
-  setActive,
-  focusVisible,
-}: {
-  sliderRef: React.RefObject<any>;
-  activeIndex: number;
-  setActive?: ((num: number) => void) | undefined;
-  focusVisible?: boolean | undefined;
-}) {
+function focusThumb(
+  sliderRef: React.RefObject<any>,
+  activeIndex: number,
+  setActive?: ((num: number) => void) | undefined,
+  focusVisible?: boolean | undefined,
+) {
   const doc = ownerDocument(sliderRef.current);
   if (
     !sliderRef.current?.contains(doc.activeElement) ||
@@ -271,21 +258,38 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
 
   const range = Array.isArray(valueDerived);
   const values = React.useMemo(() => {
-    const raw = range ? (valueDerived as number[]).slice().sort(asc) : [valueDerived as number];
-    return raw.map((value) => (value == null ? min : clamp(value, min, max)));
-  }, [valueDerived, range, min, max]);
-
-  const marks = React.useMemo<readonly Mark[]>(
-    () =>
-      marksProp === true && step != null
-        ? [...Array(Math.floor((max - min) / step) + 1)].map((_, index) => ({
-            value: min + step * index,
-          }))
-        : ((marksProp || EMPTY_MARKS) as readonly Mark[]),
-    [marksProp, step, min, max],
-  );
+    if (!Array.isArray(valueDerived)) {
+      return [valueDerived == null ? min : clamp(valueDerived, min, max)];
+    }
+
+    const values = valueDerived.slice().sort(asc);
+    for (let i = 0; i < values.length; i += 1) {
+      const value = values[i];
+      values[i] = value == null ? min : clamp(value, min, max);
+    }
+
+    return values;
+  }, [valueDerived, min, max]);
+
+  const marks = React.useMemo<readonly Mark[]>(() => {
+    if (marksProp === true && step != null) {
+      const marks = new Array<Mark>(Math.floor((max - min) / step) + 1);
+      for (let i = 0; i < marks.length; i += 1) {
+        marks[i] = { value: min + step * i };
+      }
+      return marks;
+    }
+
+    return Array.isArray(marksProp) ? marksProp : EMPTY_MARKS;
+  }, [marksProp, step, min, max]);
 
-  const marksValues = React.useMemo(() => marks.map((mark) => mark.value), [marks]);
+  const marksValues = React.useMemo(() => {
+    const values = new Array<number>(marks.length);
+    for (let i = 0; i < marks.length; i += 1) {
+      values[i] = marks[i].value;
+    }
+    return values;
+  }, [marks]);
 
   const [focusedThumbIndex, setFocusedThumbIndex] = React.useState(-1);
 
@@ -336,11 +340,7 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
       }
 
       const previousValue = newValue;
-      newValue = setValueIndex({
-        values,
-        newValue,
-        index,
-      });
+      newValue = setValueIndex(values, newValue, index);
 
       let activeIndex = index;
 
@@ -349,7 +349,7 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
         activeIndex = newValue.indexOf(previousValue);
       }
 
-      focusThumb({ sliderRef, activeIndex });
+      focusThumb(sliderRef, activeIndex);
     }
 
     setValueState(newValue);
@@ -530,11 +530,7 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
       }
 
       const previousValue = newValue;
-      newValue = setValueIndex({
-        values,
-        newValue,
-        index: activeIndex,
-      });
+      newValue = setValueIndex(values, newValue, activeIndex);
 
       // Potentially swap the index if needed.
       if (!(disableSwap && isDragging)) {
@@ -573,12 +569,7 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
       return;
     }
 
-    focusThumb({
-      sliderRef,
-      activeIndex: newFingerValue.activeIndex,
-      setActive,
-      focusVisible: false,
-    });
+    focusThumb(sliderRef, newFingerValue.activeIndex, setActive, false);
     lastUsedThumbIndexRef.current = newFingerValue.activeIndex;
     setValueState(newFingerValue.newValue);
 
@@ -656,12 +647,7 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
       previousIndexRef.current = -1;
       const newFingerValue = getValueAtFinger(finger);
       if (newFingerValue) {
-        focusThumb({
-          sliderRef,
-          activeIndex: newFingerValue.activeIndex,
-          setActive,
-          focusVisible: false,
-        });
+        focusThumb(sliderRef, newFingerValue.activeIndex, setActive, false);
         lastUsedThumbIndexRef.current = newFingerValue.activeIndex;
 
         setValueState(newFingerValue.newValue);
@@ -745,11 +731,7 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
             cancelFocusFrame();
             focusFrameRef.current = requestAnimationFrame(() => {
               focusFrameRef.current = null;
-              focusThumb({
-                sliderRef,
-                activeIndex: newFingerValue.activeIndex,
-                focusVisible: false,
-              });
+              focusThumb(sliderRef, newFingerValue.activeIndex, undefined, false);
             });
           }
 
@@ -785,10 +767,10 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
   const getRootProps = <ExternalProps extends Record<string, unknown> = {}>(
     externalProps: ExternalProps = {} as ExternalProps,
   ): UseSliderRootSlotProps<ExternalProps> => {
-    const externalHandlers = extractEventHandlers(externalProps);
+    const externalHandlers = extractEventHandlers(externalProps) || EMPTY_OBJ;
 
     const ownEventHandlers = {
-      onPointerDown: createHandlePointerDown(externalHandlers || EMPTY_OBJ),
+      onPointerDown: createHandlePointerDown(externalHandlers),
     };
 
     const mergedEventHandlers = {
@@ -821,11 +803,11 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
   const getThumbProps = <ExternalProps extends Record<string, unknown> = {}>(
     externalProps: ExternalProps = {} as ExternalProps,
   ): UseSliderThumbSlotProps<ExternalProps> => {
-    const externalHandlers = extractEventHandlers(externalProps);
+    const externalHandlers = extractEventHandlers(externalProps) || EMPTY_OBJ;
 
     const ownEventHandlers = {
-      onMouseOver: createHandleMouseOver(externalHandlers || EMPTY_OBJ),
-      onMouseLeave: createHandleMouseLeave(externalHandlers || EMPTY_OBJ),
+      onMouseOver: createHandleMouseOver(externalHandlers),
+      onMouseLeave: createHandleMouseLeave(externalHandlers),
     };
 
     return {
@@ -846,6 +828,7 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
     } else if (active === index) {
       zIndex = 1;
     }
+
     return {
       // So the non active thumb doesn't show its label on hover.
       pointerEvents: active !== -1 && active !== index ? 'none' : undefined,
@@ -861,13 +844,13 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
   const getHiddenInputProps = <ExternalProps extends Record<string, unknown> = {}>(
     externalProps: ExternalProps = {} as ExternalProps,
   ): UseSliderHiddenInputProps<ExternalProps> => {
-    const externalHandlers = extractEventHandlers(externalProps);
+    const externalHandlers = extractEventHandlers(externalProps) || EMPTY_OBJ;
 
     const ownEventHandlers = {
-      onChange: createHandleHiddenInputChange(externalHandlers || EMPTY_OBJ),
-      onFocus: createHandleHiddenInputFocus(externalHandlers || EMPTY_OBJ),
-      onBlur: createHandleHiddenInputBlur(externalHandlers || EMPTY_OBJ),
-      onKeyDown: createHandleHiddenInputKeyDown(externalHandlers || EMPTY_OBJ),
+      onChange: createHandleHiddenInputChange(externalHandlers),
+      onFocus: createHandleHiddenInputFocus(externalHandlers),
+      onBlur: createHandleHiddenInputBlur(externalHandlers),
+      onKeyDown: createHandleHiddenInputKeyDown(externalHandlers),
     };
 
     const mergedEventHandlers = {