Merge pull request #206 from iM-GeeKy/iM-GeeKy/material-you

Material You

Author: RichardLindhout

package.json

@@ -67,7 +67,7 @@
     "react": "^18.2.0",
     "react-native": "^0.69.5",
     "react-native-builder-bob": "^0.18.3",
-    "react-native-paper": "^4.12.4",
+    "react-native-paper": "^5.0.0-rc.6",
     "release-it": "^15.4.0",
     "typescript": "^4.7.4"
   },

src/Date/AnimatedCrossView.tsx

@@ -3,28 +3,24 @@ import { Animated, StyleSheet, View } from 'react-native'
 import { useTheme } from 'react-native-paper'
 
 export default function AnimatedCrossView({
-  // visible,
   collapsed,
   calendar,
   calendarEdit,
 }: {
   calendar: any
   calendarEdit: any
-  // visible: boolean
   collapsed: boolean
 }) {
   const theme = useTheme()
   const calendarOpacity = React.useRef<Animated.Value>(
     new Animated.Value(collapsed ? 1 : 0)
   )
   React.useEffect(() => {
-    // if (visible) {
     Animated.timing(calendarOpacity.current, {
       toValue: collapsed ? 1 : 0,
       duration: 250,
       useNativeDriver: true,
     }).start()
-    // }
   }, [collapsed])
 
   return (

src/Date/Calendar.tsx

@@ -34,7 +34,7 @@ export type BaseCalendarProps = {
   startYear?: number
   endYear?: number
 
-  // here they are optional but in final implemenation they are required
+  // here they are optional but in final implementation they are required
   date?: CalendarDate
   dates?: CalendarDates
   startDate?: CalendarDate
@@ -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}>
@@ -97,7 +108,7 @@ export default function DatePickerModalContentHeader(
               ? getTranslation(props.locale, 'typeInDate')
               : getTranslation(props.locale, 'pickDateFromCalendar')
           }
-          color={color}
+          iconColor={color}
           onPress={onToggle}
         />
       ) : null}

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 { DarkTheme, 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 DarkTheme
+  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({