refactor: drop support for material 2 (#513)

Author: iM-GeeKy

example/src/App.tsx

@@ -22,8 +22,6 @@ import {
   Provider as PaperProvider,
   MD3DarkTheme,
   MD3LightTheme,
-  MD2DarkTheme,
-  MD2LightTheme,
 } from 'react-native-paper'
 import {
   DatePickerModal,
@@ -102,13 +100,7 @@ locales.forEach((locale) => {
   registerTranslation(locale[0], locale[1])
 })
 
-function Example({
-  materialYouEnabled,
-  setMaterialYouEnabled,
-}: {
-  materialYouEnabled: boolean
-  setMaterialYouEnabled: (enabled: boolean) => void
-}) {
+function Example() {
   const theme = useTheme()
   const insets = useSafeAreaInsets()
 
@@ -294,32 +286,6 @@ function Example({
                 View documentation
               </Button>
             </View>
-            <Divider style={styles.marginVerticalEight} />
-            <Text
-              maxFontSizeMultiplier={maxFontSizeMultiplier}
-              style={[styles.marginVerticalEight, styles.bold]}
-            >
-              Material theme
-            </Text>
-            <View style={styles.chipContainer}>
-              <Chip
-                compact
-                selected={materialYouEnabled}
-                onPress={() => setMaterialYouEnabled(true)}
-                style={styles.chip}
-              >
-                Material You
-              </Chip>
-              <Chip
-                compact
-                selected={!materialYouEnabled}
-                onPress={() => setMaterialYouEnabled(false)}
-                style={styles.chip}
-              >
-                Material Design 2
-              </Chip>
-            </View>
-
             <Divider style={styles.marginVerticalEight} />
             <Text
               maxFontSizeMultiplier={maxFontSizeMultiplier}
@@ -585,19 +551,14 @@ function Example({
 
 export default function App() {
   const colorScheme = useColorScheme()
-  const [materialYouEnabled, setMaterialYouEnabled] = useState(true)
-  const m3Theme = colorScheme === 'dark' ? MD3DarkTheme : MD3LightTheme
-  const m2Theme = colorScheme === 'dark' ? MD2DarkTheme : MD2LightTheme
+  const theme = colorScheme === 'dark' ? MD3DarkTheme : MD3LightTheme
 
   return (
     <SafeAreaProvider>
-      <PaperProvider theme={materialYouEnabled ? m3Theme : m2Theme}>
+      <PaperProvider theme={theme}>
         <StatusBar style="auto" />
 
-        <Example
-          materialYouEnabled={materialYouEnabled}
-          setMaterialYouEnabled={setMaterialYouEnabled}
-        />
+        <Example />
       </PaperProvider>
     </SafeAreaProvider>
   )

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.22.57",
+  "version": "0.23.0",
   "author": "Richard Lindhout <info@webridge.nl> (https://github.com/web-ridge)",
   "bugs": {
     "url": "https://github.com/web-ridge/react-native-paper-dates/issues"

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

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>({

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
 

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}

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

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

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}

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}