fix: handle paddingHorizontal in TextInput with icon and affix

callstack · Dec 8, 2020 · 4b1c150 · 4b1c150
1 parent 0bd2cab
commit 4b1c150
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 8 deletions.
diff --git a/src/components/TextInput/Adornment/TextInputAdornment.tsx b/src/components/TextInput/Adornment/TextInputAdornment.tsx
@@ -50,6 +50,7 @@ export function getAdornmentStyleAdjustmentForNativeInput({
   adornmentConfig,
   leftAffixWidth,
   rightAffixWidth,
+  paddingHorizontal,
   inputOffset = 0,
   mode,
 }: {
@@ -58,6 +59,7 @@ export function getAdornmentStyleAdjustmentForNativeInput({
   leftAffixWidth: number;
   rightAffixWidth: number;
   mode?: 'outlined' | 'flat';
+  paddingHorizontal?: number | string;
 }): AdornmentStyleAdjustmentForNativeInput | {} {
   if (adornmentConfig.length) {
     const adornmentStyleAdjustmentForNativeInput = adornmentConfig.map(
@@ -68,10 +70,13 @@ export function getAdornmentStyleAdjustmentForNativeInput({
           mode === InputMode.Outlined
             ? ADORNMENT_OFFSET + OUTLINED_INPUT_OFFSET
             : ADORNMENT_OFFSET;
-        const offset =
-          (isLeftSide ? leftAffixWidth : rightAffixWidth) +
-          inputModeAdornemntOffset;
         const paddingKey = `padding${captalize(side)}`;
+        const affixWidth = isLeftSide ? leftAffixWidth : rightAffixWidth;
+        const padding =
+          typeof paddingHorizontal === 'number'
+            ? paddingHorizontal
+            : inputModeAdornemntOffset;
+        const offset = affixWidth + padding;
 
         if (isWeb) return { [paddingKey]: offset };
 
@@ -121,6 +126,7 @@ export interface TextInputAdornmentProps {
   textStyle?: StyleProp<TextStyle>;
   visible?: Animated.Value;
   isTextInputFocused: boolean;
+  paddingHorizontal?: number | string;
 }
 
 const TextInputAdornment: React.FunctionComponent<TextInputAdornmentProps> = ({
@@ -133,6 +139,7 @@ const TextInputAdornment: React.FunctionComponent<TextInputAdornmentProps> = ({
   topPosition,
   isTextInputFocused,
   forceFocus,
+  paddingHorizontal,
 }) => {
   if (adornmentConfig.length) {
     return (
@@ -150,6 +157,7 @@ const TextInputAdornment: React.FunctionComponent<TextInputAdornmentProps> = ({
             side: side,
             testID: `${side}-${type}-adornment`,
             isTextInputFocused,
+            paddingHorizontal,
           };
           if (type === AdornmentType.Icon) {
             return (

diff --git a/src/components/TextInput/Adornment/TextInputAffix.tsx b/src/components/TextInput/Adornment/TextInputAffix.tsx
@@ -30,6 +30,7 @@ type ContextState = {
   visible?: Animated.Value;
   textStyle?: StyleProp<TextStyle>;
   side: AdornmentSide;
+  paddingHorizontal?: number | string;
 };
 
 const AffixContext = React.createContext<ContextState>({
@@ -43,7 +44,15 @@ const AffixAdornment: React.FunctionComponent<
     affix: React.ReactNode;
     testID: string;
   } & ContextState
-> = ({ affix, side, textStyle, topPosition, onLayout, visible }) => {
+> = ({
+  affix,
+  side,
+  textStyle,
+  topPosition,
+  onLayout,
+  visible,
+  paddingHorizontal,
+}) => {
   return (
     <AffixContext.Provider
       value={{
@@ -52,6 +61,7 @@ const AffixAdornment: React.FunctionComponent<
         topPosition,
         onLayout,
         visible,
+        paddingHorizontal,
       }}
     >
       {affix}
@@ -60,17 +70,25 @@ const AffixAdornment: React.FunctionComponent<
 };
 
 const TextInputAffix = ({ text, textStyle: labelStyle, theme }: Props) => {
-  const { textStyle, onLayout, topPosition, side, visible } = React.useContext(
-    AffixContext
-  );
+  const {
+    textStyle,
+    onLayout,
+    topPosition,
+    side,
+    visible,
+    paddingHorizontal,
+  } = React.useContext(AffixContext);
   const textColor = color(theme.colors.text)
     .alpha(theme.dark ? 0.7 : 0.54)
     .rgb()
     .string();
 
+  const offset =
+    typeof paddingHorizontal === 'number' ? paddingHorizontal : AFFIX_OFFSET;
+
   const style = {
     top: topPosition,
-    [side]: AFFIX_OFFSET,
+    [side]: offset,
   };
 
   return (

diff --git a/src/components/TextInput/TextInputFlat.tsx b/src/components/TextInput/TextInputFlat.tsx
@@ -130,6 +130,7 @@ class TextInputFlat extends React.Component<ChildTextInputProps> {
         adornmentConfig,
         rightAffixWidth,
         leftAffixWidth,
+        paddingHorizontal,
         inputOffset: FLAT_INPUT_OFFSET,
       }
     );
@@ -286,6 +287,7 @@ class TextInputFlat extends React.Component<ChildTextInputProps> {
     };
 
     let adornmentProps: TextInputAdornmentProps = {
+      paddingHorizontal,
       adornmentConfig,
       forceFocus,
       topPosition: {