feat: add customInputStyle to TextInput (#3509)

callstack · Dec 19, 2022 · 0fca19f · 0fca19f
1 parent 031f0db
commit 0fca19f
Show file tree

Hide file tree

Showing 9 changed files with 252 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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