react-native-paper-dates 0.24.0 → 0.24.2

package/src/Date/Month.tsx

@@ -1,4 +1,4 @@
-import { StyleSheet, View } from 'react-native'
+import { Platform, ScrollView, StyleSheet, View } from 'react-native'
 import { Icon, Text, TouchableRipple, useTheme } from 'react-native-paper'
 import Day, { EmptyDay } from './Day'
 
@@ -19,6 +19,7 @@ import {
   showWeekDay,
   useRangeChecker,
 } from './dateUtils'
+import { alignTextToFirstWeekday } from './weekdayColumns'
 import { getCalendarHeaderHeight } from './CalendarHeader'
 import type { StyleProp, ViewStyle } from 'react-native'
 import type {
@@ -272,17 +273,54 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
 
   const iconSource = selectingYear ? 'menu-up' : 'menu-down'
 
+  const weeks = grid.map(({ weekIndex, generatedDays }) => (
+    <View style={styles.week} key={weekIndex}>
+      {generatedDays
+        .filter((gd) => showWeekDay(gd.dayIndex, disableWeekDays))
+        .map((gd) =>
+          gd.beforeWeekDay || gd.afterWeekDay ? (
+            <EmptyDay key={gd.dayIndex} />
+          ) : (
+            <Day
+              key={gd.dayIndex}
+              theme={theme}
+              day={gd.dayOfMonth}
+              month={gd.month}
+              year={gd.year}
+              selected={gd.selected}
+              inRange={gd.inRange}
+              leftCrop={gd.leftCrop}
+              rightCrop={gd.rightCrop}
+              onPressDate={onPressDate}
+              isToday={gd.isToday}
+              selectColor={selectColor}
+              primaryColor={primaryColor}
+              disabled={gd.disabled}
+              textColorOnPrimary={textColorOnPrimary}
+              dayContent={dayContent}
+              dayContentPosition={dayContentPosition}
+              dayContentStyle={dayContentStyle}
+            />
+          )
+        )}
+    </View>
+  ))
+
   return (
     <View
-      style={{
-        height: getMonthHeight(
-          scrollMode,
-          index,
-          startWeekOnMonday,
-          startYear,
-          endYear
-        ),
-      }}
+      style={
+        isHorizontal
+          ? styles.monthFill
+          : {
+              height: getMonthHeight(
+                scrollMode,
+                index,
+                startWeekOnMonday,
+                startYear,
+                endYear
+              ),
+            }
+      }
     >
       <View
         style={[
@@ -305,6 +343,7 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
             {
               borderRadius: roundness,
             },
+            alignTextToFirstWeekday(disableWeekDays),
           ]}
         >
           <View
@@ -339,38 +378,26 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
           </View>
         </TouchableRipple>
       </View>
-      {grid.map(({ weekIndex, generatedDays }) => (
-        <View style={styles.week} key={weekIndex}>
-          {generatedDays
-            .filter((gd) => showWeekDay(gd.dayIndex, disableWeekDays))
-            .map((gd) =>
-              gd.beforeWeekDay || gd.afterWeekDay ? (
-                <EmptyDay key={gd.dayIndex} />
-              ) : (
-                <Day
-                  key={gd.dayIndex}
-                  theme={theme}
-                  day={gd.dayOfMonth}
-                  month={gd.month}
-                  year={gd.year}
-                  selected={gd.selected}
-                  inRange={gd.inRange}
-                  leftCrop={gd.leftCrop}
-                  rightCrop={gd.rightCrop}
-                  onPressDate={onPressDate}
-                  isToday={gd.isToday}
-                  selectColor={selectColor}
-                  primaryColor={primaryColor}
-                  disabled={gd.disabled}
-                  textColorOnPrimary={textColorOnPrimary}
-                  dayContent={dayContent}
-                  dayContentPosition={dayContentPosition}
-                  dayContentStyle={dayContentStyle}
-                />
-              )
-            )}
-        </View>
-      ))}
+      {isHorizontal ? (
+        <ScrollView
+          alwaysBounceVertical={false}
+          directionalLockEnabled
+          keyboardShouldPersistTaps="handled"
+          nestedScrollEnabled
+          style={[
+            sharedStyles.root,
+            sharedStyles.minHeightZero,
+            Platform.OS === 'web'
+              ? ({ colorScheme: theme.dark ? 'dark' : 'light' } as ViewStyle)
+              : null,
+          ]}
+          testID="react-native-paper-dates-month-days-scroll"
+        >
+          {weeks}
+        </ScrollView>
+      ) : (
+        weeks
+      )}
     </View>
   )
 }
@@ -387,6 +414,10 @@ const styles = StyleSheet.create({
   iconWrapper: {
     padding: 8,
   },
+  monthFill: {
+    flex: 1,
+    minHeight: 0,
+  },
   monthHeader: {
     height: montHeaderHeight,
     justifyContent: 'center',
@@ -403,10 +434,8 @@ const styles = StyleSheet.create({
   },
   yearButton: {
     alignSelf: 'flex-start',
-    marginLeft: 6,
   },
   yearButtonInner: {
-    paddingLeft: 16,
     flexDirection: 'row',
     alignItems: 'center',
   },

package/src/Date/Swiper.native.tsx

@@ -20,8 +20,9 @@ import {
   getBeginOffset,
 } from './dateUtils'
 import AutoSizer from './AutoSizer'
-import { memo, useCallback, useRef, useState } from 'react'
+import { memo, useCallback, useEffect, useRef, useState } from 'react'
 import { sharedStyles } from '../shared/styles'
+import { verticalScrollbarGutter } from './CalendarHeader'
 
 function getVisibleArray(
   i: number,
@@ -35,7 +36,7 @@ function getVisibleArray(
 
 function Swiper(props: SwiperProps) {
   return (
-    <AutoSizer>
+    <AutoSizer initialLayout={props.initialLayout}>
       {({ width, height }) => (
         <SwiperInner {...props} width={width} height={height} />
       )}
@@ -64,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)) {
@@ -124,10 +145,13 @@ function SwiperInner({
     }
   }, [scrollTo, idx, startYear, endYear])
 
-  const scrollToInitial = useCallback(() => {
+  const scrollToCurrent = useCallback(() => {
     scrollTo(idx.current, false)
   }, [scrollTo])
 
+  // onLayout can run against the previous page width during rotation, before
+  useEffect(scrollToCurrent, [scrollToCurrent])
+
   const onMomentumScrollEnd = useCallback(
     (e: NativeSyntheticEvent<NativeScrollEvent>) => {
       const contentOffset = e.nativeEvent.contentOffset
@@ -164,6 +188,19 @@ function SwiperInner({
     onNext,
   }
 
+  const needsMonthScroll =
+    isHorizontal &&
+    visibleIndexes.some(
+      (monthIndex) =>
+        getMonthHeight(
+          scrollMode,
+          monthIndex,
+          startWeekOnMonday,
+          startYear,
+          endYear
+        ) > height
+    )
+
   useYearChange(
     (newIndex) => {
       if (newIndex && isIndexWithinRange(newIndex, startYear, endYear)) {
@@ -185,10 +222,13 @@ function SwiperInner({
         ref={parentRef}
         horizontal={isHorizontal}
         pagingEnabled={isHorizontal}
-        style={sharedStyles.root}
+        nestedScrollEnabled={isHorizontal}
+        directionalLockEnabled={isHorizontal}
+        style={[sharedStyles.root, sharedStyles.minHeightZero]}
         onMomentumScrollEnd={onMomentumScrollEnd}
         onScrollEndDrag={onMomentumScrollEnd}
-        onLayout={scrollToInitial}
+        onLayout={scrollToCurrent}
+        contentOffset={initialContentOffset}
         showsHorizontalScrollIndicator={false}
         showsVerticalScrollIndicator={false}
         decelerationRate="fast"
@@ -208,48 +248,56 @@ function SwiperInner({
           ]}
         >
           {visibleIndexes
-            ? new Array(visibleIndexes.length).fill(undefined).map((_, vi) => (
-                <View
-                  key={vi}
-                  // eslint-disable-next-line react-native/no-inline-styles
-                  style={{
-                    top: isHorizontal
-                      ? 0
-                      : getVerticalMonthsOffset(
-                          visibleIndexes[vi],
-                          startWeekOnMonday,
-                          startYear,
-                          endYear
-                        ),
-                    left: isHorizontal
-                      ? getHorizontalMonthOffset(visibleIndexes[vi], width)
-                      : 0,
-                    right: isHorizontal ? undefined : 0,
-                    bottom: isHorizontal ? 0 : undefined,
-                    position: 'absolute',
-                    width: isHorizontal ? width : undefined,
-                    height: isHorizontal
-                      ? undefined
-                      : getMonthHeight(
-                          scrollMode,
-                          visibleIndexes[vi],
-                          startWeekOnMonday,
-                          startYear,
-                          endYear
-                        ),
-                  }}
-                >
-                  {renderItem({
-                    index: visibleIndexes[vi],
-                    onPrev: onPrev,
-                    onNext: onNext,
-                  })}
-                </View>
-              ))
+            ? new Array(visibleIndexes.length).fill(undefined).map((_, vi) => {
+                const monthIndex = visibleIndexes[vi]
+                const monthHeight = getMonthHeight(
+                  scrollMode,
+                  monthIndex,
+                  startWeekOnMonday,
+                  startYear,
+                  endYear
+                )
+                // Horizontal paging does not scroll inside a month. Bound the
+                // page to the dialog so the day grid can scroll in landscape.
+                return (
+                  <View
+                    key={vi}
+                    // eslint-disable-next-line react-native/no-inline-styles
+                    style={{
+                      top: isHorizontal
+                        ? 0
+                        : getVerticalMonthsOffset(
+                            monthIndex,
+                            startWeekOnMonday,
+                            startYear,
+                            endYear
+                          ),
+                      left: isHorizontal
+                        ? getHorizontalMonthOffset(monthIndex, width)
+                        : 0,
+                      right: isHorizontal ? undefined : 0,
+                      position: 'absolute',
+                      width: isHorizontal ? width : undefined,
+                      height: isHorizontal ? height : monthHeight,
+                      overflow: 'hidden',
+                    }}
+                  >
+                    {renderItem({
+                      index: monthIndex,
+                      onPrev: onPrev,
+                      onNext: onNext,
+                    })}
+                  </View>
+                )
+              })
             : null}
         </View>
       </ScrollView>
-      {renderHeader && renderHeader(renderProps)}
+      {renderHeader &&
+        renderHeader({
+          ...renderProps,
+          endInset: needsMonthScroll ? verticalScrollbarGutter : 0,
+        })}
       {renderFooter && renderFooter(renderProps)}
     </>
   )

package/src/Date/Swiper.tsx

@@ -1,4 +1,3 @@
-import { View } from 'react-native'
 import { useTheme } from 'react-native-paper'
 import {
   getIndexFromVerticalOffset,
@@ -30,7 +29,7 @@ import {
   useRef,
   useState,
 } from 'react'
-import { sharedStyles } from '../shared/styles'
+import { verticalScrollbarGutter } from './CalendarHeader'
 
 const useIsomorphicLayoutEffect =
   typeof window !== 'undefined' ? useLayoutEffect : useEffect
@@ -45,6 +44,7 @@ function Swiper({
   startWeekOnMonday,
   startYear,
   endYear,
+  initialLayout,
 }: SwiperProps) {
   const isHorizontal = scrollMode === 'horizontal'
 
@@ -94,26 +94,52 @@ function Swiper({
 
   return (
     <>
-      {renderHeader && renderHeader(renderProps)}
       {isHorizontal ? (
-        <View style={sharedStyles.root}>
-          {renderItem({ index, onPrev, onNext })}
-        </View>
-      ) : (
-        <AutoSizer>
-          {({ width, height }) => (
-            <VerticalScroller
-              width={width}
-              height={height}
-              initialIndex={initialIndex}
-              estimatedHeight={estimatedMonthHeight}
-              renderItem={renderItem}
-              startWeekOnMonday={startWeekOnMonday}
-              startYear={startYear}
-              endYear={endYear}
-            />
-          )}
+        <AutoSizer initialLayout={initialLayout}>
+          {({ height }) => {
+            const overflow =
+              getMonthHeight(
+                'horizontal',
+                index,
+                startWeekOnMonday,
+                startYear,
+                endYear
+              ) > height
+            return (
+              <>
+                {renderItem({
+                  index,
+                  onPrev,
+                  onNext,
+                })}
+                {renderHeader
+                  ? renderHeader({
+                      ...renderProps,
+                      endInset: overflow ? verticalScrollbarGutter : 0,
+                    })
+                  : null}
+              </>
+            )
+          }}
         </AutoSizer>
+      ) : (
+        <>
+          {renderHeader && renderHeader(renderProps)}
+          <AutoSizer initialLayout={initialLayout}>
+            {({ width, height }) => (
+              <VerticalScroller
+                width={width}
+                height={height}
+                initialIndex={initialIndex}
+                estimatedHeight={estimatedMonthHeight}
+                renderItem={renderItem}
+                startWeekOnMonday={startWeekOnMonday}
+                startYear={startYear}
+                endYear={endYear}
+              />
+            )}
+          </AutoSizer>
+        </>
       )}
       {renderFooter && renderFooter(renderProps)}
     </>

package/src/Date/SwiperUtils.ts

@@ -10,6 +10,7 @@ import {
 import { defaultStartYear, defaultEndYear } from './dateUtils'
 
 export type RenderProps = {
+  endInset?: number
   index: number
   onNext: () => any
   onPrev: () => any
@@ -25,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

package/src/Date/YearPicker.tsx

@@ -1,4 +1,11 @@
-import { FlatList, ScrollView, StyleSheet, View } from 'react-native'
+import {
+  FlatList,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  View,
+  type ViewStyle,
+} from 'react-native'
 import { Text, TouchableRipple, useTheme } from 'react-native-paper'
 import { range } from '../shared/utils'
 import { memo, useEffect, useRef } from 'react'
@@ -51,7 +58,12 @@ export default function YearPicker({
     >
       <FlatList<number>
         ref={flatList}
-        style={sharedStyles.root}
+        style={[
+          sharedStyles.root,
+          Platform.OS === 'web'
+            ? ({ colorScheme: theme.dark ? 'dark' : 'light' } as ViewStyle)
+            : null,
+        ]}
         data={years}
         renderScrollComponent={(sProps) => {
           return <ScrollView {...sProps} />

package/src/Date/weekdayColumns.ts

@@ -0,0 +1,75 @@
+import { I18nManager, type DimensionValue, type ViewStyle } from 'react-native'
+import { showWeekDay, type DisableWeekDaysType } from './dateUtils'
+
+const compactTextButtonPadding = 8
+const iconButtonPadding = 8
+const iconButtonSize = 24 + 2 * iconButtonPadding
+const letterHalfWidth = 4
+
+export function alignIconToFirstWeekday(
+  disableWeekDays?: DisableWeekDaysType
+): ViewStyle {
+  return alignToFirstColumn(
+    disableWeekDays,
+    letterHalfWidth + iconButtonPadding
+  )
+}
+
+export function alignTextToFirstWeekday(
+  disableWeekDays?: DisableWeekDaysType
+): ViewStyle {
+  return alignToFirstColumn(disableWeekDays, letterHalfWidth)
+}
+
+export function alignTextToLastWeekday(
+  disableWeekDays?: DisableWeekDaysType
+): ViewStyle {
+  return alignToLastColumn(
+    disableWeekDays,
+    letterHalfWidth + compactTextButtonPadding
+  )
+}
+
+function alignToFirstColumn(
+  disableWeekDays: DisableWeekDaysType | undefined,
+  nudge: number
+): ViewStyle {
+  return {
+    marginStart: columnCentreInset(disableWeekDays),
+    transform: [{ translateX: I18nManager.isRTL ? nudge : -nudge }],
+  }
+}
+
+function alignToLastColumn(
+  disableWeekDays: DisableWeekDaysType | undefined,
+  nudge: number
+): ViewStyle {
+  return {
+    marginEnd: columnCentreInset(disableWeekDays),
+    transform: [{ translateX: I18nManager.isRTL ? -nudge : nudge }],
+  }
+}
+
+export function centerIconOnLastWeekday(
+  disableWeekDays?: DisableWeekDaysType
+): ViewStyle {
+  return alignToLastColumn(disableWeekDays, iconButtonSize / 2)
+}
+
+function columnCentreInset(
+  disableWeekDays: DisableWeekDaysType | undefined
+): DimensionValue {
+  const visibleColumns = [0, 1, 2, 3, 4, 5, 6].filter((dayIndex) =>
+    showWeekDay(dayIndex, disableWeekDays)
+  ).length
+  return `${50 / (visibleColumns || 7)}%`
+}
+
+export function weekdaySpan(disableWeekDays?: DisableWeekDaysType): ViewStyle {
+  const inset = columnCentreInset(disableWeekDays)
+  return { marginStart: inset, marginEnd: inset }
+}
+
+export const weekdaySpanOvershoot: ViewStyle = {
+  marginHorizontal: -letterHalfWidth,
+}

package/src/shared/styles.tsx

@@ -4,6 +4,9 @@ export const sharedStyles = StyleSheet.create({
   flexDirectionRow: {
     flexDirection: 'row',
   },
+  minHeightZero: {
+    minHeight: 0,
+  },
   opacity0: {
     opacity: 0,
   },

package/src/shared/utils.ts

@@ -1,4 +1,5 @@
 import { useRef } from 'react'
+import { useWindowDimensions } from 'react-native'
 import { DefaultTheme, MD3DarkTheme, useTheme } from 'react-native-paper'
 import Color from 'color'
 
@@ -24,6 +25,11 @@ export function useLatest<T>(value: T) {
   return ref
 }
 
+export function useIsLargeScreen() {
+  const { width, height } = useWindowDimensions()
+  return width > 650 && height > 650
+}
+
 export function useHeaderBackgroundColor() {
   const theme = useTheme()
   return theme.colors.elevation.level3