react-native-paper-dates 0.21.9 → 0.22.2

package/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 },

package/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',

package/src/Time/AnalogClock.tsx

@@ -121,6 +121,11 @@ 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}
@@ -128,11 +133,7 @@ function AnalogClock({
       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

package/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,
                 },
               ]}
             >