rn-grid-date-time-picker 1.0.0 → 1.2.0

package/src/components/calendar/Calendar.tsx

@@ -1,13 +1,18 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { AccessibilityInfo, Pressable, Text, View } from 'react-native';
 import { addDays, compareCalendarDates } from '../../core/calendarDate';
 import {
   buildSystemGrid,
   daysOfMonth,
+  hijriDateText,
   hijriMonthNames,
   monthSystemFor,
-  toHijri,
-  type CalendarSystem,
   type MonthSystem,
   type SystemMonth,
 } from '../../core/calendarSystem';
@@ -21,9 +26,13 @@ import { buildCalendarStyles } from './calendarStyles';
 import { CalendarHeader, MonthChips } from './CalendarHeader';
 import type { DayCellState } from './DayCell';
 import DayGrid from './DayGrid';
-import { localeNames } from './localeNames';
+import { fullDateLabel, localeNames } from './localeNames';
 import PeriodGrid, { type PeriodItem } from './PeriodGrid';
-import { firstSelectedDay, type CalendarSelection } from './selection';
+import {
+  firstSelectedDay,
+  selectedDays,
+  type CalendarSelection,
+} from './selection';
 
 export type CalendarView = 'day' | 'month' | 'year';
 
@@ -39,8 +48,8 @@ export interface CalendarProps {
   showHolidays: boolean;
   yearRange: { first: number; last: number };
   locale: string;
-  /** Already resolved (see resolveCalendarSystem). Default 'gregory'. */
-  calendarSystem?: CalendarSystem;
+  /** The grid on screen (a dual calendar shows one of the two). Default 'gregory'. */
+  calendarSystem?: 'gregory' | 'hijri';
   initialView?: CalendarView;
   /** 'month' / 'year': that grid is the last step and a tap picks the period's first day. */
   precision?: 'day' | 'month' | 'year';
@@ -48,7 +57,12 @@ export interface CalendarProps {
   showToday?: boolean;
   /** Gregorian year and month of the first day shown (also in the Hijri grid). */
   onVisibleMonthChange?: (year: number, month: number) => void;
-  /** Second line under each day (default: the Hijri day in 'dual'; none in 'hijri', which shows only the Hijri day). */
+  /**
+   * A day in the month now shown (today when it's there, else the middle), so
+   * the other calendar system can open on the same days.
+   */
+  onAnchorChange?: (day: CalendarDate) => void;
+  /** A second line under each day. None by default. */
   subLabel?: (day: CalendarDate) => string | null;
   renderDay?: (state: DayCellState, onPress: () => void) => React.ReactNode;
   renderWeekday?: (weekday: Weekday, name: string) => React.ReactNode;
@@ -162,6 +176,7 @@ const Calendar: React.FC<CalendarProps> = (props) => {
     enableMonthSwipe = true,
     showToday,
     onVisibleMonthChange,
+    onAnchorChange,
     subLabel,
     renderDay,
     renderWeekday,
@@ -213,10 +228,29 @@ const Calendar: React.FC<CalendarProps> = (props) => {
       );
       const start = sys.monthStart(clamped);
       onVisibleMonthChange?.(start.year, start.month);
+      onAnchorChange?.(
+        cmpMonth(sys.monthOf(today), clamped) === 0
+          ? today
+          : addDays(start, Math.min(14, sys.monthLength(clamped) - 1))
+      );
     },
-    [limits, sys, names, onVisibleMonthChange]
+    [limits, sys, names, today, onVisibleMonthChange, onAnchorChange]
   );
 
+  // A day newly picked outside the month on screen (typed in the field, say)
+  // brings the calendar to its month; picks in the month shown leave it be.
+  const dayKey = (d: CalendarDate) => `${d.year}-${d.month}-${d.day}`;
+  const shownPicks = useRef(new Set(selectedDays(selection).map(dayKey)));
+  useEffect(() => {
+    const days = selectedDays(selection);
+    const fresh = days.filter((d) => !shownPicks.current.has(dayKey(d)));
+    shownPicks.current = new Set(days.map(dayKey));
+    const last = fresh[fresh.length - 1];
+    if (last && cmpMonth(sys.monthOf(last), visible) !== 0)
+      goTo(sys.monthOf(last));
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- when the selection changes
+  }, [selection]);
+
   // A tap on a day of the previous / next month (the muted outside days) selects it
   // and moves the calendar to that month.
   const selectDay = useCallback(
@@ -228,12 +262,15 @@ const Calendar: React.FC<CalendarProps> = (props) => {
     [sys, visible, goTo, onSelectDay]
   );
 
-  const subLabelFor = useMemo(() => {
-    if (subLabel) return subLabel;
-    if (calendarSystem === 'dual')
-      return (d: CalendarDate) => String(toHijri(d)?.day ?? '');
-    return undefined;
-  }, [subLabel, calendarSystem]);
+  // Screen readers hear a Hijri grid's days as Hijri dates.
+  const dateLabel = useMemo(
+    () =>
+      sys.kind === 'hijri'
+        ? (day: CalendarDate) =>
+            hijriDateText(day, locale) ?? fullDateLabel(locale, day)
+        : undefined,
+    [sys, locale]
+  );
 
   const { min, max } = constraints.range;
   const prevMonth = sys.addMonths(visible, -1);
@@ -445,6 +482,7 @@ const Calendar: React.FC<CalendarProps> = (props) => {
           selection={selection}
           constraints={constraints}
           locale={locale}
+          dateLabel={dateLabel}
           onSelectDay={selectDay}
           onSwipe={
             enableMonthSwipe
@@ -454,7 +492,7 @@ const Calendar: React.FC<CalendarProps> = (props) => {
                 }
               : undefined
           }
-          subLabel={subLabelFor}
+          subLabel={subLabel}
           renderDay={renderDay}
           renderWeekday={renderWeekday}
           tokens={tokens}

package/src/components/calendar/CalendarHeader.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useRef } from 'react';
 import {
-  I18nManager,
   Pressable,
   ScrollView,
   Text,
@@ -18,6 +17,8 @@ import {
 import type { PickerStrings } from '../theme/defaultStrings';
 import type { PickerStyles } from '../theme/styleKeys';
 import { MAX_FONT_SCALE } from '../theme/a11y';
+import { useIsRTL } from '../theme/direction';
+import { useNumerals } from '../theme/numerals';
 import type { ThemeTokens } from '../theme/tokens';
 import { useReduceMotion } from '../hooks/useReduceMotion';
 import { buildCalendarStyles } from './calendarStyles';
@@ -58,6 +59,8 @@ export const CalendarHeader: React.FC<HeaderProps> = ({
   styles,
   testID,
 }) => {
+  const digits = useNumerals();
+  const isRTL = useIsRTL();
   const s = buildCalendarStyles(tokens);
   const ico = resolveIcons(icons);
   const arrow = (
@@ -67,7 +70,7 @@ export const CalendarHeader: React.FC<HeaderProps> = ({
     label: string
   ) => {
     // Chevrons point in the reading direction; mirrored in right-to-left layouts.
-    const pointsLeft = (dir === 'prev') !== I18nManager.isRTL;
+    const pointsLeft = (dir === 'prev') !== isRTL;
     const chevron = pointsLeft ? 'chevronLeft' : 'chevronRight';
     return (
       <Pressable
@@ -113,7 +116,7 @@ export const CalendarHeader: React.FC<HeaderProps> = ({
           maxFontSizeMultiplier={MAX_FONT_SCALE}
           style={[s.yearButtonText, styles?.yearButtonText]}
         >
-          {title}
+          {digits(title)}
         </Text>
         <View style={s.caret}>
           {renderIcon(
@@ -164,15 +167,26 @@ export const MonthChips: React.FC<ChipsProps> = ({
   // the selected one is scrolled to the middle of the row.
   const chips = useRef<Record<number, { x: number; width: number }>>({});
   const viewport = useRef(0);
-  const scrollToSelected = (animated: boolean) => {
+  const content = useRef(0);
+  // Until the row is dragged or the month changes, the selected chip is held
+  // in view: Android moves a right-to-left row to its end after the first
+  // layout, which undoes the first scroll.
+  const holding = useRef(true);
+  const first = useRef(true);
+  const selectedOffset = (): number | null => {
     const chip = chips.current[selectedMonth];
-    if (!chip || !viewport.current) return;
-    ref.current?.scrollTo({
-      x: Math.max(0, chip.x - (viewport.current - chip.width) / 2),
-      animated,
-    });
+    if (!chip || !viewport.current) return null;
+    const centred = chip.x - (viewport.current - chip.width) / 2;
+    const end = Math.max(0, content.current - viewport.current);
+    return Math.max(0, content.current ? Math.min(centred, end) : centred);
+  };
+  const scrollToSelected = (animated: boolean) => {
+    const x = selectedOffset();
+    if (x !== null) ref.current?.scrollTo({ x, animated });
   };
   useEffect(() => {
+    if (first.current) first.current = false;
+    else holding.current = false;
     scrollToSelected(!reduceMotion);
     // eslint-disable-next-line react-hooks/exhaustive-deps -- scrolls only when the month changes
   }, [selectedMonth]);
@@ -194,6 +208,20 @@ export const MonthChips: React.FC<ChipsProps> = ({
         viewport.current = e.nativeEvent.layout.width;
         scrollToSelected(false);
       }}
+      onContentSizeChange={(width) => {
+        content.current = width;
+        if (holding.current) scrollToSelected(false);
+      }}
+      scrollEventThrottle={16}
+      onScroll={(e) => {
+        if (!holding.current) return;
+        const x = selectedOffset();
+        if (x !== null && Math.abs(e.nativeEvent.contentOffset.x - x) > 1)
+          ref.current?.scrollTo({ x, animated: false });
+      }}
+      onScrollBeginDrag={() => {
+        holding.current = false;
+      }}
     >
       {names.map((name, i) => {
         const month = i + 1;
@@ -203,6 +231,10 @@ export const MonthChips: React.FC<ChipsProps> = ({
           return (
             <Pressable
               key={month}
+              testID={testID ? `${testID}-chip-${month}` : undefined}
+              accessibilityRole="button"
+              accessibilityLabel={fullNames[i]}
+              accessibilityState={{ selected, disabled }}
               disabled={disabled}
               onPress={() => onSelect(month)}
               onLayout={onChipLayout(month)}

package/src/components/calendar/CalendarSwitch.tsx

@@ -0,0 +1,170 @@
+import React from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { MAX_FONT_SCALE } from '../theme/a11y';
+import type { PickerStyles } from '../theme/styleKeys';
+import { fontStyle, type ThemeTokens } from '../theme/tokens';
+
+export interface SegmentOption<T extends string> {
+  value: T;
+  label: string;
+}
+
+interface Props<T extends string> {
+  /** 'switch': segments in a track (the calendar switch). 'tabs': underlined tabs (a dual calendar's). */
+  variant: 'switch' | 'tabs';
+  options: SegmentOption<T>[];
+  selected: T;
+  onSelect: (value: T) => void;
+  accessibilityLabel: string;
+  tokens: ThemeTokens;
+  styles?: PickerStyles;
+  testID?: string;
+}
+
+const KEYS = {
+  switch: {
+    box: 'calendarSwitch',
+    item: 'calendarSwitchSegment',
+    itemSelected: 'calendarSwitchSegmentSelected',
+    text: 'calendarSwitchText',
+    textSelected: 'calendarSwitchTextSelected',
+  },
+  tabs: {
+    box: 'dualTabs',
+    item: 'dualTab',
+    itemSelected: 'dualTabSelected',
+    text: 'dualTabText',
+    textSelected: 'dualTabTextSelected',
+  },
+} as const;
+
+const cache = new WeakMap<ThemeTokens, ReturnType<typeof create>>();
+
+const create = (t: ThemeTokens) =>
+  StyleSheet.create({
+    switch: {
+      flexDirection: 'row',
+      padding: 4,
+      gap: 4,
+      marginTop: 12,
+      borderRadius: t.radius,
+      backgroundColor: t.toggleTrack,
+    },
+    switchItem: {
+      flex: 1,
+      minHeight: t.touchTarget - 8,
+      paddingHorizontal: 8,
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: Math.max(0, t.radius - 2),
+    },
+    switchItemSelected: { backgroundColor: t.accent },
+    switchText: {
+      ...fontStyle(t, 'medium'),
+      fontSize: t.fontSizeMedium,
+      color: t.text,
+    },
+    switchTextSelected: { color: t.onAccent },
+    tabs: {
+      flexDirection: 'row',
+      marginTop: 8,
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderBottomColor: t.separator,
+    },
+    tabsItem: {
+      flex: 1,
+      minHeight: t.touchTarget,
+      paddingHorizontal: 8,
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderBottomWidth: 2,
+      borderBottomColor: 'transparent',
+    },
+    tabsItemSelected: { borderBottomColor: t.accent },
+    tabsText: {
+      ...fontStyle(t, 'medium'),
+      fontSize: t.fontSizeMedium,
+      color: t.mutedText,
+    },
+    tabsTextSelected: { ...fontStyle(t, 'semiBold'), color: t.accent },
+  });
+
+const stylesFor = (t: ThemeTokens) => {
+  let s = cache.get(t);
+  if (!s) {
+    s = create(t);
+    cache.set(t, s);
+  }
+  return s;
+};
+
+/**
+ * One row of choices, one of them selected: the Gregorian / Hijri / Dual
+ * switch above the calendar, and the Gregorian / Hijri tabs of a dual calendar.
+ * Each part takes its own key from the `styles` prop.
+ */
+const CalendarSwitch = <T extends string>({
+  variant,
+  options,
+  selected,
+  onSelect,
+  accessibilityLabel,
+  tokens,
+  styles,
+  testID,
+}: Props<T>): React.ReactElement => {
+  const s = stylesFor(tokens);
+  const keys = KEYS[variant];
+  const own = {
+    box: variant === 'switch' ? s.switch : s.tabs,
+    item: variant === 'switch' ? s.switchItem : s.tabsItem,
+    itemSelected:
+      variant === 'switch' ? s.switchItemSelected : s.tabsItemSelected,
+    text: variant === 'switch' ? s.switchText : s.tabsText,
+    textSelected:
+      variant === 'switch' ? s.switchTextSelected : s.tabsTextSelected,
+  };
+  const tabs = variant === 'tabs';
+  return (
+    <View
+      style={[own.box, styles?.[keys.box]]}
+      accessibilityRole={tabs ? 'tablist' : 'radiogroup'}
+      accessibilityLabel={accessibilityLabel}
+      testID={testID}
+    >
+      {options.map((option) => {
+        const on = option.value === selected;
+        return (
+          <Pressable
+            key={option.value}
+            testID={testID ? `${testID}-${option.value}` : undefined}
+            accessibilityRole={tabs ? 'tab' : 'radio'}
+            accessibilityState={tabs ? { selected: on } : { checked: on }}
+            onPress={() => {
+              if (!on) onSelect(option.value);
+            }}
+            style={[
+              own.item,
+              styles?.[keys.item],
+              on && [own.itemSelected, styles?.[keys.itemSelected]],
+            ]}
+          >
+            <Text
+              numberOfLines={1}
+              maxFontSizeMultiplier={MAX_FONT_SCALE}
+              style={[
+                own.text,
+                styles?.[keys.text],
+                on && [own.textSelected, styles?.[keys.textSelected]],
+              ]}
+            >
+              {option.label}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+};
+
+export default CalendarSwitch;

package/src/components/calendar/DayCell.tsx

@@ -1,8 +1,10 @@
 import React, { memo } from 'react';
 import { Pressable, Text, View } from 'react-native';
+import { isSameDay } from '../../core/calendarDate';
 import type { CalendarDate } from '../../core/types';
 import type { PickerStyles } from '../theme/styleKeys';
 import { DAY_HIT_SLOP, MAX_FONT_SCALE } from '../theme/a11y';
+import { useNumerals } from '../theme/numerals';
 import type { ThemeTokens } from '../theme/tokens';
 import { buildCalendarStyles } from './calendarStyles';
 
@@ -19,7 +21,7 @@ export interface DayCellState {
   rangeRole: RangeRole;
   /** The number to show, when it isn't the Gregorian day (Hijri grid). */
   label?: number;
-  /** Second line under the day number (Hijri day in 'dual' mode). */
+  /** A second line under the day number. Null unless a `subLabel` is given. */
   subLabel?: string | null;
   a11yLabel: string;
 }
@@ -54,6 +56,7 @@ const DayCell: React.FC<Props> = ({
   styles,
   testID,
 }) => {
+  const digits = useNumerals();
   const s = buildCalendarStyles(tokens);
   const filled =
     isSelected &&
@@ -109,14 +112,14 @@ const DayCell: React.FC<Props> = ({
             filled && [s.selectedText, styles?.selectedText],
           ]}
         >
-          {label ?? date.day}
+          {digits(String(label ?? date.day))}
         </Text>
         {subLabel ? (
           <Text
             maxFontSizeMultiplier={MAX_FONT_SCALE}
             style={[s.subLabel, styles?.daySubLabel, filled && s.selectedText]}
           >
-            {subLabel}
+            {digits(subLabel)}
           </Text>
         ) : null}
       </Pressable>
@@ -124,4 +127,13 @@ const DayCell: React.FC<Props> = ({
   );
 };
 
-export default memo(DayCell);
+// A Hijri grid builds new day objects on each render, so days compare by value.
+export default memo(
+  DayCell,
+  (prev, next) =>
+    (Object.keys(next) as (keyof Props)[]).every((key) =>
+      key === 'date'
+        ? isSameDay(prev.date, next.date)
+        : Object.is(prev[key], next[key])
+    ) && Object.keys(prev).length === Object.keys(next).length
+);

package/src/components/calendar/DayGrid.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useRef } from 'react';
-import { I18nManager, PanResponder, Text, View } from 'react-native';
+import { PanResponder, Text, View } from 'react-native';
 import type { Constraints } from '../../core/constraints';
 import { isSameDay } from '../../core/calendarDate';
 import { buildMonthGrid, weekdayOrder } from '../../core/monthGrid';
@@ -7,6 +7,7 @@ import type { CalendarDate, Weekday } from '../../core/types';
 import type { PickerStrings } from '../theme/defaultStrings';
 import type { PickerStyles } from '../theme/styleKeys';
 import { MAX_FONT_SCALE } from '../theme/a11y';
+import { useIsRTL } from '../theme/direction';
 import type { ThemeTokens } from '../theme/tokens';
 import { buildCalendarStyles } from './calendarStyles';
 import DayCell, { type DayCellState } from './DayCell';
@@ -30,6 +31,8 @@ export interface DayGridProps {
   selection: CalendarSelection;
   constraints: Constraints;
   locale: string;
+  /** What a screen reader says for a day. Default: the Gregorian date in `locale`. */
+  dateLabel?: (day: CalendarDate) => string;
   onSelectDay: (day: CalendarDate) => void;
   /** Swipe left / right to change month. */
   onSwipe?: (step: 1 | -1) => void;
@@ -66,6 +69,7 @@ const DayGrid: React.FC<DayGridProps> = ({
   selection,
   constraints,
   locale,
+  dateLabel,
   onSelectDay,
   onSwipe,
   subLabel,
@@ -81,13 +85,22 @@ const DayGrid: React.FC<DayGridProps> = ({
 
   const onSwipeRef = useRef(onSwipe);
   onSwipeRef.current = onSwipe;
+  const isRTLRef = useRef(false);
+  isRTLRef.current = useIsRTL();
   const pan = useMemo(
     () =>
       PanResponder.create({
+        // A touch no day takes (a greyed day, a gap) is the grid's from the start,
+        // so a swipe that begins there still changes month. A day that can be
+        // picked is asked first and keeps its tap.
+        onStartShouldSetPanResponder: () => !!onSwipeRef.current,
         onMoveShouldSetPanResponder: (_, g) =>
           !!onSwipeRef.current && isSwipeStart(g.dx, g.dy),
+        // Android: let the sheet's ScrollView take a vertical drag that starts
+        // on the grid (PanResponder blocks native views by default).
+        onShouldBlockNativeResponder: () => false,
         onPanResponderRelease: (_, g) => {
-          const step = swipeStep(g.dx, I18nManager.isRTL);
+          const step = swipeStep(g.dx, isRTLRef.current);
           if (step !== 0) onSwipeRef.current?.(step);
         },
       }),
@@ -103,7 +116,9 @@ const DayGrid: React.FC<DayGridProps> = ({
       const isToday = isSameDay(cell.date, today);
       // Selected and unavailable are announced from the cell's state, so the
       // label only adds what the state can't say.
-      const parts = [fullDateLabel(locale, cell.date)];
+      const parts = [
+        dateLabel ? dateLabel(cell.date) : fullDateLabel(locale, cell.date),
+      ];
       if (isToday) parts.push(strings.a11yToday);
       if (role === 'start') parts.push(strings.a11yRangeStart);
       if (role === 'end') parts.push(strings.a11yRangeEnd);

package/src/components/calendar/PeriodGrid.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Pressable, Text, View } from 'react-native';
 import type { PickerStyles, StyleKey } from '../theme/styleKeys';
 import { MAX_FONT_SCALE } from '../theme/a11y';
+import { useNumerals } from '../theme/numerals';
 import type { ThemeTokens } from '../theme/tokens';
 import { buildCalendarStyles } from './calendarStyles';
 
@@ -64,6 +65,7 @@ const PeriodGrid: React.FC<Props> = ({
   styles,
   testID,
 }) => {
+  const digits = useNumerals();
   const s = buildCalendarStyles(tokens);
   const k = KEYS[kind];
   return (
@@ -101,7 +103,7 @@ const PeriodGrid: React.FC<Props> = ({
                   item.selected && s.gridSelectedText,
                 ]}
               >
-                {item.label}
+                {digits(item.label)}
               </Text>
             )}
           </Pressable>

package/src/components/calendar/calendarStyles.ts

@@ -99,11 +99,12 @@ const create = (t: ThemeTokens) =>
     today: { borderWidth: 1, borderColor: t.accent },
     selected: { backgroundColor: t.accent },
     selectedText: { color: t.onAccent, ...fontStyle(t, 'semiBold') },
-    outsideText: { color: t.placeholder },
+    outsideText: { color: t.outsideText ?? t.mutedText },
     disabledText: { color: t.disabledText },
     holidayText: { color: t.holiday },
     pressed: { backgroundColor: t.rangeFill },
-    grid: { flexDirection: 'row', flexWrap: 'wrap', paddingVertical: 8 },
+    // No top padding: the header's margin and the cell padding already space the first row.
+    grid: { flexDirection: 'row', flexWrap: 'wrap', paddingBottom: 8 },
     gridCell: { width: '33.33%', padding: 6 },
     gridButton: {
       minHeight: t.touchTarget,