react-native-paper-dates 0.8.1 → 0.8.2

package/src/Date/CalendarEdit.tsx

@@ -88,7 +88,7 @@ function CalendarEdit({
             validRange={validRange}
             locale={locale}
             withModal={false}
-            autoCompleteType={'off'}
+            autoComplete={'off'}
           />
         ) : null}
         {mode === 'range' ? (
@@ -104,7 +104,7 @@ function CalendarEdit({
               validRange={validRange}
               locale={locale}
               withModal={false}
-              autoCompleteType={'off'}
+              autoComplete={'off'}
             />
             <View style={styles.separator} />
             <DatePickerInput
@@ -117,7 +117,7 @@ function CalendarEdit({
               validRange={validRange}
               locale={locale}
               withModal={false}
-              autoCompleteType={'off'}
+              autoComplete="off"
             />
           </>
         ) : null}

package/src/Date/CalendarHeader.tsx

@@ -51,9 +51,6 @@ function CalendarHeader({
               icon="chevron-left"
               accessibilityLabel={getTranslation(locale, 'previous')}
               onPress={onPrev}
-              // RN types bug
-              hasTVPreferredFocus={undefined}
-              tvParallaxProperties={undefined}
             />
           </View>
 
@@ -67,9 +64,6 @@ function CalendarHeader({
               icon="chevron-right"
               accessibilityLabel={getTranslation(locale, 'next')}
               onPress={onNext}
-              // RN types bug
-              hasTVPreferredFocus={undefined}
-              tvParallaxProperties={undefined}
             />
           </View>
         </View>

package/src/Date/DatePickerInput.tsx

@@ -62,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}
@@ -78,9 +83,6 @@ function DatePickerInput(
             style={styles.calendarButton}
             icon="calendar"
             onPress={() => setVisible(true)}
-            // RN types bug
-            hasTVPreferredFocus={undefined}
-            tvParallaxProperties={undefined}
           />
         ) : null}
       </View>
@@ -97,6 +99,7 @@ function DatePickerInput(
           onConfirm={onInnerConfirm}
           locale={locale}
           dateMode={inputMode}
+          validRange={validRange}
         />
       ) : null}
     </>
@@ -129,6 +132,6 @@ const styles = StyleSheet.create({
   input: {
     flexGrow: 1,
   },
-  calendarButton: { position: 'absolute', right: 0 },
+  calendarButton: { position: 'absolute', right: 0, zIndex: 10 },
 })
 export default React.forwardRef(DatePickerInput)

package/src/Date/DatePickerModalContentHeader.tsx

@@ -88,9 +88,6 @@ export default function DatePickerModalContentHeader(
           }
           color={color}
           onPress={onToggle}
-          // RN types bug
-          hasTVPreferredFocus={undefined}
-          tvParallaxProperties={undefined}
         />
       ) : null}
     </View>

package/src/Date/DatePickerModalHeader.tsx

@@ -36,9 +36,6 @@ export default function DatePickerModalHeader(
               onPress={props.onDismiss}
               color={color}
               testID="react-native-paper-dates-close"
-              // RN types bug
-              hasTVPreferredFocus={undefined}
-              tvParallaxProperties={undefined}
             />
             <Appbar.Content title={''} />
             <Button

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

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

package/src/Date/Month.tsx

@@ -268,9 +268,6 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
               borderRadius: roundness,
             },
           ]}
-          // RN types bug
-          hasTVPreferredFocus={undefined}
-          tvParallaxProperties={undefined}
         >
           <View
             style={[
@@ -290,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

@@ -77,9 +77,6 @@ function YearPure({
         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/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

@@ -157,9 +157,6 @@ 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} uppercase={uppercase}>

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,12 @@ 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',

package/src/translations/enGB.ts

@@ -5,11 +5,12 @@ 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',

package/src/translations/nl.ts

@@ -5,11 +5,12 @@ 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',

package/src/translations/pl.ts

@@ -5,11 +5,11 @@ 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',

package/src/translations/pt.ts

@@ -7,9 +7,10 @@ const pt: TranslationsType = {
   selectRange: 'Selecione o período',
   notAccordingToDateFormat: (inputFormat: string) =>
     `O formato da data deve ser ${inputFormat}`,
-  mustBeHigherThan: 'Deve ser depois de',
-  mustBeLowerThan: 'Deve ser antes de',
-  mustBeBetween: 'Deve estar entre',
+  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',

package/src/translations/utils.ts

@@ -4,9 +4,9 @@ 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
@@ -17,9 +17,9 @@ export type TranslationsType = {
 
 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'