fix: input icon custom color (#3907)

callstack · Jun 28, 2023 · df00ed2 · df00ed2
1 parent c799ff3
commit df00ed2
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 7 deletions.
diff --git a/src/components/TextInput/Adornment/TextInputIcon.tsx b/src/components/TextInput/Adornment/TextInputIcon.tsx
@@ -17,7 +17,7 @@ import { getIconColor } from './utils';
 
 export type Props = $Omit<
   React.ComponentProps<typeof IconButton>,
-  'icon' | 'theme' | 'color'
+  'icon' | 'theme' | 'color' | 'iconColor'
 > & {
   /**
    * @renamed Renamed from 'name' to 'icon` in v5.x
@@ -131,7 +131,7 @@ const TextInputIcon = ({
   icon,
   onPress,
   forceTextInputFocus,
-  color,
+  color: customColor,
   theme: themeOverrides,
   ...rest
 }: Props) => {
@@ -151,7 +151,12 @@ const TextInputIcon = ({
 
   const theme = useInternalTheme(themeOverrides);
 
-  const iconColor = getIconColor({ theme, disabled });
+  const iconColor = getIconColor({
+    theme,
+    disabled,
+    isTextInputFocused,
+    customColor,
+  });
 
   return (
     <View style={[styles.container, style]}>
@@ -160,9 +165,7 @@ const TextInputIcon = ({
         style={styles.iconButton}
         size={ICON_SIZE}
         onPress={onPressWithFocusControl}
-        iconColor={
-          typeof color === 'function' ? color(isTextInputFocused) : iconColor
-        }
+        iconColor={iconColor}
         testID={testID}
         theme={themeOverrides}
         {...rest}

diff --git a/src/components/TextInput/Adornment/utils.ts b/src/components/TextInput/Adornment/utils.ts
@@ -20,7 +20,22 @@ export function getTextColor({ theme, disabled }: BaseProps) {
     .string();
 }
 
-export function getIconColor({ theme, disabled }: BaseProps) {
+export function getIconColor({
+  theme,
+  isTextInputFocused,
+  disabled,
+  customColor,
+}: BaseProps & {
+  isTextInputFocused: boolean;
+  customColor?: ((isTextInputFocused: boolean) => string | undefined) | string;
+}) {
+  if (typeof customColor === 'function') {
+    return customColor(isTextInputFocused);
+  }
+  if (customColor) {
+    return customColor;
+  }
+
   if (!theme.isV3) {
     return theme.colors.text;
   }