react-native-paper-dates 0.23.16 → 0.24.1

package/src/Date/Day.tsx

@@ -1,9 +1,11 @@
 import { Text, TouchableRipple } from 'react-native-paper'
 import { StyleSheet, View } from 'react-native'
+import type { StyleProp, ViewStyle } from 'react-native'
 import DayRange from './DayRange'
 import { daySize } from './dateUtils'
 
 import type { PaperTheme } from '../shared/utils'
+import type { DayContentPosition, DayContentRenderer } from './Calendar'
 import { memo, useCallback } from 'react'
 
 function EmptyDayPure() {
@@ -27,6 +29,9 @@ function Day(props: {
   isToday: boolean
   disabled: boolean
   onPressDate: (date: Date) => any
+  dayContent?: DayContentRenderer
+  dayContentPosition?: DayContentPosition
+  dayContentStyle?: StyleProp<ViewStyle>
 }) {
   const {
     day,
@@ -42,6 +47,9 @@ function Day(props: {
     isToday,
     disabled,
     theme,
+    dayContent,
+    dayContentPosition,
+    dayContentStyle,
   } = props
   const borderColor = theme.colors.primary
 
@@ -111,6 +119,26 @@ function Day(props: {
           </Text>
         </View>
       </TouchableRipple>
+      {dayContent ? (
+        <View
+          style={[
+            styles.content,
+            contentPositions[dayContentPosition || 'bottom'],
+            dayContentStyle,
+          ]}
+          pointerEvents="none"
+        >
+          {dayContent({
+            date: new Date(year, month, day),
+            day,
+            month,
+            year,
+            selected,
+            isToday,
+            disabled,
+          })}
+        </View>
+      ) : null}
     </View>
   )
 }
@@ -122,6 +150,14 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
     borderRadius: daySize / 2,
   },
+  content: {
+    // Absolutely positioned without insets, so Yoga still honours the parent's
+    // centering and this box lines up with the day circle instead of the
+    // (wider) grid cell.
+    position: 'absolute',
+    width: daySize,
+    height: daySize,
+  },
   day: {
     flexBasis: 0,
     flex: 1,
@@ -149,4 +185,19 @@ const styles = StyleSheet.create({
   },
 })
 
+// Anchors for `dayContent`, applied to a box the size of the day circle.
+const contentPositions = StyleSheet.create({
+  'bottom': {
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    paddingBottom: 2,
+  },
+  'bottom-left': { justifyContent: 'flex-end', alignItems: 'flex-start' },
+  'bottom-right': { justifyContent: 'flex-end', alignItems: 'flex-end' },
+  'center': { justifyContent: 'center', alignItems: 'center' },
+  'top': { justifyContent: 'flex-start', alignItems: 'center', paddingTop: 2 },
+  'top-left': { justifyContent: 'flex-start', alignItems: 'flex-start' },
+  'top-right': { justifyContent: 'flex-start', alignItems: 'flex-end' },
+})
+
 export default memo(Day)

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,10 +19,14 @@ import {
   showWeekDay,
   useRangeChecker,
 } from './dateUtils'
+import { alignTextToFirstWeekday } from './weekdayColumns'
 import { getCalendarHeaderHeight } from './CalendarHeader'
+import type { StyleProp, ViewStyle } from 'react-native'
 import type {
   CalendarDate,
   CalendarDates,
+  DayContentPosition,
+  DayContentRenderer,
   ModeType,
   ValidRangeType,
 } from './Calendar'
@@ -52,6 +56,9 @@ interface BaseMonthProps {
   endDate?: CalendarDate
   date?: CalendarDate
   dates?: CalendarDates
+  dayContent?: DayContentRenderer
+  dayContentPosition?: DayContentPosition
+  dayContentStyle?: StyleProp<ViewStyle>
 }
 
 interface MonthRangeProps extends BaseMonthProps {
@@ -91,6 +98,9 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
     startWeekOnMonday,
     startYear,
     endYear,
+    dayContent,
+    dayContentPosition,
+    dayContentStyle,
   } = props
   const isHorizontal = scrollMode === 'horizontal'
 
@@ -263,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={[
@@ -296,6 +343,7 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
             {
               borderRadius: roundness,
             },
+            alignTextToFirstWeekday(disableWeekDays),
           ]}
         >
           <View
@@ -330,35 +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}
-                />
-              )
-            )}
-        </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>
   )
 }
@@ -375,6 +414,10 @@ const styles = StyleSheet.create({
   iconWrapper: {
     padding: 8,
   },
+  monthFill: {
+    flex: 1,
+    minHeight: 0,
+  },
   monthHeader: {
     height: montHeaderHeight,
     justifyContent: 'center',
@@ -391,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} />

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