Merge pull request #33221 from margelo/perunt/indentation-text-input

Rename style container for the TextInput
Expensify · Jan 5, 2024 · c6bbff1 · c6bbff1
2 parents 393f2be + 2015c6a
commit c6bbff1
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 6 deletions.
diff --git a/src/components/AmountTextInput.js b/src/components/AmountTextInput.js
@@ -32,7 +32,7 @@ const propTypes = {
     style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
 
     /** Style for the container */
-    containerStyles: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
+    touchableInputWrapperStyle: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
 
     /** Function to call to handle key presses in the text input */
     onKeyPress: PropTypes.func,
@@ -44,7 +44,7 @@ const defaultProps = {
     onSelectionChange: () => {},
     onKeyPress: () => {},
     style: {},
-    containerStyles: {},
+    touchableInputWrapperStyle: {},
 };
 
 function AmountTextInput(props) {
@@ -67,7 +67,7 @@ function AmountTextInput(props) {
             onSelectionChange={props.onSelectionChange}
             role={CONST.ROLE.PRESENTATION}
             onKeyPress={props.onKeyPress}
-            containerStyles={[...StyleUtils.parseStyleAsArray(props.containerStyles)]}
+            touchableInputWrapperStyle={props.touchableInputWrapperStyle}
         />
     );
 }

diff --git a/src/components/TextInput/BaseTextInput/baseTextInputPropTypes.js b/src/components/TextInput/BaseTextInput/baseTextInputPropTypes.js
@@ -26,6 +26,9 @@ const propTypes = {
     /** Customize the TextInput container */
     textInputContainerStyles: PropTypes.arrayOf(PropTypes.object),
 
+    /** Customizes the touchable wrapper of the TextInput component */
+    touchableInputWrapperStyle: PropTypes.arrayOf(PropTypes.object),
+
     /** Customize the main container */
     containerStyles: PropTypes.arrayOf(PropTypes.object),
 

diff --git a/src/components/TextInput/BaseTextInput/index.tsx b/src/components/TextInput/BaseTextInput/index.tsx
@@ -37,6 +37,7 @@ function BaseTextInput(
         errorText = '',
         icon = null,
         textInputContainerStyles,
+        touchableInputWrapperStyle,
         containerStyles,
         inputStyle,
         forceActiveLabel = false,
@@ -287,7 +288,7 @@ function BaseTextInput(
                     style={[
                         autoGrowHeight && styles.autoGrowHeightInputContainer(textInputHeight, variables.componentSizeLarge, typeof maxHeight === 'number' ? maxHeight : 0),
                         !isMultiline && styles.componentHeightLarge,
-                        containerStyles,
+                        touchableInputWrapperStyle,
                     ]}
                 >
                     <View

diff --git a/src/components/TextInput/BaseTextInput/types.ts b/src/components/TextInput/BaseTextInput/types.ts
@@ -29,6 +29,9 @@ type CustomBaseTextInputProps = {
     /** Customize the TextInput container */
     textInputContainerStyles?: StyleProp<ViewStyle>;
 
+    /** Customizes the touchable wrapper of the TextInput component */
+    touchableInputWrapperStyle?: StyleProp<ViewStyle>;
+
     /** Customize the main container */
     containerStyles?: StyleProp<ViewStyle>;
 

diff --git a/src/components/TimePicker/TimePicker.js b/src/components/TimePicker/TimePicker.js
@@ -469,7 +469,7 @@ function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) {
                             setSelectionHour(e.nativeEvent.selection);
                         }}
                         style={styles.timePickerInput}
-                        containerStyles={[styles.timePickerHeight100]}
+                        touchableInputWrapperStyle={styles.timePickerHeight100}
                         selection={selectionHour}
                         showSoftInputOnFocus={false}
                     />
@@ -497,7 +497,7 @@ function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) {
                             setSelectionMinute(e.nativeEvent.selection);
                         }}
                         style={styles.timePickerInput}
-                        containerStyles={[styles.timePickerHeight100]}
+                        touchableInputWrapperStyle={styles.timePickerHeight100}
                         selection={selectionMinute}
                         showSoftInputOnFocus={false}
                     />