react-native-paper-dates 0.22.42 → 0.22.44

package/src/Date/Swiper.tsx

@@ -7,7 +7,14 @@ import {
 } from './Month'
 import { beginOffset, estimatedMonthHeight, totalMonths } from './dateUtils'
 import { useLatest } from '../shared/utils'
-import { RenderProps, SwiperProps, useYearChange } from './SwiperUtils'
+import {
+  RenderProps,
+  SwiperProps,
+  useYearChange,
+  isIndexWithinRange,
+  getMinIndex,
+  getMaxIndex,
+} from './SwiperUtils'
 import AutoSizer from './AutoSizer'
 import {
   memo,
@@ -31,18 +38,34 @@ function Swiper({
   selectedYear,
   initialIndex,
   startWeekOnMonday,
+  startYear,
+  endYear,
 }: SwiperProps) {
   const isHorizontal = scrollMode === 'horizontal'
 
   const [index, setIndex] = useState(initialIndex)
 
   const onPrev = useCallback(() => {
-    setIndex((prev) => prev - 1)
-  }, [setIndex])
+    setIndex((prev) => {
+      const newIndex = prev - 1
+      // Check if the new index is within allowed range
+      if (isIndexWithinRange(newIndex, startYear, endYear)) {
+        return newIndex
+      }
+      return prev // Don't change if outside range
+    })
+  }, [setIndex, startYear, endYear])
 
   const onNext = useCallback(() => {
-    setIndex((prev) => prev + 1)
-  }, [setIndex])
+    setIndex((prev) => {
+      const newIndex = prev + 1
+      // Check if the new index is within allowed range
+      if (isIndexWithinRange(newIndex, startYear, endYear)) {
+        return newIndex
+      }
+      return prev // Don't change if outside range
+    })
+  }, [setIndex, startYear, endYear])
 
   const renderProps = {
     index,
@@ -52,13 +75,15 @@ function Swiper({
   const indexRef = useLatest(index)
   useYearChange(
     (newIndex) => {
-      if (newIndex) {
+      if (newIndex && isIndexWithinRange(newIndex, startYear, endYear)) {
         setIndex(newIndex)
       }
     },
     {
       selectedYear,
       currentIndexRef: indexRef,
+      startYear,
+      endYear,
     }
   )
 
@@ -79,6 +104,8 @@ function Swiper({
               estimatedHeight={estimatedMonthHeight}
               renderItem={renderItem}
               startWeekOnMonday={startWeekOnMonday}
+              startYear={startYear}
+              endYear={endYear}
             />
           )}
         </AutoSizer>
@@ -97,6 +124,8 @@ function VerticalScroller({
   estimatedHeight,
   renderItem,
   startWeekOnMonday,
+  startYear,
+  endYear,
 }: {
   renderItem: (renderProps: RenderProps) => any
   width: number
@@ -104,12 +133,26 @@ function VerticalScroller({
   initialIndex: number
   estimatedHeight: number
   startWeekOnMonday: boolean
+  startYear?: number
+  endYear?: number
 }) {
+  // Ensure initial index is within allowed range
+  const constrainedInitialIndex = isIndexWithinRange(
+    initialIndex,
+    startYear,
+    endYear
+  )
+    ? initialIndex
+    : Math.max(
+        Math.min(initialIndex, getMaxIndex(endYear)),
+        getMinIndex(startYear)
+      )
+
   const [visibleIndexes, setVisibleIndexes] = useState<number[]>(
-    visibleArray(initialIndex)
+    visibleArray(constrainedInitialIndex)
   )
 
-  const idx = useRef<number>(initialIndex)
+  const idx = useRef<number>(constrainedInitialIndex)
   const parentRef = useRef<HTMLDivElement | null>(null)
 
   useIsomorphicLayoutEffect(() => {
@@ -137,12 +180,17 @@ function VerticalScroller({
       const offset = top - beginOffset
       const index = getIndexFromVerticalOffset(offset, startWeekOnMonday)
 
+      // Check if the new index is within allowed range
+      if (!isIndexWithinRange(index, startYear, endYear)) {
+        return
+      }
+
       if (idx.current !== index) {
         idx.current = index
         setVisibleIndexesThrottled(visibleArray(index))
       }
     },
-    [setVisibleIndexesThrottled, startWeekOnMonday]
+    [setVisibleIndexesThrottled, startWeekOnMonday, startYear, endYear]
   )
 
   return (

package/src/Date/SwiperUtils.ts

@@ -4,8 +4,10 @@ import {
   addMonths,
   differenceInMonths,
   getRealIndex,
-  startAtIndex,
+  getStartAtIndex,
+  getTotalMonths,
 } from './dateUtils'
+import { defaultStartYear, defaultEndYear } from './dateUtils'
 
 export type RenderProps = {
   index: number
@@ -21,6 +23,50 @@ export type SwiperProps = {
   renderFooter?: (renderProps: RenderProps) => any
   selectedYear: number | undefined
   startWeekOnMonday: boolean
+  startYear?: number
+  endYear?: number
+}
+
+// Helper function to get the minimum allowed index based on startYear
+export function getMinIndex(startYear?: number, endYear?: number): number {
+  if (!startYear) return 0
+
+  const today = new Date()
+  const startDate = new Date(startYear, 0, 1) // January 1st of startYear
+  const months = differenceInMonths(today, startDate)
+  const dynamicStartAtIndex = getStartAtIndex(startYear, endYear)
+  const minIndex = dynamicStartAtIndex + months
+  const totalMonths = getTotalMonths(startYear, endYear)
+
+  // Allow any valid index within the dynamic range, no hard minimum
+  return Math.max(0, Math.min(minIndex, totalMonths - 1))
+}
+
+// Helper function to get the maximum allowed index based on endYear
+export function getMaxIndex(startYear?: number, endYear?: number): number {
+  const dynamicStartAtIndex = getStartAtIndex(startYear, endYear)
+  const totalMonths = getTotalMonths(startYear, endYear)
+
+  if (!endYear) return totalMonths - 1
+
+  const today = new Date()
+  const endDate = new Date(endYear, 11, 31) // December 31st of endYear
+  const months = differenceInMonths(today, endDate)
+  const maxIndex = dynamicStartAtIndex + months
+
+  // Allow any valid index within the dynamic range
+  return Math.max(0, Math.min(maxIndex, totalMonths - 1))
+}
+
+// Helper function to check if an index is within allowed range
+export function isIndexWithinRange(
+  index: number,
+  startYear?: number,
+  endYear?: number
+): boolean {
+  const minIndex = getMinIndex(startYear || defaultStartYear, endYear)
+  const maxIndex = getMaxIndex(startYear, endYear || defaultEndYear)
+  return index >= minIndex && index <= maxIndex
 }
 
 export function useYearChange(
@@ -28,25 +74,36 @@ export function useYearChange(
   {
     selectedYear,
     currentIndexRef,
+    startYear,
+    endYear,
   }: {
     currentIndexRef: MutableRefObject<number>
     selectedYear: number | undefined
+    startYear?: number
+    endYear?: number
   }
 ) {
   const onChangeRef = useLatest(onChange)
   useEffect(() => {
     if (selectedYear) {
       const currentIndex = currentIndexRef.current || 0
-      const currentDate = addMonths(new Date(), getRealIndex(currentIndex))
+      const currentDate = addMonths(
+        new Date(),
+        getRealIndex(currentIndex, startYear, endYear)
+      )
       currentDate.setFullYear(selectedYear)
 
       const today = new Date()
       const months = differenceInMonths(today, currentDate)
+      const dynamicStartAtIndex = getStartAtIndex(startYear, endYear)
+      const totalMonths = getTotalMonths(startYear, endYear)
 
-      const newIndex = startAtIndex + months
-      if (currentIndex !== newIndex) {
-        onChangeRef.current(newIndex)
+      const newIndex = dynamicStartAtIndex + months
+      // Ensure the new index is within valid bounds
+      const boundedIndex = Math.max(0, Math.min(newIndex, totalMonths - 1))
+      if (currentIndex !== boundedIndex) {
+        onChangeRef.current(boundedIndex)
       }
     }
-  }, [currentIndexRef, onChangeRef, selectedYear])
+  }, [currentIndexRef, onChangeRef, selectedYear, startYear, endYear])
 }

package/src/Date/YearPicker.tsx

@@ -3,6 +3,7 @@ import { MD2Theme, Text, TouchableRipple, useTheme } from 'react-native-paper'
 import { range } from '../shared/utils'
 import { memo, useEffect, useRef } from 'react'
 import { sharedStyles } from '../shared/styles'
+import { defaultStartYear, defaultEndYear } from './dateUtils'
 
 const ITEM_HEIGHT = 62
 
@@ -23,8 +24,8 @@ export default function YearPicker({
 
   const flatList = useRef<FlatList<number> | null>(null)
   const years = range(
-    isNaN(startYear) ? 1800 : startYear,
-    isNaN(endYear) ? 2200 : endYear
+    isNaN(startYear) ? defaultStartYear : startYear,
+    isNaN(endYear) ? defaultEndYear : endYear
   )
 
   // scroll to selected year
@@ -149,5 +150,4 @@ const styles = StyleSheet.create({
     fontSize: 16,
   },
 })
-
 const Year = memo(YearPure)

package/src/Date/dateUtils.tsx

@@ -170,19 +170,61 @@ export function isLeapYear({ year }: { year: number }) {
 
 export const daySize = 46
 export const estimatedMonthHeight = 360
-export const startAtIndex = 1200
+export const defaultStartYear = 1800
+export const defaultEndYear = 2200
+
+// Dynamic calculation functions to replace fixed constants
+export function getStartAtIndex(startYear?: number, _endYear?: number): number {
+  const start = startYear || 1800
+  const today = new Date()
+  const currentYear = today.getFullYear()
+
+  // Calculate months from start year to current year
+  const monthsFromStart = (currentYear - start) * 12 + today.getMonth()
+
+  // Ensure we have enough buffer for the range
+  return Math.max(monthsFromStart, 0)
+}
+
+export function getTotalMonths(startYear?: number, endYear?: number): number {
+  const start = startYear || 1800
+  const end = endYear || 2200
+  return (end - start + 1) * 12
+}
+
+export function getBeginOffset(startYear?: number, endYear?: number): number {
+  return estimatedMonthHeight * getStartAtIndex(startYear, endYear)
+}
+
+// Keep the old constants for backward compatibility but make them dynamic
+export const startAtIndex = 2800
 export const totalMonths = startAtIndex * 2
 export const beginOffset = estimatedMonthHeight * startAtIndex
+
+// Create a dynamic grid counts array
+export function createGridCounts(count: number): Array<number | undefined> {
+  return new Array<number | undefined>(count)
+}
+
 export const gridCounts = new Array<number | undefined>(totalMonths)
 
-export function getGridCount(index: number, startWeekOnMonday: boolean) {
-  const cHeight = gridCounts[index]
+export function getGridCount(
+  index: number,
+  startWeekOnMonday: boolean,
+  startYear?: number,
+  endYear?: number
+) {
+  const dynamicGridCounts = createGridCounts(getTotalMonths(startYear, endYear))
+  const cHeight = dynamicGridCounts[index]
   if (cHeight) {
     return cHeight
   }
-  const monthDate = addMonths(new Date(), getRealIndex(index))
+  const monthDate = addMonths(
+    new Date(),
+    getRealIndex(index, startYear, endYear)
+  )
   const h = getGridCountForDate(monthDate, startWeekOnMonday)
-  gridCounts[index] = h
+  dynamicGridCounts[index] = h
   return h
 }
 
@@ -194,19 +236,28 @@ export function getGridCountForDate(date: Date, startWeekOnMonday: boolean) {
   return Math.ceil((daysInMonth + dayOfWeek) / 7)
 }
 
-export function getRealIndex(index: number) {
-  return index - startAtIndex
+export function getRealIndex(
+  index: number,
+  startYear?: number,
+  endYear?: number
+) {
+  return index - getStartAtIndex(startYear, endYear)
 }
 
-export function getInitialIndex(date: Date | undefined) {
+export function getInitialIndex(
+  date: Date | undefined,
+  startYear?: number,
+  endYear?: number
+) {
+  const dynamicStartAtIndex = getStartAtIndex(startYear, endYear)
   if (!date) {
-    return startAtIndex
+    return dynamicStartAtIndex
   }
 
   const today = new Date()
   const months = differenceInMonths(today, date)
 
-  return startAtIndex + months
+  return dynamicStartAtIndex + months
 }
 
 export function useInputFormatter({ locale }: { locale: string | undefined }) {

package/src/translations/utils.ts

@@ -17,7 +17,14 @@ export type TranslationsType = {
   minute: string
 }
 
-let translationsPerLocale: Record<string, TranslationsType> = {}
+export type TranslationResolver = (
+  locale: string | undefined
+) => TranslationsType
+
+let translationsPerLocale: Record<
+  string,
+  TranslationsType | TranslationResolver
+> = {}
 
 export function getTranslation<K extends keyof TranslationsType>(
   locale: string | undefined,
@@ -32,7 +39,10 @@ export function getTranslation<K extends keyof TranslationsType>(
     )
     return fallback || key
   }
-  const translation = translationsPerLocale[l][key]
+  const translation: TranslationsType[K] =
+    typeof translationForLocale === 'function'
+      ? translationForLocale(locale)[key]
+      : translationForLocale[key]
   if (!translation) {
     console.warn(
       `[react-native-paper-dates] The locale ${locale} is registered, but ${key} is missing`
@@ -43,7 +53,7 @@ export function getTranslation<K extends keyof TranslationsType>(
 
 export function registerTranslation(
   locale: string,
-  translations: TranslationsType
+  translations: TranslationsType | TranslationResolver
 ) {
   translationsPerLocale[locale] = translations
 }