react-native-paper-dates 0.22.56 → 0.23.1

package/src/Date/Calendar.tsx

@@ -10,11 +10,10 @@ import {
 } from './dateUtils'
 
 import CalendarHeader from './CalendarHeader'
-import { memo, useCallback, useMemo, useState } from 'react'
+import { memo, useCallback, useState } from 'react'
 import YearPicker from './YearPicker'
-import Color from 'color'
 import { useTheme } from 'react-native-paper'
-import { darkenBy, lightenBy, useLatest } from '../shared/utils'
+import { useLatest } from '../shared/utils'
 import { sharedStyles } from '../shared/styles'
 import { defaultStartYear, defaultEndYear } from './dateUtils'
 
@@ -162,15 +161,7 @@ function Calendar(
     [mode, dateMode, onChangeRef, startDateRef, endDateRef, datesRef]
   )
 
-  const selectColor = useMemo<string>(() => {
-    if (theme.isV3) {
-      return theme.colors.primaryContainer
-    }
-    if (theme.dark) {
-      return darkenBy(Color(theme.colors.primary), 0.1).hex()
-    }
-    return lightenBy(Color(theme.colors.primary), 0.9).hex()
-  }, [theme])
+  const selectColor = theme.colors.primaryContainer
 
   return (
     <View style={sharedStyles.root}>

package/src/Date/DatePickerModal.tsx

@@ -84,7 +84,11 @@ export function DatePickerModal(
         visible={visible}
         onRequestClose={rest.onDismiss}
         presentationStyle={
-          useFormSheet ? 'formSheet' : shouldUseSheet ? 'pageSheet' : 'overFullScreen'
+          useFormSheet
+            ? 'formSheet'
+            : shouldUseSheet
+              ? 'pageSheet'
+              : 'overFullScreen'
         }
         supportedOrientations={supportedOrientations}
         statusBarTranslucent={!disableStatusBar}

package/src/Date/DatePickerModalContent.tsx

@@ -15,7 +15,6 @@ import DatePickerModalContentHeader, {
 } from './DatePickerModalContentHeader'
 import CalendarEdit from './CalendarEdit'
 import DatePickerModalHeaderBackground from './DatePickerModalHeaderBackground'
-import { useTheme } from 'react-native-paper'
 import DatePickerModalStatusBar from './DatePickerModalStatusBar'
 import { memo, useCallback, useEffect, useState } from 'react'
 
@@ -94,9 +93,8 @@ export function DatePickerModalContent(
     statusBarOnTopOfBackdrop,
     startWeekOnMonday,
   } = props
-  const theme = useTheme()
   const anyProps = props as any
-  const defaultUppercase = !theme.isV3
+  const defaultUppercase = false
 
   // use local state to add only onConfirm state changes
   const [state, setState] = useState<LocalState>({

package/src/Date/DatePickerModalContentHeader.tsx

@@ -1,5 +1,5 @@
 import { StyleSheet, View } from 'react-native'
-import { IconButton, MD2Theme, Text, useTheme } from 'react-native-paper'
+import { IconButton, Text, useTheme } from 'react-native-paper'
 import type { ModeType } from './Calendar'
 import type { LocalState } from './DatePickerModalContent'
 import { useHeaderTextColor } from '../shared/utils'
@@ -70,14 +70,10 @@ export default function DatePickerModalContentHeader(
   const label = getLabel(props.locale, props.mode, props.label)
   const color = useHeaderTextColor()
   const isEditingEnabled = allowEditing && mode !== 'multiple'
-  const supportingTextColor = theme.isV3 ? theme.colors.onSurfaceVariant : color
-  const textFont = theme?.isV3
-    ? 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
+  const supportingTextColor = theme.colors.onSurfaceVariant
+  const textFont = theme.fonts.labelMedium
+  const finalCollapsedIcon = editIcon ?? 'pencil-outline'
+  const finalExpandedIcon = calendarIcon ?? 'calendar-blank'
 
   return (
     <View style={styles.header}>
@@ -113,7 +109,7 @@ export default function DatePickerModalContentHeader(
               ? getTranslation(props.locale, 'typeInDate')
               : getTranslation(props.locale, 'pickDateFromCalendar')
           }
-          iconColor={theme.isV3 ? theme.colors.onSurface : color}
+          iconColor={theme.colors.onSurface}
           onPress={onToggle}
         />
       ) : null}
@@ -130,11 +126,7 @@ export function HeaderContentSingle({
   const theme = useTheme()
 
   const lighterColor = Color(color).fade(0.5).rgb().toString()
-  const dateColor = state.date
-    ? theme.isV3
-      ? theme.colors.onSurface
-      : color
-    : lighterColor
+  const dateColor = state.date ? theme.colors.onSurface : lighterColor
 
   const formatter = useMemo(() => {
     return new Intl.DateTimeFormat(locale, {
@@ -164,11 +156,7 @@ export function HeaderContentMulti({
 
   const dateCount = state.dates?.length || 0
   const lighterColor = Color(color).fade(0.5).rgb().toString()
-  const dateColor = dateCount
-    ? theme.isV3
-      ? theme.colors.onSurface
-      : color
-    : lighterColor
+  const dateColor = dateCount ? theme.colors.onSurface : lighterColor
 
   const formatter = useMemo(() => {
     return new Intl.DateTimeFormat(locale, {
@@ -208,8 +196,8 @@ export function HeaderContentRange({
   const theme = useTheme()
 
   const lighterColor = Color(color).fade(0.5).rgb().toString()
-  const startColorFilled = theme.isV3 ? theme.colors.onSurface : color
-  const endColorFilled = theme.isV3 ? theme.colors.onSurface : color
+  const startColorFilled = theme.colors.onSurface
+  const endColorFilled = theme.colors.onSurface
   const startColor = state.startDate ? startColorFilled : lighterColor
   const endColor = state.endDate ? endColorFilled : lighterColor
 

package/src/Date/DatePickerModalHeader.tsx

@@ -44,7 +44,7 @@ export default function DatePickerModalHeader(
             testID="react-native-paper-dates-close"
           />
           <Button
-            textColor={theme.isV3 ? theme.colors.primary : color}
+            textColor={theme.colors.primary}
             onPress={props.onSave}
             disabled={props.saveLabelDisabled ?? false}
             uppercase={props.uppercase ?? true}

package/src/Date/Day.tsx

@@ -1,4 +1,4 @@
-import { MD2Theme, Text, TouchableRipple } from 'react-native-paper'
+import { Text, TouchableRipple } from 'react-native-paper'
 import { StyleSheet, View } from 'react-native'
 import DayRange from './DayRange'
 import { daySize } from './dateUtils'
@@ -41,54 +41,33 @@ function Day(props: {
     selectColor,
     isToday,
     disabled,
-    textColorOnPrimary,
     theme,
   } = props
-  const borderColorFallback = theme.dark ? '#fff' : '#000'
-  const selectedOrInRangeDarkMode = selected || (inRange && theme.dark)
-  const v2BorderColor = selectedOrInRangeDarkMode
-    ? textColorOnPrimary
-    : borderColorFallback
-  const borderColor = theme.isV3 ? theme.colors.primary : v2BorderColor
+  const borderColor = theme.colors.primary
 
   const onPress = useCallback(() => {
     onPressDate(new Date(year, month, day))
   }, [onPressDate, year, month, day])
 
-  // TODO: check if this can be simplified
-  // converted with Chat-GPT for now from enormous conditional to if-else
+  // Determine text colors for M3
   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
-    }
+  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
-    }
+  if (isToday) {
+    finalTextColor = selected ? baseTextColor : theme.colors.primary
   } 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
-    : (theme as any as MD2Theme).fonts.medium
+  const textFont = theme.fonts.bodySmall
 
   return (
     <View style={[styles.root, disabled && styles.disabled]}>

package/src/Date/DayName.tsx

@@ -1,13 +1,11 @@
 import { memo } from 'react'
 import { StyleSheet, View } from 'react-native'
-import { MD2Theme, Text, useTheme } from 'react-native-paper'
+import { Text, useTheme } from 'react-native-paper'
 
 function DayName({ label }: { label: string }) {
   const theme = useTheme()
 
-  let textFont = theme?.isV3
-    ? theme.fonts.bodySmall
-    : (theme as any as MD2Theme).fonts.medium
+  const textFont = theme.fonts.bodySmall
 
   return (
     <View style={styles.dayName}>

package/src/Date/Month.tsx

@@ -1,11 +1,5 @@
 import { StyleSheet, View } from 'react-native'
-import {
-  Icon,
-  MD2Theme,
-  Text,
-  TouchableRipple,
-  useTheme,
-} from 'react-native-paper'
+import { Icon, Text, TouchableRipple, useTheme } from 'react-native-paper'
 import Day, { EmptyDay } from './Day'
 
 import {
@@ -263,17 +257,11 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
     endYear,
   ])
 
-  let textFont = theme?.isV3
-    ? theme.fonts.titleSmall
-    : (theme as any as MD2Theme).fonts.medium
+  const textFont = theme.fonts.titleSmall
 
-  const iconColor = theme.isV3
-    ? theme.colors.onSurfaceVariant
-    : theme.colors.onSurface
+  const iconColor = theme.colors.onSurfaceVariant
 
-  const iconSourceV3 = selectingYear ? 'menu-up' : 'menu-down'
-  const iconSourceV2 = selectingYear ? 'chevron-up' : 'chevron-down'
-  const iconSource = theme.isV3 ? iconSourceV3 : iconSourceV2
+  const iconSource = selectingYear ? 'menu-up' : 'menu-down'
 
   return (
     <View
@@ -324,9 +312,7 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
                 styles.monthLabel,
                 {
                   ...textFont,
-                  color: theme.isV3
-                    ? theme.colors.onSurfaceVariant
-                    : theme.colors.onSurface,
+                  color: theme.colors.onSurfaceVariant,
                 },
               ]}
               selectable={false}

package/src/Date/YearPicker.tsx

@@ -1,5 +1,5 @@
 import { FlatList, ScrollView, StyleSheet, View } from 'react-native'
-import { MD2Theme, Text, TouchableRipple, useTheme } from 'react-native-paper'
+import { Text, TouchableRipple, useTheme } from 'react-native-paper'
 import { range } from '../shared/utils'
 import { memo, useEffect, useRef } from 'react'
 import { sharedStyles } from '../shared/styles'
@@ -81,9 +81,7 @@ function YearPure({
 }) {
   const theme = useTheme()
 
-  let textFont = theme?.isV3
-    ? theme.fonts.bodyLarge
-    : (theme as any as MD2Theme).fonts.medium
+  const textFont = theme.fonts.bodyLarge
 
   return (
     <View style={styles.year}>
@@ -104,13 +102,8 @@ function YearPure({
             style={[
               styles.yearLabel,
               selected
-                ? // eslint-disable-next-line react-native/no-inline-styles
-                  { color: theme.isV3 ? theme.colors.onPrimary : '#fff' }
-                : {
-                    color: theme.isV3
-                      ? theme.colors.onSurfaceVariant
-                      : theme.colors.onSurface,
-                  },
+                ? { color: theme.colors.onPrimary }
+                : { color: theme.colors.onSurfaceVariant },
               { ...textFont },
             ]}
             selectable={false}

package/src/Time/AmPmSwitcher.tsx

@@ -1,7 +1,6 @@
 import { StyleSheet, View } from 'react-native'
-import { MD2Theme, Text, TouchableRipple, useTheme } from 'react-native-paper'
-import { useContext, useMemo } from 'react'
-import Color from 'color'
+import { Text, TouchableRipple, useTheme } from 'react-native-paper'
+import { useContext } from 'react'
 import { inputTypes, PossibleInputTypes, useSwitchColors } from './timeUtils'
 import { DisplayModeContext } from '../contexts/DisplayModeContext'
 import { sharedStyles } from '../shared/styles'
@@ -19,18 +18,7 @@ export default function AmPmSwitcher({
 
   const { setMode, mode } = useContext(DisplayModeContext)
 
-  const backgroundColor = useMemo<string>(() => {
-    if (theme.isV3) {
-      return theme.colors.outline
-    }
-    return Color(
-      theme.dark
-        ? Color(theme.colors.surface).lighten(1.2).hex()
-        : theme.colors.surface
-    )
-      .darken(0.1)
-      .hex()
-  }, [theme])
+  const backgroundColor = theme.colors.outline
 
   const isAM = mode === 'AM'
 
@@ -89,9 +77,7 @@ function SwitchButton({
 
   const { backgroundColor, color } = useSwitchColors(selected)
 
-  let textFont = theme?.isV3
-    ? theme.fonts.titleMedium
-    : (theme as any as MD2Theme).fonts.medium
+  const textFont = theme.fonts.titleMedium
 
   return (
     <TouchableRipple

package/src/Time/AnalogClock.tsx

@@ -1,4 +1,3 @@
-import Color from 'color'
 import {
   GestureResponderEvent,
   PanResponder,
@@ -133,10 +132,6 @@ function AnalogClock({
   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}
@@ -144,7 +139,7 @@ function AnalogClock({
       style={[
         styles.clock,
         {
-          backgroundColor: theme.isV3 ? v3Color : v2Color,
+          backgroundColor: theme.colors.surfaceVariant,
         },
       ]}
       // @ts-ignore -> https://github.com/necolas/react-native-web/issues/506

package/src/Time/TimeInput.tsx

@@ -5,7 +5,7 @@ import {
   TextInputProps,
   View,
 } from 'react-native'
-import { MD2Theme, TouchableRipple, useTheme } from 'react-native-paper'
+import { TouchableRipple, useTheme } from 'react-native-paper'
 
 import Color from 'color'
 import {
@@ -77,11 +77,10 @@ function TimeInput(
         {
           backgroundColor,
           borderRadius: theme.roundness * 2,
-          borderColor:
-            theme.isV3 && highlighted
-              ? theme.colors.onPrimaryContainer
-              : undefined,
-          borderWidth: theme.isV3 && highlighted ? 2 : 0,
+          borderColor: highlighted
+            ? theme.colors.onPrimaryContainer
+            : undefined,
+          borderWidth: highlighted ? 2 : 0,
           height: inputType === inputTypes.keyboard ? 72 : 80,
         },
       ]}
@@ -94,9 +93,7 @@ function TimeInput(
           // eslint-disable-next-line react-native/no-inline-styles
           {
             color,
-            fontFamily: theme?.isV3
-              ? theme.fonts.titleMedium.fontFamily
-              : (theme as any as MD2Theme).fonts.medium.fontFamily,
+            fontFamily: theme.fonts.titleMedium.fontFamily,
             fontSize: inputFontSize,
             lineHeight:
               Platform.OS === 'android'

package/src/Time/TimeInputs.tsx

@@ -4,7 +4,7 @@ import {
   useWindowDimensions,
   View,
 } from 'react-native'
-import { MD2Theme, Text, useTheme } from 'react-native-paper'
+import { Text, useTheme } from 'react-native-paper'
 
 import {
   clockTypes,
@@ -129,9 +129,7 @@ function TimeInputs({
           style={[
             styles.dot,
             {
-              backgroundColor: theme?.isV3
-                ? theme.colors.onSurface
-                : (theme as any as MD2Theme).colors.text,
+              backgroundColor: theme.colors.onSurface,
             },
           ]}
         />
@@ -140,9 +138,7 @@ function TimeInputs({
           style={[
             styles.dot,
             {
-              backgroundColor: theme?.isV3
-                ? theme.colors.onSurface
-                : (theme as any as MD2Theme).colors.text,
+              backgroundColor: theme.colors.onSurface,
             },
           ]}
         />

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 }
 }