Skip to content

Commit 2447260

Browse files
Krishna2323Krishna2323
committed
centre icon based on input vertical padding diff.
Signed-off-by: krishna2323 <belivethatkg@gmail.com>
1 parent 8273b1e commit 2447260

3 files changed

Lines changed: 17 additions & 17 deletions

File tree

‎src/components/TextInput/BaseTextInput/implementation/index.native.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -276,7 +276,7 @@ function BaseTextInput(
276276
shouldAddPaddingBottom && styles.pb1,
277277
]);
278278

279-
const inputVerticalPadding = StyleUtils.getPaddingVerticalFromStyle(newTextInputContainerStyles);
279+
const verticalPaddingDiff = StyleUtils.getVeritcalPaddingDiffFromStyle(newTextInputContainerStyles);
280280
const inputPaddingLeft = !!prefixCharacter && StyleUtils.getPaddingLeft(prefixCharacterPadding + styles.pl1.paddingLeft);
281281
const inputPaddingRight = !!suffixCharacter && StyleUtils.getPaddingRight(StyleUtils.getCharacterPadding(suffixCharacter) + styles.pr1.paddingRight);
282282

@@ -434,7 +434,7 @@ function BaseTextInput(
434434
)}
435435
{((isFocused && !isReadOnly && shouldShowClearButton) || !shouldHideClearButton) && !!value && (
436436
<TextInputClearButton
437-
style={StyleUtils.getTextInputIconContainerStyles(hasLabel, false, inputVerticalPadding)}
437+
style={StyleUtils.getTextInputIconContainerStyles(hasLabel, false, verticalPaddingDiff)}
438438
onPressButton={() => {
439439
setValue('');
440440
onClearInput?.();
@@ -446,7 +446,7 @@ function BaseTextInput(
446446
size="small"
447447
color={theme.iconSuccessFill}
448448
style={[
449-
StyleUtils.getTextInputIconContainerStyles(hasLabel, false, inputVerticalPadding),
449+
StyleUtils.getTextInputIconContainerStyles(hasLabel, false, verticalPaddingDiff),
450450
styles.ml1,
451451
loadingSpinnerStyle,
452452
StyleUtils.getOpacityStyle(inputProps.isLoading ? 1 : 0),
@@ -455,7 +455,7 @@ function BaseTextInput(
455455
)}
456456
{!!inputProps.secureTextEntry && (
457457
<Checkbox
458-
style={StyleUtils.getTextInputIconContainerStyles(hasLabel, true, inputVerticalPadding)}
458+
style={StyleUtils.getTextInputIconContainerStyles(hasLabel, true, verticalPaddingDiff)}
459459
onPress={togglePasswordVisibility}
460460
onMouseDown={(event) => {
461461
event.preventDefault();
@@ -471,7 +471,7 @@ function BaseTextInput(
471471
{!inputProps.secureTextEntry && !!icon && (
472472
<View
473473
style={[
474-
StyleUtils.getTextInputIconContainerStyles(hasLabel, true, inputVerticalPadding),
474+
StyleUtils.getTextInputIconContainerStyles(hasLabel, true, verticalPaddingDiff),
475475
!isReadOnly ? styles.cursorPointer : styles.pointerEventsNone,
476476
iconContainerStyle,
477477
]}

‎src/components/TextInput/BaseTextInput/implementation/index.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -281,7 +281,7 @@ function BaseTextInput(
281281
shouldAddPaddingBottom && styles.pb1,
282282
]);
283283

284-
const inputVerticalPadding = StyleUtils.getPaddingVerticalFromStyle(newTextInputContainerStyles);
284+
const verticalPaddingDiff = StyleUtils.getVeritcalPaddingDiffFromStyle(newTextInputContainerStyles);
285285
const inputPaddingLeft = !!prefixCharacter && StyleUtils.getPaddingLeft(prefixCharacterPadding + styles.pl1.paddingLeft);
286286
const inputPaddingRight = !!suffixCharacter && StyleUtils.getPaddingRight(StyleUtils.getCharacterPadding(suffixCharacter) + styles.pr1.paddingRight);
287287
// This is workaround for https://github.com/Expensify/App/issues/47939: in case when user is using Chrome on Android we set inputMode to 'search' to disable autocomplete bar above the keyboard.
@@ -454,7 +454,7 @@ function BaseTextInput(
454454
}}
455455
>
456456
<TextInputClearButton
457-
style={StyleUtils.getTextInputIconContainerStyles(hasLabel, false, inputVerticalPadding)}
457+
style={StyleUtils.getTextInputIconContainerStyles(hasLabel, false, verticalPaddingDiff)}
458458
onPressButton={() => {
459459
setValue('');
460460
onClearInput?.();
@@ -467,7 +467,7 @@ function BaseTextInput(
467467
size="small"
468468
color={theme.iconSuccessFill}
469469
style={[
470-
StyleUtils.getTextInputIconContainerStyles(hasLabel, false, inputVerticalPadding),
470+
StyleUtils.getTextInputIconContainerStyles(hasLabel, false, verticalPaddingDiff),
471471
styles.ml1,
472472
loadingSpinnerStyle,
473473
StyleUtils.getOpacityStyle(inputProps.isLoading ? 1 : 0),
@@ -476,7 +476,7 @@ function BaseTextInput(
476476
)}
477477
{!!inputProps.secureTextEntry && (
478478
<Checkbox
479-
style={StyleUtils.getTextInputIconContainerStyles(hasLabel, true, inputVerticalPadding)}
479+
style={StyleUtils.getTextInputIconContainerStyles(hasLabel, true, verticalPaddingDiff)}
480480
onPress={togglePasswordVisibility}
481481
onMouseDown={(e) => {
482482
e.preventDefault();
@@ -492,7 +492,7 @@ function BaseTextInput(
492492
{!inputProps.secureTextEntry && !!icon && (
493493
<View
494494
style={[
495-
StyleUtils.getTextInputIconContainerStyles(hasLabel, true, inputVerticalPadding),
495+
StyleUtils.getTextInputIconContainerStyles(hasLabel, true, verticalPaddingDiff),
496496
!isReadOnly ? styles.cursorPointer : styles.pointerEventsNone,
497497
iconContainerStyle,
498498
]}

‎src/styles/utils/index.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -729,9 +729,9 @@ function getPaddingBottom(paddingBottom: number): ViewStyle {
729729
}
730730

731731
/**
732-
* Get variable padding-bottom as style
732+
* Get vertical padding diff from provided styles (paddingTop - paddingBottom)
733733
*/
734-
function getPaddingVerticalFromStyle(textInputContainerStyles: ViewStyle): number {
734+
function getVeritcalPaddingDiffFromStyle(textInputContainerStyles: ViewStyle): number {
735735
const flatStyle = StyleSheet.flatten(textInputContainerStyles);
736736

737737
// Safely extract padding values only if they are numbers
@@ -741,7 +741,7 @@ function getPaddingVerticalFromStyle(textInputContainerStyles: ViewStyle): numbe
741741

742742
const paddingTop = getNumericPadding(flatStyle?.paddingTop ?? flatStyle.padding);
743743
const paddingBottom = getNumericPadding(flatStyle?.paddingBottom ?? flatStyle.padding);
744-
return paddingTop + paddingBottom;
744+
return paddingTop - paddingBottom;
745745
}
746746

747747
/**
@@ -1254,7 +1254,7 @@ const staticStyleUtils = {
12541254
getPaddingLeft,
12551255
getPaddingRight,
12561256
getPaddingBottom,
1257-
getPaddingVerticalFromStyle,
1257+
getVeritcalPaddingDiffFromStyle,
12581258
hasSafeAreas,
12591259
getHeight,
12601260
getMinimumHeight,
@@ -1397,13 +1397,13 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
13971397

13981398
/**
13991399
* Computes styles for the text input icon container.
1400-
* Applies horizontal padding if requested, and sets the top margin based on the presence of a label.
1400+
* Applies horizontal padding if requested, and sets the top margin based on padding difference.
14011401
*/
1402-
getTextInputIconContainerStyles: (hasLabel: boolean, includePadding = true, inputPaddingTop = styles.textInputContainer?.padding): ViewStyle => {
1402+
getTextInputIconContainerStyles: (hasLabel: boolean, includePadding = true, verticalPaddingDiff = 0): ViewStyle => {
14031403
const paddingStyle = includePadding ? {paddingHorizontal: 11} : {};
14041404
return {
14051405
...paddingStyle,
1406-
marginTop: -(inputPaddingTop / 2),
1406+
marginTop: -(verticalPaddingDiff / 2),
14071407
height: '100%',
14081408
justifyContent: 'center',
14091409
};

0 commit comments

Comments
 (0)