2
0
Эх сурвалжийг харах

✨ feat(input): add click event support for input icons

- add onLeftIconClick and onRightIconClick props to Input component
- make icons clickable when click handlers are provided
- add cursor-pointer style for interactive icons
- remove pointer-events-none when icons are clickable
yourname 4 сар өмнө
parent
commit
8390a467d2

+ 17 - 3
mini/src/components/ui/input.tsx

@@ -32,15 +32,23 @@ export interface InputProps extends Omit<TaroInputProps, 'className'>, VariantPr
   rightIcon?: string
   rightIcon?: string
   error?: boolean
   error?: boolean
   errorMessage?: string
   errorMessage?: string
+  onLeftIconClick?: () => void
+  onRightIconClick?: () => void
 }
 }
 
 
 const Input = forwardRef<any, InputProps>(
 const Input = forwardRef<any, InputProps>(
-  ({ className, variant, size, leftIcon, rightIcon, error, errorMessage, ...props }, ref) => {
+  ({ className, variant, size, leftIcon, rightIcon, error, errorMessage, onLeftIconClick, onRightIconClick, ...props }, ref) => {
     return (
     return (
       <View className="w-full">
       <View className="w-full">
         <View className="relative">
         <View className="relative">
           {leftIcon && (
           {leftIcon && (
-            <View className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none">
+            <View
+              className={cn(
+                "absolute left-3 top-1/2 -translate-y-1/2",
+                onLeftIconClick ? "cursor-pointer" : "pointer-events-none"
+              )}
+              onClick={onLeftIconClick}
+            >
               <View className={cn('w-5 h-5 text-gray-400', leftIcon)} />
               <View className={cn('w-5 h-5 text-gray-400', leftIcon)} />
             </View>
             </View>
           )}
           )}
@@ -57,7 +65,13 @@ const Input = forwardRef<any, InputProps>(
           />
           />
           
           
           {rightIcon && (
           {rightIcon && (
-            <View className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
+            <View
+              className={cn(
+                "absolute right-3 top-1/2 -translate-y-1/2",
+                onRightIconClick ? "cursor-pointer" : "pointer-events-none"
+              )}
+              onClick={onRightIconClick}
+            >
               <View className={cn('w-5 h-5 text-gray-400', rightIcon)} />
               <View className={cn('w-5 h-5 text-gray-400', rightIcon)} />
             </View>
             </View>
           )}
           )}