react-native-paper-dates 0.6.0 → 0.8.2

package/src/Date/DatePickerInput.tsx

@@ -20,7 +20,7 @@ function DatePickerInput(
     withModal = true,
     withDateFormatInLabel = true,
     ...rest
-  }: Omit<React.ComponentProps<typeof TextInput>, 'value' | 'onChange'> & {
+  }: {
     inputMode: 'start' | 'end'
     locale: string
     onChange: (date: Date | undefined) => void
@@ -28,7 +28,10 @@ function DatePickerInput(
     validRange?: ValidRangeType | undefined
     withModal?: boolean
     withDateFormatInLabel?: boolean
-  },
+  } & Omit<
+    React.ComponentProps<typeof TextInput>,
+    'value' | 'onChange' | 'onChangeText'
+  >,
   ref: any
 ) {
   const theme = useTheme()
@@ -59,7 +62,12 @@ function DatePickerInput(
         <TextInputWithMask
           {...rest}
           ref={ref}
-          label={getLabel({ label, inputFormat, withDateFormatInLabel })}
+          label={getLabel({
+            // TODO: support label components?
+            label: label as any,
+            inputFormat,
+            withDateFormatInLabel,
+          })}
           value={formattedValue}
           keyboardType={'number-pad'}
           placeholder={inputFormat}
@@ -75,9 +83,6 @@ function DatePickerInput(
             style={styles.calendarButton}
             icon="calendar"
             onPress={() => setVisible(true)}
-            // RN types bug
-            hasTVPreferredFocus={undefined}
-            tvParallaxProperties={undefined}
           />
         ) : null}
       </View>
@@ -94,6 +99,7 @@ function DatePickerInput(
           onConfirm={onInnerConfirm}
           locale={locale}
           dateMode={inputMode}
+          validRange={validRange}
         />
       ) : null}
     </>
@@ -122,11 +128,10 @@ const styles = StyleSheet.create({
     position: 'relative',
     alignItems: 'center',
     flexGrow: 1,
-    alignSelf: 'flex-start',
   },
   input: {
     flexGrow: 1,
   },
-  calendarButton: { position: 'absolute', right: 0 },
+  calendarButton: { position: 'absolute', right: 0, zIndex: 10 },
 })
 export default React.forwardRef(DatePickerInput)

package/src/Date/DatePickerModalContent.tsx

@@ -142,6 +142,7 @@ export function DatePickerModalContent(
           onSave={onInnerConfirm}
           onDismiss={onDismiss}
           saveLabel={props.saveLabel}
+          uppercase={props.uppercase ?? true}
           disableSafeTop={disableSafeTop}
         />
         <DatePickerModalContentHeader
@@ -155,6 +156,7 @@ export function DatePickerModalContent(
           moreLabel={props.moreLabel}
           startLabel={props.startLabel}
           endLabel={props.endLabel}
+          uppercase={props.uppercase ?? true}
           locale={locale}
         />
       </DatePickerModalHeaderBackground>

package/src/Date/DatePickerModalContentHeader.tsx

@@ -12,6 +12,7 @@ export interface HeaderPickProps {
   label?: string
   emptyLabel?: string
   saveLabel?: string
+  uppercase?: boolean
   headerSeparator?: string
   startLabel?: string
   endLabel?: string
@@ -48,7 +49,7 @@ function getLabel(
 export default function DatePickerModalContentHeader(
   props: HeaderContentProps
 ) {
-  const { onToggle, collapsed, mode, moreLabel } = props
+  const { onToggle, collapsed, mode, moreLabel, uppercase } = props
 
   const label = getLabel(props.locale, props.mode, props.label)
 
@@ -57,8 +58,9 @@ export default function DatePickerModalContentHeader(
   return (
     <View style={[styles.header]}>
       <View>
-        <Text style={[styles.label, { color }]}>{label.toUpperCase()}</Text>
-
+        <Text style={[styles.label, { color }]}>
+          {uppercase ? label.toUpperCase() : label}
+        </Text>
         <View style={styles.headerContentContainer}>
           {mode === 'range' ? (
             <HeaderContentRange {...props} color={color} />
@@ -79,11 +81,13 @@ export default function DatePickerModalContentHeader(
       {allowEditing ? (
         <IconButton
           icon={collapsed ? 'pencil' : 'calendar'}
+          accessibilityLabel={
+            collapsed
+              ? getTranslation(props.locale, 'typeInDate')
+              : getTranslation(props.locale, 'pickDateFromCalendar')
+          }
           color={color}
           onPress={onToggle}
-          // RN types bug
-          hasTVPreferredFocus={undefined}
-          tvParallaxProperties={undefined}
         />
       ) : null}
     </View>

package/src/Date/DatePickerModalHeader.tsx

@@ -8,6 +8,7 @@ import { getTranslation } from '../translations/utils'
 export interface DatePickerModalHeaderProps {
   disableSafeTop?: boolean
   saveLabel?: string
+  uppercase?: boolean
   onDismiss: () => void
   onSave: () => void
   locale: string | undefined
@@ -31,17 +32,16 @@ export default function DatePickerModalHeader(
           <Appbar style={styles.appbarHeader}>
             <Appbar.Action
               icon="close"
+              accessibilityLabel={getTranslation(locale, 'close')}
               onPress={props.onDismiss}
               color={color}
               testID="react-native-paper-dates-close"
-              // RN types bug
-              hasTVPreferredFocus={undefined}
-              tvParallaxProperties={undefined}
             />
             <Appbar.Content title={''} />
             <Button
               color={color}
               onPress={props.onSave}
+              uppercase={props.uppercase ?? true}
               testID="react-native-paper-dates-save"
             >
               {saveLabel}

package/src/Date/DateRangeInput.tsx

@@ -50,13 +50,7 @@ export default function DateRangeInput({ locale }: { locale: string }) {
         <Text>Tot</Text>
       </View>
       <View>
-        <IconButton
-          icon="calendar"
-          onPress={() => setVisible(true)}
-          // RN types bug
-          hasTVPreferredFocus={undefined}
-          tvParallaxProperties={undefined}
-        />
+        <IconButton icon="calendar" onPress={() => setVisible(true)} />
         <Text style={{ opacity: 0 }} accessible={false}>
           tot
         </Text>

package/src/Date/Day.tsx

@@ -73,9 +73,7 @@ function Day(props: {
           styles.button,
           { backgroundColor: inRange ? selectColor : undefined },
         ]}
-        // RN types bug
-        hasTVPreferredFocus={undefined}
-        tvParallaxProperties={undefined}
+        accessibilityRole="button"
       >
         <View
           style={[

package/src/Date/Month.tsx

@@ -260,15 +260,14 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
         <TouchableRipple
           disabled={!isHorizontal}
           onPress={isHorizontal ? () => onPressYear(year) : undefined}
+          accessibilityRole="button"
+          accessibilityLabel={`${monthName} ${year}`}
           style={[
             styles.yearButton,
             {
               borderRadius: roundness,
             },
           ]}
-          // RN types bug
-          hasTVPreferredFocus={undefined}
-          tvParallaxProperties={undefined}
         >
           <View
             style={[
@@ -288,9 +287,6 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
               <IconButton
                 onPress={isHorizontal ? () => onPressYear(year) : undefined}
                 icon={selectingYear ? 'chevron-up' : 'chevron-down'}
-                // RN types bug
-                hasTVPreferredFocus={undefined}
-                tvParallaxProperties={undefined}
               />
             </View>
           </View>

package/src/Date/YearPicker.tsx

@@ -74,10 +74,9 @@ function YearPure({
     <View style={styles.year}>
       <TouchableRipple
         onPress={() => onPressYear(year)}
+        accessibilityRole="button"
+        accessibilityLabel={String(year)}
         style={styles.yearButton}
-        // RN types bug
-        hasTVPreferredFocus={undefined}
-        tvParallaxProperties={undefined}
       >
         <View
           style={[

package/src/Date/inputUtils.ts

@@ -55,22 +55,26 @@ export default function useDateInput({
       let errors =
         validStart && validEnd
           ? [
-              `${getTranslation(locale, 'mustBeBetween')} ${formatter.format(
-                validStart
-              )} - ${formatter.format(validEnd)}`,
+              `${getTranslation(
+                locale,
+                'mustBeBetween',
+                () => 'mustBeBetween'
+              )(formatter.format(validStart), formatter.format(validEnd))}`,
             ]
           : [
               validStart
-                ? `${getTranslation(
+                ? getTranslation(
                     locale,
-                    'mustBeHigherThan'
-                  )} ${formatter.format(validStart)}`
+                    'mustBeHigherThan',
+                    () => 'mustBeHigherThan'
+                  )(formatter.format(validStart))
                 : '',
               validEnd
-                ? `${getTranslation(
+                ? getTranslation(
                     locale,
-                    'mustBeLowerThan'
-                  )} ${formatter.format(validEnd)}`
+                    'mustBeLowerThan',
+                    () => 'mustBeLowerThan'
+                  )(formatter.format(validEnd))
                 : '',
             ]
       setError(errors.filter((n) => n).join(' '))

package/src/Time/AnalogClock.tsx

@@ -70,11 +70,15 @@ function AnalogClock({
         let pickedHours = getHours(angle, previousHourType)
 
         let hours12AndPm = !hours24 && modeRef.current === 'PM'
+
         // Avoiding the "24h"
         // Should be 12h for 12 hours and PM mode
         if ((hours12AndPm || hours24) && pickedHours + 12 < 24) {
           pickedHours += 12
         }
+        if (modeRef.current === 'AM' && pickedHours === 12) {
+          pickedHours = 0
+        }
 
         if (pickedHours === 24) {
           pickedHours = 0

package/src/Time/TimeInput.tsx

@@ -96,9 +96,6 @@ function TimeInput(
           rippleColor={Color(theme.colors.primary).fade(0.7).hex()}
           onPress={() => onPress(clockType)}
           borderless={true}
-          // RN types bug
-          hasTVPreferredFocus={undefined}
-          tvParallaxProperties={undefined}
         >
           <View />
         </TouchableRipple>

package/src/Time/TimePickerModal.tsx

@@ -35,6 +35,7 @@ export function TimePickerModal({
   hours,
   minutes,
   label = 'Select time',
+  uppercase = true,
   cancelLabel = 'Cancel',
   confirmLabel = 'Ok',
   animationType = 'none',
@@ -42,6 +43,7 @@ export function TimePickerModal({
 }: {
   locale?: undefined | string
   label?: string
+  uppercase?: boolean
   cancelLabel?: string
   confirmLabel?: string
   hours?: number | undefined
@@ -134,7 +136,7 @@ export function TimePickerModal({
             >
               <View style={styles.labelContainer}>
                 <Text style={[styles.label, { color: theme.colors.text }]}>
-                  {label.toUpperCase()}
+                  {uppercase ? label.toUpperCase() : label}
                 </Text>
               </View>
               <View style={styles.timePickerContainer}>
@@ -155,16 +157,16 @@ export function TimePickerModal({
                   size={24}
                   style={styles.inputTypeToggle}
                   accessibilityLabel="toggle keyboard"
-                  // RN types bug
-                  hasTVPreferredFocus={undefined}
-                  tvParallaxProperties={undefined}
                 />
                 <View style={styles.fill} />
-                <Button onPress={onDismiss}>{cancelLabel}</Button>
+                <Button onPress={onDismiss} uppercase={uppercase}>
+                  {cancelLabel}
+                </Button>
                 <Button
                   onPress={() =>
                     onConfirm({ hours: localHours, minutes: localMinutes })
                   }
+                  uppercase={uppercase}
                 >
                   {confirmLabel}
                 </Button>

package/src/index.tsx

@@ -10,4 +10,5 @@ export { registerTranslation, getTranslation } from './translations/utils'
 export { default as nl } from './translations/nl'
 export { default as en } from './translations/en'
 export { default as pl } from './translations/pl'
+export { default as pt } from './translations/pt'
 export { default as enGB } from './translations/enGB'

package/src/translations/de.ts

@@ -0,0 +1,20 @@
+import type { TranslationsType } from './utils'
+const de: TranslationsType = {
+  save: 'Speichern',
+  selectSingle: 'Wähle Datum',
+  selectMultiple: 'Wähle Daten',
+  selectRange: 'Wähle Zeitspanne',
+  notAccordingToDateFormat: (inputFormat) =>
+    `Das Format sollte ${inputFormat} sein`,
+  mustBeHigherThan: (date) => `Muss nach dem ${date} sein`,
+  mustBeLowerThan: (date) => `Muss vor dem ${date} sein`,
+  mustBeBetween: (startDate, endDate) =>
+    `Muss in dieser Zeitspanne liegen ${startDate} - ${endDate}`,
+  dateIsDisabled: 'Datum nicht wählbar',
+  previous: 'Vorheriges',
+  next: 'Nächstes',
+  typeInDate: 'Datum eingeben',
+  pickDateFromCalendar: 'Datum vom Kalender auswählen',
+  close: 'Schliessen',
+}
+export default de

package/src/translations/en.ts

@@ -5,11 +5,17 @@ const en: TranslationsType = {
   selectSingle: 'Select date',
   selectMultiple: 'Select dates',
   selectRange: 'Select period',
-  notAccordingToDateFormat: (inputFormat: string) =>
+  notAccordingToDateFormat: (inputFormat) =>
     `Date format must be ${inputFormat}`,
-  mustBeHigherThan: 'Must be later then',
-  mustBeLowerThan: 'Must be earlier then',
-  mustBeBetween: 'Must be between',
+  mustBeHigherThan: (date) => `Must be later then ${date}`,
+  mustBeLowerThan: (date) => `Must be earlier then ${date}`,
+  mustBeBetween: (startDate, endDate) =>
+    `Must be between ${startDate} - ${endDate}`,
   dateIsDisabled: 'Day is not allowed',
+  previous: 'Previous',
+  next: 'Next',
+  typeInDate: 'Type in date',
+  pickDateFromCalendar: 'Pick date from calendar',
+  close: 'Close',
 }
 export default en

package/src/translations/enGB.ts

@@ -5,11 +5,17 @@ const enGB: TranslationsType = {
   selectSingle: 'Select date',
   selectMultiple: 'Select dates',
   selectRange: 'Select period',
-  notAccordingToDateFormat: (inputFormat: string) =>
+  notAccordingToDateFormat: (inputFormat) =>
     `Date format must be ${inputFormat}`,
-  mustBeHigherThan: 'Must be later then',
-  mustBeLowerThan: 'Must be earlier then',
-  mustBeBetween: 'Must be between',
+  mustBeHigherThan: (date) => `Must be later then ${date}`,
+  mustBeLowerThan: (date) => `Must be earlier then ${date}`,
+  mustBeBetween: (startDate, endDate) =>
+    `Must be between ${startDate} - ${endDate}`,
   dateIsDisabled: 'Day is not allowed',
+  previous: 'Previous',
+  next: 'Next',
+  typeInDate: 'Type in date',
+  pickDateFromCalendar: 'Pick date from calendar',
+  close: 'Close',
 }
 export default enGB

package/src/translations/nl.ts

@@ -5,11 +5,17 @@ const nl: TranslationsType = {
   selectSingle: 'Selecteer datum',
   selectMultiple: 'Selecteer datums',
   selectRange: 'Selecteer periode',
-  notAccordingToDateFormat: (inputFormat: string) =>
+  notAccordingToDateFormat: (inputFormat) =>
     `Datumformaat moet ${inputFormat} zijn`,
-  mustBeHigherThan: 'Moet later dan',
-  mustBeLowerThan: 'Moet eerder dan',
-  mustBeBetween: 'Moet tussen',
+  mustBeHigherThan: (date) => `Moet later dan ${date}`,
+  mustBeLowerThan: (date) => `Moet eerder dan ${date}`,
+  mustBeBetween: (startDate, endDate) =>
+    `Moet tussen ${startDate} - ${endDate}`,
   dateIsDisabled: 'Deze dag mag niet',
+  previous: 'Vorige',
+  next: 'Volgende',
+  typeInDate: 'Typ datum',
+  pickDateFromCalendar: 'Kies datum van kalender',
+  close: 'Sluit',
 }
 export default nl

package/src/translations/pl.ts

@@ -5,11 +5,17 @@ const pl: TranslationsType = {
   selectSingle: 'Wybierz datę',
   selectMultiple: 'Wybierz daty',
   selectRange: 'Wybierz zakres',
-  notAccordingToDateFormat: (inputFormat: string) =>
+  notAccordingToDateFormat: (inputFormat) =>
     `Data musi mieć format ${inputFormat}`,
-  mustBeHigherThan: 'Nie wcześniej niż',
-  mustBeLowerThan: 'Nie później niż',
-  mustBeBetween: 'Pomiędzy',
+  mustBeHigherThan: (date) => `Nie wcześniej niżn ${date}`,
+  mustBeLowerThan: (date) => `Nie później niż ${date}`,
+  mustBeBetween: (startDate, endDate) => `Pomiędzy ${startDate} - ${endDate}`,
   dateIsDisabled: 'Niedozwolona data',
+
+  previous: 'Poprzedni',
+  next: 'Dalej',
+  typeInDate: 'Wpisz datę',
+  pickDateFromCalendar: 'Wybierz datę z kalendarza',
+  close: 'Zamknij',
 }
 export default pl

package/src/translations/pt.ts

@@ -0,0 +1,21 @@
+import type { TranslationsType } from './utils'
+
+const pt: TranslationsType = {
+  save: 'Salvar',
+  selectSingle: 'Selecione a data',
+  selectMultiple: 'Selecione as datas',
+  selectRange: 'Selecione o período',
+  notAccordingToDateFormat: (inputFormat: string) =>
+    `O formato da data deve ser ${inputFormat}`,
+  mustBeHigherThan: (date) => `Deve ser depois de ${date}`,
+  mustBeLowerThan: (date) => `Deve ser antes de ${date}`,
+  mustBeBetween: (startDate, endDate) =>
+    `Deve estar entre ${startDate} - ${endDate}`,
+  dateIsDisabled: 'Data não é permitida',
+  previous: 'Anterior',
+  next: 'Próximo',
+  typeInDate: 'Digite a data',
+  pickDateFromCalendar: 'Escolha a data do calendário',
+  close: 'Fechar',
+}
+export default pt

package/src/translations/utils.ts

@@ -4,17 +4,22 @@ export type TranslationsType = {
   selectRange: string
   save: string
   notAccordingToDateFormat: (inputFormat: string) => string
-  mustBeHigherThan: string
-  mustBeLowerThan: string
-  mustBeBetween: string
+  mustBeHigherThan: (date: string) => string
+  mustBeLowerThan: (date: string) => string
+  mustBeBetween: (startDate: string, endDate: string) => string
   dateIsDisabled: string
+  previous: string
+  next: string
+  typeInDate: string
+  pickDateFromCalendar: string
+  close: string
 }
 
 let translationsPerLocale: Record<string, TranslationsType> = {}
 
-export function getTranslation(
+export function getTranslation<K extends keyof TranslationsType>(
   locale: string | undefined,
-  key: keyof TranslationsType,
+  key: K,
   fallback?: any
 ) {
   const l = locale || 'en'