Updates

components/form/Input/NumberInputButtons.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
 import Row from "../../layout/Row";
 import { Info, Minus, Plus } from "lucide-react";
 import twuiNumberfy from "../../utils/numberfy";
@@ -7,10 +7,10 @@ import { InputProps } from ".";
 let pressInterval: any;
 let pressTimeout: any;
 
-type Props = Pick<InputProps<any>, "min" | "max" | "step"> & {
+type Props = Pick<InputProps<any>, "min" | "max" | "step" | "decimal"> & {
+    value: string;
     setValue: React.Dispatch<React.SetStateAction<string>>;
-    getNormalizedValue: (v: string) => void;
-    buttonDownRef: React.MutableRefObject<boolean>;
+    buttonDownRef: React.RefObject<boolean>;
     inputRef: React.RefObject<HTMLInputElement | null>;
 };
 
@@ -18,21 +18,50 @@ type Props = Pick<InputProps<any>, "min" | "max" | "step"> & {
  * # Input Number Text Buttons
  */
 export default function NumberInputButtons({
-    getNormalizedValue,
+    value,
     setValue,
     min,
     max,
     step,
     buttonDownRef,
     inputRef,
+    decimal,
 }: Props) {
     const PRESS_TRIGGER_TIMEOUT = 200;
     const DEFAULT_STEP = 1;
 
+    const [buttonDown, setButtonDown] = useState(false);
+
+    // function getNormalizedValue(value: string) {
+    //     if (numberText) {
+    //         if (props.max && twuiNumberfy(value) > twuiNumberfy(props.max))
+    //             return getFinalValue(props.max);
+
+    //         if (props.min && twuiNumberfy(value) < twuiNumberfy(props.min))
+    //             return getFinalValue(props.min);
+
+    //         return getFinalValue(value);
+    //     } else {
+    //         return value;
+    //     }
+    // }
+
+    useEffect(() => {
+        buttonDownRef.current = buttonDown;
+        if (buttonDown) {
+            setValue(inputRef.current?.value || "");
+        } else {
+            setTimeout(() => {
+                setValue(inputRef.current?.value || "");
+            }, 50);
+        }
+    }, [buttonDown]);
+
     function incrementDownPress() {
         window.clearTimeout(pressTimeout);
+        setButtonDown(true);
+
         pressTimeout = setTimeout(() => {
-            buttonDownRef.current = true;
             pressInterval = setInterval(() => {
                 increment();
             }, 50);
@@ -40,14 +69,15 @@ export default function NumberInputButtons({
     }
 
     function incrementDownCancel() {
-        buttonDownRef.current = false;
+        setButtonDown(false);
         window.clearTimeout(pressTimeout);
         window.clearInterval(pressInterval);
     }
 
     function decrementDownPress() {
+        setButtonDown(true);
+
         pressTimeout = setTimeout(() => {
-            buttonDownRef.current = true;
             pressInterval = setInterval(() => {
                 decrement();
             }, 50);
@@ -55,41 +85,51 @@ export default function NumberInputButtons({
     }
 
     function decrementDownCancel() {
-        buttonDownRef.current = false;
+        setButtonDown(false);
         window.clearTimeout(pressTimeout);
         window.clearInterval(pressInterval);
     }
 
     function increment() {
-        const existingValue = inputRef.current?.value;
-        const existingNumberValue = twuiNumberfy(existingValue);
+        if (!inputRef.current) return;
 
-        if (max && existingNumberValue >= twuiNumberfy(max)) {
-            return setValue(String(max));
-        } else if (min && existingNumberValue < twuiNumberfy(min)) {
-            return setValue(String(min));
+        const existingValue = inputRef.current.value;
+        const existingNumberValue = twuiNumberfy(existingValue, decimal);
+
+        let new_value = "";
+
+        if (max && existingNumberValue >= twuiNumberfy(max, decimal)) {
+            new_value = twuiNumberfy(max, decimal).toLocaleString();
+        } else if (min && existingNumberValue < twuiNumberfy(min, decimal)) {
+            new_value = twuiNumberfy(min, decimal).toLocaleString();
         } else {
-            setValue(
-                String(
-                    existingNumberValue + twuiNumberfy(step || DEFAULT_STEP),
-                ),
-            );
+            new_value = (
+                existingNumberValue +
+                twuiNumberfy(step || DEFAULT_STEP, decimal)
+            ).toLocaleString();
         }
+
+        inputRef.current.value = new_value;
     }
 
     function decrement() {
-        const existingValue = inputRef.current?.value;
-        const existingNumberValue = twuiNumberfy(existingValue);
+        if (!inputRef.current) return;
 
-        if (min && existingNumberValue <= twuiNumberfy(min)) {
-            setValue(String(min));
+        const existingValue = inputRef.current?.value;
+        const existingNumberValue = twuiNumberfy(existingValue, decimal);
+
+        let new_value = "";
+
+        if (min && existingNumberValue <= twuiNumberfy(min, decimal)) {
+            new_value = twuiNumberfy(min, decimal).toLocaleString();
         } else {
-            setValue(
-                String(
-                    existingNumberValue - twuiNumberfy(step || DEFAULT_STEP),
-                ),
-            );
+            new_value = (
+                existingNumberValue -
+                twuiNumberfy(step || DEFAULT_STEP, decimal)
+            ).toLocaleString();
         }
+
+        inputRef.current.value = new_value;
     }
 
     return (