♻️ DateField - move style implementation down

ZeroGachis · Jan 30, 2024 · 6fd55a2 · 6fd55a2
1 parent b370f51
commit 6fd55a2
Showing 1 changed file with 108 additions and 98 deletions.
diff --git a/src/components/dateSelector/DateField.tsx b/src/components/dateSelector/DateField.tsx
@@ -8,101 +8,15 @@ import {
 import { TextInput } from 'react-native';
 import { Theme, useTheme } from '../../styles/themes';
 
-type State =
-    | 'readonly'
-    | 'filled'
-    | 'empty'
-    | 'filled-focused'
-    | 'empty-focused'
-    | 'error';
-
 export interface DateFieldProps extends TextInputProps {
     hasError?: boolean;
 }
 
-function getPlaceholderColorsStyle(theme: Theme, state: State) {
-    let textColor: string | undefined = theme.sw.colors.neutral[500];
-    if (state === 'error') {
-        textColor = undefined;
-    }
-    if (state === 'empty-focused') {
-        textColor = theme.sw.colors.primary.main;
-    }
-    return {
-        textColor,
-    };
-}
-function getColorsStyle(theme: Theme, state: State) {
-    let backgroundColor, borderColor, textColor;
-
-    switch (state) {
-        case 'filled-focused':
-            textColor = theme.sw.colors.neutral[800];
-            backgroundColor = theme.sw.colors.neutral[50];
-            borderColor = theme.sw.colors.primary.main;
-            break;
-        case 'empty-focused':
-            textColor = theme.sw.colors.primary.main;
-            borderColor = theme.sw.colors.primary.main;
-            backgroundColor =
-                theme.sw.colors.primary.main + theme.sw.transparency[16];
-            break;
-        case 'filled':
-            textColor = theme.sw.colors.neutral[800];
-            backgroundColor =
-                theme.sw.colors.neutral[500] + theme.sw.transparency[8];
-            break;
-        case 'error':
-            textColor = theme.sw.colors.error.main;
-            backgroundColor =
-                theme.sw.colors.error.main + theme.sw.transparency[8];
-            break;
-        default:
-            textColor = theme.sw.colors.neutral[500];
-            backgroundColor =
-                theme.sw.colors.neutral[500] + theme.sw.transparency[8];
-            break;
-    }
-    return { backgroundColor, borderColor, textColor };
-}
-
-function getStyle(theme: Theme, state: State) {
-    const { backgroundColor, borderColor, textColor } = getColorsStyle(
-        theme,
-        state,
-    );
-
-    const placeholderColorsStyle = getPlaceholderColorsStyle(theme, state);
-
-    const style = StyleSheet.create({
-        main: {
-            borderRadius: 18,
-            height: 48,
-            borderWidth: borderColor !== undefined ? 1 : 0,
-            borderColor: borderColor,
-            width: 72,
-            color: textColor,
-            fontFamily: 'PublicSans-Bold',
-            fontSize: 20,
-            lineHeight: 23.5,
-            backgroundColor: backgroundColor,
-            paddingVertical: 0,
-            marginVertical: 0,
-        },
-        placeholder: {
-            color: placeholderColorsStyle.textColor,
-        },
-    });
-    return style;
-}
-
 export const DateField = forwardRef<TextInput, DateFieldProps>(
     ({ value = '', hasError, ...props }, ref) => {
-        const theme = useTheme();
         const [isFocused, setIsFocused] = useState(false);
-        const state = getState(hasError, isFocused, value);
 
-        const style = getStyle(theme, state);
+        const { style, theme } = useDateFieldStyle(hasError, isFocused, value);
 
         const onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
             setIsFocused(true);
@@ -149,28 +63,124 @@ export const DateField = forwardRef<TextInput, DateFieldProps>(
 
 DateField.displayName = 'DateFieldRef';
 
-function getState(
+function useDateFieldStyle(
     hasError: boolean | undefined,
     isFocused: boolean,
     value: string,
-): State {
-    if (hasError) {
-        return 'error';
+) {
+    type State =
+        | 'readonly'
+        | 'filled'
+        | 'empty'
+        | 'filled-focused'
+        | 'empty-focused'
+        | 'error';
+
+    const theme = useTheme();
+
+    function getState(
+        hasError: boolean | undefined,
+        isFocused: boolean,
+        value: string,
+    ): State {
+        if (hasError) {
+            return 'error';
+        }
+
+        if (!isFocused && value === '') {
+            return 'empty';
+        }
+
+        if (isFocused && value === '') {
+            return 'empty-focused';
+        }
+
+        if (!isFocused) {
+            return 'filled';
+        }
+
+        return 'filled-focused';
     }
 
-    if (!isFocused && value === '') {
-        return 'empty';
+    function getPlaceholderColorsStyle(theme: Theme, state: State) {
+        let textColor: string | undefined = theme.sw.colors.neutral[500];
+        if (state === 'error') {
+            textColor = undefined;
+        }
+        if (state === 'empty-focused') {
+            textColor = theme.sw.colors.primary.main;
+        }
+        return {
+            textColor,
+        };
     }
 
-    if (isFocused && value === '') {
-        return 'empty-focused';
+    function getTextInputStyle(theme: Theme, state: State) {
+        let backgroundColor, borderColor, textColor;
+
+        switch (state) {
+            case 'filled-focused':
+                textColor = theme.sw.colors.neutral[800];
+                backgroundColor = theme.sw.colors.neutral[50];
+                borderColor = theme.sw.colors.primary.main;
+                break;
+            case 'empty-focused':
+                textColor = theme.sw.colors.primary.main;
+                borderColor = theme.sw.colors.primary.main;
+                backgroundColor =
+                    theme.sw.colors.primary.main + theme.sw.transparency[16];
+                break;
+            case 'filled':
+                textColor = theme.sw.colors.neutral[800];
+                backgroundColor =
+                    theme.sw.colors.neutral[500] + theme.sw.transparency[8];
+                break;
+            case 'error':
+                textColor = theme.sw.colors.error.main;
+                backgroundColor =
+                    theme.sw.colors.error.main + theme.sw.transparency[8];
+                break;
+            default:
+                textColor = theme.sw.colors.neutral[500];
+                backgroundColor =
+                    theme.sw.colors.neutral[500] + theme.sw.transparency[8];
+                break;
+        }
+        return { backgroundColor, borderColor, textColor };
     }
 
-    if (!isFocused) {
-        return 'filled';
+    function getStyle(theme: Theme, state: State) {
+        const { backgroundColor, borderColor, textColor } = getTextInputStyle(
+            theme,
+            state,
+        );
+
+        const placeholderColorsStyle = getPlaceholderColorsStyle(theme, state);
+
+        return StyleSheet.create({
+            main: {
+                borderRadius: 18,
+                height: 48,
+                borderWidth: borderColor !== undefined ? 1 : 0,
+                borderColor: borderColor,
+                width: 72,
+                color: textColor,
+                fontFamily: 'PublicSans-Bold',
+                fontSize: 20,
+                lineHeight: 23.5,
+                backgroundColor: backgroundColor,
+                paddingVertical: 0,
+                marginVertical: 0,
+            },
+            placeholder: {
+                color: placeholderColorsStyle.textColor,
+            },
+        });
     }
 
-    return 'filled-focused';
+    const state = getState(hasError, isFocused, value);
+
+    return { style: getStyle(theme, state), theme };
 }
 
 function removeNonNumeric(str: string): string {