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

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 (!isNaN(numericValue)) {
-        const min = Number.isFinite(props.min) ? props.min : -Infinity;
-        const max = Number.isFinite(props.max) ? props.max : Infinity;
-        inputValue = String(Math.max(min!, Math.min(max!, numericValue)));
+
+    if (props.type === 'number') {
+      if (inputValue === '0') {
+        setValue('');
+        setInternalValue(0);
+        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'