From 0fca19f7927bdca661b7fac62211d37788e52c4a Mon Sep 17 00:00:00 2001
From: guilherme-ferraz1 <62260157+guilherme-ferraz1@users.noreply.github.com>
Date: Mon, 19 Dec 2022 05:40:42 -0300
Subject: [PATCH] feat: add customInputStyle to TextInput (#3509)

---
 example/src/Examples/TextInputExample.tsx     |  14 ++
 example/utils/index.ts                        |   1 +
 src/components/TextInput/Label/InputLabel.tsx |   2 +
 src/components/TextInput/TextInput.tsx        |   9 +
 src/components/TextInput/TextInputFlat.tsx    |   3 +
 .../TextInput/TextInputOutlined.tsx           |   3 +
 src/components/TextInput/types.tsx            |   4 +
 src/components/__tests__/TextInput.test.js    |  13 ++
 .../__snapshots__/TextInput.test.js.snap      | 203 ++++++++++++++++++
 9 files changed, 252 insertions(+)

diff --git a/example/src/Examples/TextInputExample.tsx b/example/src/Examples/TextInputExample.tsx
index 1c4a08acaf..0c3f9eadf6 100644
--- a/example/src/Examples/TextInputExample.tsx
+++ b/example/src/Examples/TextInputExample.tsx
@@ -32,6 +32,7 @@ const initialState: State = {
   outlinedLargeText: '',
   outlinedTextPassword: '',
   nameNoPadding: '',
+  customStyleText: '',
   nameRequired: '',
   flatDenseText: '',
   flatDense: '',
@@ -86,6 +87,7 @@ const TextInputExample = () => {
     outlinedLargeText,
     outlinedTextPassword,
     nameNoPadding,
+    customStyleText,
     nameRequired,
     flatDenseText,
     flatDense,
@@ -531,6 +533,18 @@ const TextInputExample = () => {
             }
           />
 
+          <TextInput
+            mode="flat"
+            style={styles.inputContainerStyle}
+            label="Custom style input"
+            placeholder="Input with custom padding"
+            value={customStyleText}
+            onChangeText={(customStyleText) =>
+              inputActionHandler('customStyleText', customStyleText)
+            }
+            contentStyle={{ paddingLeft: 50 }}
+          />
+
           <View style={styles.inputContainerStyle}>
             <TextInput
               label="Input with no padding"
diff --git a/example/utils/index.ts b/example/utils/index.ts
index 460481b09d..7f58225b47 100644
--- a/example/utils/index.ts
+++ b/example/utils/index.ts
@@ -25,6 +25,7 @@ export type State = {
   outlinedLargeText: string;
   outlinedTextPassword: string;
   nameNoPadding: string;
+  customStyleText: string;
   nameRequired: string;
   flatDenseText: string;
   flatDense: string;
diff --git a/src/components/TextInput/Label/InputLabel.tsx b/src/components/TextInput/Label/InputLabel.tsx
index 064323056a..81e5509079 100644
--- a/src/components/TextInput/Label/InputLabel.tsx
+++ b/src/components/TextInput/Label/InputLabel.tsx
@@ -29,6 +29,7 @@ const InputLabel = (props: InputLabelProps) => {
     labelTranslationXOffset,
     maxFontSizeMultiplier,
     testID,
+    contentStyle,
   } = props.labelProps;
 
   const labelTranslationX = {
@@ -138,6 +139,7 @@ const InputLabel = (props: InputLabelProps) => {
             color: textColor,
             opacity: placeholderOpacity,
           },
+          contentStyle,
         ]}
         numberOfLines={1}
         maxFontSizeMultiplier={maxFontSizeMultiplier}
diff --git a/src/components/TextInput/TextInput.tsx b/src/components/TextInput/TextInput.tsx
index ef35ea1538..5950cdafb2 100644
--- a/src/components/TextInput/TextInput.tsx
+++ b/src/components/TextInput/TextInput.tsx
@@ -142,6 +142,12 @@ export type Props = React.ComponentPropsWithRef<typeof NativeTextInput> & {
    * testID to be used on tests.
    */
   testID?: string;
+  /**
+   * Pass custom style directly to the input itself.
+   * Overrides input style
+   * Example: `paddingLeft`, `backgroundColor`
+   */
+  contentStyle?: StyleProp<ViewStyle>;
   /**
    * Pass style to override the default style of outlined wrapper.
    * Overrides style when mode is set to `outlined`
@@ -223,6 +229,7 @@ const TextInput = React.forwardRef<TextInputHandles, Props>(
       error: errorProp = false,
       multiline = false,
       editable = true,
+      contentStyle,
       render = (props: RenderProps) => <NativeTextInput {...props} />,
       ...rest
     }: Props,
@@ -458,6 +465,7 @@ const TextInput = React.forwardRef<TextInputHandles, Props>(
           onLeftAffixLayoutChange={onLeftAffixLayoutChange}
           onRightAffixLayoutChange={onRightAffixLayoutChange}
           maxFontSizeMultiplier={maxFontSizeMultiplier}
+          contentStyle={contentStyle}
         />
       );
     }
@@ -493,6 +501,7 @@ const TextInput = React.forwardRef<TextInputHandles, Props>(
         onLeftAffixLayoutChange={onLeftAffixLayoutChange}
         onRightAffixLayoutChange={onRightAffixLayoutChange}
         maxFontSizeMultiplier={maxFontSizeMultiplier}
+        contentStyle={contentStyle}
       />
     );
   }
diff --git a/src/components/TextInput/TextInputFlat.tsx b/src/components/TextInput/TextInputFlat.tsx
index 9a7fa1bf16..8d8fdd2d89 100644
--- a/src/components/TextInput/TextInputFlat.tsx
+++ b/src/components/TextInput/TextInputFlat.tsx
@@ -73,6 +73,7 @@ const TextInputFlat = ({
   right,
   placeholderTextColor,
   testID = 'text-input-flat',
+  contentStyle,
   ...rest
 }: ChildTextInputProps) => {
   const isAndroid = Platform.OS === 'android';
@@ -274,6 +275,7 @@ const TextInputFlat = ({
     roundness,
     maxFontSizeMultiplier: rest.maxFontSizeMultiplier,
     testID,
+    contentStyle,
   };
   const affixTopPosition = {
     [AdornmentSide.Left]: leftAffixTopPosition,
@@ -380,6 +382,7 @@ const TextInputFlat = ({
             },
             Platform.OS === 'web' && { outline: 'none' },
             adornmentStyleAdjustmentForNativeInput,
+            contentStyle,
           ],
         })}
       </View>
diff --git a/src/components/TextInput/TextInputOutlined.tsx b/src/components/TextInput/TextInputOutlined.tsx
index 6918d9d11f..ea312b5206 100644
--- a/src/components/TextInput/TextInputOutlined.tsx
+++ b/src/components/TextInput/TextInputOutlined.tsx
@@ -71,6 +71,7 @@ const TextInputOutlined = ({
   right,
   placeholderTextColor,
   testID = 'text-input-outlined',
+  contentStyle,
   ...rest
 }: ChildTextInputProps) => {
   const adornmentConfig = getAdornmentConfig({ left, right });
@@ -209,6 +210,7 @@ const TextInputOutlined = ({
     roundness,
     maxFontSizeMultiplier: rest.maxFontSizeMultiplier,
     testID,
+    contentStyle,
   };
 
   const minHeight = (height ||
@@ -354,6 +356,7 @@ const TextInputOutlined = ({
               },
               Platform.OS === 'web' && { outline: 'none' },
               adornmentStyleAdjustmentForNativeInput,
+              contentStyle,
             ],
           } as RenderProps)}
         </View>
diff --git a/src/components/TextInput/types.tsx b/src/components/TextInput/types.tsx
index 6dcda11b91..b5b3ca66ea 100644
--- a/src/components/TextInput/types.tsx
+++ b/src/components/TextInput/types.tsx
@@ -4,6 +4,8 @@ import type {
   TextStyle,
   LayoutChangeEvent,
   ColorValue,
+  StyleProp,
+  ViewProps,
 } from 'react-native';
 
 import type { $Omit } from './../../types';
@@ -38,6 +40,7 @@ export type State = {
   labelLayout: { measured: boolean; width: number; height: number };
   leftLayout: { height: number | null; width: number | null };
   rightLayout: { height: number | null; width: number | null };
+  contentStyle?: StyleProp<ViewProps>;
 };
 export type ChildTextInputProps = {
   parentState: State;
@@ -79,6 +82,7 @@ export type LabelProps = {
   roundness: number;
   maxFontSizeMultiplier?: number | undefined | null;
   testID?: string;
+  contentStyle?: StyleProp<ViewProps>;
 };
 export type InputLabelProps = {
   parentState: State;
diff --git a/src/components/__tests__/TextInput.test.js b/src/components/__tests__/TextInput.test.js
index 4d9dc6663c..2b6b1b4eee 100644
--- a/src/components/__tests__/TextInput.test.js
+++ b/src/components/__tests__/TextInput.test.js
@@ -181,6 +181,19 @@ it('correctly applies a component as the text label', () => {
   expect(toJSON()).toMatchSnapshot();
 });
 
+it('correctly applies paddingLeft from contentStyleProp', () => {
+  const { toJSON } = render(
+    <TextInput
+      label="With padding"
+      placeholder="Type something"
+      value={'Some test value'}
+      contentStyle={{ paddingLeft: 20 }}
+    />
+  );
+
+  expect(toJSON()).toMatchSnapshot();
+});
+
 it('renders label with correct color when active', () => {
   const { getByTestId } = render(
     <TextInput
diff --git a/src/components/__tests__/__snapshots__/TextInput.test.js.snap b/src/components/__tests__/__snapshots__/TextInput.test.js.snap
index c5ca76d369..0715a9309a 100644
--- a/src/components/__tests__/__snapshots__/TextInput.test.js.snap
+++ b/src/components/__tests__/__snapshots__/TextInput.test.js.snap
@@ -199,6 +199,7 @@ exports[`correctly applies a component as the text label 1`] = `
           Array [
             Object {},
           ],
+          undefined,
         ]
       }
       testID="text-input-flat"
@@ -392,6 +393,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = `
           Array [
             Object {},
           ],
+          undefined,
         ]
       }
       testID="text-input-flat"
@@ -637,6 +639,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
             Array [
               Object {},
             ],
+            undefined,
           ]
         }
         testID="text-input-outlined"
@@ -831,6 +834,7 @@ exports[`correctly applies textAlign center 1`] = `
           Array [
             Object {},
           ],
+          undefined,
         ]
       }
       testID="text-input-flat"
@@ -1027,6 +1031,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm
             "paddingLeft": 40,
             "paddingRight": 16,
           },
+          undefined,
         ]
       }
       testID="text-input-flat"
@@ -1414,6 +1419,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
             "paddingLeft": 16,
             "paddingRight": 40,
           },
+          undefined,
         ]
       }
       testID="text-input-flat"
@@ -1614,3 +1620,200 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
   </View>
 </View>
 `;
+
+exports[`correctly applies paddingLeft from contentStyleProp 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "rgba(231, 224, 236, 1)",
+        "borderTopLeftRadius": 4,
+        "borderTopRightRadius": 4,
+      },
+      Object {},
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      Object {
+        "backgroundColor": "rgba(28, 27, 31, 1)",
+        "bottom": 0,
+        "height": 1,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "transform": Array [
+          Object {
+            "scaleY": 0.5,
+          },
+        ],
+        "zIndex": 1,
+      }
+    }
+    testID="text-input-underline"
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "paddingBottom": 0,
+          "paddingTop": 0,
+        },
+        Object {
+          "minHeight": 56,
+        },
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      pointerEvents="none"
+      style={
+        Object {
+          "bottom": 0,
+          "left": 0,
+          "opacity": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+          "transform": Array [
+            Object {
+              "translateX": 4,
+            },
+          ],
+          "zIndex": 3,
+        }
+      }
+    >
+      <Text
+        collapsable={false}
+        maxFontSizeMultiplier={1.5}
+        numberOfLines={1}
+        onLayout={[Function]}
+        style={
+          Object {
+            "color": "rgba(103, 80, 164, 1)",
+            "fontFamily": "System",
+            "fontSize": 16,
+            "fontWeight": undefined,
+            "left": 0,
+            "letterSpacing": 0.15,
+            "lineHeight": undefined,
+            "opacity": 0,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "position": "absolute",
+            "textAlign": "left",
+            "top": 30,
+            "transform": Array [
+              Object {
+                "translateX": 0,
+              },
+              Object {
+                "translateY": -12,
+              },
+              Object {
+                "scale": 0.75,
+              },
+            ],
+            "writingDirection": "ltr",
+          }
+        }
+        testID="text-input-flat-label-active"
+      >
+        With padding
+      </Text>
+      <Text
+        collapsable={false}
+        maxFontSizeMultiplier={1.5}
+        numberOfLines={1}
+        style={
+          Object {
+            "color": "rgba(73, 69, 79, 1)",
+            "fontFamily": "System",
+            "fontSize": 16,
+            "fontWeight": undefined,
+            "left": 0,
+            "letterSpacing": 0.15,
+            "lineHeight": undefined,
+            "opacity": 0,
+            "paddingLeft": 20,
+            "paddingRight": 16,
+            "position": "absolute",
+            "textAlign": "left",
+            "top": 30,
+            "transform": Array [
+              Object {
+                "translateX": 0,
+              },
+              Object {
+                "translateY": -12,
+              },
+              Object {
+                "scale": 0.75,
+              },
+            ],
+            "writingDirection": "ltr",
+          }
+        }
+        testID="text-input-flat-label-inactive"
+      >
+        With padding
+      </Text>
+    </View>
+    <TextInput
+      editable={true}
+      maxFontSizeMultiplier={1.5}
+      multiline={false}
+      onBlur={[Function]}
+      onChangeText={[Function]}
+      onFocus={[Function]}
+      placeholder=" "
+      placeholderTextColor="rgba(73, 69, 79, 1)"
+      selectionColor="rgba(103, 80, 164, 1)"
+      style={
+        Array [
+          Object {
+            "flexGrow": 1,
+            "margin": 0,
+          },
+          Object {
+            "paddingLeft": 16,
+            "paddingRight": 16,
+          },
+          Object {
+            "height": 56,
+          },
+          Object {
+            "paddingBottom": 4,
+            "paddingTop": 24,
+          },
+          Object {
+            "color": "rgba(73, 69, 79, 1)",
+            "fontFamily": "System",
+            "fontSize": 16,
+            "fontWeight": undefined,
+            "letterSpacing": 0.15,
+            "lineHeight": undefined,
+            "textAlign": "left",
+            "textAlignVertical": "center",
+          },
+          false,
+          Array [
+            Object {},
+          ],
+          Object {
+            "paddingLeft": 20,
+          },
+        ]
+      }
+      testID="text-input-flat"
+      underlineColorAndroid="transparent"
+      value="Some test value"
+    />
+  </View>
+</View>
+`;
+