react-native-paper-dates 0.22.57 → 0.23.2

package/src/Time/TimePickerModal.tsx

@@ -9,13 +9,7 @@ import {
   View,
 } from 'react-native'
 
-import {
-  Button,
-  IconButton,
-  MD2Theme,
-  overlay,
-  useTheme,
-} from 'react-native-paper'
+import { Button, IconButton, useTheme } from 'react-native-paper'
 
 import TimePicker from './TimePicker'
 import {
@@ -102,29 +96,17 @@ export function TimePickerModal({
     [setFocused, setLocalHours, setLocalMinutes]
   )
 
-  const defaultUppercase = !theme.isV3
-  const uppercase = _uppercase ?? defaultUppercase
-  let textFont
+  const uppercase = _uppercase ?? false
+  const textFont = theme.fonts.labelMedium
   let labelText = label
 
-  if (theme.isV3) {
-    textFont = theme.fonts.labelMedium
-  } else {
-    textFont = (theme as any as MD2Theme)?.fonts.medium
-  }
-
   if (inputType === inputTypes.keyboard && !label) {
     labelText = 'Enter time'
   }
 
-  let color
-  if (theme.isV3) {
-    color = theme.dark ? theme.colors.elevation.level3 : theme.colors.surface
-  } else {
-    color = theme.dark
-      ? overlay(10, theme.colors.surface)
-      : theme.colors.surface
-  }
+  const color = theme.dark
+    ? theme.colors.elevation.level3
+    : theme.colors.surface
 
   return (
     <Modal
@@ -157,7 +139,7 @@ export function TimePickerModal({
                 // eslint-disable-next-line react-native/no-inline-styles
                 {
                   backgroundColor: color,
-                  borderRadius: theme.isV3 ? 28 : undefined,
+                  borderRadius: 28,
                 },
               ]}
             >
@@ -168,9 +150,7 @@ export function TimePickerModal({
                     styles.label,
                     {
                       ...textFont,
-                      color: theme?.isV3
-                        ? theme.colors.onSurfaceVariant
-                        : (theme as any as MD2Theme).colors.text,
+                      color: theme.colors.onSurfaceVariant,
                     },
                   ]}
                 >
@@ -192,11 +172,7 @@ export function TimePickerModal({
               </View>
               <View style={styles.bottom}>
                 <IconButton
-                  iconColor={
-                    theme?.isV3
-                      ? theme.colors.onBackground
-                      : (theme as any as MD2Theme).colors.text
-                  }
+                  iconColor={theme.colors.onBackground}
                   icon={getTimeInputTypeIcon(inputType, {
                     keyboard: keyboardIcon,
                     picker: clockIcon,

package/src/Time/timeUtils.ts

@@ -1,6 +1,5 @@
-import Color from 'color'
 import { useMemo } from 'react'
-import { MD2Theme, useTheme } from 'react-native-paper'
+import { useTheme } from 'react-native-paper'
 
 export const circleSize = 256
 
@@ -159,37 +158,25 @@ export function useSwitchColors(highlighted: boolean) {
   const backgroundColor = useMemo<string>(() => {
     if (theme.dark) {
       if (highlighted) {
-        return theme.isV3
-          ? theme.colors.tertiaryContainer
-          : Color(theme.colors.primary).hex()
+        return theme.colors.tertiaryContainer
       }
       return theme.colors.backdrop
     }
 
     if (highlighted) {
-      if (theme.isV3) {
-        return theme.colors.primaryContainer
-      }
-
-      return Color(theme.colors.primary).lighten(1).hex()
+      return theme.colors.primaryContainer
     }
     return theme.colors.surface
   }, [highlighted, theme])
 
   const color = useMemo<string>(() => {
     if (highlighted && !theme.dark) {
-      return theme.isV3 ? theme.colors.onSurfaceVariant : theme.colors.primary
+      return theme.colors.onSurfaceVariant
     }
     if (highlighted && theme.dark) {
-      return theme.isV3
-        ? theme.colors.onTertiaryContainer
-        : theme.colors.background
-    }
-    if (theme.isV3) {
-      return theme.colors.onSurfaceVariant
-    } else {
-      return (theme as any as MD2Theme).colors.placeholder
+      return theme.colors.onTertiaryContainer
     }
+    return theme.colors.onSurfaceVariant
   }, [highlighted, theme])
 
   return { backgroundColor, color }
@@ -200,47 +187,23 @@ export function useInputColors(highlighted: boolean) {
   const backgroundColor = useMemo<string>(() => {
     if (theme.dark) {
       if (highlighted) {
-        return theme.isV3
-          ? theme.colors.primaryContainer
-          : Color(theme.colors.primary).hex()
+        return theme.colors.primaryContainer
       }
-      return theme.isV3
-        ? theme.colors.surfaceVariant
-        : Color(theme.colors.surface).lighten(1.4).hex()
+      return theme.colors.surfaceVariant
     }
 
     if (highlighted) {
-      if (theme.isV3) {
-        return theme.colors.secondaryContainer
-      }
-      return Color(theme.colors.primary).lighten(1).hex()
-    }
-    if (theme.isV3) {
-      return theme.colors.surfaceVariant
+      return theme.colors.secondaryContainer
     }
-    return Color(theme.colors.surface).darken(0.1).hex()
+    return theme.colors.surfaceVariant
   }, [highlighted, theme])
 
   const color = useMemo<string>(() => {
-    if (theme.isV3) {
-      if (!highlighted) {
-        return theme.isV3 ? theme.colors.onSurface : theme.colors.onBackground
-      }
-      return theme.isV3
-        ? theme.colors.onPrimaryContainer
-        : theme.colors.onBackground
-    } else {
-      const t = theme as any as MD2Theme
-      if (highlighted && !theme.dark) {
-        const primary = Color(t.colors.primary)
-        const background = Color(backgroundColor)
-        return background.isDark() && primary.isDark()
-          ? '#ffffffff'
-          : t.colors.primary
-      }
-      return (theme as any as MD2Theme).colors.text
+    if (!highlighted) {
+      return theme.colors.onSurface
     }
-  }, [highlighted, theme, backgroundColor])
+    return theme.colors.onPrimaryContainer
+  }, [highlighted, theme])
 
   return { backgroundColor, color }
 }

package/src/shared/utils.ts

@@ -1,10 +1,5 @@
 import { useRef } from 'react'
-import {
-  DefaultTheme,
-  MD3DarkTheme,
-  overlay,
-  useTheme,
-} from 'react-native-paper'
+import { DefaultTheme, MD3DarkTheme, useTheme } from 'react-native-paper'
 import Color from 'color'
 
 export const supportedOrientations: (
@@ -31,45 +26,22 @@ export function useLatest<T>(value: T) {
 
 export function useHeaderBackgroundColor() {
   const theme = useTheme()
-  if (theme.isV3) {
-    return theme.colors.surface
-  }
-  return theme.dark && theme.mode === 'adaptive'
-    ? overlay(4, theme.colors.surface)
-    : theme.colors.primary
-}
-
-export function useHeaderColorIsLight() {
-  const theme = useTheme()
-  const background =
-    theme.dark && theme.mode === 'adaptive'
-      ? theme.colors.surface
-      : theme.colors.primary
-  return Color(background).isLight()
+  return theme.colors.surface
 }
 
 export function useHeaderTextColor() {
   const theme = useTheme()
-  const isLight = useHeaderColorIsLight()
-  if (theme.isV3) {
-    return theme.colors.onSurfaceVariant
-  }
-  return !isLight ? '#fff' : '#000'
+  return theme.colors.onSurfaceVariant
 }
 
 export function useTextColorOnPrimary() {
   const theme = useTheme()
   const isDark = !Color(theme.colors.primary).isLight()
 
-  if (theme.isV3) {
-    if (isDark && theme.dark) {
-      return theme.colors.onSurface
-    } else {
-      return theme.colors.onPrimary
-    }
+  if (isDark && theme.dark) {
+    return theme.colors.onSurface
   }
-
-  return isDark ? '#fff' : '#000'
+  return theme.colors.onPrimary
 }
 
 export function range(start: number, end: number) {
@@ -78,12 +50,12 @@ export function range(start: number, end: number) {
     .map((_, i) => start + i)
 }
 
-export function lightenBy(color: Color, ratio: number) {
+export function lightenBy(color: InstanceType<typeof Color>, ratio: number) {
   const lightness = color.lightness()
   return color.lightness(lightness + (100 - lightness) * ratio)
 }
 
-export function darkenBy(color: Color, ratio: number) {
+export function darkenBy(color: InstanceType<typeof Color>, ratio: number) {
   const lightness = color.lightness()
   return color.lightness(lightness - lightness * ratio)
 }