refactor: extract input addons

callstack · Jun 19, 2023 · 35ac181 · 35ac181
1 parent 7f59e08
commit 35ac181
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 122 deletions.
diff --git a/src/components/TextInput/Addons/Outline.tsx b/src/components/TextInput/Addons/Outline.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react';
+import {
+  View,
+  ColorValue,
+  StyleProp,
+  ViewStyle,
+  StyleSheet,
+} from 'react-native';
+
+type OutlineProps = {
+  isV3: boolean;
+  activeColor: string;
+  backgroundColor: ColorValue;
+  hasActiveOutline?: boolean;
+  focused?: boolean;
+  outlineColor?: string;
+  roundness?: number;
+  style?: StyleProp<ViewStyle>;
+};
+
+export const Outline = ({
+  isV3,
+  activeColor,
+  backgroundColor,
+  hasActiveOutline,
+  focused,
+  outlineColor,
+  roundness,
+  style,
+}: OutlineProps) => (
+  <View
+    testID="text-input-outline"
+    pointerEvents="none"
+    style={[
+      styles.outline,
+      // eslint-disable-next-line react-native/no-inline-styles
+      {
+        backgroundColor,
+        borderRadius: roundness,
+        borderWidth: (isV3 ? hasActiveOutline : focused) ? 2 : 1,
+        borderColor: hasActiveOutline ? activeColor : outlineColor,
+      },
+      style,
+    ]}
+  />
+);
+
+const styles = StyleSheet.create({
+  outline: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 6,
+    bottom: 0,
+  },
+});
diff --git a/src/components/TextInput/Addons/Underline.tsx b/src/components/TextInput/Addons/Underline.tsx
@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { Animated, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+
+import { useInternalTheme } from '../../../core/theming';
+import type { ThemeProp } from '../../../types';
+
+type UnderlineProps = {
+  parentState: {
+    focused: boolean;
+  };
+  error?: boolean;
+  colors?: {
+    error?: string;
+  };
+  activeColor: string;
+  underlineColorCustom?: string;
+  hasActiveOutline?: boolean;
+  style?: StyleProp<ViewStyle>;
+  theme?: ThemeProp;
+};
+
+export const Underline = ({
+  parentState,
+  error,
+  colors,
+  activeColor,
+  underlineColorCustom,
+  hasActiveOutline,
+  style,
+  theme: themeOverrides,
+}: UnderlineProps) => {
+  const { isV3 } = useInternalTheme(themeOverrides);
+
+  let backgroundColor = parentState.focused
+    ? activeColor
+    : underlineColorCustom;
+
+  if (error) backgroundColor = colors?.error;
+
+  const activeScale = isV3 ? 2 : 1;
+
+  return (
+    <Animated.View
+      testID="text-input-underline"
+      style={[
+        styles.underline,
+        isV3 && styles.md3Underline,
+        {
+          backgroundColor,
+          // Underlines is thinner when input is not focused
+          transform: [
+            {
+              scaleY: (isV3 ? hasActiveOutline : parentState.focused)
+                ? activeScale
+                : 0.5,
+            },
+          ],
+        },
+        style,
+      ]}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  underline: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: 2,
+    zIndex: 1,
+  },
+  md3Underline: {
+    height: 1,
+  },
+});
diff --git a/src/components/TextInput/TextInputFlat.tsx b/src/components/TextInput/TextInputFlat.tsx
@@ -1,19 +1,14 @@
 import * as React from 'react';
 import {
-  Animated,
   I18nManager,
   Platform,
-  StyleProp,
   StyleSheet,
   TextInput as NativeTextInput,
   TextStyle,
   View,
-  ViewStyle,
 } from 'react-native';
 
-import type { ThemeProp } from 'src/types';
-
-import { useInternalTheme } from '../../core/theming';
+import { Underline } from './Addons/Underline';
 import { AdornmentSide, AdornmentType, InputMode } from './Adornment/enums';
 import TextInputAdornment, {
   TextInputAdornmentProps,
@@ -421,80 +416,11 @@ const TextInputFlat = ({
 
 export default TextInputFlat;
 
-type UnderlineProps = {
-  parentState: {
-    focused: boolean;
-  };
-  error?: boolean;
-  colors?: {
-    error?: string;
-  };
-  activeColor: string;
-  underlineColorCustom?: string;
-  hasActiveOutline?: boolean;
-  style?: StyleProp<ViewStyle>;
-  theme?: ThemeProp;
-};
-
-const Underline = ({
-  parentState,
-  error,
-  colors,
-  activeColor,
-  underlineColorCustom,
-  hasActiveOutline,
-  style,
-  theme: themeOverrides,
-}: UnderlineProps) => {
-  const { isV3 } = useInternalTheme(themeOverrides);
-
-  let backgroundColor = parentState.focused
-    ? activeColor
-    : underlineColorCustom;
-
-  if (error) backgroundColor = colors?.error;
-
-  const activeScale = isV3 ? 2 : 1;
-
-  return (
-    <Animated.View
-      testID="text-input-underline"
-      style={[
-        styles.underline,
-        isV3 && styles.md3Underline,
-        {
-          backgroundColor,
-          // Underlines is thinner when input is not focused
-          transform: [
-            {
-              scaleY: (isV3 ? hasActiveOutline : parentState.focused)
-                ? activeScale
-                : 0.5,
-            },
-          ],
-        },
-        style,
-      ]}
-    />
-  );
-};
-
 const styles = StyleSheet.create({
   placeholder: {
     position: 'absolute',
     left: 0,
   },
-  underline: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    bottom: 0,
-    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
@@ -7,10 +7,9 @@ import {
   Platform,
   TextStyle,
   ColorValue,
-  StyleProp,
-  ViewStyle,
 } from 'react-native';
 
+import { Outline } from './Addons/Outline';
 import { AdornmentType, AdornmentSide } from './Adornment/enums';
 import TextInputAdornment, {
   getAdornmentConfig,
@@ -386,52 +385,7 @@ const TextInputOutlined = ({
 
 export default TextInputOutlined;
 
-type OutlineProps = {
-  isV3: boolean;
-  activeColor: string;
-  backgroundColor: ColorValue;
-  hasActiveOutline?: boolean;
-  focused?: boolean;
-  outlineColor?: string;
-  roundness?: number;
-  style?: StyleProp<ViewStyle>;
-};
-
-const Outline = ({
-  isV3,
-  activeColor,
-  backgroundColor,
-  hasActiveOutline,
-  focused,
-  outlineColor,
-  roundness,
-  style,
-}: OutlineProps) => (
-  <View
-    testID="text-input-outline"
-    pointerEvents="none"
-    style={[
-      styles.outline,
-      // eslint-disable-next-line react-native/no-inline-styles
-      {
-        backgroundColor,
-        borderRadius: roundness,
-        borderWidth: (isV3 ? hasActiveOutline : focused) ? 2 : 1,
-        borderColor: hasActiveOutline ? activeColor : outlineColor,
-      },
-      style,
-    ]}
-  />
-);
-
 const styles = StyleSheet.create({
-  outline: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 6,
-    bottom: 0,
-  },
   labelContainer: {
     paddingBottom: 0,
   },