@kanda-libs/ks-component-ts 0.3.56 → 0.3.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanda-libs/ks-component-ts",
-  "version": "0.3.56",
+  "version": "0.3.57",
   "description": "Kanda form component library",
   "main": "dist/index.esm.js",
   "module": "dist/index.esm.js",

package/src/field/components/RangeInput/RangeInputUncontrolled.tsx

@@ -4,6 +4,8 @@ import { DefaultFormFieldProps } from "~/field/types";
 import useRangeInputProps from "./useRangeInputProps";
 import { defaultFormatter } from "./helpers";
 
+export type TieStepsTo = "min" | "max";
+
 export interface RangeInputUncontrolledProps
   extends InputHTMLAttributes<HTMLInputElement> {
   min?: string;
@@ -14,6 +16,7 @@ export interface RangeInputUncontrolledProps
   highlightLabel?: "min" | "max";
   showCurrentValueLabel?: boolean;
   suffix?: string;
+  tieStepsTo?: TieStepsTo;
 }
 
 const RangeInputUncontrolled: FunctionComponent<
@@ -30,22 +33,34 @@ const RangeInputUncontrolled: FunctionComponent<
   prefix = "",
   suffix = "",
   name = "",
+  tieStepsTo = "max",
   highlightLabel,
   showCurrentValueLabel = true,
   ...restProps
 }) {
-  const { ref, inputProps, minLabel, maxLabel, currentLabel, classNames } =
-    useRangeInputProps(
-      name,
-      min,
-      max,
-      steps,
-      formatter,
-      prefix,
-      suffix,
-      error,
-      highlightLabel
-    );
+  const {
+    ref,
+    inputProps,
+    minLabel,
+    maxLabel,
+    currentLabel,
+    classNames,
+    sliderName,
+    onSliderChange,
+    rawValue,
+    value,
+  } = useRangeInputProps(
+    name,
+    min,
+    max,
+    steps,
+    tieStepsTo,
+    formatter,
+    prefix,
+    suffix,
+    error,
+    highlightLabel
+  );
 
   return (
     <div className={classNames.container}>
@@ -66,11 +81,22 @@ const RangeInputUncontrolled: FunctionComponent<
                 type="range"
                 ref={forwardRef}
                 onInput={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  if (onChange) onChange(e);
+                  onSliderChange(e);
                 }}
-                name={name}
+                name={sliderName}
                 {...restProps}
                 {...inputProps}
+                value={rawValue}
+              />
+              <input
+                name={name}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  if (onChange) onChange(e);
+                }}
+                style={{
+                  display: "none",
+                }}
+                value={value}
               />
               <div className={classNames.cap} />
             </div>

package/src/field/components/RangeInput/constants.ts

@@ -14,3 +14,9 @@ export const CLASS_NAMES = {
   rangeWrapper: "flex flex-row relative",
   cap: "w-2.5 h-2.5 bg-green-600 rounded-full border border-neutral-000 absolute z-0 top-[5px] first:left-0 last:right-0",
 };
+
+export const BASE_INPUT_PROPS = {
+  min: "0",
+  max: "100",
+  step: "1",
+};

package/src/field/components/RangeInput/useRangeInputProps.ts

@@ -1,11 +1,15 @@
-import { useEffect, useMemo, useRef } from "react";
-import { useWatch } from "react-hook-form";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
 import clsx from "clsx";
 
 import { BG_COLOR, CLASS_NAMES } from "./constants";
 
 import { ErrorMessage } from "~/field/types";
-import { RangeInputUncontrolledProps } from "./RangeInputUncontrolled";
+import {
+  RangeInputUncontrolledProps,
+  TieStepsTo,
+} from "./RangeInputUncontrolled";
+import { chainStateK } from "fp-ts/lib/FromState";
 
 interface RangeClassNames {
   container: string;
@@ -33,6 +37,10 @@ export interface Hook {
   minLabel: string;
   currentLabel?: string;
   classNames: RangeClassNames;
+  onSliderChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  sliderName: string;
+  rawValue: string;
+  value: string;
 }
 
 export default function useRangeInputProps(
@@ -40,25 +48,71 @@ export default function useRangeInputProps(
   min: string,
   max: string,
   steps: string,
+  tieStepsTo: TieStepsTo,
   formatter: (input: string) => string,
   prefix: string,
   suffix: string,
   error?: string | ErrorMessage,
   highlightLabel?: RangeInputUncontrolledProps["highlightLabel"]
 ): Hook {
-  const value = useWatch({ name });
+  const sliderName = useMemo(() => `${name}__slider`, [name]);
+  const [value, rawValue] = useWatch({ name: [name, sliderName] });
+  const {
+    setValue,
+    formState: { defaultValues },
+  } = useFormContext();
+
+  const initialValue = useMemo(
+    () => defaultValues?.[name],
+    [defaultValues, name]
+  );
 
   const ref = useRef<HTMLInputElement>(null);
 
-  const step = String(
-    Math.ceil((parseInt(max, 10) - parseInt(min, 10)) / parseInt(steps, 10))
+  const diff = useMemo(() => parseInt(max, 10) - parseInt(min, 10), [max, min]);
+
+  const numSteps = useMemo(
+    () => Math.min(diff, parseInt(steps, 10)),
+    [diff, steps]
   );
 
-  const inputProps = {
-    min,
-    max,
-    step,
-  };
+  const step = useMemo(
+    () => Math.ceil((parseInt(max, 10) - parseInt(min, 10)) / numSteps),
+    []
+  );
+
+  const maxInput = useMemo(() => {
+    if (diff < 0) return "1";
+    if (diff > 100) return "100";
+    return String(diff);
+  }, [diff]);
+
+  const inputProps = useMemo(
+    () => ({
+      min: "0",
+      max: maxInput,
+      step: "1",
+    }),
+    [maxInput]
+  );
+
+  const tieMax = useCallback(
+    (rawInputValue: string) => {
+      const rawDiff = parseInt(maxInput, 10) - parseInt(rawInputValue, 10);
+      const increment = rawDiff * step;
+      return String(Math.max(parseInt(max, 10) - increment, parseInt(min, 10)));
+    },
+    [maxInput, step, max, min]
+  );
+
+  const tieMin = useCallback(
+    (rawInputValue: string) => {
+      const rawDiff = parseInt(rawInputValue, 10);
+      const increment = rawDiff * step;
+      return String(Math.min(parseInt(min, 10) + increment, parseInt(max, 10)));
+    },
+    [maxInput, step, max]
+  );
 
   const currentLabel = useMemo(() => {
     if (!value) return undefined;
@@ -84,6 +138,37 @@ export default function useRangeInputProps(
     ),
   };
 
+  const onSliderChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const sliderValue = e.target.value;
+      setValue(sliderName, sliderValue);
+    },
+    [setValue, sliderName]
+  );
+
+  const getInitialSliderValue = useCallback(() => {
+    if (maxInput === "1") return maxInput;
+    if (!initialValue) return String(Math.ceil(parseInt(maxInput, 10) / 2));
+    const parsedMin = parseInt(min, 10);
+    const parsedMax = parseInt(max, 10);
+    const parsedVal = parseInt(initialValue, 10);
+    if (parsedVal >= parsedMax) {
+      setValue(name, String(parsedMax));
+      return "100";
+    }
+    if (parsedVal <= parsedMin) {
+      setValue(name, String(parsedMin));
+      return "0";
+    }
+    if (tieStepsTo === "max") {
+      const initDiff = (parseInt(max, 10) - parseInt(initialValue, 10)) / step;
+      return String(Math.round(parseInt(maxInput, 10) - initDiff));
+    }
+    return String(
+      Math.round((parseInt(initialValue, 10) - parseInt(min, 10)) / step)
+    );
+  }, [initialValue, maxInput, setValue, name, min, max, step]);
+
   useEffect(() => {
     if (!ref.current) return;
     const inputArr = Array.from(ref.current.children).filter(
@@ -98,6 +183,22 @@ export default function useRangeInputProps(
     input.style.background = BG_COLOR.replaceAll("$PCT", String(pct));
   }, [value, min, max]);
 
+  const initRef = useRef<boolean>(false);
+  useEffect(() => {
+    if (initRef.current) return;
+    const initValue = getInitialSliderValue();
+    setValue(sliderName, initValue);
+    setTimeout(() => {
+      initRef.current = true;
+    }, 10);
+  }, [setValue, sliderName, getInitialSliderValue]);
+
+  useEffect(() => {
+    if (!initRef.current) return;
+    const newValue = tieStepsTo === "max" ? tieMax(rawValue) : tieMin(rawValue);
+    setValue(name, newValue);
+  }, [rawValue, tieStepsTo, setValue]);
+
   return {
     ref,
     inputProps,
@@ -105,5 +206,9 @@ export default function useRangeInputProps(
     minLabel,
     currentLabel,
     classNames,
+    onSliderChange,
+    sliderName,
+    value: value || "",
+    rawValue: rawValue || "0",
   };
 }