fix: prettier

Author: RichardLindhout

src/Date/DatePickerModalContentHeader.tsx

@@ -76,6 +76,10 @@ export default function DatePickerModalContentHeader(
     ? theme.fonts.labelMedium
     : (theme as any as MD2Theme).fonts.medium
 
+  const collapsedIcon = theme.isV3 ? 'pencil-outline' : 'pencil'
+  const expandedIcon = theme.isV3 ? 'calendar-blank' : 'calendar'
+  const finalCollapsedIcon = editIcon ?? collapsedIcon
+  const finalExpandedIcon = calendarIcon ?? expandedIcon
   return (
     <View style={styles.header}>
       <View>
@@ -104,15 +108,7 @@ export default function DatePickerModalContentHeader(
       <View style={styles.fill} />
       {isEditingEnabled ? (
         <IconButton
-          icon={
-            collapsed
-              ? editIcon ?? theme.isV3
-                ? 'pencil-outline'
-                : 'pencil'
-              : calendarIcon ?? theme.isV3
-              ? 'calendar-blank'
-              : 'calendar'
-          }
+          icon={collapsed ? finalCollapsedIcon : finalExpandedIcon}
           accessibilityLabel={
             collapsed
               ? getTranslation(props.locale, 'typeInDate')
@@ -217,16 +213,10 @@ export function HeaderContentRange({
   }, [locale])
 
   const lighterColor = Color(color).fade(0.5).rgb().toString()
-  const startColor = state.startDate
-    ? theme.isV3
-      ? theme.colors.onSurface
-      : color
-    : lighterColor
-  const endColor = state.endDate
-    ? theme.isV3
-      ? theme.colors.onSurface
-      : color
-    : lighterColor
+  const startColorFilled = theme.isV3 ? theme.colors.onSurface : color
+  const endColorFilled = theme.isV3 ? theme.colors.onSurface : color
+  const startColor = state.startDate ? startColorFilled : lighterColor
+  const endColor = state.endDate ? endColorFilled : lighterColor
 
   return (
     <>

src/Date/Day.tsx

@@ -47,24 +47,44 @@ function Day(props: {
     onPressDate(new Date(year, month, day))
   }, [onPressDate, year, month, day])
 
-  const borderColor = theme.isV3
-    ? theme.colors.primary
-    : selected || (inRange && theme.dark)
+  // const borderColorV3 =
+  const borderColorFallback = theme.dark ? '#fff' : '#000'
+  const selectedOrInRangeDarkMode = selected || (inRange && theme.dark)
+  const v2BorderColor = selectedOrInRangeDarkMode
     ? textColorOnPrimary
-    : theme.dark
-    ? '#fff'
-    : '#000'
+    : borderColorFallback
+  const borderColor = theme.isV3 ? theme.colors.primary : v2BorderColor
 
-  const textColor =
-    theme.isV3 && selected
-      ? theme.colors.onPrimary
-      : theme.isV3 && inRange && theme.dark
-      ? theme.colors.onPrimaryContainer
-      : selected || (inRange && theme.dark)
-      ? textColorOnPrimary
-      : theme.isV3
-      ? theme.colors.onSurface
-      : undefined
+  // TODO: check if this can be simplified
+  // converted with Chat-GPT for now from enormous conditional to if-else
+  let baseTextColor
+  let finalTextColor
+
+  if (theme.isV3) {
+    // Theme V3 specific logic for base text color
+    if (selected) {
+      baseTextColor = theme.colors.onPrimary
+    } else if (inRange && theme.dark) {
+      baseTextColor = theme.colors.onPrimaryContainer
+    } else {
+      baseTextColor = theme.colors.onSurface
+    }
+
+    // Theme V3 specific logic for final text color
+    if (isToday) {
+      finalTextColor = selected ? baseTextColor : theme.colors.primary
+    } else {
+      finalTextColor = baseTextColor
+    }
+  } else {
+    // Logic for themes other than V3
+    if (selected || (inRange && theme.dark)) {
+      baseTextColor = textColorOnPrimary
+    }
+    // Since there's no additional logic provided for non-V3 themes in the step 2,
+    // the final text color for non-V3 themes will simply be the base text color.
+    finalTextColor = baseTextColor
+  }
 
   let textFont = theme?.isV3
     ? theme.fonts.bodySmall
@@ -99,14 +119,9 @@ function Day(props: {
           <Text
             maxFontSizeMultiplier={1.5}
             style={[
-              textColor
+              baseTextColor
                 ? {
-                    color:
-                      theme.isV3 && isToday && selected
-                        ? textColor
-                        : theme.isV3 && isToday
-                        ? theme.colors.primary
-                        : textColor,
+                    color: finalTextColor,
                   }
                 : undefined,
               { ...textFont },

src/Date/Month.tsx

@@ -254,6 +254,14 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
     ? theme.fonts.titleSmall
     : (theme as any as MD2Theme).fonts.medium
 
+  const iconColor = theme.isV3
+    ? theme.colors.onSurfaceVariant
+    : theme.colors.onSurface
+
+  const iconSourceV3 = selectingYear ? 'menu-up' : 'menu-down'
+  const iconSourceV2 = selectingYear ? 'chevron-up' : 'chevron-down'
+  const iconSource = theme.isV3 ? iconSourceV3 : iconSourceV2
+
   return (
     <View style={[styles.month, { height: getMonthHeight(scrollMode, index) }]}>
       <View
@@ -305,24 +313,10 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
             <View
               style={[
                 styles.iconWrapper,
-                isHorizontal ? styles.opacity1 : styles.opacity0
+                isHorizontal ? styles.opacity1 : styles.opacity0,
               ]}
             >
-              <Icon
-                size={24}
-                color={theme.isV3
-                  ? theme.colors.onSurfaceVariant
-                  : theme.colors.onSurface
-                }
-                source={selectingYear
-                  ? theme.isV3
-                    ? 'menu-up'
-                    : 'chevron-up'
-                  : theme.isV3
-                  ? 'menu-down'
-                  : 'chevron-down'
-                }
-              />
+              <Icon size={24} color={iconColor} source={iconSource} />
             </View>
           </View>
         </TouchableRipple>
@@ -370,7 +364,7 @@ export const monthHeaderSingleHeight =
 
 const styles = StyleSheet.create({
   iconWrapper: {
-    padding: 8
+    padding: 8,
   },
   week: {
     flexDirection: 'row',

src/Time/AnalogClock.tsx

@@ -121,18 +121,19 @@ function AnalogClock({
   const dynamicSize = focused === clockTypes.hours && shortPointer ? 33 : 0
   const pointerNumber = focused === clockTypes.hours ? hours : minutes
   const degreesPerNumber = focused === clockTypes.hours ? 30 : 6
+
+  const v3Color = theme.colors.surfaceVariant
+  const v2Color = theme.dark
+    ? Color(theme.colors.surface).lighten(1.4).hex()
+    : Color(theme.colors.surface).darken(0.1).hex()
   return (
     <View
       ref={clockRef}
       {...panResponder.panHandlers}
       style={[
         styles.clock,
         {
-          backgroundColor: theme.isV3
-            ? theme.colors.surfaceVariant
-            : theme.dark
-            ? Color(theme.colors.surface).lighten(1.4).hex()
-            : Color(theme.colors.surface).darken(0.1).hex(),
+          backgroundColor: theme.isV3 ? v3Color : v2Color,
         },
       ]}
       // @ts-ignore -> https://github.com/necolas/react-native-web/issues/506

src/Time/TimePickerModal.tsx

@@ -130,6 +130,14 @@ export function TimePickerModal({
     },
     [setFocused, setLocalHours, setLocalMinutes]
   )
+
+  const v3Color = theme.dark
+    ? theme.colors.elevation.level3
+    : theme.colors.surface
+  const v2Color = theme.dark
+    ? overlay(10, theme.colors.surface)
+    : theme.colors.surface
+
   return (
     <Modal
       animationType={animationType}
@@ -162,17 +170,7 @@ export function TimePickerModal({
               style={[
                 styles.modalContent,
                 {
-                  backgroundColor:
-                    theme.dark && theme.isV3
-                      ? theme.colors.elevation.level3
-                      : theme.isV3
-                      ? theme.colors.surface
-                      : theme.dark
-                      ? overlay(10, theme.colors.surface)
-                      : theme.colors.surface,
-                  borderRadius: theme.isV3
-                    ? theme.roundness * 6
-                    : theme.roundness,
+                  backgroundColor: theme.isV3 ? v3Color : v2Color,
                 },
               ]}
             >

yarn.lock

@@ -4202,7 +4202,7 @@ eslint-plugin-prettier@^4.2.1:
 
 eslint-plugin-prettier@^5.1.3:
   version "5.1.3"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.3.tgz#17cfade9e732cef32b5f5be53bd4e07afd8e67e1"
+  resolved "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.3.tgz#17cfade9e732cef32b5f5be53bd4e07afd8e67e1"
   integrity sha512-C9GCVAs4Eq7ZC/XFQHITLiHJxQngdtraXaM+LoUFoFp/lHNl2Zn8f3WQbe9HvTBBQ9YnKFB0/2Ajdqwo5D1EAw==
   dependencies:
     prettier-linter-helpers "^1.0.0"
@@ -7516,7 +7516,7 @@ prettier-linter-helpers@^1.0.0:
 
 prettier@^3.2.5:
   version "3.2.5"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368"
+  resolved "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368"
   integrity sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==
 
 pretty-format@^26.5.2, pretty-format@^26.6.2: