react-native-paper-dates 0.24.1 → 0.24.2

package/src/Date/DatePickerModalContent.tsx

@@ -17,7 +17,7 @@ import CalendarEdit from './CalendarEdit'
 import DatePickerModalHeaderBackground from './DatePickerModalHeaderBackground'
 import DatePickerModalStatusBar from './DatePickerModalStatusBar'
 import { memo, useCallback, useEffect, useState } from 'react'
-import { View } from 'react-native'
+import { LayoutChangeEvent, Platform, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { sharedStyles } from '../shared/styles'
 
@@ -40,6 +40,12 @@ interface DatePickerModalContentBaseProps {
   disableSafeTop?: boolean
   disableStatusBar?: boolean
   statusBarOnTopOfBackdrop?: boolean
+
+  /**
+   * Called with the calendar's measured size. `DatePickerModal` uses it to
+   * draw the calendar immediately the next time it opens.
+   */
+  onCalendarLayout?: (layout: { width: number; height: number }) => void
 }
 
 export interface DatePickerModalContentRangeProps
@@ -92,6 +98,8 @@ export function DatePickerModalContent(
     dayContent,
     dayContentPosition,
     dayContentStyle,
+    initialLayout,
+    onCalendarLayout,
   } = props
   const anyProps = props as any
   const defaultUppercase = false
@@ -145,6 +153,19 @@ export function DatePickerModalContent(
     setCollapsed((prev) => !prev)
   }, [setCollapsed])
 
+  // The calendar fills this view inside the inset padding. Not on web, where
+  // the range calendar's header sits above the part that sizes itself.
+  const onCalendarContainerLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      const { width, height } = event.nativeEvent.layout
+      const calendarWidth = width - insets.left - insets.right
+      if (onCalendarLayout && calendarWidth > 0 && height > 0) {
+        onCalendarLayout({ width: calendarWidth, height })
+      }
+    },
+    [onCalendarLayout, insets.left, insets.right]
+  )
+
   return (
     <>
       <DatePickerModalHeaderBackground disableWeekDays={disableWeekDays}>
@@ -188,6 +209,7 @@ export function DatePickerModalContent(
           sharedStyles.minHeightZero,
           { paddingLeft: insets.left, paddingRight: insets.right },
         ]}
+        onLayout={Platform.OS === 'web' ? undefined : onCalendarContainerLayout}
       >
         <AnimatedCrossView
           collapsed={collapsed}
@@ -209,6 +231,7 @@ export function DatePickerModalContent(
               dayContent={dayContent}
               dayContentPosition={dayContentPosition}
               dayContentStyle={dayContentStyle}
+              initialLayout={initialLayout}
             />
           }
           calendarEdit={

package/src/Date/Swiper.native.tsx

@@ -36,7 +36,7 @@ function getVisibleArray(
 
 function Swiper(props: SwiperProps) {
   return (
-    <AutoSizer>
+    <AutoSizer initialLayout={props.initialLayout}>
       {({ width, height }) => (
         <SwiperInner {...props} width={width} height={height} />
       )}
@@ -65,6 +65,26 @@ function SwiperInner({
 
   const parentRef = useRef<ScrollView | null>(null)
 
+  // Start on the current month instead of at 0 (where no month is rendered)
+  // and then jumping there after mount. Later moves go through scrollTo.
+  const [initialContentOffset] = useState(() => {
+    if (!isIndexWithinRange(initialIndex, startYear, endYear)) {
+      return undefined
+    }
+    return isHorizontal
+      ? { x: getHorizontalMonthOffset(initialIndex, width), y: 0 }
+      : {
+          x: 0,
+          y:
+            getVerticalMonthsOffset(
+              initialIndex,
+              startWeekOnMonday,
+              startYear,
+              endYear
+            ) - montHeaderHeight,
+        }
+  })
+
   const scrollTo = useCallback(
     (index: number, animated: boolean) => {
       if (!isIndexWithinRange(index, startYear, endYear)) {
@@ -208,6 +228,7 @@ function SwiperInner({
         onMomentumScrollEnd={onMomentumScrollEnd}
         onScrollEndDrag={onMomentumScrollEnd}
         onLayout={scrollToCurrent}
+        contentOffset={initialContentOffset}
         showsHorizontalScrollIndicator={false}
         showsVerticalScrollIndicator={false}
         decelerationRate="fast"

package/src/Date/Swiper.tsx

@@ -44,6 +44,7 @@ function Swiper({
   startWeekOnMonday,
   startYear,
   endYear,
+  initialLayout,
 }: SwiperProps) {
   const isHorizontal = scrollMode === 'horizontal'
 
@@ -94,7 +95,7 @@ function Swiper({
   return (
     <>
       {isHorizontal ? (
-        <AutoSizer>
+        <AutoSizer initialLayout={initialLayout}>
           {({ height }) => {
             const overflow =
               getMonthHeight(
@@ -124,7 +125,7 @@ function Swiper({
       ) : (
         <>
           {renderHeader && renderHeader(renderProps)}
-          <AutoSizer>
+          <AutoSizer initialLayout={initialLayout}>
             {({ width, height }) => (
               <VerticalScroller
                 width={width}

package/src/Date/SwiperUtils.ts

@@ -26,6 +26,7 @@ export type SwiperProps = {
   startWeekOnMonday: boolean
   startYear?: number
   endYear?: number
+  initialLayout?: { width: number; height: number }
 }
 
 // Helper function to get the minimum allowed index based on startYear