✨ feat(input): Add minimum value constraint and enhance number handling in EnhancedInput

apps/admin/app/dashboard/user/[id]/user-profile/basic-info-form.tsx

@@ -113,6 +113,7 @@ export function BasicInfoForm({ user, refetch }: { user: API.User; refetch: () =
                     <FormControl>
                       <EnhancedInput
                         type='number'
+                        min={0}
                         value={field.value}
                         prefix={currency?.currency_symbol ?? '$'}
                         formatInput={(value) => unitConversion('centsToDollars', value)}
@@ -136,6 +137,7 @@ export function BasicInfoForm({ user, refetch }: { user: API.User; refetch: () =
                     <FormControl>
                       <EnhancedInput
                         type='number'
+                        min={0}
                         value={field.value}
                         prefix={currency?.currency_symbol ?? '$'}
                         formatInput={(value) => unitConversion('centsToDollars', value)}
@@ -159,6 +161,7 @@ export function BasicInfoForm({ user, refetch }: { user: API.User; refetch: () =
                     <FormControl>
                       <EnhancedInput
                         type='number'
+                        min={0}
                         value={field.value}
                         prefix={currency?.currency_symbol ?? '$'}
                         formatInput={(value) => unitConversion('centsToDollars', value)}

packages/ui/src/custom-components/enhanced-input.tsx

@@ -6,7 +6,7 @@ export interface EnhancedInputProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> {
   prefix?: string | ReactNode;
   suffix?: string | ReactNode;
-  formatInput?: (value: string | number) => string;
+  formatInput?: (value: string | number) => string | number;
   formatOutput?: (value: string | number) => string | number;
   onValueChange?: (value: string | number) => void;
   onValueBlur?: (value: string | number) => void;
@@ -26,50 +26,94 @@ export function EnhancedInput({
   ...props
 }: EnhancedInputProps) {
   const getProcessedValue = (inputValue: unknown) => {
-    const newValue = inputValue === '' || inputValue === 0 ? '' : String(inputValue ?? '');
+    if (inputValue === '' || inputValue === 0 || inputValue === '0') return '';
+    const newValue = String(inputValue ?? '');
     return formatInput ? formatInput(newValue) : newValue;
   };
 
-  const [value, setValue] = useState<string>(() => getProcessedValue(initialValue));
+  const [value, setValue] = useState<string | number>(() => getProcessedValue(initialValue));
+  // @ts-expect-error - This is a controlled component
+  const [internalValue, setInternalValue] = useState<string | number>(initialValue ?? '');
 
   useEffect(() => {
-    if (initialValue !== value) {
+    if (initialValue !== internalValue) {
       const newValue = getProcessedValue(initialValue);
-      if (value !== newValue) setValue(newValue);
+      if (value !== newValue) {
+        setValue(newValue);
+        // @ts-expect-error - This is a controlled component
+        setInternalValue(initialValue ?? '');
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [initialValue, formatInput]);
 
-  const processValue = (inputValue: string) => {
+  const processValue = (inputValue: string | number) => {
     let processedValue: number | string = inputValue?.toString().trim();
+
+    if (processedValue === '0' && props.type === 'number') {
+      return 0;
+    }
+
     if (processedValue && props.type === 'number') processedValue = Number(processedValue);
     return formatOutput ? formatOutput(processedValue) : processedValue;
   };
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     let inputValue = e.target.value;
-    if (props.type === 'number' && inputValue) {
+
-      const numericValue = Number(inputValue);
+    if (props.type === 'number') {
-      if (!isNaN(numericValue)) {
+      if (inputValue === '0') {
-        const min = Number.isFinite(props.min) ? props.min : -Infinity;
+        setValue('');
-        const max = Number.isFinite(props.max) ? props.max : Infinity;
+        setInternalValue(0);
-        inputValue = String(Math.max(min!, Math.min(max!, numericValue)));
+        onValueChange?.(0);
+        return;
+      }
+
+      if (/^-?\d*\.?\d*$/.test(inputValue) || inputValue === '-' || inputValue === '.') {
+        const numericValue = Number(inputValue);
+        if (!isNaN(numericValue) && inputValue !== '-' && inputValue !== '.') {
+          const min = Number.isFinite(props.min) ? props.min : -Infinity;
+          const max = Number.isFinite(props.max) ? props.max : Infinity;
+          const constrainedValue = Math.max(min!, Math.min(max!, numericValue));
+          inputValue = String(constrainedValue);
+          setInternalValue(constrainedValue);
+        } else {
+          setInternalValue(inputValue);
+        }
+        setValue(inputValue === '0' ? '' : inputValue);
       }
-      setValue(inputValue === '0' ? '' : inputValue);
     } else {
       setValue(inputValue);
+      setInternalValue(inputValue);
     }
+
     const outputValue = processValue(inputValue);
-    console.log();
     onValueChange?.(outputValue);
   };
 
   const handleBlur = () => {
+    if (props.type === 'number' && value) {
+      if (value === '-' || value === '.') {
+        setValue('');
+        setInternalValue('');
+        onValueBlur?.('');
+        return;
+      }
+
+      // 确保0值显示为空
+      if (value === '0') {
+        setValue('');
+        onValueBlur?.(0);
+        return;
+      }
+    }
+
     const outputValue = processValue(value);
     if ((initialValue || '') !== outputValue) {
       onValueBlur?.(outputValue);
     }
   };
+
   const renderPrefix = () => {
     return typeof prefix === 'string' ? (
       <div className='bg-muted relative mr-px flex h-9 items-center text-nowrap px-3'>{prefix}</div>
@@ -77,6 +121,7 @@ export function EnhancedInput({
       prefix
     );
   };
+
   const renderSuffix = () => {
     return typeof suffix === 'string' ? (
       <div className='bg-muted relative ml-px flex h-9 items-center text-nowrap px-3'>{suffix}</div>
@@ -95,6 +140,7 @@ export function EnhancedInput({
     >
       {renderPrefix()}
       <Input
+        step={0.01}
         {...props}
         value={value}
         className='block rounded-none border-none'

packages/ui/src/utils/unit-conversions.ts

@@ -1,32 +1,35 @@
 import { evaluate, format } from 'mathjs';
 
-export function unitConversion(
+type ConversionType =
-  type: 'centsToDollars' | 'dollarsToCents' | 'bitsToMb' | 'mbToBits' | 'bytesToGb' | 'gbToBytes',
+  | 'centsToDollars'
-  value?: number | string,
+  | 'dollarsToCents'
-) {
+  | 'bitsToMb'
-  if (!value) return;
+  | 'mbToBits'
-  switch (type) {
+  | 'bytesToGb'
-    case 'centsToDollars':
+  | 'gbToBytes';
-      return evaluate(`${value} / 100`);
+
-    case 'dollarsToCents':
+const conversionConfig: Record<ConversionType, { formula: string; precision: number }> = {
-      return evaluate(`${value} * 100`);
+  centsToDollars: { formula: 'value / 100', precision: 2 },
-    case 'bitsToMb':
+  dollarsToCents: { formula: 'value * 100', precision: 0 },
-      return evaluate(`${value} / 1024 / 1024`);
+  bitsToMb: { formula: 'value / 1024 / 1024', precision: 2 },
-    case 'mbToBits':
+  mbToBits: { formula: 'value * 1024 * 1024', precision: 0 },
-      return evaluate(`${value} * 1024 * 1024`);
+  bytesToGb: { formula: 'value / 1024 / 1024 / 1024', precision: 2 },
-    case 'bytesToGb':
+  gbToBytes: { formula: 'value * 1024 * 1024 * 1024', precision: 0 },
-      return evaluate(`${value} / 1024 / 1024 / 1024`);
+};
-    case 'gbToBytes':
+
-      return evaluate(`${value} * 1024 * 1024 * 1024`);
+export function unitConversion(type: ConversionType, value?: number | string) {
-    default:
+  if (!value) return 0;
-      throw new Error('Invalid conversion type');
+
-  }
+  const config = conversionConfig[type];
+  if (!config) throw new Error('Invalid conversion type');
+
+  const formula = config.formula.replace('value', `${value}`);
+  const result = evaluate(formula);
+  return Number(format(result, { notation: 'fixed', precision: config.precision }));
 }
 
 export function evaluateWithPrecision(expression: string) {
   const result = evaluate(expression);
-
   const formatted = format(result, { notation: 'fixed', precision: 2 });
-
   return Number(formatted);
 }