u

code/base-project/base-app/src/components/common/ao/Input.tsx

@@ -1,13 +1,11 @@
 import type { ComponentType } from 'react'
-import type { StyleProp, ViewStyle } from 'react-native'
-import { useState } from 'react'
+import type { StyleProp, TextInputProps, ViewStyle } from 'react-native'
+import React, { forwardRef, useState } from 'react'
 import { Pressable } from 'react-native'
 import { EyeIcon, EyeOffIcon } from '@/components/ui/icon'
 import { InputField, InputIcon, InputSlot, Input as NativeInput } from '@/components/ui/input'
 
-export interface AInputProps {
-  value: string
-  onChange?: (text: string) => void
+export interface AInputProps extends Omit<TextInputProps, 'onChange'> {
   isPassword?: boolean
   isDisabled?: boolean
   isReadOnly?: boolean
@@ -16,62 +14,62 @@ export interface AInputProps {
   isFocused?: boolean
   variant?: 'outline' | 'rounded' | 'underlined'
   size?: 'sm' | 'md' | 'lg' | 'xl'
-  placeholder?: string
   leftIcon?: ComponentType
   className?: string
   style?: StyleProp<ViewStyle>
 }
 
-export default function Input({
-  value,
-  onChange,
-  isPassword = false,
-  isDisabled = false,
-  isReadOnly = false,
-  isInvalid = false,
-  isHovered = false,
-  isFocused = false,
-  variant = 'outline',
-  size = 'md',
-  placeholder,
-  leftIcon,
-  className,
-  style,
-  ...rest
-}: AInputProps) {
-  const [showPassword, setShowPassword] = useState(false)
+const AInput = forwardRef<React.ComponentRef<typeof InputField>, AInputProps>(
+  ({
+    isPassword = false,
+    isDisabled = false,
+    isReadOnly = false,
+    isInvalid = false,
+    isHovered = false,
+    isFocused = false,
+    variant = 'outline',
+    size = 'md',
+    leftIcon,
+    className,
+    style,
+    ...rest
+  }, ref) => {
+    const [showPassword, setShowPassword] = useState(false)
 
-  return (
-    <NativeInput
-      variant={variant}
-      size={size}
-      isDisabled={isDisabled}
-      isReadOnly={isReadOnly}
-      isInvalid={isInvalid}
-      isHovered={isHovered}
-      isFocused={isFocused}
-      className={className}
-      style={style}
-    >
-      {leftIcon && (
-        <InputSlot className="pl-3">
-          <InputIcon as={leftIcon} />
-        </InputSlot>
-      )}
-      <InputField
-        value={value}
-        onChangeText={onChange}
-        placeholder={placeholder}
-        type={isPassword ? (showPassword ? 'text' : 'password') : 'text'}
-        {...rest}
-      />
-      {isPassword && (
-        <InputSlot className="pr-3">
-          <Pressable onPress={() => setShowPassword(prev => !prev)}>
-            <InputIcon as={showPassword ? EyeIcon : EyeOffIcon} />
-          </Pressable>
-        </InputSlot>
-      )}
-    </NativeInput>
-  )
-}
+    return (
+      <NativeInput
+        variant={variant}
+        size={size}
+        isDisabled={isDisabled}
+        isReadOnly={isReadOnly}
+        isInvalid={isInvalid}
+        isHovered={isHovered}
+        isFocused={isFocused}
+        className={className}
+        style={style}
+      >
+        {leftIcon && (
+          <InputSlot className="pl-3">
+            <InputIcon as={leftIcon} />
+          </InputSlot>
+        )}
+
+        <InputField
+          ref={ref} // 这里直接传递给 InputField
+          type={isPassword ? (showPassword ? 'text' : 'password') : 'text'}
+          {...rest}
+        />
+
+        {isPassword && (
+          <InputSlot className="pr-3">
+            <Pressable onPress={() => setShowPassword(prev => !prev)}>
+              <InputIcon as={showPassword ? EyeIcon : EyeOffIcon} />
+            </Pressable>
+          </InputSlot>
+        )}
+      </NativeInput>
+    )
+  },
+)
+
+export default AInput