chore(text fields): refactored use text input colors hook

Author: computools-anastasiia-nahaiska

src/index.tsx

@@ -16,9 +16,8 @@ export {SuggestionChip, type SuggestionChipProps} from './chips/suggestion-chip/
 export {PrimaryTabs, type PrimaryTabsProps} from './navigation/tabs/primary-tabs/PrimaryTabs.component';
 export {SecondaryTabs, type SecondaryTabsProps} from './navigation/tabs/secondary-tabs/SecondaryTabs.component';
 
-export {type TextInputProps} from './text-inputs/text-input.type';
-export {FilledTextInput} from './text-inputs/filled-text-input/FilledTextInput.component';
-export {OutlinedTextInput} from './text-inputs/outlined-text-input/OutlinedTextInput.component';
+export {FilledTextInput, type FilledTextInputProps} from './text-inputs/filled-text-input/FilledTextInput.component';
+export {OutlinedTextInput, type OutlinedTextInputProps} from './text-inputs/outlined-text-input/OutlinedTextInput.component';
 
 export {
   CenterAlignedTopAppBar,

src/text-inputs/filled-text-input/FilledTextInput.component.tsx

@@ -1,11 +1,11 @@
 import React, {forwardRef, useRef} from 'react';
-import {Text, View, TextInput, TouchableWithoutFeedback} from 'react-native';
 import Animated, {useAnimatedStyle, interpolateColor, interpolate} from 'react-native-reanimated';
+import {Text, View, TextInput, TouchableWithoutFeedback, type StyleProp, type ViewStyle} from 'react-native';
 
 import {ErrorIcon} from '../../icons';
 import {styles} from './filled-text-input.styles';
 import {type IconProps} from '../../icons/icon-props';
-import type {TextInputProps} from '../text-input.type';
+import type {TextInputProps} from '../text-input.types';
 import {useTextInputColors} from '../use-text-input-colors.hook';
 import {useTextInputFocus} from '../use-text-input-focus-anim.hook';
 import {useTypography} from '../../typography/useTypography.component';
@@ -16,6 +16,10 @@ const DEFAULT_LABEL_LARGE_FONT_SIZE = 16;
 const ACTIVE_INDICATOR_FOCUSED_HEIGHT = 3;
 const ACTIVE_INDICATOR_UNFOCUSED_HEIGHT = 1;
 
+export interface FilledTextInputProps<T> extends TextInputProps<T> {
+  activeIndicatorStyle?: StyleProp<ViewStyle>;
+}
+
 export const FilledTextInput = forwardRef(
   <T extends IconProps>(
     {
@@ -45,7 +49,7 @@ export const FilledTextInput = forwardRef(
       onBlur,
       onOuterContainerLayout,
       ...props
-    }: TextInputProps<T>,
+    }: FilledTextInputProps<T>,
     ref: React.Ref<TextInput>
   ) => {
     const {bodyLarge, bodySmall} = useTypography();

src/text-inputs/get-text-input-active-colors.ts

@@ -0,0 +1,18 @@
+import {type ColorValue} from 'react-native';
+
+import {type Theme} from '../theme/theme.types';
+import {TextInputColors} from './text-input.types';
+
+export const getTextInputActiveColors = (theme: Theme, primaryColorBasedOnError: ColorValue, surfaceVariantColorBasedOnError: ColorValue) => ({
+  [TextInputColors.VALUE_COLOR]: theme.surface.text,
+  [TextInputColors.CONTAINER_COLOR]: theme.surfaceContainer.backgroundHighest,
+  [TextInputColors.SELECTION_COLOR]: primaryColorBasedOnError,
+  [TextInputColors.PLACEHOLDER_COLOR]: theme.surface.textVariant,
+  [TextInputColors.LABEL_FOCUSED_COLOR]: primaryColorBasedOnError,
+  [TextInputColors.TRAILING_ICON_COLOR]: surfaceVariantColorBasedOnError,
+  [TextInputColors.LEADING_ICON_COLOR]: theme.surface.textVariant,
+  [TextInputColors.LABEL_UNFOCUSED_COLOR]: surfaceVariantColorBasedOnError,
+  [TextInputColors.SUPPORING_TEXT_COLOR]: surfaceVariantColorBasedOnError,
+  [TextInputColors.ACTIVE_INDICATOR_FOCUSED_COLOR]: primaryColorBasedOnError,
+  [TextInputColors.ACTIVE_INDICATOR_UNFOCUSED_COLOR]: surfaceVariantColorBasedOnError,
+});

src/text-inputs/get-text-input-disabled-colors.ts

@@ -0,0 +1,15 @@
+import {type ColorValue} from 'react-native';
+
+import {TextInputColors} from './text-input.types';
+
+export const getTextInputDisabledColors = (disabledOnContainerColor: ColorValue, disabledContaienerColor: ColorValue) => {
+  const colors = Object.values(TextInputColors).reduce((acc, key) => {
+    acc[key] = disabledOnContainerColor;
+
+    return acc;
+  }, {} as Record<TextInputColors, ColorValue>);
+
+  colors[TextInputColors.CONTAINER_COLOR] = disabledContaienerColor;
+
+  return colors;
+};

src/text-inputs/outlined-text-input/OutlinedTextInput.component.tsx

@@ -1,11 +1,11 @@
 import React, {forwardRef, useCallback, useRef, useState} from 'react';
 import Animated, {useAnimatedStyle, interpolateColor, interpolate} from 'react-native-reanimated';
-import {Text, View, TextInput, TouchableWithoutFeedback, type LayoutChangeEvent} from 'react-native';
+import {Text, View, TextInput, TouchableWithoutFeedback, type StyleProp, type ViewStyle, type LayoutChangeEvent} from 'react-native';
 
 import {ErrorIcon} from '../../icons';
 import {useTheme} from '../../theme/useTheme.hook';
 import {type IconProps} from '../../icons/icon-props';
-import {type TextInputProps} from '../text-input.type';
+import {type TextInputProps} from '../text-input.types';
 import {useTextInputColors} from '../use-text-input-colors.hook';
 import {useTextInputFocus} from '../use-text-input-focus-anim.hook';
 import {useTypography} from '../../typography/useTypography.component';
@@ -19,6 +19,10 @@ const DEFAULT_LABEL_LARGE_FONT_SIZE = 16;
 const DEFAULT_LABEL_SMALL_LINE_HEIGHT = 15;
 const FOCUSED_LABEL_SLOT_PADDING_HORIZONTAL = 4;
 
+export interface OutlinedTextInputProps<T> extends TextInputProps<T> {
+  labelSlotStyle?: StyleProp<ViewStyle>;
+}
+
 export const OutlinedTextInput = forwardRef(
   <T extends IconProps>(
     {
@@ -39,6 +43,7 @@ export const OutlinedTextInput = forwardRef(
 
       style,
       labelStyle,
+      labelSlotStyle,
       outerContainerStyle,
       innerContainerStyle,
       supportingTextStyle,
@@ -47,7 +52,7 @@ export const OutlinedTextInput = forwardRef(
       onBlur,
       onOuterContainerLayout,
       ...props
-    }: Omit<TextInputProps<T>, 'activeIndicatorStyle'>,
+    }: OutlinedTextInputProps<T>,
     ref: React.Ref<TextInput>
   ) => {
     const [labelWidth, setLabeWidth] = useState(0);
@@ -142,7 +147,7 @@ export const OutlinedTextInput = forwardRef(
           <Animated.View style={[styles.container, containerAnimatedStyles, innerContainerStyle]}>
             {leadingComponent}
             {LeadingIcon ? <LeadingIcon color={leadingIconColor} style={styles.leadingIcon} {...leadingIconProps} /> : null}
-            <Animated.View style={[styles.labelSlot, {backgroundColor: surfaceContainer.backgroundLow}, focusedLabelSlot]} />
+            <Animated.View style={[styles.labelSlot, {backgroundColor: surfaceContainer.backgroundLow}, focusedLabelSlot, labelSlotStyle]} />
             <View onLayout={getLabelDistanceToContainerStart} style={[styles.inputWithLabelContainer]}>
               <Animated.Text onLayout={getLabelWidth} style={[styles.label, bodyLarge, labelAnimatedStyles, labelStyle]}>
                 {label}

src/text-inputs/text-input.type.ts src/text-inputs/text-input.types.tssrc/text-inputs/text-input.type.ts renamed to src/text-inputs/text-input.types.ts

@@ -20,7 +20,21 @@ export interface TextInputProps<T> extends RNTextInputProps {
   supportingTextStyle?: StyleProp<TextStyle>;
   innerContainerStyle?: StyleProp<ViewStyle>;
   outerContainerStyle?: StyleProp<ViewStyle>;
-  activeIndicatorStyle?: StyleProp<ViewStyle>;
 
   onOuterContainerLayout?: (e: LayoutChangeEvent) => void;
 }
+
+export enum TextInputColors {
+  VALUE_COLOR = 'valueColor',
+  CONTAINER_COLOR = 'containerColor',
+  SELECTION_COLOR = 'selectionColor',
+  PLACEHOLDER_COLOR = 'placeholderColor',
+  LABEL_FOCUSED_COLOR = 'labelFocusedColor',
+  LABEL_COLOR = 'labelFocusedColor',
+  TRAILING_ICON_COLOR = 'trailingIconColor',
+  LEADING_ICON_COLOR = 'leadingIconColor',
+  LABEL_UNFOCUSED_COLOR = 'labelUnfocusedColor',
+  SUPPORING_TEXT_COLOR = 'supportingTextColor',
+  ACTIVE_INDICATOR_FOCUSED_COLOR = 'activeIndicatorFocusedColor',
+  ACTIVE_INDICATOR_UNFOCUSED_COLOR = 'activeIndicatorUnfocusedColor',
+}

src/text-inputs/use-text-input-colors.hook.ts

@@ -1,78 +1,34 @@
 import {useMemo} from 'react';
+
 import {useTheme} from '../theme/useTheme.hook';
 import {convertToRGBA} from '../utils/convert-to-rgba';
+import {getTextInputActiveColors} from './get-text-input-active-colors';
+import {getTextInputDisabledColors} from './get-text-input-disabled-colors';
 
 interface UseTextInputColorsParams {
   isError: boolean;
   disabled: boolean;
 }
 
 export const useTextInputColors = ({disabled, isError}: UseTextInputColorsParams) => {
-  const {surface, surfaceContainer, error, primary} = useTheme();
+  const theme = useTheme();
 
-  const primaryColorBasedOnError = isError ? error.background : primary.background;
-  const surfaceVariantColorBasedOnError = isError ? error.background : surface.textVariant;
+  const [primaryColorBasedOnError, surfaceVariantColorBasedOnError] = isError
+    ? [theme.error.background, theme.error.background]
+    : [theme.primary.background, theme.surface.textVariant];
 
   const [disabledOnSurfaceColor, disabledSurfaceContaienerHighestColor] = useMemo(
-    () => [convertToRGBA(surface.text as string, 0.38), convertToRGBA(surfaceContainer.backgroundHighest as string, 0.38)],
-    [surface, surfaceContainer]
+    () => [convertToRGBA(theme.surface.text as string, 0.38), convertToRGBA(theme.surfaceContainer.backgroundHighest as string, 0.38)],
+    [theme]
   );
 
-  const {
-    valueColor,
-    containerColor,
-    selectionColor,
-    placeholderColor,
-    labelFocusedColor,
-    trailingIconColor,
-    leadingIconColor,
-    labelUnfocusedColor,
-    supportingTextColor,
-    activeIndicatorFocusedColor,
-    activeIndicatorUnfocusedColor,
-  } = useMemo(
+  const colors = useMemo(
     () =>
       disabled
-        ? {
-            valueColor: disabledOnSurfaceColor,
-            containerColor: disabledSurfaceContaienerHighestColor,
-            selectionColor: disabledOnSurfaceColor,
-            placeholderColor: disabledOnSurfaceColor,
-            labelFocusedColor: disabledOnSurfaceColor,
-            trailingIconColor: disabledOnSurfaceColor,
-            leadingIconColor: disabledOnSurfaceColor,
-            labelUnfocusedColor: disabledOnSurfaceColor,
-            supportingTextColor: disabledOnSurfaceColor,
-            activeIndicatorFocusedColor: disabledOnSurfaceColor,
-            activeIndicatorUnfocusedColor: disabledOnSurfaceColor,
-          }
-        : {
-            valueColor: surface.text,
-            containerColor: surfaceContainer.backgroundHighest,
-            selectionColor: primaryColorBasedOnError,
-            placeholderColor: surface.textVariant,
-            labelFocusedColor: primaryColorBasedOnError,
-            trailingIconColor: surfaceVariantColorBasedOnError,
-            leadingIconColor: surface.textVariant,
-            labelUnfocusedColor: surfaceVariantColorBasedOnError,
-            supportingTextColor: surfaceVariantColorBasedOnError,
-            activeIndicatorFocusedColor: primaryColorBasedOnError,
-            activeIndicatorUnfocusedColor: surfaceVariantColorBasedOnError,
-          },
+        ? getTextInputDisabledColors(disabledOnSurfaceColor, disabledSurfaceContaienerHighestColor)
+        : getTextInputActiveColors(theme, primaryColorBasedOnError, surfaceVariantColorBasedOnError),
     [disabled, disabledOnSurfaceColor, disabledSurfaceContaienerHighestColor, primaryColorBasedOnError, surfaceVariantColorBasedOnError]
   );
 
-  return {
-    valueColor,
-    containerColor,
-    selectionColor,
-    placeholderColor,
-    labelFocusedColor,
-    trailingIconColor,
-    leadingIconColor,
-    labelUnfocusedColor,
-    supportingTextColor,
-    activeIndicatorFocusedColor,
-    activeIndicatorUnfocusedColor,
-  };
+  return colors;
 };