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

package/src/components/field/SegmentedInput.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useEffect, useId, useMemo, useRef } from 'react';
 import {
   Pressable,
   StyleSheet,
@@ -20,6 +20,7 @@ import { MAX_FONT_SCALE } from '../theme/a11y';
 import { useNumerals } from '../theme/numerals';
 import type { ThemeTokens } from '../theme/tokens';
 import { buildFieldStyles } from './fieldStyles';
+import KeyboardAccessoryBar from './KeyboardAccessoryBar';
 
 interface Props {
   state: SegmentEditorState;
@@ -93,8 +94,8 @@ export const changeToActions = (
 
 /**
  * The typed field: one box per segment in locale order, plus an AM/PM switch for
- * 12-hour date-times. Number pad, with a "Done" bar on iOS (its number pad has no
- * return key).
+ * 12-hour date-times. Number pad, with an empty solid bar above it on iOS (so
+ * React Native adds no see-through Done bar).
  */
 const SegmentedInput: React.FC<Props> = ({
   state,
@@ -108,6 +109,7 @@ const SegmentedInput: React.FC<Props> = ({
   testID,
 }) => {
   const digits = useNumerals();
+  const barId = useId();
   // Each box's text as last rendered, and as it last reported. Fast input (a
   // hardware keyboard, autofill) sends the next character before React has
   // re-rendered, and the native box may ignore React's reset while it's
@@ -197,10 +199,9 @@ const SegmentedInput: React.FC<Props> = ({
           keyboardType="number-pad"
           editable={!disabled}
           contextMenuHidden
-          // iOS adds a Done button above the number pad for every box; it
-          // closes the keyboard (and blurs the box).
-          returnKeyType="done"
-          inputAccessoryViewButtonLabel={strings.done}
+          // iOS: this box's own solid bar (below), so React Native adds no
+          // see-through Done bar.
+          inputAccessoryViewID={`${barId}-${spec.key}`}
           onFocus={() => dispatch({ type: 'focus', key: spec.key })}
           onBlur={() => {
             if ((getState?.() ?? state).focused === spec.key)
@@ -228,6 +229,10 @@ const SegmentedInput: React.FC<Props> = ({
             isFocused && [s.segmentFocused, styles?.fieldSegmentFocused],
           ]}
         />
+        <KeyboardAccessoryBar
+          nativeID={`${barId}-${spec.key}`}
+          tokens={tokens}
+        />
       </React.Fragment>
     );
   };

package/src/components/theme/defaultStrings.ts

@@ -8,6 +8,7 @@ export interface PickerStrings {
   reset: string;
   clear: string;
   today: string;
+  /** No longer shown (the iOS number-pad bar is empty); kept so existing `strings` objects still type-check. */
   done: string;
   time: string;
   startTime: string;

package/src/components/theme/styleKeys.ts

@@ -110,6 +110,10 @@ export const STYLE_KEYS = [
   // time
   'timeRow',
   'timeLabel',
+  /** Holds the label and its date (`timeRowDate`) or a `renderTimeLabel` label. */
+  'timeLabelWrap',
+  /** The picked day under a time row's label (`timeRowDate`). */
+  'timeLabelDate',
   'timeBox',
   'timeBoxFocused',
   'timeBoxError',

package/src/components/time/TimeRow.tsx

@@ -57,6 +57,10 @@ export interface TimeRowProps {
   /** The day's limits (`Constraints.timeBounds`). */
   bounds?: TimeBounds | null;
   label: string;
+  /** The row's day, shown under the label (`timeRowDate`); null shows none. */
+  dateText?: string | null;
+  /** Replaces the label and its date (`renderTimeLabel`). */
+  renderLabel?: () => React.ReactNode;
   disabled?: boolean;
   tokens: ThemeTokens;
   styles?: PickerStyles;
@@ -77,6 +81,37 @@ const issueText = (
   return strings.errorTimeNotAllowed;
 };
 
+/** The row's label: plain, with the day under it, or the app's own. */
+const TimeLabel: React.FC<
+  Pick<
+    TimeRowProps,
+    'label' | 'dateText' | 'renderLabel' | 'tokens' | 'styles' | 'testID'
+  >
+> = ({ label, dateText, renderLabel, tokens, styles, testID }) => {
+  const s = buildTimeStyles(tokens);
+  if (!renderLabel && !dateText)
+    return <Text style={[s.label, styles?.timeLabel]}>{label}</Text>;
+  return (
+    <View style={[s.labelWrap, styles?.timeLabelWrap]}>
+      {renderLabel ? (
+        renderLabel()
+      ) : (
+        <>
+          <Text style={[s.label, s.labelInWrap, styles?.timeLabel]}>
+            {label}
+          </Text>
+          <Text
+            style={[s.labelDate, styles?.timeLabelDate]}
+            testID={testID ? `${testID}-date` : undefined}
+          >
+            {dateText}
+          </Text>
+        </>
+      )}
+    </View>
+  );
+};
+
 /**
  * Label, the time boxes and the error below them. The boxes are
  * normal inputs (free cursor, digits only, two at most) with three helpers:
@@ -97,6 +132,8 @@ const TimeRow: React.FC<TimeRowProps> = ({
   minuteStep = 1,
   bounds,
   label,
+  dateText,
+  renderLabel,
   disabled,
   tokens,
   styles,
@@ -205,8 +242,11 @@ const TimeRow: React.FC<TimeRowProps> = ({
   let issue: TimeEntryIssue | null = effective.issue;
   if (effective.isEmpty) issue = time ? 'INCOMPLETE' : null;
   if (effective.time) issue = checkTime(effective.time, { minuteStep, bounds });
+  // A time set elsewhere reaches the boxes one render later (the effect
+  // above); until then the boxes are stale, so check that time instead.
+  const boxesStale = !focused && timeKey(time) !== lastKey.current;
   // The wheel always holds a complete time: only the limits and the step apply.
-  if (input === 'wheel')
+  if (input === 'wheel' || boxesStale)
     issue = time ? checkTime(time, { minuteStep, bounds }) : null;
 
   const pending =
@@ -268,7 +308,14 @@ const TimeRow: React.FC<TimeRowProps> = ({
   return (
     <View style={s.wrapper} testID={testID}>
       <View style={[s.row, styles?.timeRow]}>
-        <Text style={[s.label, styles?.timeLabel]}>{label}</Text>
+        <TimeLabel
+          label={label}
+          dateText={dateText}
+          renderLabel={renderLabel}
+          tokens={tokens}
+          styles={styles}
+          testID={testID}
+        />
         {input === 'wheel' ? (
           <TimeWheel
             time={time}

package/src/components/time/TimeRows.tsx

@@ -5,10 +5,11 @@ import type { Draft, DraftTarget } from '../../core/draft';
 import type { TimeEntryIssue } from '../../core/timeEntry';
 import type { CalendarDate, Time, TimeFormat } from '../../core/types';
 import type { RangeEnd } from '../field/RangeFields';
-import { formatDateText } from '../field/fieldText';
+import { formatDateText, type DateTextFormatter } from '../field/fieldText';
 import type { PickerStrings } from '../theme/defaultStrings';
 import type { PickerStyles } from '../theme/styleKeys';
 import type { ThemeTokens } from '../theme/tokens';
+import type { TimeLabelRenderProps } from '../types';
 import TimeRow from './TimeRow';
 
 /** Times typed before their day is picked, per end ('shared' lives in the draft). */
@@ -37,6 +38,11 @@ interface Props {
   onSpinChange: (spinning: boolean) => void;
   /** A row's box gained or lost focus. */
   onFocusChange?: (rowKey: string, focused: boolean) => void;
+  /** Shows each row's day under its label. */
+  timeRowDate?: boolean;
+  renderTimeLabel?: (p: TimeLabelRenderProps) => React.ReactNode;
+  /** A day as the field writes it (the Hijri text for a Hijri pick); default `dateFormat`. */
+  dateText?: DateTextFormatter;
   /** A row's time that is typed but not saved yet (null once saved or gone). */
   onPendingChange?: (
     rowKey: string,
@@ -51,6 +57,7 @@ interface Props {
 
 interface RowSpec {
   key: string;
+  kind: TimeLabelRenderProps['row'];
   label: string;
   time: Time | null;
   day: CalendarDate | null;
@@ -85,6 +92,9 @@ const TimeRows: React.FC<Props> = (props) => {
     onSpinChange,
     onFocusChange,
     onPendingChange,
+    timeRowDate = false,
+    renderTimeLabel,
+    dateText,
     tokens,
     styles,
     strings,
@@ -98,6 +108,7 @@ const TimeRows: React.FC<Props> = (props) => {
   ): RowSpec => {
     return {
       key,
+      kind: key,
       label,
       time: value?.time ?? pending[key] ?? null,
       day: value?.date ?? null,
@@ -123,6 +134,7 @@ const TimeRows: React.FC<Props> = (props) => {
     rows = [
       {
         key: 'shared',
+        kind: 'shared',
         label: strings.time,
         time: draft.sharedTime,
         day: null,
@@ -142,7 +154,11 @@ const TimeRows: React.FC<Props> = (props) => {
       rows = [
         {
           key: `day-${slot.date.year}-${slot.date.month}-${slot.date.day}`,
-          label: `${strings.time} · ${formatDateText(slot, dateFormat)}`,
+          kind: 'day',
+          // With timeRowDate the day goes under the label instead.
+          label: timeRowDate
+            ? strings.time
+            : `${strings.time} · ${formatDateText(slot, dateFormat)}`,
           time: slot.time,
           day: slot.date,
           target: { day: slot.date },
@@ -200,6 +216,24 @@ const TimeRows: React.FC<Props> = (props) => {
   // eslint-disable-next-line react-hooks/exhaustive-deps -- reports changes only; the callback may be a new function on every render
   useEffect(() => onSpinChange(anySpinning), [anySpinning]);
 
+  /** A row's day as the field writes it, or null before it is picked. */
+  const dayText = (row: RowSpec): string | null => {
+    if (!row.day) return null;
+    const value = { date: row.day, time: row.time };
+    return dateText ? dateText(value) : formatDateText(value, dateFormat);
+  };
+  const labelRenderer = (row: RowSpec) =>
+    renderTimeLabel
+      ? () =>
+          renderTimeLabel({
+            label: row.label,
+            row: row.kind,
+            date: row.day,
+            dateText: dayText(row),
+            time: row.time,
+          })
+      : undefined;
+
   const single = rows.length === 1;
   return (
     <>
@@ -218,6 +252,8 @@ const TimeRows: React.FC<Props> = (props) => {
           minuteStep={minuteStep}
           bounds={row.day ? constraints.timeBounds(row.day) : null}
           label={row.label}
+          dateText={timeRowDate ? dayText(row) : null}
+          renderLabel={labelRenderer(row)}
           disabled={disabled}
           tokens={tokens}
           styles={styles}

package/src/components/time/TypedTime.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useId } from 'react';
 import { Pressable, Text, TextInput, View } from 'react-native';
+import KeyboardAccessoryBar from '../field/KeyboardAccessoryBar';
 import type { TextInputRef } from '../nativeTypes';
 import type { TimeBounds } from '../../core/constraints';
 import type { Period } from '../../core/segments';
@@ -39,7 +40,7 @@ const PERIODS: Period[] = ['AM', 'PM'];
 
 /**
  * `[hh] : [mm] [AM | PM]`, or `[HH] : [mm]` in 24-hour. The boxes are plain
- * TextInputs; the row (TimeRow) owns their values. Number pad, with a Done bar
+ * TextInputs; the row (TimeRow) owns their values. Number pad, with a solid bar
  * on iOS. The AM/PM side that can't hold an allowed time is disabled.
  */
 const TypedTime: React.FC<Props> = ({
@@ -61,6 +62,7 @@ const TypedTime: React.FC<Props> = ({
   testID,
 }) => {
   const digits = useNumerals();
+  const barId = useId();
   const s = buildTimeStyles(tokens);
 
   const box = (key: TimeKey) => (
@@ -99,9 +101,8 @@ const TypedTime: React.FC<Props> = ({
             contextMenuHidden
             editable={!disabled}
             underlineColorAndroid="transparent"
-            // iOS adds a Done button above the number pad for each box.
-            returnKeyType="done"
-            inputAccessoryViewButtonLabel={strings.done}
+            // iOS: this box's own solid bar (below).
+            inputAccessoryViewID={`${barId}-${key}`}
             onChangeText={(text) => onChangeBox(key, text)}
             onFocus={() => onFocusBox(key)}
             onBlur={() => onBlurBox(key)}
@@ -110,6 +111,7 @@ const TypedTime: React.FC<Props> = ({
             }}
             style={[s.boxText, styles?.timeBoxText, s.boxInput]}
           />
+          <KeyboardAccessoryBar nativeID={`${barId}-${key}`} tokens={tokens} />
         </View>
       </View>
     </View>

package/src/components/time/timeStyles.ts

@@ -23,6 +23,15 @@ const create = (t: ThemeTokens) =>
       fontSize: t.fontSizeLarge,
       color: t.heading,
     },
+    // The label with the day under it (timeRowDate), or a renderTimeLabel label.
+    labelWrap: { flexShrink: 1, marginEnd: 12 },
+    labelInWrap: { marginEnd: 0 },
+    labelDate: {
+      marginTop: 2,
+      ...fontStyle(t, 'regular'),
+      fontSize: t.fontSizeSmall,
+      color: t.mutedText,
+    },
     boxes: {
       flexDirection: 'row',
       alignItems: 'center',
@@ -62,9 +71,9 @@ const create = (t: ThemeTokens) =>
     },
     boxFocused: { borderColor: t.borderFocused },
     boxError: { borderColor: t.error },
+    // No height of its own, so `timeBox` sets the row's height.
     colonCell: {
       width: 24,
-      height: 46,
       alignItems: 'center',
       justifyContent: 'center',
     },

package/src/components/types.ts

@@ -165,6 +165,20 @@ export interface LabelRenderProps {
   fieldTestID?: string;
 }
 
+/** What `renderTimeLabel` receives, for one time row. */
+export interface TimeLabelRenderProps {
+  /** The row's label from `strings`: 'Time', 'Start time' or 'End time'. */
+  label: string;
+  /** A single value's row, a range end, the multiple-mode shared row, or a day's own row (`timeMode: 'perDate'`). */
+  row: 'single' | 'from' | 'to' | 'shared' | 'day';
+  /** The row's picked day; null before it is picked, and for the shared row. */
+  date: CalendarDate | null;
+  /** That day as the field writes it; null when there is no day. Set whether or not `timeRowDate` is on. */
+  dateText: string | null;
+  /** The row's time, or null. */
+  time: Time | null;
+}
+
 /** What `renderInstruction` receives. */
 export interface InstructionRenderProps {
   instruction: string;
@@ -368,6 +382,14 @@ export interface DateTimePickerProps {
   minuteStep?: number;
   /** A newly picked day always gets this time (over a time typed first and over the current time). */
   newDayTime?: Time;
+  /**
+   * Shows each time row's picked day under its label ('Start time',
+   * 10-03-2026), as the field writes it. Nothing shows until the day is
+   * picked. Style it with `timeLabelDate`. Default false.
+   */
+  timeRowDate?: boolean;
+  /** Replaces a time row's label (and its date). The boxes and errors stay built in. */
+  renderTimeLabel?: (p: TimeLabelRenderProps) => React.ReactNode;
 
   // limits → greyed days and errors
   showHolidays?: boolean;

package/src/core/zoned.ts

@@ -1,9 +1,16 @@
 import { DateTime } from 'luxon';
 import type { DateTimeValue } from './types';
 
-/** The Luxon DateTime for a date-time value in `zone` (seconds and ms zeroed). */
-export const toZonedDateTime = (value: DateTimeValue, zone: string): DateTime =>
-  DateTime.fromObject(
+/**
+ * The Luxon DateTime for a date-time value in `zone` (seconds and ms zeroed).
+ * A time that happens twice resolves to its first occurrence: Luxon alone picks
+ * by the zone's offset today, so the result would change with the season.
+ */
+export const toZonedDateTime = (
+  value: DateTimeValue,
+  zone: string
+): DateTime => {
+  const dt = DateTime.fromObject(
     {
       ...value.date,
       hour: value.time?.hour ?? 0,
@@ -13,6 +20,11 @@ export const toZonedDateTime = (value: DateTimeValue, zone: string): DateTime =>
     },
     { zone }
   );
+  if (!dt.isValid) return dt;
+  return dt
+    .getPossibleOffsets()
+    .reduce((first, d) => (d.toMillis() < first.toMillis() ? d : first), dt);
+};
 
 export type DstStatus = 'ok' | 'gap' | 'overlap';
 

package/src/index.tsx

@@ -70,6 +70,7 @@ export type {
   SheetRenderProps,
   SheetSize,
   Slot,
+  TimeLabelRenderProps,
 } from './components/types';
 export type { CalendarSystem, Periods } from './core/calendarSystem';
 export type { Numerals } from './core/numerals';