chore: code composition refactor wip

Author: wonderlul

src/components/TextField/constants.ts

@@ -1,15 +1,14 @@
-import { PixelRatio, Platform } from 'react-native';
+import { I18nManager, PixelRatio, Platform } from 'react-native';
 
-// ==================
-// PLATFORM
-// ==================
 export const isWeb = Platform.OS === 'web';
 
 export const fontScale = PixelRatio.getFontScale();
 
-// =====================
-// FIELD LAYOUT
-// =====================
+/**
+ * Common constants for the text field component.
+ */
+
+// Field layout
 export const BASELINE_TEXT_FIELD_HEIGHT = 56;
 export const BASELINE_TEXT_FIELD_PADDING_VERTICAL = 8;
 
@@ -20,19 +19,20 @@ export const TEXT_FIELD_HEIGHT = BASELINE_TEXT_FIELD_HEIGHT * fontScale;
 export const TEXT_FIELD_PADDING_VERTICAL =
   BASELINE_TEXT_FIELD_PADDING_VERTICAL * fontScale;
 
-// ==================
-// ACCESSORY
-// ==================
+export const TEXT_FIELD_BORDER_RADIUS = 4;
+
+export const LABEL_START_OFFSET_WITHOUT_ACCESSORY =
+  TEXT_FIELD_INPUT_WRAPPER_PADDING_HORIZONTAL;
+
+// Accessory
 export const ACCESSORY_SIZE = 24;
 
 export const PREFIX_END_PADDING = 2;
 export const SUFFIX_START_PADDING = 2;
 
 export const ERROR_ICON_SIZE = 16;
 
-// ===============
-// TYPOGRAPHY
-// ===============
+// Typography
 export const LINE_HEIGHT_DELTA = 2;
 export const INPUT_FONT_SIZE = 16;
 export const ACTIVE_LABEL_FONT_SIZE = 12;
@@ -48,29 +48,67 @@ export const INACTIVE_LABEL_TOP_POSITION =
     LINE_HEIGHT_DELTA) *
   fontScale;
 
-// =================
-// HELPER TEXT LAYOUT
-// =================
+// Helper text layout
 export const SUPPORTING_TEXT_MARGIN_TOP = 4;
 
-// =========
-// ANIMATION
-// =========
+// Animation
 export const ANIMATION_DURATION_MS = 150;
 
-// =========
-// INDICATOR
-// =========
+// Indicator
 export const ACTIVE_INDICATOR_SIZE = 2;
 export const INACTIVE_INDICATOR_SIZE = 1;
 
-// ============
-// SHAPE
-// ============
-export const TEXT_FIELD_BORDER_RADIUS = 4;
+// Layout support
+const isRTL = I18nManager.getConstants().isRTL;
+const layoutSupportMultiplier = isRTL ? -1 : 1;
 
-// ==================
-// LABEL POSITIONING
-// ==================
-export const LABEL_START_OFFSET_WITHOUT_ACCESSORY =
+/**
+ * Constants for the filled variant.
+ */
+
+export const FILLED_LABEL_START_OFFSET_WITH_ACCESSORY =
+  ACCESSORY_SIZE +
+  TEXT_FIELD_ACCESSORY_MARGIN_HORIZONTAL +
   TEXT_FIELD_INPUT_WRAPPER_PADDING_HORIZONTAL;
+
+export const FILLED_ACTIVE_LABEL_TOP_POSITION = TEXT_FIELD_PADDING_VERTICAL;
+
+export const FILLED_MULTILINE_PADDING_TOP =
+  ACTIVE_LABEL_FONT_SIZE * fontScale + TEXT_FIELD_PADDING_VERTICAL;
+
+export const FILLED_DISABLED_CONTAINER_OPACITY = 0.04;
+
+/**
+ * Constants for the outlined variant.
+ */
+
+export const OUTLINED_DISABLED_OUTLINE_OPACITY = 0.12;
+
+export const OUTLINED_MULTILINE_PADDING_TOP =
+  ((BASELINE_TEXT_FIELD_HEIGHT -
+    2 * BASELINE_TEXT_FIELD_PADDING_VERTICAL -
+    INPUT_FONT_SIZE) /
+    2 -
+    LINE_HEIGHT_DELTA) *
+  fontScale;
+
+// Label positioning
+export const OUTLINED_LABEL_PADDING_HORIZONTAL = 4;
+
+export const OUTLINED_LABEL_START_OFFSET_WITH_ACCESSORY =
+  ACCESSORY_SIZE +
+  TEXT_FIELD_ACCESSORY_MARGIN_HORIZONTAL +
+  TEXT_FIELD_INPUT_WRAPPER_PADDING_HORIZONTAL -
+  OUTLINED_LABEL_PADDING_HORIZONTAL;
+
+export const OUTLINED_ACTIVE_LABEL_TOP_POSITION =
+  (-BASELINE_TEXT_FIELD_PADDING_VERTICAL + LINE_HEIGHT_DELTA) * fontScale;
+
+export const OUTLINED_LABEL_TRANSLATE_X_WITH_ACCESSORY =
+  -layoutSupportMultiplier *
+  (ACCESSORY_SIZE +
+    TEXT_FIELD_INPUT_WRAPPER_PADDING_HORIZONTAL -
+    OUTLINED_LABEL_PADDING_HORIZONTAL);
+
+export const OUTLINED_LABEL_TRANSLATE_X_WITHOUT_ACCESSORY =
+  -layoutSupportMultiplier * OUTLINED_LABEL_PADDING_HORIZONTAL;

src/components/TextField/filled/constants.ts

@@ -10,19 +10,21 @@ import {
   TEXT_FIELD_BORDER_RADIUS,
   isWeb,
 } from '../constants';
-import { styles } from '../styles';
+import {
+  FILLED_LABEL_START_OFFSET_WITH_ACCESSORY,
+  FILLED_MULTILINE_PADDING_TOP,
+} from '../constants';
+import { filledStyles, styles } from '../styles';
 import type {
   FilledTextFieldHookData,
   TextFieldProps,
   TextFieldSharedApi,
 } from '../TextField';
-import { getFieldBackgroundColor, getSharedTextFieldStyleData } from '../utils';
 import {
-  LABEL_START_OFFSET_WITH_ACCESSORY,
-  MULTILINE_PADDING_TOP,
-} from './constants';
-import { filledStyles } from './styles';
-import { getOutlineColor } from './utils';
+  getFieldBackgroundColor,
+  getOutlineColor,
+  getSharedTextFieldStyleData,
+} from '../utils';
 
 export const getFilledTextFieldData = (
   api: TextFieldSharedApi,
@@ -47,9 +49,7 @@ export const getFilledTextFieldData = (
     animatedActiveOutlineStyle,
   } = api;
 
-  // =======================
-  // THEME TOKENS
-  // =======================
+  // Theme tokens
 
   const {
     colors: { onSurface },
@@ -71,23 +71,19 @@ export const getFilledTextFieldData = (
 
   const fieldBackgroundColor = getFieldBackgroundColor({ theme, disabled });
 
-  // =======================
-  // SHARED STYLES
-  // =======================
+  // Shared styles
 
   const shared = getSharedTextFieldStyleData(api, props);
 
-  // =======================
-  // VARIANT-SPECIFIC STYLES
-  // =======================
+  // Variant-specific styles
 
   const animatedLabelWrapperStyles: StyleProp<
     AnimatedStyle<StyleProp<ViewStyle>>
   > = [
     filledStyles.labelWrapper,
     {
       left: hasAccessory
-        ? LABEL_START_OFFSET_WITH_ACCESSORY
+        ? FILLED_LABEL_START_OFFSET_WITH_ACCESSORY
         : LABEL_START_OFFSET_WITHOUT_ACCESSORY,
     },
     animatedLabelWrapperStyle,
@@ -156,7 +152,7 @@ export const getFilledTextFieldData = (
     },
     textInputProps.multiline && {
       height: 'auto',
-      paddingTop: MULTILINE_PADDING_TOP,
+      paddingTop: FILLED_MULTILINE_PADDING_TOP,
     },
     isWeb && {
       outlineStyle: 'none' as TextStyle['outlineStyle'],