review

src/components/Input.tsx

@@ -18,11 +18,57 @@ type Props = {
     onChangeSearchFinal?: (value: string) => void;
 } & InputHTMLAttributes<HTMLInputElement>
 
+const formatNumber = (value: string | number): string => {
+    if (!value) return '';
+    const inputValue = String(value).replace(/,/g, '');
+    return inputValue.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+};
+
 const Input: FC<Props> = (props: Props) => {
 
+    const [formattedValue, setFormattedValue] = useState<string>(
+        props.value ? formatNumber(props.value as string) : ''
+    );
+
     const [showPassword, setShowPassword] = useState<boolean>(false)
     const [search, setSearch] = useState<string>('')
 
+    const inputClass = clx(
+        'w-full h-10 text-black block px-4 text-xs rounded-xl border border-border',
+        props.readOnly && 'bg-gray-100 border-0 text-description',
+        props.variant === 'search' && 'bg-[#EEF0F7] border-0 ps-10',
+        props.className
+    );
+
+    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        if (props.seprator) {
+            const inputValue = event.target.value.replace(/,/g, ''); // حذف کاماها
+            const formatted = formatNumber(inputValue);
+
+            // به‌روزرسانی مقدار قالب‌بندی‌شده
+            setFormattedValue(formatted);
+
+            // ارسال مقدار خام به `onChange` والد
+            props.onChange?.({
+                ...event,
+                target: {
+                    ...event.target,
+                    value: inputValue,
+                },
+            });
+        } else {
+            props.onChange?.(event);
+        }
+    };
+
+    useEffect(() => {
+        if (props.value) {
+            setFormattedValue(formatNumber(props.value as string));
+        } else {
+            setFormattedValue('');
+        }
+    }, [props.value])
+
     useEffect(() => {
         if (props.variant === 'search' && props.onChangeSearchFinal) {
             const timeout = setTimeout(() => {
@@ -32,13 +78,6 @@ const Input: FC<Props> = (props: Props) => {
         }
     }, [search, props])
 
-    const inputClass = clx(
-        'w-full h-10 text-black block px-4 text-xs rounded-xl border border-border',
-        props.readOnly && 'bg-gray-100 border-0 text-description',
-        props.variant === 'search' && 'bg-[#EEF0F7] border-0 ps-10',
-        props.className
-    );
-
 
     return (
         <div className='w-full'>
@@ -49,8 +88,8 @@ const Input: FC<Props> = (props: Props) => {
             <div className='w-full relative mt-1'>
                 <input {...props} onChange={(e) => {
                     setSearch(e.target.value)
-                    props.onChange?.(e)
-                }} type={props.type === 'password' && showPassword ? 'text' : props.type === 'password' ? 'password' : undefined} className={inputClass} />
+                    handleInputChange(e)
+                }} value={props.seprator ? formattedValue : props.value} type={props.type === 'password' && showPassword ? 'text' : props.type === 'password' ? 'password' : undefined} className={inputClass} />
 
                 {
                     props.type === 'password' &&
@@ -62,15 +101,13 @@ const Input: FC<Props> = (props: Props) => {
                     <SearchNormal size={20} color='#8C90A3' className='absolute top-0 w-5 bottom-0 my-auto right-3' />
                 }
 
-
+                {
+                    props.error_text &&
+                    <Error
+                        errorText={props.error_text}
+                    />
+                }
             </div>
-
-            {
-                props.error_text &&
-                <Error
-                    errorText={props.error_text}
-                />
-            }
         </div>
     )
 }