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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanda-libs/ks-component-ts",
-  "version": "0.3.56",
+  "version": "0.3.58",
   "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,49 +48,135 @@ 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),
+    [max, min, 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)));
+    },
+    [step, max, min]
+  );
 
   const currentLabel = useMemo(() => {
     if (!value) return undefined;
     return `${prefix}${formatter(value)}${suffix}`;
-  }, [value]);
-
-  const maxLabel = `${prefix}${formatter(String(max))}${suffix}`;
-  const minLabel = `${prefix}${formatter(String(min))}${suffix}`;
-
-  const classNames = {
-    ...CLASS_NAMES,
-    container: clsx(
-      CLASS_NAMES.container,
-      error ? "border-red-200" : "border-neutral-100"
-    ),
-    minLowerLabel: clsx(
-      CLASS_NAMES.lowerLabel,
-      highlightLabel === "min" && CLASS_NAMES.highlightedLowerLabel
-    ),
-    maxLowerLabel: clsx(
-      CLASS_NAMES.lowerLabel,
-      highlightLabel === "max" && CLASS_NAMES.highlightedLowerLabel
-    ),
-  };
+  }, [formatter, value, prefix, suffix]);
+
+  const maxLabel = useMemo(
+    () => `${prefix}${formatter(String(max))}${suffix}`,
+    [prefix, formatter, max, suffix]
+  );
+  const minLabel = useMemo(
+    () => `${prefix}${formatter(String(min))}${suffix}`,
+    [prefix, formatter, min, suffix]
+  );
+
+  const classNames = useMemo(
+    () => ({
+      ...CLASS_NAMES,
+      container: clsx(
+        CLASS_NAMES.container,
+        error ? "border-red-200" : "border-neutral-100"
+      ),
+      minLowerLabel: clsx(
+        CLASS_NAMES.lowerLabel,
+        highlightLabel === "min" && CLASS_NAMES.highlightedLowerLabel
+      ),
+      maxLowerLabel: clsx(
+        CLASS_NAMES.lowerLabel,
+        highlightLabel === "max" && CLASS_NAMES.highlightedLowerLabel
+      ),
+    }),
+    [error, highlightLabel]
+  );
+
+  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;
@@ -98,6 +192,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, tieMax, tieMin, name]);
+
   return {
     ref,
     inputProps,
@@ -105,5 +215,9 @@ export default function useRangeInputProps(
     minLabel,
     currentLabel,
     classNames,
+    onSliderChange,
+    sliderName,
+    value: value || "",
+    rawValue: rawValue || "0",
   };
 }