@react-fabric/form 1.0.0-beta.9 → 1.0.1

package/src/ranger/index.tsx

@@ -2,6 +2,15 @@
  * react-ranger
  * https://github.com/TanStack/ranger
  */
+
+/* eslint-disable @eslint-react/web-api-no-leaked-event-listener */
+/* eslint-disable @eslint-react/exhaustive-deps */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+
 import { useIsRtl } from "@react-fabric/core";
 import {
   type KeyboardEvent as KE,
@@ -13,11 +22,7 @@ import {
   useRef,
   useState,
 } from "react";
-import {
-  getBoundingClientRect,
-  linearInterpolator,
-  sortNumList,
-} from "./utils";
+import { getBoundingClientRect, linearInterpolator, sortNumList } from "./utils";
 
 type RangerChangeEvent = (newValue: readonly number[]) => void;
 
@@ -48,7 +53,7 @@ const useGetLatest = (val: AnyObject) => {
   }, []);
 };
 
-export const useRanger = (opts: RangerConfig) => {
+export function useRanger(opts: RangerConfig) {
   const tickSize = opts.tickSize ?? 10;
   const values = opts.values;
   const min = opts.min;
@@ -67,14 +72,8 @@ export const useRanger = (opts: RangerConfig) => {
   const [tempValues, setTempValues] = useState<number[]>();
   const isRtl = useIsRtl();
 
-  const positionProp = useMemo(
-    () => (isVertical ? "bottom" : isRtl ? "right" : "left"),
-    [isVertical, isRtl],
-  );
-  const marginProp = useMemo(
-    () => (isVertical ? "marginBottom" : isRtl ? "marginRight" : "marginLeft"),
-    [isVertical, isRtl],
-  );
+  const positionProp = useMemo(() => (isVertical ? "bottom" : isRtl ? "right" : "left"), [isVertical, isRtl]);
+  const marginProp = useMemo(() => (isVertical ? "marginBottom" : isRtl ? "marginRight" : "marginLeft"), [isVertical, isRtl]);
 
   const getLatest = useGetLatest({
     activeHandleIndex,
@@ -91,25 +90,14 @@ export const useRanger = (opts: RangerConfig) => {
   const getValueForClientX = useCallback(
     (clientX: number) => {
       const trackDims = getBoundingClientRect(trackElRef.current);
-      return linearInterpolator.getValueForClientX(
-        clientX,
-        trackDims,
-        min,
-        max,
-        isRtl,
-      );
+      return linearInterpolator.getValueForClientX(clientX, trackDims, min, max, isRtl);
     },
     [max, min, isRtl],
   );
   const getValueForClientY = useCallback(
     (clientY: number) => {
       const trackDims = getBoundingClientRect(trackElRef.current);
-      return linearInterpolator.getValueForClientY(
-        clientY,
-        trackDims,
-        min,
-        max,
-      );
+      return linearInterpolator.getValueForClientY(clientY, trackDims, min, max);
     },
     [max, min],
   );
@@ -127,9 +115,7 @@ export const useRanger = (opts: RangerConfig) => {
       } else {
         if (process.env.NODE_ENV !== "production") {
           if (typeof stepSize === "undefined") {
-            throw new Error(
-              "Warning: The option `stepSize` is expected in `useRanger`, but its value is `undefined`",
-            );
+            throw new Error("Warning: The option `stepSize` is expected in `useRanger`, but its value is `undefined`");
           }
         }
 
@@ -162,9 +148,7 @@ export const useRanger = (opts: RangerConfig) => {
       } else {
         if (process.env.NODE_ENV !== "production") {
           if (typeof stepSize === "undefined") {
-            throw new Error(
-              "Warning: The option `stepSize` is expected in `useRanger`, but its value is `undefined`",
-            );
+            throw new Error("Warning: The option `stepSize` is expected in `useRanger`, but its value is `undefined`");
           }
         }
 
@@ -193,26 +177,13 @@ export const useRanger = (opts: RangerConfig) => {
       const clientY =
         // @ts-expect-error ignore
         e.type === "touchmove" ? e.changedTouches[0].clientY : e.clientY;
-      const newValue = isVertical
-        ? getValueForClientY(clientY)
-        : getValueForClientX(clientX);
+      const newValue = isVertical ? getValueForClientY(clientY) : getValueForClientX(clientX);
       const newRoundedValue = roundToStep(newValue);
-      const newValues = [
-        ...values.slice(0, activeHandleIndex),
-        ...[newRoundedValue],
-        ...values.slice(+activeHandleIndex + 1),
-      ];
+      const newValues = [...values.slice(0, activeHandleIndex), ...[newRoundedValue], ...values.slice(+activeHandleIndex + 1)];
       onDrag?.(newValues);
       setTempValues(newValues);
     },
-    [
-      getLatest,
-      getValueForClientX,
-      getValueForClientY,
-      roundToStep,
-      values,
-      isVertical,
-    ],
+    [getLatest, getValueForClientX, getValueForClientY, roundToStep, values, isVertical],
   );
   const handleSegmentDrag = useCallback(
     (e: MouseEvent | TouchEvent) => {
@@ -230,9 +201,7 @@ export const useRanger = (opts: RangerConfig) => {
         // @ts-expect-error ignore
         e.type === "touchmove" ? e.changedTouches[0].clientY : e.clientY;
 
-      const start = isVertical
-        ? getValueForClientX(bottom + (clientY - segY))
-        : getValueForClientX(left + (clientX - segX));
+      const start = isVertical ? getValueForClientX(bottom + (clientY - segY)) : getValueForClientX(left + (clientX - segX));
       let diff = roundToStep(start) - tempValues[0];
       if (+tempValues[1] + diff > max) diff = 0;
       const newValues = [+tempValues[0] + diff, +tempValues[1] + diff];
@@ -242,15 +211,7 @@ export const useRanger = (opts: RangerConfig) => {
         setSegmentStart([clientX, clientY]);
       }
     },
-    [
-      getLatest,
-      getValueForClientX,
-      getValueForClientY,
-      roundToStep,
-      values,
-      isVertical,
-      max,
-    ],
+    [getLatest, getValueForClientX, getValueForClientY, roundToStep, values, isVertical, max],
   );
   const handleKeyDown = useCallback(
     (e: KE, i: number) => {
@@ -260,11 +221,7 @@ export const useRanger = (opts: RangerConfig) => {
         setActiveHandleIndex(i);
         const direction = ["ArrowLeft", "ArrowDown"].includes(e.key) ? -1 : 1;
         const newValue = +getNextStep(values[i], direction).toFixed(3);
-        const newValues = [
-          ...values.slice(0, i),
-          ...[newValue],
-          ...values.slice(i + 1),
-        ];
+        const newValues = [...values.slice(0, i), ...[newValue], ...values.slice(i + 1)];
         const sortedValues = sortNumList(newValues);
         onChange?.(sortedValues);
         e.stopPropagation();
@@ -295,17 +252,11 @@ export const useRanger = (opts: RangerConfig) => {
       } else {
         setActiveHandleIndex(i);
       }
-      const handleRelease = (e: MouseEvent | TouchEvent) => {
+      const handleRelease = () => {
         const { tempValues, onChange, onDragEnd } = getLatest();
 
-        document.removeEventListener(
-          "mousemove",
-          i === -1 ? handleSegmentDrag : handleDrag,
-        );
-        document.removeEventListener(
-          "touchmove",
-          i === -1 ? handleSegmentDrag : handleDrag,
-        );
+        document.removeEventListener("mousemove", i === -1 ? handleSegmentDrag : handleDrag);
+        document.removeEventListener("touchmove", i === -1 ? handleSegmentDrag : handleDrag);
         document.removeEventListener("mouseup", handleRelease, {
           capture: true,
         });
@@ -321,14 +272,8 @@ export const useRanger = (opts: RangerConfig) => {
       };
 
       onDragStart?.();
-      document.addEventListener(
-        "mousemove",
-        i === -1 ? handleSegmentDrag : handleDrag,
-      );
-      document.addEventListener(
-        "touchmove",
-        i === -1 ? handleSegmentDrag : handleDrag,
-      );
+      document.addEventListener("mousemove", i === -1 ? handleSegmentDrag : handleDrag);
+      document.addEventListener("touchmove", i === -1 ? handleSegmentDrag : handleDrag);
       document.addEventListener("mouseup", handleRelease, { capture: true });
       document.addEventListener("touchend", handleRelease, { capture: true });
     },
@@ -356,22 +301,16 @@ export const useRanger = (opts: RangerConfig) => {
           : // @ts-expect-error ignore
             e.clientY;
 
-      const newValue = isVertical
-        ? getValueForClientY(clientY)
-        : getValueForClientX(clientX);
+      const newValue = isVertical ? getValueForClientY(clientY) : getValueForClientX(clientX);
       const newRoundedValue = roundToStep(newValue);
       let newValues = [newRoundedValue];
       if (values.length === 2) {
-        if (values[0] > newRoundedValue)
-          newValues = [newRoundedValue, values[1]];
-        else if (values[1] < newRoundedValue)
-          newValues = [values[0], newRoundedValue];
+        if (values[0] > newRoundedValue) newValues = [newRoundedValue, values[1]];
+        else if (values[1] < newRoundedValue) newValues = [values[0], newRoundedValue];
         else {
           const diff = (values[1] - values[0]) / 2;
-          if (values[0] + diff >= newRoundedValue)
-            newValues = [newRoundedValue, values[1]];
-          if (values[1] - diff <= newRoundedValue)
-            newValues = [values[0], newRoundedValue];
+          if (values[0] + diff >= newRoundedValue) newValues = [newRoundedValue, values[1]];
+          if (values[1] - diff <= newRoundedValue) newValues = [values[0], newRoundedValue];
         }
       }
       onChange(newValues);
@@ -406,16 +345,7 @@ export const useRanger = (opts: RangerConfig) => {
         },
       };
     });
-  }, [
-    controlledTicks,
-    getPercentageForValue,
-    max,
-    min,
-    steps,
-    tickSize,
-    positionProp,
-    marginProp,
-  ]);
+  }, [controlledTicks, getPercentageForValue, max, min, steps, tickSize, positionProp, marginProp]);
   const segments = useMemo(() => {
     const sortedValues = sortNumList(tempValues ?? values);
     return [...sortedValues, max].map((value, i) => {
@@ -440,9 +370,7 @@ export const useRanger = (opts: RangerConfig) => {
             }
           : {},
         styles: (() => {
-          const left = getPercentageForValue(
-            sortedValues[i - 1] ? sortedValues[i - 1] : min,
-          );
+          const left = getPercentageForValue(sortedValues[i - 1] ? sortedValues[i - 1] : min);
           const width: number = getPercentageForValue(value) - left;
           return {
             [positionProp]: `${left}%`,
@@ -451,15 +379,7 @@ export const useRanger = (opts: RangerConfig) => {
         })(),
       };
     });
-  }, [
-    getPercentageForValue,
-    max,
-    min,
-    tempValues,
-    values,
-    positionProp,
-    marginProp,
-  ]);
+  }, [getPercentageForValue, max, min, tempValues, values, positionProp, marginProp]);
   const handles = useMemo(() => {
     return (tempValues ?? values).map((value, i) => {
       return {
@@ -511,4 +431,4 @@ export const useRanger = (opts: RangerConfig) => {
   ]);
 
   return { trackElRef, activeHandleIndex, ticks, segments, handles };
-};
+}

package/src/ranger/utils.ts

@@ -3,7 +3,12 @@
  * https://github.com/TanStack/ranger
  */
 
-export const getBoundingClientRect = (element: any) => {
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+
+export function getBoundingClientRect(element: AnyObject) {
   const rect = element.getBoundingClientRect();
   return {
     top: Math.ceil(rect.top),
@@ -13,10 +18,11 @@ export const getBoundingClientRect = (element: any) => {
     bottom: Math.ceil(rect.bottom),
     height: Math.ceil(rect.height),
   };
-};
+}
 
-export const sortNumList = (arr: ReadonlyArray<number | string>) =>
-  [...arr].map(Number).sort((a, b) => a - b);
+export function sortNumList(arr: ReadonlyArray<number | string>) {
+  return [...arr].map(Number).sort((a, b) => a - b);
+}
 
 export const linearInterpolator = {
   getPercentageForValue: (val: number, min: number, max: number) => {
@@ -27,19 +33,14 @@ export const linearInterpolator = {
     trackDims: { width: number; left: number; right: number },
     min: number,
     max: number,
-    isRtl: boolean
+    isRtl: boolean,
   ) => {
     const { left, right, width } = trackDims;
     const percentageValue = (isRtl ? right - clientX : clientX - left) / width;
     const value = (max - min) * percentageValue;
     return value + min;
   },
-  getValueForClientY: (
-    clientY: number,
-    trackDims: { height: number; bottom: number },
-    min: number,
-    max: number
-  ) => {
+  getValueForClientY: (clientY: number, trackDims: { height: number; bottom: number }, min: number, max: number) => {
     const { height, bottom } = trackDims;
     const percentageValue = (bottom - clientY) / height;
     const value = (max - min) * percentageValue;