chore(text fields): used shared props interface

Author: computools-anastasiia-nahaiska

src/index.tsx

@@ -16,8 +16,9 @@ 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 {FilledTextInput, type FilledTextInputProps} from './text-inputs/filled-text-input/FilledTextInput.component';
-export {OutlinedTextInput, type OutlinedTextInputProps} from './text-inputs/outlined-text-input/OutlinedTextInput.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 {
   CenterAlignedTopAppBar,

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

@@ -1,48 +1,15 @@
-import React, {forwardRef, useRef, type ReactNode} from 'react';
+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,
-  type TextStyle,
-  type TextInputProps,
-  type LayoutChangeEvent,
-} 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 {useTextInputColors} from '../use-text-input-colors.hook';
 import {useTextInputFocus} from '../use-text-input-focus-anim.hook';
 import {useTypography} from '../../typography/useTypography.component';
 
-export interface FilledTextInputProps<T> extends TextInputProps {
-  label: string;
-
-  disabled?: boolean;
-  errorText?: string;
-  suportingText?: string;
-
-  leadingIconProps?: T;
-  trailingIconProps?: T;
-  trailingIcon?: React.FC<T>;
-  leadingIcon?: React.FC<T>;
-
-  leadingComponent?: ReactNode;
-  trailingComponent?: ReactNode;
-
-  labelStyle?: StyleProp<ViewStyle>;
-  supportingTextStyle?: StyleProp<TextStyle>;
-  innerContainerStyle?: StyleProp<ViewStyle>;
-  outerContainerStyle?: StyleProp<ViewStyle>;
-  activeIndicatorStyle?: StyleProp<ViewStyle>;
-
-  onOuterContainerLayout?: (e: LayoutChangeEvent) => void;
-}
-
 const UNFOCUSED_LABEL_TOP_PLACEMENT = 8;
 const DEFAULT_LABEL_SMALL_FONT_SIZE = 12;
 const DEFAULT_LABEL_LARGE_FONT_SIZE = 16;
@@ -78,7 +45,7 @@ export const FilledTextInput = forwardRef(
       onBlur,
       onOuterContainerLayout,
       ...props
-    }: FilledTextInputProps<T>,
+    }: TextInputProps<T>,
     ref: React.Ref<TextInput>
   ) => {
     const {bodyLarge, bodySmall} = useTypography();

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

@@ -1,48 +1,16 @@
-import React, {forwardRef, useCallback, useRef, useState, type ReactNode} from 'react';
+import React, {forwardRef, useCallback, useRef, useState} from 'react';
 import Animated, {useAnimatedStyle, interpolateColor, interpolate} from 'react-native-reanimated';
-import {
-  Text,
-  View,
-  TextInput,
-  TouchableWithoutFeedback,
-  type StyleProp,
-  type ViewStyle,
-  type TextStyle,
-  type TextInputProps,
-  type LayoutChangeEvent,
-} from 'react-native';
+import {Text, View, TextInput, TouchableWithoutFeedback, 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 {useTextInputColors} from '../use-text-input-colors.hook';
 import {useTextInputFocus} from '../use-text-input-focus-anim.hook';
 import {useTypography} from '../../typography/useTypography.component';
 import {OUTLINED_TEXT_INPUT_CONTAINER_PADDING_VERTICAL, OUTLINED_TEXT_INPUT_CONTAINER_PADDING_HORIZONTAL, styles} from './outlined-text-input.styles';
 
-export interface OutlinedTextInputProps<T> extends TextInputProps {
-  label: string;
-
-  disabled?: boolean;
-  errorText?: string;
-  suportingText?: string;
-
-  leadingIconProps?: T;
-  trailingIconProps?: T;
-  trailingIcon?: React.FC<T>;
-  leadingIcon?: React.FC<T>;
-
-  leadingComponent?: ReactNode;
-  trailingComponent?: ReactNode;
-
-  labelStyle?: StyleProp<ViewStyle>;
-  supportingTextStyle?: StyleProp<TextStyle>;
-  innerContainerStyle?: StyleProp<ViewStyle>;
-  outerContainerStyle?: StyleProp<ViewStyle>;
-
-  onOuterContainerLayout?: (e: LayoutChangeEvent) => void;
-}
-
 const BORDER_FOCUSED_WIDTH = 3;
 const BORDER_UNFOCUSED_WIDTH = 1;
 const UNFOCUSED_LABEL_TOP_PLACEMENT = 8;
@@ -79,7 +47,7 @@ export const OutlinedTextInput = forwardRef(
       onBlur,
       onOuterContainerLayout,
       ...props
-    }: OutlinedTextInputProps<T>,
+    }: Omit<TextInputProps<T>, 'activeIndicatorStyle'>,
     ref: React.Ref<TextInput>
   ) => {
     const [labelWidth, setLabeWidth] = useState(0);

src/text-inputs/text-input.type.ts

@@ -0,0 +1,26 @@
+import {type ReactNode} from 'react';
+import {type TextInputProps as RNTextInputProps, type StyleProp, type ViewStyle, type TextStyle, type LayoutChangeEvent} from 'react-native';
+
+export interface TextInputProps<T> extends RNTextInputProps {
+  label: string;
+
+  disabled?: boolean;
+  errorText?: string;
+  suportingText?: string;
+
+  leadingIconProps?: T;
+  trailingIconProps?: T;
+  trailingIcon?: React.FC<T>;
+  leadingIcon?: React.FC<T>;
+
+  leadingComponent?: ReactNode;
+  trailingComponent?: ReactNode;
+
+  labelStyle?: StyleProp<ViewStyle>;
+  supportingTextStyle?: StyleProp<TextStyle>;
+  innerContainerStyle?: StyleProp<ViewStyle>;
+  outerContainerStyle?: StyleProp<ViewStyle>;
+  activeIndicatorStyle?: StyleProp<ViewStyle>;
+
+  onOuterContainerLayout?: (e: LayoutChangeEvent) => void;
+}