react-native-paper-dates 0.9.2 → 0.10.1

package/lib/typescript/utils.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
+import { DefaultTheme, MD3DarkTheme } from 'react-native-paper';
 import Color from 'color';
+export type PaperTheme = typeof MD3DarkTheme | typeof DefaultTheme;
 export declare function useLatest<T>(value: T): React.MutableRefObject<T>;
 export declare function useHeaderBackgroundColor(): string;
 export declare function useHeaderColorIsLight(): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-paper-dates",
-  "version": "0.9.2",
+  "version": "0.10.1",
   "description": "Performant Date Picker for React Native Paper",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -51,25 +51,26 @@
     "@react-native-community/eslint-config": "^3.1.0",
     "@release-it/conventional-changelog": "^5.1.0",
     "@types/color": "^3.0.3",
-    "@types/jest": "^28.1.8",
-    "@types/react": "^18.0.17",
-    "@types/react-native": "^0.69.5",
+    "@types/jest": "^29.2.4",
+    "@types/react": "^18.0.26",
+    "@types/react-native": "^0.70.8",
     "babel-loader": "^8.2.5",
     "commitlint": "^17.0.3",
     "eslint": "^8.22.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "expo-cli": "^6.0.5",
+    "expo-cli": "^6.0.8",
     "husky": "^8.0.1",
     "jest": "^29.0.0",
     "pod-install": "^0.1.38",
     "prettier": "^2.7.1",
     "react": "^18.2.0",
-    "react-native": "^0.69.5",
+    "react-native": "^0.70.6",
     "react-native-builder-bob": "^0.18.3",
-    "react-native-paper": "^4.12.4",
+    "react-native-paper": "^5.0.2",
+    "react-native-safe-area-context": "^4.4.1",
     "release-it": "^15.4.0",
-    "typescript": "^4.7.4"
+    "typescript": "^4.9.4"
   },
   "peerDependencies": {
     "react": "*",

package/src/Date/AnimatedCrossView.tsx

@@ -3,14 +3,12 @@ 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()
@@ -18,13 +16,11 @@ export default function AnimatedCrossView({
     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 (

package/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])

package/src/Date/DatePickerInput.shared.tsx

@@ -11,6 +11,7 @@ export type DatePickerInputProps = {
   withModal?: boolean
   withDateFormatInLabel?: boolean
   calendarIcon?: string
+  saveLabel?: string
 } & Omit<
   React.ComponentProps<typeof TextInput>,
   'value' | 'onChange' | 'onChangeText'

package/src/Date/DatePickerInput.tsx

@@ -42,7 +42,7 @@ function DatePickerInput(
           />
         ) : null
       }
-      modal={({ value, locale, inputMode, validRange }) =>
+      modal={({ value, locale, inputMode, validRange, saveLabel }) =>
         withModal ? (
           <DatePickerModal
             date={value}
@@ -53,6 +53,7 @@ function DatePickerInput(
             locale={locale}
             dateMode={inputMode}
             validRange={validRange}
+            saveLabel={saveLabel}
           />
         ) : null
       }

package/src/Date/DatePickerInputWithoutModal.tsx

@@ -18,6 +18,7 @@ function DatePickerInputWithoutModal(
     withDateFormatInLabel = true,
     modal,
     inputButtons,
+    saveLabel,
     ...rest
   }: DatePickerInputProps & {
     modal?: (params: {
@@ -25,6 +26,7 @@ function DatePickerInputWithoutModal(
       locale: DatePickerInputProps['locale']
       inputMode: DatePickerInputProps['inputMode']
       validRange: DatePickerInputProps['validRange']
+      saveLabel: DatePickerInputProps['saveLabel']
     }) => any
     inputButtons?: any
   },
@@ -42,38 +44,34 @@ function DatePickerInputWithoutModal(
   return (
     <>
       <View style={styles.root}>
-        <TextInputWithMask
-          {...rest}
-          ref={ref}
-          label={getLabel({
-            // TODO: support label components?
-            label: label as any,
-            inputFormat,
-            withDateFormatInLabel,
-          })}
-          value={formattedValue}
-          keyboardType={'number-pad'}
-          placeholder={inputFormat}
-          mask={inputFormat}
-          onChangeText={onChangeText}
-          keyboardAppearance={theme.dark ? 'dark' : 'default'}
-          error={!!error}
-          style={[styles.input, style]}
-        />
-        {inputButtons}
-        {!!error ? (
-          <View style={styles.helperText}>
-            <HelperText
-              style={styles.helperText}
-              type="error"
-              visible={!!error}
-            >
-              {error}
-            </HelperText>
-          </View>
+        <View style={styles.inputContainer}>
+          <TextInputWithMask
+            {...rest}
+            ref={ref}
+            label={getLabel({
+              // TODO: support label components?
+              label: label as any,
+              inputFormat,
+              withDateFormatInLabel,
+            })}
+            value={formattedValue}
+            keyboardType={'number-pad'}
+            placeholder={inputFormat}
+            mask={inputFormat}
+            onChangeText={onChangeText}
+            keyboardAppearance={theme.dark ? 'dark' : 'default'}
+            error={!!error}
+            style={[styles.input, style]}
+          />
+          {inputButtons}
+        </View>
+        {error ? (
+          <HelperText style={styles.helperText} type="error" visible={!!error}>
+            {error}
+          </HelperText>
         ) : null}
       </View>
-      {modal?.({ value, locale, inputMode, validRange })}
+      {modal?.({ value, locale, inputMode, validRange, saveLabel })}
     </>
   )
 }
@@ -95,16 +93,19 @@ function getLabel({
 
 const styles = StyleSheet.create({
   root: {
-    minWidth: 150,
     flexGrow: 1,
-    justifyContent: 'center',
   },
-  helperTextContainer: {
+  inputContainer: {
+    flexGrow: 1,
     flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+  },
+  input: {
+    flexGrow: 1,
   },
   helperText: {
-    flex: 1,
+    // flex: 1,
   },
-  input: {},
 })
 export default React.forwardRef(DatePickerInputWithoutModal)

package/src/Date/DatePickerModalContentHeader.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { View, StyleSheet } from 'react-native'
-import { IconButton, Text } from 'react-native-paper'
+import { IconButton, MD2Theme, Text, useTheme } from 'react-native-paper'
 import type { ModeType } from './Calendar'
 import type { LocalState } from './DatePickerModalContent'
 import { useHeaderTextColor } from '../utils'
@@ -61,15 +61,20 @@ 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?.isV3
+    ? theme.fonts.bodyLarge
+    : (theme as any as MD2Theme).fonts.medium
+
   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 +102,7 @@ export default function DatePickerModalContentHeader(
               ? getTranslation(props.locale, 'typeInDate')
               : getTranslation(props.locale, 'pickDateFromCalendar')
           }
-          color={color}
+          iconColor={color}
           onPress={onToggle}
         />
       ) : null}

package/src/Date/DatePickerModalHeader.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react'
-import { Animated, StyleSheet, SafeAreaView } from 'react-native'
+import { Animated, StyleSheet } from 'react-native'
 import { Appbar, Button } from 'react-native-paper'
 
 import { useHeaderTextColor } from '../utils'
 import { getTranslation } from '../translations/utils'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 export interface DatePickerModalHeaderProps {
   disableSafeTop?: boolean
@@ -22,37 +23,40 @@ export default function DatePickerModalHeader(
   const { disableSafeTop, locale, closeIcon = 'close' } = props
   const saveLabel = props.saveLabel || getTranslation(locale, 'save')
   const color = useHeaderTextColor()
+  const insets = useSafeAreaInsets()
+
   return (
-    <>
-      <Animated.View style={styles.animated}>
-        <SafeAreaView
-          style={[
-            styles.safeContent,
-            disableSafeTop && styles.safeContentNoTop,
-          ]}
+    <Animated.View
+      style={[
+        styles.animated,
+        {
+          paddingTop: disableSafeTop ? 0 : insets.top,
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
+        },
+      ]}
+    >
+      <Appbar style={styles.appbarHeader}>
+        <Appbar.Action
+          icon={closeIcon}
+          accessibilityLabel={getTranslation(locale, 'close')}
+          onPress={props.onDismiss}
+          color={color}
+          testID="react-native-paper-dates-close"
+        />
+        <Appbar.Content title={''} />
+        <Button
+          color={color}
+          textColor={color}
+          onPress={props.onSave}
+          disabled={props.saveLabelDisabled || false}
+          uppercase={props.uppercase || true}
+          testID="react-native-paper-dates-save"
         >
-          <Appbar style={styles.appbarHeader}>
-            <Appbar.Action
-              icon={closeIcon}
-              accessibilityLabel={getTranslation(locale, 'close')}
-              onPress={props.onDismiss}
-              color={color}
-              testID="react-native-paper-dates-close"
-            />
-            <Appbar.Content title={''} />
-            <Button
-              color={color}
-              onPress={props.onSave}
-              disabled={props.saveLabelDisabled || false}
-              uppercase={props.uppercase || true}
-              testID="react-native-paper-dates-save"
-            >
-              {saveLabel}
-            </Button>
-          </Appbar>
-        </SafeAreaView>
-      </Animated.View>
-    </>
+          {saveLabel}
+        </Button>
+      </Appbar>
+    </Animated.View>
   )
 }
 
@@ -61,15 +65,9 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   animated: {
-    paddingBottom: 0,
     elevation: 4,
   },
-  safeContent: {
-    paddingBottom: 0,
-  },
-  safeContentNoTop: {
-    paddingTop: 0,
-  },
+
   header: {
     height: 75,
     alignItems: 'center',

package/src/Date/DatePickerModalHeaderBackground.tsx

@@ -1,6 +1,7 @@
-import { Animated, SafeAreaView, StyleSheet } from 'react-native'
+import { Animated, StyleSheet } from 'react-native'
 import * as React from 'react'
 import { useHeaderBackgroundColor } from '../utils'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 export default function DatePickerModalHeaderBackground({
   children,
@@ -8,27 +9,25 @@ export default function DatePickerModalHeaderBackground({
   children: any
 }) {
   const backgroundColor = useHeaderBackgroundColor()
-
+  const insets = useSafeAreaInsets()
   return (
     <Animated.View
       style={[
         styles.animated,
         {
           backgroundColor,
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
         },
       ]}
     >
-      <SafeAreaView style={styles.safeContent}>{children}</SafeAreaView>
+      {children}
     </Animated.View>
   )
 }
 
 const styles = StyleSheet.create({
   animated: {
-    paddingBottom: 0,
     elevation: 4,
   },
-  safeContent: {
-    paddingBottom: 0,
-  },
 })

package/src/Date/Day.tsx

@@ -1,16 +1,18 @@
 import * as React from 'react'
-import { DarkTheme, Text, TouchableRipple } from 'react-native-paper'
+import { MD2Theme, Text, TouchableRipple } from 'react-native-paper'
 import { StyleSheet, View } from 'react-native'
 import DayRange from './DayRange'
 import { daySize } from './dateUtils'
 
+import type { PaperTheme } from '../utils'
+
 function EmptyDayPure() {
   return <View style={styles.empty} />
 }
 export const EmptyDay = React.memo(EmptyDayPure)
 
 function Day(props: {
-  theme: typeof DarkTheme
+  theme: PaperTheme
   textColorOnPrimary: string
   day: number
   month: number
@@ -41,7 +43,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 +56,10 @@ function Day(props: {
   const textColor =
     selected || (inRange && theme.dark) ? textColorOnPrimary : undefined
 
+  let textFont = theme?.isV3
+    ? theme.fonts.bodyMedium
+    : (theme as any as MD2Theme).fonts.medium
+
   return (
     <View style={[styles.root, disabled && styles.disabled]}>
       <DayRange
@@ -83,7 +88,10 @@ function Day(props: {
           ]}
         >
           <Text
-            style={textColor ? { color: textColor } : undefined}
+            style={[
+              textColor ? { color: textColor } : undefined,
+              { ...textFont },
+            ]}
             selectable={false}
           >
             {day}

package/src/Date/DayName.tsx

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

package/src/Date/Month.tsx

@@ -1,6 +1,12 @@
 import * as React from 'react'
 import { StyleSheet, View } from 'react-native'
-import { IconButton, Text, useTheme, TouchableRipple } from 'react-native-paper'
+import {
+  IconButton,
+  Text,
+  useTheme,
+  TouchableRipple,
+  MD2Theme,
+} from 'react-native-paper'
 import Day, { EmptyDay } from './Day'
 
 import {
@@ -244,6 +250,10 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
     date,
   ])
 
+  let textFont = theme?.isV3
+    ? theme.fonts.bodyMedium
+    : (theme as any as MD2Theme).fonts.medium
+
   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}

package/src/Date/Swiper.tsx

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

package/src/Date/YearPicker.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { FlatList, StyleSheet, View } from 'react-native'
-import { Text, TouchableRipple, useTheme } from 'react-native-paper'
+import { MD2Theme, Text, TouchableRipple, useTheme } from 'react-native-paper'
 import { range } from '../utils'
 
 const ITEM_HEIGHT = 62
@@ -20,7 +20,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 +34,7 @@ export default function YearPicker({
         animated: false,
       })
     }
-  }, [flatList, selectedYear])
+  }, [flatList, selectedYear, startYear])
 
   return (
     <View
@@ -71,6 +74,11 @@ function YearPure({
   onPressYear: (newYear: number) => any
 }) {
   const theme = useTheme()
+
+  let textFont = theme?.isV3
+    ? theme.fonts.bodyLarge
+    : (theme as any as MD2Theme).fonts.medium
+
   return (
     <View style={styles.year}>
       <TouchableRipple
@@ -86,7 +94,11 @@ function YearPure({
           ]}
         >
           <Text
-            style={[styles.yearLabel, selected ? styles.selectedYear : null]}
+            style={[
+              styles.yearLabel,
+              selected ? styles.selectedYear : null,
+              { ...textFont },
+            ]}
             selectable={false}
           >
             {year}

package/src/TextInputMask.tsx

@@ -72,7 +72,7 @@ function TextInputWithMask(
     value,
     mask,
     ...rest
-  }: React.ComponentProps<typeof TextInput> & { mask: string },
+  }: React.ComponentProps<typeof TextInput> & { mask: string; value: string },
   ref: any
 ) {
   const [controlledValue, setControlledValue] = React.useState<string>(
@@ -80,12 +80,15 @@ function TextInputWithMask(
   )
 
   const onInnerChange = (text: string) => {
-    const enhancedText = enhanceTextWithMask(text, mask, controlledValue)
-    setControlledValue(enhancedText)
-
     if (text.length === mask.length) {
       onChangeText && onChangeText(text)
     }
+    setControlledValue(text)
+  }
+
+  const onInnerBlur = () => {
+    const enhancedText = enhanceTextWithMask(value, mask, controlledValue)
+    setControlledValue(enhancedText)
   }
 
   React.useEffect(() => {
@@ -98,6 +101,7 @@ function TextInputWithMask(
       {...rest}
       value={controlledValue}
       onChangeText={onInnerChange}
+      onBlur={onInnerBlur}
     />
   )
 }

package/src/Time/AmPmSwitcher.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { View, StyleSheet } from 'react-native'
-import { Text, TouchableRipple, useTheme } from 'react-native-paper'
+import { MD2Theme, Text, TouchableRipple, useTheme } from 'react-native-paper'
 import { useMemo } from 'react'
 import Color from 'color'
 import { useSwitchColors } from './timeUtils'
@@ -19,7 +19,11 @@ export default function AmPmSwitcher({
     if (theme.dark) {
       return Color(theme.colors.surface).lighten(1.2).hex()
     }
-    return Color(theme.colors.surface).darken(0.1).hex()
+    return Color(
+      theme.isV3 ? theme.colors.inverseOnSurface : theme.colors.surface
+    )
+      .darken(0.1)
+      .hex()
   }, [theme])
 
   const isAM = mode === 'AM'
@@ -74,6 +78,10 @@ function SwitchButton({
   const theme = useTheme()
   const { backgroundColor, color } = useSwitchColors(selected)
 
+  let textFont = theme?.isV3
+    ? theme.fonts.bodyMedium
+    : (theme as any as MD2Theme).fonts.medium
+
   return (
     <TouchableRipple
       onPress={onPress}
@@ -92,7 +100,7 @@ function SwitchButton({
           selectable={false}
           style={[
             {
-              ...theme.fonts.medium,
+              ...textFont,
               color: color,
             },
           ]}

package/src/Time/AnalogClock.tsx

@@ -128,7 +128,9 @@ function AnalogClock({
         styles.clock,
         {
           backgroundColor: theme.dark
-            ? Color(theme.colors.surface).lighten(1.2).hex()
+            ? Color(theme.colors.surface).lighten(1.4).hex()
+            : theme.isV3
+            ? Color(theme.colors.outline).lighten(0.9).hex()
             : Color(theme.colors.surface).darken(0.1).hex(),
         },
       ]}