Updates

components/form/Input/index.tsx

@@ -6,27 +6,21 @@ import React, {
     ReactNode,
     RefObject,
     TextareaHTMLAttributes,
+    useRef,
 } from "react";
 import { twMerge } from "tailwind-merge";
 import Span from "../../layout/Span";
-import Button from "../../layout/Button";
 import { Eye, EyeOff, Info, InfoIcon, X } from "lucide-react";
 import { AutocompleteOptions } from "../../types";
 import twuiNumberfy from "../../utils/numberfy";
 import Dropdown from "../../elements/Dropdown";
-import Card from "../../elements/Card";
 import Stack from "../../layout/Stack";
 import NumberInputButtons from "./NumberInputButtons";
 import twuiSlugToNormalText from "../../utils/slug-to-normal-text";
-import twuiUseReady from "../../hooks/useReady";
 import Row from "../../layout/Row";
 import Paper from "../../elements/Paper";
 import { TWUISelectValidityObject } from "../Select";
 
-let timeout: any;
-let validationFnTimeout: any;
-let externalValueChangeTimeout: any;
-
 export type InputProps<KeyType extends string> = Omit<
     DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
     "prefix" | "suffix"
@@ -80,6 +74,7 @@ export type InputProps<KeyType extends string> = Omit<
             React.HTMLAttributes<HTMLDivElement>,
             HTMLDivElement
         >;
+        // refreshDefaultValue?: number;
     };
 
 let refreshes = 0;
@@ -121,9 +116,18 @@ export default function Input<KeyType extends string>(
         validity: existingValidity,
         clearInputProps,
         rawNumber,
+        // refreshDefaultValue,
         ...props
     } = inputProps;
 
+    const componentRefreshesRef = useRef(0);
+    let timeoutRef = useRef<any>(null);
+    let validationFnTimeoutRef = useRef<any>(null);
+    let externalValueChangeTimeoutRef = useRef<any>(null);
+
+    refreshes++;
+    componentRefreshesRef.current++;
+
     function getFinalValue(v: any) {
         if (rawNumber) return twuiNumberfy(v);
         if (numberText) {
@@ -167,21 +171,8 @@ export default function Input<KeyType extends string>(
         props.placeholder ||
         (props.name ? twuiSlugToNormalText(props.name) : undefined);
 
-    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;
-        }
-    }
-
     React.useEffect(() => {
+        // if (!existingReady) return;
         if (!existingValidity) return;
         setValidity(existingValidity);
     }, [existingValidity]);
@@ -190,8 +181,8 @@ export default function Input<KeyType extends string>(
         if (buttonDownRef.current) return;
 
         if (changeHandler) {
-            window.clearTimeout(externalValueChangeTimeout);
-            externalValueChangeTimeout = setTimeout(() => {
+            window.clearTimeout(externalValueChangeTimeoutRef.current);
+            externalValueChangeTimeoutRef.current = setTimeout(() => {
                 changeHandler(val);
             }, finalDebounce);
         }
@@ -208,10 +199,10 @@ export default function Input<KeyType extends string>(
                 return;
             }
 
-            window.clearTimeout(timeout);
+            window.clearTimeout(timeoutRef.current);
 
             if (validationRegex) {
-                timeout = setTimeout(() => {
+                timeoutRef.current = setTimeout(() => {
                     setValidity({
                         isValid: validationRegex.test(val),
                         msg: "Value mismatch",
@@ -220,9 +211,9 @@ export default function Input<KeyType extends string>(
             }
 
             if (validationFunction) {
-                window.clearTimeout(validationFnTimeout);
+                window.clearTimeout(validationFnTimeoutRef.current);
 
-                validationFnTimeout = setTimeout(() => {
+                validationFnTimeoutRef.current = setTimeout(() => {
                     if (validationRegex && !validationRegex.test(val)) {
                         return;
                     }
@@ -235,11 +226,20 @@ export default function Input<KeyType extends string>(
     };
 
     React.useEffect(() => {
+        // if (!existingReady) return;
         if (typeof props.value !== "string" || !props.value.match(/./)) return;
         setValue(String(props.value));
     }, [props.value]);
 
+    // React.useEffect(() => {
+    //     if (!refreshDefaultValue) return;
+    //     console.log("Name:", props.title || props.name);
+    //     console.log("props.defaultValue", props.defaultValue);
+    //     // setValue(String(props.defaultValue || ""));
+    // }, [refreshDefaultValue]);
+
     React.useEffect(() => {
+        // if (!existingReady) return;
         if (istextarea && textAreaRef.current) {
         } else if (inputRef?.current) {
             inputRef.current.value = getFinalValue(value);
@@ -452,11 +452,12 @@ export default function Input<KeyType extends string>(
                     <NumberInputButtons
                         setValue={setValue}
                         inputRef={inputRef}
-                        getNormalizedValue={getNormalizedValue}
+                        value={value}
                         max={props.max}
                         min={props.min}
                         step={props.step}
                         buttonDownRef={buttonDownRef}
+                        decimal={decimal}
                     />
                 ) : null}
             </div>