refactor: adjust comments from CR

callstack · Apr 28, 2022 · 3065ea4 · 3065ea4
1 parent b837cf8
commit 3065ea4
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 57 deletions.
diff --git a/src/components/TextInput/Label/InputLabel.tsx b/src/components/TextInput/Label/InputLabel.tsx
@@ -71,14 +71,13 @@ const InputLabel = (props: InputLabelProps) => {
     ],
   };
 
-  let textColor;
+  let textColor = placeholderColor;
 
   if (error && errorColor) {
     textColor = errorColor;
-  } else if (isV3 && parentState.value && mode !== 'outlined') {
+  }
+  if (isV3 && parentState.value && mode !== 'outlined') {
     textColor = activeColor;
-  } else {
-    textColor = placeholderColor;
   }
 
   return label ? (

diff --git a/src/components/TextInput/Label/LabelBackground.tsx b/src/components/TextInput/Label/LabelBackground.tsx
@@ -28,16 +28,34 @@ const LabelBackground = ({
   const { isV3, colors } = useTheme();
 
   const labelTranslationX = {
-    transform: [
-      {
-        translateX: parentState.labeled.interpolate({
-          inputRange: [0, 1],
-          outputRange: [-baseLabelTranslateX, 0],
-        }),
-      },
-    ],
+    translateX: parentState.labeled.interpolate({
+      inputRange: [0, 1],
+      outputRange: [-baseLabelTranslateX, 0],
+    }),
   };
 
+  const labelTextScaleY = {
+    scaleY: parentState.labeled.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0.2, 1],
+    }),
+  };
+
+  const labelTextTransform = isV3
+    ? [...labelStyle.transform]
+    : [...labelStyle.transform, labelTextScaleY];
+
+  const labelTextWidth = isV3
+    ? {
+        width:
+          parentState.labelLayout.width - placeholderStyle.paddingHorizontal,
+      }
+    : {
+        maxWidth:
+          parentState.labelLayout.width -
+          2 * placeholderStyle.paddingHorizontal,
+      };
+
   return label
     ? [
         <Animated.View
@@ -51,8 +69,8 @@ const LabelBackground = ({
               maxHeight: Math.max(roundness / 3, 2),
               opacity,
               bottom: Math.max(roundness, 2),
+              transform: [labelTranslationX],
             },
-            labelTranslationX,
           ]}
         />,
         <AnimatedText
@@ -66,29 +84,9 @@ const LabelBackground = ({
               top: topPosition + (isV3 ? 0 : 1),
               backgroundColor: isV3 ? colors.surface : backgroundColor,
               opacity,
-              transform: isV3
-                ? [...labelStyle.transform]
-                : [
-                    ...labelStyle.transform,
-                    {
-                      scaleY: parentState.labeled.interpolate({
-                        inputRange: [0, 100],
-                        outputRange: [0.2, 100],
-                      }),
-                    },
-                  ],
+              transform: labelTextTransform,
             },
-            isV3
-              ? {
-                  width:
-                    parentState.labelLayout.width -
-                    placeholderStyle.paddingHorizontal,
-                }
-              : {
-                  maxWidth:
-                    parentState.labelLayout.width -
-                    2 * placeholderStyle.paddingHorizontal,
-                },
+            labelTextWidth,
           ]}
           numberOfLines={1}
         >

diff --git a/src/components/TextInput/TextInputFlat.tsx b/src/components/TextInput/TextInputFlat.tsx
@@ -72,13 +72,12 @@ const TextInputFlat = ({
   ...rest
 }: ChildTextInputProps) => {
   const isAndroid = Platform.OS === 'android';
-  const { colors, fonts } = theme;
+  const { colors, fonts, isV3, roundness } = theme;
   const font = fonts.regular;
   const hasActiveOutline = parentState.focused || error;
 
-  const { LABEL_PADDING_TOP, FLAT_INPUT_OFFSET, MIN_HEIGHT } = getConstants(
-    theme.isV3
-  );
+  const { LABEL_PADDING_TOP, FLAT_INPUT_OFFSET, MIN_HEIGHT } =
+    getConstants(isV3);
 
   const {
     fontSize: fontSizeStyle,
@@ -100,7 +99,7 @@ const TextInputFlat = ({
 
   let { paddingLeft, paddingRight } = calculateFlatInputHorizontalPadding({
     adornmentConfig,
-    isV3: theme.isV3,
+    isV3,
   });
 
   if (isPaddingHorizontalPassed) {
@@ -126,7 +125,7 @@ const TextInputFlat = ({
       paddingHorizontal,
       inputOffset: FLAT_INPUT_OFFSET,
       mode: InputMode.Flat,
-      isV3: theme.isV3,
+      isV3,
     });
 
   const {
@@ -257,7 +256,7 @@ const TextInputFlat = ({
     activeColor,
     placeholderColor,
     errorColor,
-    roundness: theme.roundness,
+    roundness,
   };
   const affixTopPosition = {
     [AdornmentSide.Left]: leftAffixTopPosition,

diff --git a/src/components/TextInput/TextInputOutlined.tsx b/src/components/TextInput/TextInputOutlined.tsx
@@ -40,7 +40,6 @@ import {
   getConstants,
 } from './helpers';
 import { AdornmentType, AdornmentSide } from './Adornment/enums';
-import type { Theme } from '../../types';
 
 const TextInputOutlined = ({
   disabled = false,
@@ -72,12 +71,12 @@ const TextInputOutlined = ({
 }: ChildTextInputProps) => {
   const adornmentConfig = getAdornmentConfig({ left, right });
 
-  const { colors, fonts } = theme;
+  const { colors, fonts, isV3, roundness } = theme;
   const font = fonts.regular;
   const hasActiveOutline = parentState.focused || error;
 
   const { INPUT_PADDING_HORIZONTAL, MIN_HEIGHT, ADORNMENT_OFFSET } =
-    getConstants(theme.isV3);
+    getConstants(isV3);
 
   const {
     fontSize: fontSizeStyle,
@@ -126,7 +125,7 @@ const TextInputOutlined = ({
   if (isAdornmentLeftIcon) {
     labelTranslationXOffset =
       (I18nManager.isRTL ? -1 : 1) *
-      (ADORNMENT_SIZE + ADORNMENT_OFFSET - (theme.isV3 ? 0 : 8));
+      (ADORNMENT_SIZE + ADORNMENT_OFFSET - (isV3 ? 0 : 8));
   }
 
   const minInputHeight =
@@ -201,7 +200,7 @@ const TextInputOutlined = ({
     backgroundColor: backgroundColor as ColorValue,
     errorColor,
     labelTranslationXOffset,
-    roundness: theme.roundness,
+    roundness,
   };
 
   const minHeight = (height ||
@@ -240,7 +239,7 @@ const TextInputOutlined = ({
       rightAffixWidth,
       leftAffixWidth,
       mode: 'outlined',
-      isV3: theme.isV3,
+      isV3,
     });
   const affixTopPosition = {
     [AdornmentSide.Left]: leftAffixTopPosition,
@@ -279,7 +278,8 @@ const TextInputOutlined = ({
           Otherwise the border will cut off the label on Android
           */}
       <Outline
-        theme={theme}
+        isV3={isV3}
+        roundness={roundness}
         hasActiveOutline={hasActiveOutline}
         focused={parentState.focused}
         activeColor={activeColor}
@@ -351,21 +351,23 @@ const TextInputOutlined = ({
 export default TextInputOutlined;
 
 type OutlineProps = {
+  isV3: boolean;
   activeColor: string;
+  backgroundColor: ColorValue;
   hasActiveOutline?: boolean;
   focused?: boolean;
   outlineColor?: string;
-  backgroundColor: ColorValue;
-  theme: Theme;
+  roundness?: number;
 };
 
 const Outline = ({
-  theme,
-  hasActiveOutline,
+  isV3,
   activeColor,
-  outlineColor,
-  focused,
   backgroundColor,
+  hasActiveOutline,
+  focused,
+  outlineColor,
+  roundness,
 }: OutlineProps) => (
   <View
     testID="text-input-outline"
@@ -375,8 +377,8 @@ const Outline = ({
       // eslint-disable-next-line react-native/no-inline-styles
       {
         backgroundColor,
-        borderRadius: theme.roundness,
-        borderWidth: (theme.isV3 ? hasActiveOutline : focused) ? 2 : 1,
+        borderRadius: roundness,
+        borderWidth: (isV3 ? hasActiveOutline : focused) ? 2 : 1,
         borderColor: hasActiveOutline ? activeColor : outlineColor,
       },
     ]}