Date picker updates.

Author: iM-GeeKy

src/Date/Calendar.tsx

@@ -101,7 +101,7 @@ function Calendar(
 
   const selectColor = useMemo<string>(() => {
     if (theme.dark) {
-      return darkenBy(Color(theme.colors.primary), 0.9).hex()
+      return darkenBy(Color(theme.colors.primary), 0.1).hex()
     }
     return lightenBy(Color(theme.colors.primary), 0.9).hex()
   }, [theme])

src/Date/DatePickerModalContentHeader.tsx

@@ -1,11 +1,15 @@
 import * as React from 'react'
 import { View, StyleSheet } from 'react-native'
-import { IconButton, Text } 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 '../utils'
 import Color from 'color'
 import { getTranslation } from '../translations/utils'
+import type {
+  Fonts,
+  MD3Typescale,
+} from 'react-native-paper/lib/typescript/types'
 
 export interface HeaderPickProps {
   moreLabel?: string
@@ -61,15 +65,22 @@ export default function DatePickerModalContentHeader(
     editIcon = 'pencil',
     calendarIcon = 'calendar',
   } = props
-
+  const theme = useTheme()
   const label = getLabel(props.locale, props.mode, props.label)
 
   const color = useHeaderTextColor()
   const allowEditing = mode !== 'multiple'
+
+  let textFont = (theme.fonts as Fonts)?.medium
+
+  if (theme.isV3) {
+    textFont = (theme.fonts as MD3Typescale)?.bodyLarge
+  }
+
   return (
     <View style={[styles.header]}>
       <View>
-        <Text style={[styles.label, { color }]}>
+        <Text style={[styles.label, { color, ...textFont }]}>
           {uppercase ? label.toUpperCase() : label}
         </Text>
         <View style={styles.headerContentContainer}>

src/Date/DatePickerModalHeader.tsx

@@ -42,6 +42,7 @@ export default function DatePickerModalHeader(
             <Appbar.Content title={''} />
             <Button
               color={color}
+              textColor={color}
               onPress={props.onSave}
               disabled={props.saveLabelDisabled || false}
               uppercase={props.uppercase || true}

src/Date/DateRangeInput.tsx

@@ -1,16 +1,20 @@
 import * as React from 'react'
-import { MD3DarkTheme, Text, TouchableRipple } from 'react-native-paper'
+import { Theme, Text, TouchableRipple } from 'react-native-paper'
 import { StyleSheet, View } from 'react-native'
 import DayRange from './DayRange'
 import { daySize } from './dateUtils'
+import type {
+  Fonts,
+  MD3Typescale,
+} from 'react-native-paper/lib/typescript/types'
 
 function EmptyDayPure() {
   return <View style={styles.empty} />
 }
 export const EmptyDay = React.memo(EmptyDayPure)
 
 function Day(props: {
-  theme: typeof MD3DarkTheme
+  theme: Theme
   textColorOnPrimary: string
   day: number
   month: number
@@ -41,7 +45,6 @@ function Day(props: {
     textColorOnPrimary,
     theme,
   } = props
-  // console.log(month, { day })
   const onPress = React.useCallback(() => {
     onPressDate(new Date(year, month, day))
   }, [onPressDate, year, month, day])
@@ -55,6 +58,12 @@ function Day(props: {
   const textColor =
     selected || (inRange && theme.dark) ? textColorOnPrimary : undefined
 
+  let textFont = (theme.fonts as Fonts)?.medium
+
+  if (theme.isV3) {
+    textFont = (theme.fonts as MD3Typescale)?.bodyMedium
+  }
+
   return (
     <View style={[styles.root, disabled && styles.disabled]}>
       <DayRange
@@ -83,7 +92,10 @@ function Day(props: {
           ]}
         >
           <Text
-            style={textColor ? { color: textColor } : undefined}
+            style={[
+              textColor ? { color: textColor } : undefined,
+              { ...textFont },
+            ]}
             selectable={false}
           >
             {day}

src/Date/Day.tsx

@@ -1,15 +1,23 @@
 import * as React from 'react'
 import { StyleSheet, View } from 'react-native'
-import { Text, useTheme } from 'react-native-paper'
+import { Text, Theme, useTheme } from 'react-native-paper'
+import type {
+  Fonts,
+  MD3Typescale,
+} from 'react-native-paper/lib/typescript/types'
 
 function DayName({ label }: { label: string }) {
-  const theme = useTheme()
+  const theme: Theme = useTheme()
+
+  let textFont = (theme.fonts as Fonts)?.medium
+
+  if (theme.isV3) {
+    textFont = (theme.fonts as MD3Typescale)?.bodyMedium
+  }
+
   return (
     <View style={styles.dayName}>
-      <Text
-        style={[styles.dayNameLabel, theme.fonts.medium]}
-        selectable={false}
-      >
+      <Text style={[styles.dayNameLabel, { ...textFont }]} selectable={false}>
         {label}
       </Text>
     </View>

src/Date/DayName.tsx

@@ -29,6 +29,10 @@ import type {
 } from './Calendar'
 import { dayNamesHeight } from './DayNames'
 import { useTextColorOnPrimary } from '../utils'
+import type {
+  Fonts,
+  MD3Typescale,
+} from 'react-native-paper/lib/typescript/types'
 
 interface BaseMonthProps {
   locale: undefined | string
@@ -244,6 +248,12 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
     date,
   ])
 
+  let textFont = (theme.fonts as Fonts)?.medium
+
+  if (theme.isV3) {
+    textFont = (theme.fonts as MD3Typescale)?.bodyMedium
+  }
+
   return (
     <View style={[styles.month, { height: getMonthHeight(scrollMode, index) }]}>
       <View
@@ -278,7 +288,7 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
             ]}
           >
             <Text
-              style={[styles.monthLabel, theme.fonts.medium]}
+              style={[styles.monthLabel, { ...textFont }]}
               selectable={false}
             >
               {monthName} {year}

src/Date/Month.tsx

@@ -157,7 +157,6 @@ function VerticalScroller({
               right: 0,
               position: 'absolute',
               height: getMonthHeight('vertical', visibleIndexes[vi]),
-              // transform: `translateY(${getMonthsOffset('vertical', vi)}px)`,
             }}
           >
             {renderItem({

src/Date/Swiper.tsx

@@ -1,6 +1,10 @@
 import * as React from 'react'
 import { FlatList, StyleSheet, View } from 'react-native'
 import { Text, TouchableRipple, useTheme } from 'react-native-paper'
+import type {
+  Fonts,
+  MD3Typescale,
+} from 'react-native-paper/lib/typescript/types'
 import { range } from '../utils'
 
 const ITEM_HEIGHT = 62
@@ -20,7 +24,10 @@ export default function YearPicker({
 }) {
   const theme = useTheme()
   const flatList = React.useRef<FlatList<number> | null>(null)
-  const years = range(isNaN(startYear) ? 1800 : startYear, isNaN(endYear) ? 2200 : endYear)
+  const years = range(
+    isNaN(startYear) ? 1800 : startYear,
+    isNaN(endYear) ? 2200 : endYear
+  )
 
   // scroll to selected year
   React.useEffect(() => {
@@ -31,7 +38,7 @@ export default function YearPicker({
         animated: false,
       })
     }
-  }, [flatList, selectedYear])
+  }, [flatList, selectedYear, startYear])
 
   return (
     <View
@@ -71,6 +78,13 @@ function YearPure({
   onPressYear: (newYear: number) => any
 }) {
   const theme = useTheme()
+
+  let textFont = (theme.fonts as Fonts)?.medium
+
+  if (theme.isV3) {
+    textFont = (theme.fonts as MD3Typescale)?.bodyLarge
+  }
+
   return (
     <View style={styles.year}>
       <TouchableRipple
@@ -86,7 +100,11 @@ function YearPure({
           ]}
         >
           <Text
-            style={[styles.yearLabel, selected ? styles.selectedYear : null]}
+            style={[
+              styles.yearLabel,
+              selected ? styles.selectedYear : null,
+              { ...textFont },
+            ]}
             selectable={false}
           >
             {year}