react-native-paper-dates 0.24.0 → 0.24.1

package/src/Date/DatePickerModalHeader.tsx

@@ -1,8 +1,13 @@
-import { Animated, StyleSheet } from 'react-native'
-import { Appbar, Button, useTheme } from 'react-native-paper'
+import { StyleSheet, View } from 'react-native'
+import { Button, IconButton, useTheme } from 'react-native-paper'
 import { useHeaderTextColor } from '../shared/utils'
 import { getTranslation } from '../translations/utils'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { sharedStyles } from '../shared/styles'
+import type { DisableWeekDaysType } from './dateUtils'
+import {
+  alignIconToFirstWeekday,
+  alignTextToLastWeekday,
+} from './weekdayColumns'
 
 export interface DatePickerModalHeaderProps {
   saveLabel?: string
@@ -12,68 +17,60 @@ export interface DatePickerModalHeaderProps {
   onSave: () => void
   locale: string | undefined
   closeIcon?: string
+  disableWeekDays?: DisableWeekDaysType
 }
 
 export default function DatePickerModalHeader(
   props: DatePickerModalHeaderProps
 ) {
-  const { locale, closeIcon = 'close' } = props
+  const { locale, closeIcon = 'close', disableWeekDays } = props
   const saveLabel = props.saveLabel || getTranslation(locale, 'save')
   const color = useHeaderTextColor()
-  const insets = useSafeAreaInsets()
-
   const theme = useTheme()
 
   return (
-    <>
-      <Animated.View
-        style={[
-          styles.animated,
-          {
-            paddingLeft: insets.left,
-            paddingRight: insets.right,
-          },
-        ]}
-      >
-        <Appbar style={styles.appbarHeader}>
-          <Appbar.Action
-            icon={closeIcon}
-            accessibilityLabel={getTranslation(locale, 'close')}
-            onPress={props.onDismiss}
-            color={color}
-            testID="react-native-paper-dates-close"
-          />
-          <Button
-            textColor={theme.colors.primary}
-            onPress={props.onSave}
-            disabled={props.saveLabelDisabled ?? false}
-            uppercase={props.uppercase ?? true}
-            contentStyle={styles.buttonStyle}
-            mode="text"
-            labelStyle={styles.buttonLabel}
-            testID="react-native-paper-dates-save"
-          >
-            {saveLabel}
-          </Button>
-        </Appbar>
-      </Animated.View>
-    </>
+    <View style={styles.headerBar}>
+      <IconButton
+        icon={closeIcon}
+        accessibilityLabel={getTranslation(locale, 'close')}
+        onPress={props.onDismiss}
+        iconColor={color}
+        testID="react-native-paper-dates-close"
+        style={[styles.closeButton, alignIconToFirstWeekday(disableWeekDays)]}
+      />
+      <View style={sharedStyles.root} />
+      <View style={alignTextToLastWeekday(disableWeekDays)}>
+        <Button
+          textColor={theme.colors.primary}
+          onPress={props.onSave}
+          disabled={props.saveLabelDisabled ?? false}
+          uppercase={props.uppercase ?? true}
+          compact
+          mode="text"
+          testID="react-native-paper-dates-save"
+          style={styles.saveButton}
+        >
+          {saveLabel}
+        </Button>
+      </View>
+    </View>
   )
 }
 
 const styles = StyleSheet.create({
-  animated: {
-    elevation: 4,
-  },
-  appbarHeader: {
-    elevation: 0,
-    backgroundColor: 'transparent',
-    justifyContent: 'space-between',
+  headerBar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+    paddingTop: 12,
   },
-  buttonStyle: {
-    paddingHorizontal: 8,
+  closeButton: {
+    marginTop: 0,
+    marginBottom: 0,
+    marginEnd: 0,
   },
-  buttonLabel: {
-    flexGrow: 1,
+  saveButton: {
+    marginVertical: 0,
+    marginEnd: 0,
   },
 })

package/src/Date/DatePickerModalHeaderBackground.tsx

@@ -1,26 +1,48 @@
-import { Animated } from 'react-native'
+import { Animated, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { Divider } from 'react-native-paper'
-import { useHeaderBackgroundColor } from '../shared/utils'
+import { useHeaderBackgroundColor, useIsLargeScreen } from '../shared/utils'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import type { DisableWeekDaysType } from './dateUtils'
+import { weekdaySpan, weekdaySpanOvershoot } from './weekdayColumns'
 
 export default function DatePickerModalHeaderBackground({
   children,
+  disableWeekDays,
 }: {
   children: any
+  disableWeekDays?: DisableWeekDaysType
 }) {
   const backgroundColor = useHeaderBackgroundColor()
   const insets = useSafeAreaInsets()
+  const { width, height } = useWindowDimensions()
+  const isLargeScreen = useIsLargeScreen()
+  const isPhoneLandscape = width > height && !isLargeScreen
 
   return (
     <Animated.View
-      style={{
-        backgroundColor,
-        paddingLeft: insets.left,
-        paddingRight: insets.right,
-      }}
+      style={[
+        styles.background,
+        {
+          backgroundColor,
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
+        },
+      ]}
     >
       {children}
-      <Divider />
+      {isPhoneLandscape ? (
+        <View style={weekdaySpan(disableWeekDays)}>
+          <Divider style={weekdaySpanOvershoot} />
+        </View>
+      ) : (
+        <Divider />
+      )}
     </Animated.View>
   )
 }
+
+const styles = StyleSheet.create({
+  background: {
+    width: '100%',
+  },
+})

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,
@@ -124,10 +125,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 +168,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 +202,12 @@ 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}
         showsHorizontalScrollIndicator={false}
         showsVerticalScrollIndicator={false}
         decelerationRate="fast"
@@ -208,48 +227,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
@@ -94,26 +93,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}
-            />
-          )}
+          {({ 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>
+            {({ 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

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} />