react-native-paper-dates 0.23.16 → 0.24.1

package/src/Date/CalendarEdit.tsx

@@ -9,6 +9,8 @@ import type { ModeType, ValidRangeType } from './Calendar'
 import type { LocalState } from './DatePickerModalContent'
 
 import DatePickerInputWithoutModal from './DatePickerInputWithoutModal'
+import type { DisableWeekDaysType } from './dateUtils'
+import { weekdaySpan, weekdaySpanOvershoot } from './weekdayColumns'
 import { memo, useCallback, useEffect, useRef } from 'react'
 import { useTheme } from 'react-native-paper'
 import { sharedStyles } from '../shared/styles'
@@ -26,6 +28,7 @@ function CalendarEdit({
   inputEnabled,
   withDateFormatInLabel,
   placeholder,
+  disableWeekDays,
 }: {
   mode: ModeType
   label?: string
@@ -39,6 +42,7 @@ function CalendarEdit({
   inputEnabled?: boolean
   withDateFormatInLabel?: boolean
   placeholder?: string
+  disableWeekDays?: DisableWeekDaysType
 }) {
   const theme = useTheme()
   const dateInput = useRef<TextInputNative | null>(null)
@@ -86,37 +90,17 @@ function CalendarEdit({
 
   return (
     <View style={styles.root}>
-      {mode === 'single' ? (
-        <DatePickerInputWithoutModal
-          inputMode="start"
-          ref={dateInput}
-          mode="outlined"
-          label={label}
-          value={state.date}
-          onChange={(date) => onChange({ ...state, date })}
-          onSubmitEditing={onSubmitInput}
-          validRange={validRange}
-          locale={locale}
-          withModal={false}
-          autoComplete={'off'}
-          inputEnabled={inputEnabled}
-          withDateFormatInLabel={withDateFormatInLabel}
-          placeholder={placeholder}
-          style={inputStyle}
-        />
-      ) : null}
-      {mode === 'range' ? (
-        <View style={sharedStyles.flexDirectionRow}>
-          <View style={sharedStyles.root}>
+      <View style={weekdaySpan(disableWeekDays)}>
+        <View style={weekdaySpanOvershoot}>
+          {mode === 'single' ? (
             <DatePickerInputWithoutModal
               inputMode="start"
-              ref={startInput}
+              ref={dateInput}
               mode="outlined"
-              label={startLabel}
-              value={state.startDate}
-              onChange={(startDate) => onChange({ ...state, startDate })}
-              returnKeyType={'next'}
-              onSubmitEditing={onSubmitStartInput}
+              label={label}
+              value={state.date}
+              onChange={(date) => onChange({ ...state, date })}
+              onSubmitEditing={onSubmitInput}
               validRange={validRange}
               locale={locale}
               withModal={false}
@@ -126,36 +110,61 @@ function CalendarEdit({
               placeholder={placeholder}
               style={inputStyle}
             />
-          </View>
-          <View style={styles.separator} />
-          <View style={sharedStyles.root}>
-            <DatePickerInputWithoutModal
-              inputMode="end"
-              ref={endInput}
-              mode="outlined"
-              label={endLabel}
-              value={state.endDate}
-              onChange={(endDate) => onChange({ ...state, endDate })}
-              onSubmitEditing={onSubmitEndInput}
-              validRange={validRange}
-              locale={locale}
-              withModal={false}
-              autoComplete="off"
-              inputEnabled={inputEnabled}
-              withDateFormatInLabel={withDateFormatInLabel}
-              placeholder={placeholder}
-              style={inputStyle}
-            />
-          </View>
+          ) : null}
+          {mode === 'range' ? (
+            <View style={sharedStyles.flexDirectionRow}>
+              <View style={sharedStyles.root}>
+                <DatePickerInputWithoutModal
+                  inputMode="start"
+                  ref={startInput}
+                  mode="outlined"
+                  label={startLabel}
+                  value={state.startDate}
+                  onChange={(startDate) => onChange({ ...state, startDate })}
+                  returnKeyType={'next'}
+                  onSubmitEditing={onSubmitStartInput}
+                  validRange={validRange}
+                  locale={locale}
+                  withModal={false}
+                  autoComplete={'off'}
+                  inputEnabled={inputEnabled}
+                  withDateFormatInLabel={withDateFormatInLabel}
+                  placeholder={placeholder}
+                  style={inputStyle}
+                />
+              </View>
+              <View style={styles.separator} />
+              <View style={sharedStyles.root}>
+                <DatePickerInputWithoutModal
+                  inputMode="end"
+                  ref={endInput}
+                  mode="outlined"
+                  label={endLabel}
+                  value={state.endDate}
+                  onChange={(endDate) => onChange({ ...state, endDate })}
+                  onSubmitEditing={onSubmitEndInput}
+                  validRange={validRange}
+                  locale={locale}
+                  withModal={false}
+                  autoComplete="off"
+                  inputEnabled={inputEnabled}
+                  withDateFormatInLabel={withDateFormatInLabel}
+                  placeholder={placeholder}
+                  style={inputStyle}
+                />
+              </View>
+            </View>
+          ) : null}
         </View>
-      ) : null}
+      </View>
     </View>
   )
 }
 
 const styles = StyleSheet.create({
   root: {
-    padding: 12,
+    paddingVertical: 12,
+    width: '100%',
   },
   separator: {
     width: 12,

package/src/Date/CalendarHeader.tsx

@@ -1,11 +1,19 @@
-import { StyleSheet, View } from 'react-native'
+import { Platform, StyleSheet, View } from 'react-native'
 import { IconButton, useTheme } from 'react-native-paper'
 import DayNames, { dayNamesHeight } from './DayNames'
 import type { DisableWeekDaysType } from './dateUtils'
+import { centerIconOnLastWeekday } from './weekdayColumns'
 import { getTranslation } from '../translations/utils'
 import { sharedStyles } from '../shared/styles'
 import { memo } from 'react'
 
+/** Space reserved so an overlay header does not paint over a vertical scrollbar. */
+export const verticalScrollbarGutter = Platform.select({
+  ios: 0,
+  web: 16,
+  default: 14,
+}) as number
+
 const buttonContainerHeight = 56
 const buttonContainerMarginTop = 4
 const buttonContainerMarginBottom = 8
@@ -29,6 +37,7 @@ function CalendarHeader({
   disableWeekDays,
   locale,
   startWeekOnMonday,
+  endInset = 0,
 }: {
   locale: undefined | string
   scrollMode: 'horizontal' | 'vertical'
@@ -36,30 +45,46 @@ function CalendarHeader({
   onNext: () => any
   disableWeekDays?: DisableWeekDaysType
   startWeekOnMonday: boolean
+  /** Shrink from the trailing edge so week names do not cover a vertical scrollbar. */
+  endInset?: number
 }) {
   const isHorizontal = scrollMode === 'horizontal'
-
   const theme = useTheme()
 
   return (
-    <View style={styles.datePickerHeader} pointerEvents={'box-none'}>
+    <View
+      style={
+        endInset
+          ? [styles.datePickerHeader, { right: endInset }]
+          : styles.datePickerHeader
+      }
+      pointerEvents={'box-none'}
+    >
       {isHorizontal ? (
         <View style={styles.buttonContainer} pointerEvents={'box-none'}>
           <View style={sharedStyles.root} pointerEvents={'box-none'} />
-          <View style={{ backgroundColor: theme.colors.elevation.level3 }}>
+          <View
+            style={[
+              styles.arrowGroup,
+              {
+                backgroundColor: theme.colors.elevation.level3,
+              },
+              centerIconOnLastWeekday(disableWeekDays),
+            ]}
+          >
             <IconButton
               icon="chevron-left"
               accessibilityLabel={getTranslation(locale, 'previous')}
               onPress={onPrev}
               testID="react-native-paper-dates-prev-month"
+              style={styles.arrowButton}
             />
-          </View>
-          <View style={{ backgroundColor: theme.colors.elevation.level3 }}>
             <IconButton
               icon="chevron-right"
               accessibilityLabel={getTranslation(locale, 'next')}
               onPress={onNext}
               testID="react-native-paper-dates-next-month"
+              style={styles.arrowButton}
             />
           </View>
         </View>
@@ -88,6 +113,13 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
   },
+  arrowGroup: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  arrowButton: {
+    margin: 0,
+  },
 })
 
 export default memo(CalendarHeader)

package/src/Date/DatePickerModal.tsx

@@ -3,7 +3,6 @@ import {
   Platform,
   StyleSheet,
   TouchableWithoutFeedback,
-  useWindowDimensions,
   View,
 } from 'react-native'
 import { useTheme } from 'react-native-paper'
@@ -14,7 +13,7 @@ import DatePickerModalContent, {
 } from './DatePickerModalContent'
 import { memo } from 'react'
 import { sharedStyles } from '../shared/styles'
-import { supportedOrientations } from '../shared/utils'
+import { supportedOrientations, useIsLargeScreen } from '../shared/utils'
 
 interface DatePickerModalProps {
   visible: boolean
@@ -58,19 +57,11 @@ export function DatePickerModal(
     })
 
   const theme = useTheme()
-  const dimensions = useWindowDimensions()
-
-  // Automatically use formSheet on iPad for better fit
-  // iPad detection: width > 650 AND height > 650 (works in both orientations)
-  // - iPad portrait: 744x1133, landscape: 1133x744 (both > 650)
-  // - iPhone landscape: 932x430 (height < 650, so excluded)
-  // pageSheet on iPad is ~540pt wide, but calendar is max 400pt, causing centering
-  // formSheet at ~540x620pt provides a better fit for the date picker
+  const isLargeScreen = useIsLargeScreen()
   const shouldUseSheet =
     Platform.OS === 'ios' &&
     (presentationStyle === 'pageSheet' || presentationStyle === 'formSheet')
-  const useFormSheet =
-    shouldUseSheet && dimensions.width > 650 && dimensions.height > 650
+  const useFormSheet = shouldUseSheet && isLargeScreen
   const isSheet = shouldUseSheet
 
   return (
@@ -107,7 +98,7 @@ export function DatePickerModal(
             style={[
               styles.modalContent,
               { backgroundColor: theme.colors.elevation.level3 },
-              dimensions.width > 650
+              isLargeScreen
                 ? useFormSheet
                   ? styles.modalContentFormSheet
                   : styles.modalContentBig
@@ -134,6 +125,7 @@ const styles = StyleSheet.create({
   modalContent: {
     flex: 1,
     width: '100%',
+    minHeight: 0,
   },
   modalContentBig: {
     maxWidth: 400,

package/src/Date/DatePickerModalContent.tsx

@@ -17,6 +17,9 @@ 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 { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { sharedStyles } from '../shared/styles'
 
 export type LocalState = {
   startDate: CalendarDate
@@ -86,9 +89,13 @@ export function DatePickerModalContent(
     endYear,
     statusBarOnTopOfBackdrop,
     startWeekOnMonday,
+    dayContent,
+    dayContentPosition,
+    dayContentStyle,
   } = props
   const anyProps = props as any
   const defaultUppercase = false
+  const insets = useSafeAreaInsets()
 
   // use local state to add only onConfirm state changes
   const [state, setState] = useState<LocalState>({
@@ -140,7 +147,7 @@ export function DatePickerModalContent(
 
   return (
     <>
-      <DatePickerModalHeaderBackground>
+      <DatePickerModalHeaderBackground disableWeekDays={disableWeekDays}>
         <DatePickerModalStatusBar
           disableSafeTop={!!disableSafeTop}
           disableStatusBar={!!disableStatusBar}
@@ -154,6 +161,7 @@ export function DatePickerModalContent(
           saveLabelDisabled={props.saveLabelDisabled ?? false}
           uppercase={props.uppercase ?? defaultUppercase}
           closeIcon={props.closeIcon}
+          disableWeekDays={disableWeekDays}
         />
         <DatePickerModalContentHeader
           state={state}
@@ -171,44 +179,57 @@ export function DatePickerModalContent(
           editIcon={props?.editIcon}
           calendarIcon={props.calendarIcon}
           allowEditing={props.allowEditing ?? true}
+          disableWeekDays={disableWeekDays}
         />
       </DatePickerModalHeaderBackground>
-      <AnimatedCrossView
-        collapsed={collapsed}
-        calendar={
-          <Calendar
-            locale={locale}
-            mode={mode}
-            startDate={state.startDate}
-            endDate={state.endDate}
-            date={state.date}
-            onChange={onInnerChange}
-            disableWeekDays={disableWeekDays}
-            dates={state.dates}
-            validRange={validRange}
-            dateMode={dateMode}
-            startYear={startYear}
-            endYear={endYear}
-            startWeekOnMonday={startWeekOnMonday}
-          />
-        }
-        calendarEdit={
-          <CalendarEdit
-            mode={mode}
-            state={state}
-            label={props.label}
-            startLabel={props.startLabel}
-            endLabel={props.endLabel}
-            collapsed={collapsed}
-            onChange={onInnerChange}
-            validRange={validRange}
-            locale={locale}
-            inputEnabled={props.inputEnabled}
-            withDateFormatInLabel={props.withDateFormatInLabel}
-            placeholder={props.placeholder}
-          />
-        }
-      />
+      <View
+        style={[
+          sharedStyles.root,
+          sharedStyles.minHeightZero,
+          { paddingLeft: insets.left, paddingRight: insets.right },
+        ]}
+      >
+        <AnimatedCrossView
+          collapsed={collapsed}
+          calendar={
+            <Calendar
+              locale={locale}
+              mode={mode}
+              startDate={state.startDate}
+              endDate={state.endDate}
+              date={state.date}
+              onChange={onInnerChange}
+              disableWeekDays={disableWeekDays}
+              dates={state.dates}
+              validRange={validRange}
+              dateMode={dateMode}
+              startYear={startYear}
+              endYear={endYear}
+              startWeekOnMonday={startWeekOnMonday}
+              dayContent={dayContent}
+              dayContentPosition={dayContentPosition}
+              dayContentStyle={dayContentStyle}
+            />
+          }
+          calendarEdit={
+            <CalendarEdit
+              mode={mode}
+              state={state}
+              label={props.label}
+              startLabel={props.startLabel}
+              endLabel={props.endLabel}
+              collapsed={collapsed}
+              onChange={onInnerChange}
+              validRange={validRange}
+              locale={locale}
+              inputEnabled={props.inputEnabled}
+              withDateFormatInLabel={props.withDateFormatInLabel}
+              placeholder={props.placeholder}
+              disableWeekDays={disableWeekDays}
+            />
+          }
+        />
+      </View>
     </>
   )
 }

package/src/Date/DatePickerModalContentHeader.tsx

@@ -7,6 +7,11 @@ import Color from 'color'
 import { getTranslation } from '../translations/utils'
 import { useMemo } from 'react'
 import { sharedStyles } from '../shared/styles'
+import type { DisableWeekDaysType } from './dateUtils'
+import {
+  alignTextToFirstWeekday,
+  centerIconOnLastWeekday,
+} from './weekdayColumns'
 
 export interface HeaderPickProps {
   moreLabel?: string
@@ -31,6 +36,7 @@ export interface HeaderContentProps extends HeaderPickProps {
   collapsed: boolean
   onToggle: () => any
   locale: string | undefined
+  disableWeekDays?: DisableWeekDaysType
 }
 
 function getLabel(
@@ -65,6 +71,7 @@ export default function DatePickerModalContentHeader(
     editIcon,
     calendarIcon,
     allowEditing,
+    disableWeekDays,
   } = props
   const theme = useTheme()
   const label = getLabel(props.locale, props.mode, props.label)
@@ -77,7 +84,7 @@ export default function DatePickerModalContentHeader(
 
   return (
     <View style={styles.header}>
-      <View>
+      <View style={alignTextToFirstWeekday(disableWeekDays)}>
         <Text
           maxFontSizeMultiplier={1.5}
           style={[styles.label, { color: supportingTextColor, ...textFont }]}
@@ -112,6 +119,7 @@ export default function DatePickerModalContentHeader(
           iconColor={theme.colors.onSurface}
           onPress={onToggle}
           testID="react-native-paper-dates-toggle-edit"
+          style={[styles.editButton, centerIconOnLastWeekday(disableWeekDays)]}
         />
       ) : null}
     </View>
@@ -234,12 +242,15 @@ export function HeaderContentRange({
 }
 
 const styles = StyleSheet.create({
+  editButton: {
+    marginTop: 0,
+    marginBottom: 0,
+    marginStart: 0,
+  },
   header: {
     height: 75,
     alignItems: 'center',
     flexDirection: 'row',
-    paddingLeft: 24,
-    paddingRight: 12,
   },
   headerContentContainer: {
     flexDirection: 'row',

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%',
+  },
+})