feat: apply theme for TextInput (#121)

Author: loc-nguyenthien

src/components/TextInput/TextInput.tsx

@@ -6,12 +6,13 @@ import type {
   TextStyle,
   ViewStyle,
 } from 'react-native'
-import {TextInput as RNTextInput, View} from 'react-native'
+import {TextInput as RNTextInput, StyleSheet, View} from 'react-native'
 import styled from 'styled-components/native'
 import TextInputOutlined from './TextInputOutlined'
 import {CustomIcon, CustomIconProps, Error} from './components'
 import {isIOS} from '../../helpers'
 import TextInputFlat from './TextInputFlat'
+import {useTheme} from '../../hooks'
 
 export interface TextInputProps extends RNTextInputProperties {
   /** Style for container */
@@ -96,6 +97,7 @@ export const TextInput = forwardRef<TextInputRef, TextInputProps>(
     },
     ref,
   ) => {
+    const TextInputTheme = useTheme().components.TextInput
     const inputRef = useRef<RNTextInput>(null)
 
     useImperativeHandle(ref, () => ({
@@ -109,23 +111,29 @@ export const TextInput = forwardRef<TextInputRef, TextInputProps>(
     }, [])
 
     return (
-      <View style={containerStyle}>
+      <View style={[StyleSheet.flatten(TextInputTheme.containerStyle), StyleSheet.flatten(containerStyle)]}>
         {!!label && (
-          <Title testID="test-title" style={labelStyle} {...labelProps}>
+          <Title
+            testID="test-title"
+            style={[StyleSheet.flatten(TextInputTheme.labelStyle), StyleSheet.flatten(labelStyle)]}
+            {...labelProps}>
             {label}
             {!!isRequire && <StarText testID="test-startText"> *</StarText>}
           </Title>
         )}
         <TouchableContainer
-          style={inputContainerStyle}
+          style={[
+            StyleSheet.flatten(TextInputTheme.inputContainerStyle),
+            StyleSheet.flatten(inputContainerStyle),
+          ]}
           activeOpacity={1}
           onPress={handleFocus}
           disabled={editable}>
           {!!leftComponent && leftComponent}
           <TextInputComponent
             testID="test-TextInputComponent"
             ref={inputRef}
-            style={inputStyle}
+            style={[StyleSheet.flatten(TextInputTheme.inputStyle), StyleSheet.flatten(inputStyle)]}
             editable={editable}
             multiline={multiline}
             numberOfLines={numberOfLines}

src/theme/components/TextInput/TextInput.ts

@@ -0,0 +1,8 @@
+import type {TextInputProps} from '../../../components/TextInput/TextInput'
+
+export type TextInputThemeProps = Pick<
+  TextInputProps,
+  'containerStyle' | 'inputContainerStyle' | 'inputStyle' | 'labelStyle'
+>
+
+export const TextInputTheme: TextInputThemeProps = {}

src/theme/components/TextInput/index.ts

@@ -0,0 +1 @@
+export * from './TextInput'

src/theme/components/index.ts

@@ -7,13 +7,15 @@ import {
 } from './Button'
 import {CheckboxTheme} from './Checkbox'
 import {TextTheme} from './Text'
+import {TextInputTheme} from './TextInput'
 
 export default {
   Button: ButtonTheme,
   ButtonOutline: ButtonOutlineTheme,
   ButtonPrimary: ButtonPrimaryTheme,
   ButtonSecondary: ButtonSecondaryTheme,
   ButtonTransparent: ButtonTransparentTheme,
+  TextInput: TextInputTheme,
   Checkbox: CheckboxTheme,
   Text: TextTheme,
 }