react-native-paper-dates 0.24.0 → 0.24.2

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

@@ -12,9 +12,9 @@ import DatePickerModalContent, {
   DatePickerModalContentRangeProps,
   DatePickerModalContentSingleProps,
 } from './DatePickerModalContent'
-import { memo } from 'react'
+import { memo, useCallback, useMemo, useState } from 'react'
 import { sharedStyles } from '../shared/styles'
-import { supportedOrientations } from '../shared/utils'
+import { supportedOrientations, useIsLargeScreen } from '../shared/utils'
 
 interface DatePickerModalProps {
   visible: boolean
@@ -57,20 +57,44 @@ export function DatePickerModal(
       default: 'slide',
     })
 
-  const theme = useTheme()
-  const dimensions = useWindowDimensions()
+  // The calendar unmounts when the modal closes. Keep its size from the last
+  // open, so the next open draws the month on the first frame instead of
+  // waiting for the calendar to measure itself. Only reused for the same window
+  // size, since rotating or resizing changes the layout.
+  const { width: windowWidth, height: windowHeight } = useWindowDimensions()
+  const windowKey = `${windowWidth}x${windowHeight}`
+  const [lastCalendarLayout, setLastCalendarLayout] = useState<{
+    windowKey: string
+    width: number
+    height: number
+  } | null>(null)
+  const onCalendarLayout = useCallback(
+    ({ width, height }: { width: number; height: number }) => {
+      setLastCalendarLayout((prev) =>
+        prev &&
+        prev.windowKey === windowKey &&
+        prev.width === width &&
+        prev.height === height
+          ? prev
+          : { windowKey, width, height }
+      )
+    },
+    [windowKey]
+  )
+  const rememberedCalendarLayout = useMemo(
+    () =>
+      lastCalendarLayout && lastCalendarLayout.windowKey === windowKey
+        ? { width: lastCalendarLayout.width, height: lastCalendarLayout.height }
+        : undefined,
+    [lastCalendarLayout, windowKey]
+  )
 
-  // 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 theme = useTheme()
+  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 +131,7 @@ export function DatePickerModal(
             style={[
               styles.modalContent,
               { backgroundColor: theme.colors.elevation.level3 },
-              dimensions.width > 650
+              isLargeScreen
                 ? useFormSheet
                   ? styles.modalContentFormSheet
                   : styles.modalContentBig
@@ -122,6 +146,8 @@ export function DatePickerModal(
               statusBarOnTopOfBackdrop={isSheet || statusBarOnTopOfBackdrop}
               withDateFormatInLabel={props.withDateFormatInLabel}
               placeholder={props.placeholder}
+              initialLayout={rest.initialLayout ?? rememberedCalendarLayout}
+              onCalendarLayout={onCalendarLayout}
             />
           </View>
         </View>
@@ -134,6 +160,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 { LayoutChangeEvent, Platform, View } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { sharedStyles } from '../shared/styles'
 
 export type LocalState = {
   startDate: CalendarDate
@@ -37,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
@@ -89,9 +98,12 @@ export function DatePickerModalContent(
     dayContent,
     dayContentPosition,
     dayContentStyle,
+    initialLayout,
+    onCalendarLayout,
   } = 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>({
@@ -141,9 +153,22 @@ 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>
+      <DatePickerModalHeaderBackground disableWeekDays={disableWeekDays}>
         <DatePickerModalStatusBar
           disableSafeTop={!!disableSafeTop}
           disableStatusBar={!!disableStatusBar}
@@ -157,6 +182,7 @@ export function DatePickerModalContent(
           saveLabelDisabled={props.saveLabelDisabled ?? false}
           uppercase={props.uppercase ?? defaultUppercase}
           closeIcon={props.closeIcon}
+          disableWeekDays={disableWeekDays}
         />
         <DatePickerModalContentHeader
           state={state}
@@ -174,47 +200,59 @@ 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}
-            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}
-          />
-        }
-      />
+      <View
+        style={[
+          sharedStyles.root,
+          sharedStyles.minHeightZero,
+          { paddingLeft: insets.left, paddingRight: insets.right },
+        ]}
+        onLayout={Platform.OS === 'web' ? undefined : onCalendarContainerLayout}
+      >
+        <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}
+              initialLayout={initialLayout}
+            />
+          }
+          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%',
+  },
+})