diff --git a/src/components/TextInput/Adornment/TextInputAdornment.tsx b/src/components/TextInput/Adornment/TextInputAdornment.tsx index a3b1cd1906..512d39ade2 100644 --- 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; visible?: Animated.Value; isTextInputFocused: boolean; + paddingHorizontal?: number | string; } const TextInputAdornment: React.FunctionComponent = ({ @@ -133,6 +139,7 @@ const TextInputAdornment: React.FunctionComponent = ({ topPosition, isTextInputFocused, forceFocus, + paddingHorizontal, }) => { if (adornmentConfig.length) { return ( @@ -150,6 +157,7 @@ const TextInputAdornment: React.FunctionComponent = ({ 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 index eb8b791551..f5c5e35429 100644 --- 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; side: AdornmentSide; + paddingHorizontal?: number | string; }; const AffixContext = React.createContext({ @@ -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 ( {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 index e9e87edaa7..638539dfb0 100644 --- a/src/components/TextInput/TextInputFlat.tsx +++ b/src/components/TextInput/TextInputFlat.tsx @@ -130,6 +130,7 @@ class TextInputFlat extends React.Component { adornmentConfig, rightAffixWidth, leftAffixWidth, + paddingHorizontal, inputOffset: FLAT_INPUT_OFFSET, } ); @@ -286,6 +287,7 @@ class TextInputFlat extends React.Component { }; let adornmentProps: TextInputAdornmentProps = { + paddingHorizontal, adornmentConfig, forceFocus, topPosition: {