feat: add more translations

Author: RichardLindhout

example/src/App.tsx

@@ -120,7 +120,10 @@ function App() {
       ? overlay(3, theme.colors.surface)
       : (theme.colors.surface as any)
 
-  const locale = 'nl'
+  const pastDate = new Date(new Date().setDate(new Date().getDate() - 5))
+  const futureDate = new Date(new Date().setDate(new Date().getDate() + 5))
+
+  const locale = 'en'
   return (
     <>
       <ScrollView
@@ -323,10 +326,12 @@ function App() {
         onDismiss={onDismissSingle}
         date={date}
         onConfirm={onChangeSingle}
-        // validRange={{
-        //   startDate: new Date(2021, 1, 2), // optional
-        //   endDate: new Date(), // optional
-        // }}
+        validRange={{
+          startDate: pastDate,
+          disabledDates: [futureDate],
+          // startDate: new Date(2021, 1, 2), // optional
+          // endDate: new Date(), // optional
+        }}
         // saveLabel="Save" // optional
         // label="Select date" // optional
         // animationType="slide" // optional, default is 'slide' on ios/android and 'none' on web

src/Date/Calendar.tsx

@@ -6,6 +6,7 @@ import {
   areDatesOnSameDay,
   dateToUnix,
   DisableWeekDaysType,
+  getEndOfDay,
   getInitialIndex,
 } from './dateUtils'
 
@@ -129,7 +130,7 @@ function Calendar(
     (d: Date) => {
       if (mode === 'single') {
         ;(onChangeRef.current as SingleChange)({
-          date: dateMode === 'start' ? d : getEndDate(d),
+          date: dateMode === 'start' ? d : getEndOfDay(d),
         })
       } else if (mode === 'range') {
         const sd = startDateRef.current
@@ -140,7 +141,7 @@ function Calendar(
         }
         ;(onChangeRef.current as RangeChange)({
           startDate: isStart ? d : sd,
-          endDate: !isStart ? getEndDate(d) : undefined,
+          endDate: !isStart ? getEndOfDay(d) : undefined,
         })
       } else if (mode === 'multiple') {
         datesRef.current = datesRef.current || []
@@ -211,10 +212,6 @@ function Calendar(
   )
 }
 
-function getEndDate(d: Date) {
-  return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 23, 59, 59)
-}
-
 const styles = StyleSheet.create({
   root: { flex: 1 },
   viewPager: { flex: 1 },

src/Date/DatePickerInput.tsx

@@ -48,22 +48,18 @@ function DatePickerInput(
   const onInnerConfirm = React.useCallback(
     ({ date }) => {
       setVisible(false)
-      if (date) {
-        onChangeRef.current(date)
-      }
+      onChangeRef.current(date)
     },
     [setVisible, onChangeRef]
   )
 
   return (
-    <>
+    <View>
       <View style={styles.root}>
         <TextInputWithMask
           {...rest}
           ref={ref}
-          label={
-            withDateFormatInLabel ? `${label || ''} (${inputFormat})` : label
-          }
+          label={getLabel({ label, inputFormat, withDateFormatInLabel })}
           value={formattedValue}
           keyboardType={'number-pad'}
           placeholder={inputFormat}
@@ -85,6 +81,7 @@ function DatePickerInput(
       <HelperText type="error" visible={!!error}>
         {error}
       </HelperText>
+
       {withModal ? (
         <DatePickerModal
           date={value}
@@ -96,10 +93,25 @@ function DatePickerInput(
           dateMode={inputMode}
         />
       ) : null}
-    </>
+    </View>
   )
 }
 
+function getLabel({
+  withDateFormatInLabel,
+  inputFormat,
+  label,
+}: {
+  withDateFormatInLabel: boolean
+  inputFormat: string
+  label: string | undefined
+}) {
+  if (withDateFormatInLabel) {
+    return label ? `${label} (${inputFormat})` : inputFormat
+  }
+  return label || ''
+}
+
 const styles = StyleSheet.create({
   root: {
     flexDirection: 'row',

src/Date/Month.tsx

@@ -18,8 +18,7 @@ import {
   startAtIndex,
   beginOffset,
   estimatedMonthHeight,
-  isDateWithinOptionalRange,
-  dateToUnix,
+  useRangeChecker,
 } from './dateUtils'
 import { getCalendarHeaderHeight } from './CalendarHeader'
 import type {
@@ -91,39 +90,7 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
   const textColorOnPrimary = useTextColorOnPrimary()
   const realIndex = getRealIndex(index)
   const isHorizontal = scrollMode === 'horizontal'
-
-  const validRangeStart =
-    validRange?.startDate instanceof Date
-      ? dateToUnix(
-          new Date(
-            validRange?.startDate.getFullYear(),
-            validRange?.startDate.getMonth(),
-            validRange?.startDate.getDate(),
-            0,
-            0,
-            0
-          )
-        )
-      : undefined
-
-  const validRangeEnd =
-    validRange?.endDate instanceof Date
-      ? dateToUnix(
-          new Date(
-            validRange?.endDate.getFullYear(),
-            validRange?.endDate.getMonth(),
-            validRange?.endDate.getDate(),
-            23,
-            59,
-            59
-          )
-        )
-      : undefined
-
-  const validDisabledDates = validRange?.disabledDates
-    ? validRange?.disabledDates
-    : undefined
-
+  const { isDisabled, isWithinValidRange } = useRangeChecker(validRange)
   const { monthName, month, year } = React.useMemo(() => {
     const md = addMonths(new Date(), realIndex)
     const y = md.getFullYear()
@@ -155,24 +122,15 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
           const isToday = areDatesOnSameDay(day, today)
 
           let inRange = false
-          let disabled = false
+          let disabled = isDisabled(day)
           let selected = false
-          let inDisabledDates = false
+
           let leftCrop = dayOfMonth === 1
           let rightCrop = dayOfMonth === daysInMonth
 
           const isFirstDayOfMonth = dayOfMonth === 1
           const isLastDayOfMonth = dayOfMonth === daysInMonth
 
-          inDisabledDates = validDisabledDates
-            ? validDisabledDates.some((disabledDate) =>
-                areDatesOnSameDay(disabledDate, day)
-              )
-            : false
-          if (inDisabledDates) {
-            disabled = true
-          }
-
           if (mode === 'range') {
             const selectedStartDay = areDatesOnSameDay(day, startDate)
             const selectedEndDay = areDatesOnSameDay(day, endDate)
@@ -241,18 +199,13 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
                 selected = false
               }
             }
-
-            //
           } else if (mode === 'single') {
             selected = areDatesOnSameDay(day, date)
           }
-          //
-          const isWithinOptionalValidRange = isDateWithinOptionalRange(day, {
-            startUnix: validRangeStart,
-            endUnix: validRangeEnd,
-          })
 
-          if (inRange && !inDisabledDates) {
+          const isWithinOptionalValidRange = isWithinValidRange(day)
+
+          if (inRange && !disabled) {
             disabled = false
           }
 
@@ -282,14 +235,13 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
     year,
     month,
     index,
+    isDisabled,
+    mode,
+    isWithinValidRange,
     startDate,
     endDate,
-    date,
     dates,
-    validRangeStart,
-    validRangeEnd,
-    validDisabledDates,
-    mode,
+    date,
   ])
 
   return (

src/Date/dateUtils.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react'
+import { useLatest } from '../utils'
+import type { ValidRangeType } from './Calendar'
 
 export type DisableWeekDaysType = number[]
 
@@ -63,15 +65,42 @@ export function getFirstDayOfMonth({
   return new Date(year, month, 1).getDay()
 }
 
-// export function getLastDayOfMonth({
-//   year,
-//   month,
-// }: {
-//   year: number
-//   month: number
-// }): number {
-//   return new Date(year, month, getDaysInMonth({ year, month })).getDay()
-// }
+export function useRangeChecker(validRange: ValidRangeType | undefined) {
+  const validStart = validRange?.startDate
+  const validEnd = validRange?.endDate
+  const startUnix =
+    validStart instanceof Date
+      ? dateToUnix(getStartOfDay(validStart))
+      : undefined
+
+  const endUnix =
+    validEnd instanceof Date ? dateToUnix(getEndOfDay(validEnd)) : undefined
+
+  const validDisabledDatesRef = useLatest(validRange?.disabledDates)
+
+  const isWithinValidRange = React.useCallback(
+    (day: Date) => {
+      return isDateWithinOptionalRange(day, {
+        startUnix: startUnix,
+        endUnix: endUnix,
+      })
+    },
+    [startUnix, endUnix]
+  )
+
+  const isDisabled = React.useCallback(
+    (day: Date) => {
+      return validDisabledDatesRef.current
+        ? validDisabledDatesRef.current.some((disabledDate) =>
+            areDatesOnSameDay(disabledDate, day)
+          )
+        : false
+    },
+    [validDisabledDatesRef]
+  )
+
+  return { isDisabled, isWithinValidRange, validStart, validEnd }
+}
 
 export function areDatesOnSameDay(a: Date, b?: Date | null | undefined) {
   if (!b) {
@@ -181,7 +210,12 @@ export function useInputFormatter({ locale }: { locale: string | undefined }) {
     })
   }, [locale])
 }
-
+export function getStartOfDay(d: Date): Date {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0, 0)
+}
+export function getEndOfDay(d: Date): Date {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 23, 59, 59)
+}
 export function useInputFormat({
   formatter,
 }: {

src/Date/inputUtils.ts

@@ -1,11 +1,7 @@
-import {
-  dateToUnix,
-  isDateWithinOptionalRange,
-  useInputFormat,
-  useInputFormatter,
-} from './dateUtils'
+import { useInputFormat, useInputFormatter, useRangeChecker } from './dateUtils'
 import * as React from 'react'
 import type { ValidRangeType } from './Calendar'
+import { getTranslation } from 'react-native-paper-dates'
 
 export default function useDateInput({
   locale,
@@ -20,6 +16,8 @@ export default function useDateInput({
   validRange: ValidRangeType | undefined
   inputMode: 'start' | 'end'
 }) {
+  const { isDisabled, isWithinValidRange, validStart, validEnd } =
+    useRangeChecker(validRange)
   const [error, setError] = React.useState<null | string>(null)
   const formatter = useInputFormatter({ locale })
   const inputFormat = useInputFormat({ formatter })
@@ -34,7 +32,13 @@ export default function useDateInput({
     const month = Number(date.slice(monthIndex, monthIndex + 2))
 
     if (Number.isNaN(day) || Number.isNaN(year) || Number.isNaN(month)) {
-      setError(inputFormat)
+      setError(
+        getTranslation(
+          locale,
+          'notAccordingToDateFormat',
+          () => 'notAccordingToDateFormat'
+        )(inputFormat)
+      )
       return
     }
 
@@ -43,20 +47,31 @@ export default function useDateInput({
         ? new Date(year, month - 1, day, 23, 59, 59)
         : new Date(year, month - 1, day)
 
-    const validStart = validRange?.startDate
-    const validEnd = validRange?.endDate
-    if (
-      !isDateWithinOptionalRange(finalDate, {
-        startUnix: validStart ? dateToUnix(validStart) : undefined,
-        endUnix: validEnd ? dateToUnix(validEnd) : undefined,
-      })
-    ) {
+    if (isDisabled(finalDate)) {
+      setError(getTranslation(locale, 'dateIsDisabled'))
+      return
+    }
+    if (!isWithinValidRange(finalDate)) {
       let errors =
         validStart && validEnd
-          ? [`${formatter.format(validStart)} - ${formatter.format(validEnd)}`]
+          ? [
+              `${getTranslation(locale, 'mustBeBetween')} ${formatter.format(
+                validStart
+              )} - ${formatter.format(validEnd)}`,
+            ]
           : [
-              validStart ? `> ${formatter.format(validStart)}` : '',
-              validEnd ? `< ${formatter.format(validEnd)}` : '',
+              validStart
+                ? `${getTranslation(
+                    locale,
+                    'mustBeHigherThan'
+                  )} ${formatter.format(validStart)}`
+                : '',
+              validEnd
+                ? `${getTranslation(
+                    locale,
+                    'mustBeLowerThan'
+                  )} ${formatter.format(validEnd)}`
+                : '',
             ]
       setError(errors.filter((n) => n).join(' '))
       return