refactor: add helper for constants

callstack · Mar 14, 2022 · ff57091 · ff57091
1 parent 9afaf1a
commit ff57091
Show file tree

Hide file tree

Showing 10 changed files with 249 additions and 118 deletions.
diff --git a/src/components/TextInput/Adornment/TextInputAdornment.tsx b/src/components/TextInput/Adornment/TextInputAdornment.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import TextInputIcon, { IconAdornment } from './TextInputIcon';
 import TextInputAffix, { AffixAdornment } from './TextInputAffix';
-import { ADORNMENT_OFFSET, OUTLINED_INPUT_OFFSET } from '../constants';
 import type {
   LayoutChangeEvent,
   TextStyle,
@@ -13,6 +12,7 @@ import type {
   AdornmentStyleAdjustmentForNativeInput,
 } from './types';
 import { AdornmentSide, AdornmentType, InputMode } from './enums';
+import { getConstants } from '../helpers';
 
 export function getAdornmentConfig({
   left,
@@ -52,14 +52,18 @@ export function getAdornmentStyleAdjustmentForNativeInput({
   paddingHorizontal,
   inputOffset = 0,
   mode,
+  isV3,
 }: {
   inputOffset?: number;
   adornmentConfig: AdornmentConfig[];
   leftAffixWidth: number;
   rightAffixWidth: number;
   mode?: 'outlined' | 'flat';
   paddingHorizontal?: number | string;
+  isV3?: boolean;
 }): AdornmentStyleAdjustmentForNativeInput | {} {
+  const { OUTLINED_INPUT_OFFSET, ADORNMENT_OFFSET } = getConstants(isV3);
+
   if (adornmentConfig.length) {
     const adornmentStyleAdjustmentForNativeInput = adornmentConfig.map(
       ({ type, side }: AdornmentConfig) => {

diff --git a/src/components/TextInput/Adornment/TextInputAffix.tsx b/src/components/TextInput/Adornment/TextInputAffix.tsx
@@ -13,8 +13,7 @@ import {
 import { withTheme } from '../../../core/theming';
 import { AdornmentSide } from './enums';
 import type { Theme } from '../../../types';
-
-const AFFIX_OFFSET = 16;
+import { getConstants } from '../helpers';
 
 export type Props = {
   /**
@@ -109,6 +108,8 @@ const AffixAdornment: React.FunctionComponent<
  */
 
 const TextInputAffix = ({ text, textStyle: labelStyle, theme }: Props) => {
+  const { AFFIX_OFFSET } = getConstants(theme.isV3);
+
   const { textStyle, onLayout, topPosition, side, visible, paddingHorizontal } =
     React.useContext(AffixContext);
   const textColor = color(

diff --git a/src/components/TextInput/Adornment/TextInputIcon.tsx b/src/components/TextInput/Adornment/TextInputIcon.tsx
@@ -5,6 +5,8 @@ import IconButton from '../../IconButton';
 import type { $Omit, Theme } from '../../../types';
 import type { IconSource } from '../../Icon';
 import { useTheme } from '../../../core/theming';
+import { getConstants } from '../helpers';
+import { ICON_SIZE } from '../constants';
 
 export type Props = $Omit<
   React.ComponentProps<typeof IconButton>,
@@ -33,9 +35,6 @@ export type Props = $Omit<
   theme?: Theme;
 };
 
-export const ICON_SIZE = 24;
-const ICON_OFFSET = 16;
-
 type StyleContextType = {
   style: StyleProp<ViewStyle>;
   isTextInputFocused: boolean;
@@ -56,6 +55,9 @@ const IconAdornment: React.FunctionComponent<
     side: 'left' | 'right';
   } & Omit<StyleContextType, 'style'>
 > = ({ icon, topPosition, side, isTextInputFocused, forceFocus }) => {
+  const { isV3 } = useTheme();
+  const { ICON_OFFSET } = getConstants(isV3);
+
   const style = {
     top: topPosition,
     [side]: ICON_OFFSET,

diff --git a/src/components/TextInput/Label/InputLabel.tsx b/src/components/TextInput/Label/InputLabel.tsx
@@ -71,6 +71,16 @@ const InputLabel = (props: InputLabelProps) => {
     ],
   };
 
+  let textColor;
+
+  if (error && errorColor) {
+    textColor = errorColor;
+  } else if (isV3 && parentState.value && mode !== 'outlined') {
+    textColor = activeColor;
+  } else {
+    textColor = placeholderColor;
+  }
+
   return label ? (
     // Position colored placeholder and gray placeholder on top of each other and crossfade them
     // This gives the effect of animating the color, but allows us to use native driver
@@ -129,12 +139,7 @@ const InputLabel = (props: InputLabelProps) => {
           labelStyle,
           paddingOffset,
           {
-            color:
-              error && errorColor
-                ? errorColor
-                : parentState.value && mode !== 'outlined'
-                ? activeColor
-                : placeholderColor,
+            color: textColor,
             opacity: placeholderOpacity,
           },
           isV3 && styles.md3TextLine,

diff --git a/src/components/TextInput/Label/LabelBackground.tsx b/src/components/TextInput/Label/LabelBackground.tsx
@@ -64,7 +64,7 @@ const LabelBackground = ({
             isV3 && styles.md3OutlinedLabel,
             {
               top: topPosition + (isV3 ? 0 : 1),
-              backgroundColor: colors.surface,
+              backgroundColor: isV3 ? colors.surface : backgroundColor,
               opacity,
               transform: isV3
                 ? [...labelStyle.transform]

diff --git a/src/components/TextInput/TextInputFlat.tsx b/src/components/TextInput/TextInputFlat.tsx
@@ -13,13 +13,17 @@ import TextInputAdornment, {
   TextInputAdornmentProps,
 } from './Adornment/TextInputAdornment';
 import type { RenderProps, ChildTextInputProps } from './types';
+import { useTheme } from '../../core/theming';
 
 import {
   MAXIMIZED_LABEL_FONT_SIZE,
   MINIMIZED_LABEL_FONT_SIZE,
   LABEL_WIGGLE_X_OFFSET,
   ADORNMENT_SIZE,
-  FLAT_INPUT_OFFSET,
+  MINIMIZED_LABEL_Y_OFFSET,
+  LABEL_PADDING_TOP_DENSE,
+  MIN_DENSE_HEIGHT_WL,
+  MIN_DENSE_HEIGHT,
 } from './constants';
 
 import {
@@ -32,23 +36,14 @@ import {
   calculateFlatAffixTopPosition,
   calculateFlatInputHorizontalPadding,
   getFlatInputColors,
+  getConstants,
 } from './helpers';
 import {
   getAdornmentConfig,
   getAdornmentStyleAdjustmentForNativeInput,
 } from './Adornment/TextInputAdornment';
 import { AdornmentSide, AdornmentType, InputMode } from './Adornment/enums';
 
-const MINIMIZED_LABEL_Y_OFFSET = -18;
-
-const MD2_LABEL_PADDING_TOP = 30;
-const MD3_LABEL_PADDING_TOP = 26;
-const LABEL_PADDING_TOP_DENSE = 24;
-const MD2_MIN_HEIGHT = 64;
-const MD3_MIN_HEIGHT = 56;
-const MIN_DENSE_HEIGHT_WL = 52;
-const MIN_DENSE_HEIGHT = 40;
-
 const TextInputFlat = ({
   disabled = false,
   editable = true,
@@ -81,10 +76,9 @@ const TextInputFlat = ({
   const font = fonts.regular;
   const hasActiveOutline = parentState.focused || error;
 
-  const MIN_HEIGHT = theme.isV3 ? MD3_MIN_HEIGHT : MD2_MIN_HEIGHT;
-  const LABEL_PADDING_TOP = theme.isV3
-    ? MD3_LABEL_PADDING_TOP
-    : MD2_LABEL_PADDING_TOP;
+  const { LABEL_PADDING_TOP, FLAT_INPUT_OFFSET, MIN_HEIGHT } = getConstants(
+    theme.isV3
+  );
 
   const {
     fontSize: fontSizeStyle,
@@ -106,6 +100,7 @@ const TextInputFlat = ({
 
   let { paddingLeft, paddingRight } = calculateFlatInputHorizontalPadding({
     adornmentConfig,
+    isV3: theme.isV3,
   });
 
   if (isPaddingHorizontalPassed) {
@@ -131,6 +126,7 @@ const TextInputFlat = ({
       paddingHorizontal,
       inputOffset: FLAT_INPUT_OFFSET,
       mode: InputMode.Flat,
+      isV3: theme.isV3,
     });
 
   const {
@@ -395,20 +391,31 @@ const Underline = ({
   underlineColorCustom,
   hasActiveOutline,
 }: UnderlineProps) => {
+  const { isV3 } = useTheme();
+
   let backgroundColor = parentState.focused
     ? activeColor
     : underlineColorCustom;
 
   if (error) backgroundColor = colors?.error;
 
+  const activeScale = isV3 ? 2 : 1;
+
   return (
     <Animated.View
       style={[
         styles.underline,
+        isV3 && styles.md3Underline,
         {
           backgroundColor,
           // Underlines is thinner when input is not focused
-          transform: [{ scaleY: hasActiveOutline ? 2 : 0.5 }],
+          transform: [
+            {
+              scaleY: (isV3 ? hasActiveOutline : parentState.focused)
+                ? activeScale
+                : 0.5,
+            },
+          ],
         },
       ]}
     />
@@ -425,9 +432,12 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     bottom: 0,
-    height: 1,
+    height: 2,
     zIndex: 1,
   },
+  md3Underline: {
+    height: 1,
+  },
   labelContainer: {
     paddingTop: 0,
     paddingBottom: 0,

diff --git a/src/components/TextInput/TextInputOutlined.tsx b/src/components/TextInput/TextInputOutlined.tsx
@@ -23,7 +23,9 @@ import {
   MINIMIZED_LABEL_FONT_SIZE,
   LABEL_WIGGLE_X_OFFSET,
   ADORNMENT_SIZE,
-  ADORNMENT_OFFSET,
+  OUTLINE_MINIMIZED_LABEL_Y_OFFSET,
+  LABEL_PADDING_TOP,
+  MIN_DENSE_HEIGHT_OUTLINED,
 } from './constants';
 
 import {
@@ -35,17 +37,11 @@ import {
   interpolatePlaceholder,
   calculateOutlinedIconAndAffixTopPosition,
   getOutlinedInputColors,
+  getConstants,
 } from './helpers';
 import { AdornmentType, AdornmentSide } from './Adornment/enums';
 import type { Theme } from '../../types';
 
-const OUTLINE_MINIMIZED_LABEL_Y_OFFSET = -6;
-const LABEL_PADDING_TOP = 8;
-const MD2_MIN_HEIGHT = 64;
-const MD3_MIN_HEIGHT = 56;
-const MIN_DENSE_HEIGHT = 48;
-const INPUT_PADDING_HORIZONTAL = 16;
-
 const TextInputOutlined = ({
   disabled = false,
   editable = true,
@@ -80,7 +76,8 @@ const TextInputOutlined = ({
   const font = fonts.regular;
   const hasActiveOutline = parentState.focused || error;
 
-  const MIN_HEIGHT = theme.isV3 ? MD3_MIN_HEIGHT : MD2_MIN_HEIGHT;
+  const { INPUT_PADDING_HORIZONTAL, MIN_HEIGHT, ADORNMENT_OFFSET } =
+    getConstants(theme.isV3);
 
   const {
     fontSize: fontSizeStyle,
@@ -133,7 +130,7 @@ const TextInputOutlined = ({
   }
 
   const minInputHeight =
-    (dense ? MIN_DENSE_HEIGHT : MIN_HEIGHT) - LABEL_PADDING_TOP;
+    (dense ? MIN_DENSE_HEIGHT_OUTLINED : MIN_HEIGHT) - LABEL_PADDING_TOP;
 
   const inputHeight = calculateInputHeight(labelHeight, height, minInputHeight);
 
@@ -208,7 +205,7 @@ const TextInputOutlined = ({
   };
 
   const minHeight = (height ||
-    (dense ? MIN_DENSE_HEIGHT : MIN_HEIGHT)) as number;
+    (dense ? MIN_DENSE_HEIGHT_OUTLINED : MIN_HEIGHT)) as number;
 
   const { leftLayout, rightLayout } = parentState;
 
@@ -243,6 +240,7 @@ const TextInputOutlined = ({
       rightAffixWidth,
       leftAffixWidth,
       mode: 'outlined',
+      isV3: theme.isV3,
     });
   const affixTopPosition = {
     [AdornmentSide.Left]: leftAffixTopPosition,
@@ -337,6 +335,7 @@ const TextInputOutlined = ({
                   : I18nManager.isRTL
                   ? 'right'
                   : 'left',
+                paddingHorizontal: INPUT_PADDING_HORIZONTAL,
               },
               Platform.OS === 'web' && { outline: 'none' },
               adornmentStyleAdjustmentForNativeInput,
@@ -397,7 +396,6 @@ const styles = StyleSheet.create({
   },
   input: {
     flexGrow: 1,
-    paddingHorizontal: INPUT_PADDING_HORIZONTAL,
     margin: 0,
     zIndex: 1,
   },

diff --git a/src/components/TextInput/constants.tsx b/src/components/TextInput/constants.tsx
@@ -1,9 +1,47 @@
 export const MAXIMIZED_LABEL_FONT_SIZE = 16;
 export const MINIMIZED_LABEL_FONT_SIZE = 12;
 export const LABEL_WIGGLE_X_OFFSET = 4;
-export const LABEL_PADDING_HORIZONTAL = 16;
+
 export const ADORNMENT_SIZE = 24;
-export const ADORNMENT_OFFSET = 16;
-export const FLAT_INPUT_OFFSET = 16;
+
+//Text input affix offset
+export const MD2_AFFIX_OFFSET = 12;
+export const MD3_AFFIX_OFFSET = 16;
+
+// Text input icon
+export const ICON_SIZE = 24;
+export const MD2_ICON_OFFSET = 12;
+export const MD3_ICON_OFFSET = 16;
+
+// Text input common
+export const MD2_MIN_HEIGHT = 64;
+export const MD3_MIN_HEIGHT = 56;
+export const MD3_ADORNMENT_OFFSET = 16;
+export const MD2_ADORNMENT_OFFSET = 12;
+
+// Text input flat
+export const MD2_LABEL_PADDING_TOP = 30;
+export const MD3_LABEL_PADDING_TOP = 26;
+
+export const MD2_LABEL_PADDING_HORIZONTAL = 12;
+export const MD3_LABEL_PADDING_HORIZONTAL = 16;
+
+export const MD2_FLAT_INPUT_OFFSET = 8;
+export const MD3_FLAT_INPUT_OFFSET = 16;
+
+export const MINIMIZED_LABEL_Y_OFFSET = -18;
+export const LABEL_PADDING_TOP_DENSE = 24;
+export const MIN_DENSE_HEIGHT_WL = 52;
+export const MIN_DENSE_HEIGHT = 40;
+
+// Text input outlined
+export const MD2_INPUT_PADDING_HORIZONTAL = 14;
+export const MD3_INPUT_PADDING_HORIZONTAL = 16;
+
 // extra space to avoid overlapping input's text and icon
-export const OUTLINED_INPUT_OFFSET = 16;
+export const MD2_OUTLINED_INPUT_OFFSET = 8;
+export const MD3_OUTLINED_INPUT_OFFSET = 16;
+
+export const OUTLINE_MINIMIZED_LABEL_Y_OFFSET = -6;
+export const LABEL_PADDING_TOP = 8;
+export const MIN_DENSE_HEIGHT_OUTLINED = 48;