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

package/src/components/field/ValueField.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Pressable, Text, View } from 'react-native';
+import { Pressable, ScrollView, Text, View } from 'react-native';
 import type { SegmentEditorAction } from '../../core/segmentEditor';
 import type { ParsedSegments } from '../../core/segments';
 import type { DateTimeValue, PickerType, TimeFormat } from '../../core/types';
@@ -11,6 +11,7 @@ import {
   type IconSet,
 } from '../../icons';
 import { useTypedSegments } from '../hooks/useTypedSegments';
+import type { ScrollViewRef } from '../nativeTypes';
 import type { PickerStrings } from '../theme/defaultStrings';
 import type { PickerStyles } from '../theme/styleKeys';
 import { useNumerals } from '../theme/numerals';
@@ -18,6 +19,7 @@ import type { ThemeTokens } from '../theme/tokens';
 import type { InstructionRenderProps, LabelRenderProps } from '../types';
 import FieldMessages from './FieldMessages';
 import {
+  formatValueParts,
   formatValueText,
   placeholderText,
   segmentErrorText,
@@ -26,6 +28,16 @@ import {
 import { buildFieldStyles } from './fieldStyles';
 import SegmentedInput from './SegmentedInput';
 
+// Hebrew and Arabic letters; Arabic-Indic digits (٠–٩, ۰–۹) are left out, since
+// digits don't set the reading direction.
+const RTL_LETTER = '֐-׿؀-ٟ٪-ۯۺ-ࣿ';
+const FIRST_LETTER_RTL = new RegExp(
+  `^[^A-Za-zÀ-ɏ${RTL_LETTER}]*[${RTL_LETTER}]`
+);
+/** Whether a text reads right to left: its first letter is Hebrew or Arabic. */
+export const startsRightToLeft = (text: string): boolean =>
+  FIRST_LETTER_RTL.test(text);
+
 export interface ValueFieldProps {
   type: PickerType;
   /** The value to show (or to start typing from). */
@@ -79,6 +91,8 @@ export interface ValueFieldProps {
   tokens: ThemeTokens;
   styles?: PickerStyles;
   strings: PickerStrings;
+  /** The texts of its typed-input errors. Default `strings`. */
+  errorStrings?: PickerStrings;
   testID?: string;
 }
 
@@ -160,10 +174,12 @@ const ValueField: React.FC<ValueFieldProps> = (props) => {
     tokens,
     styles,
     strings,
+    errorStrings = strings,
     testID,
   } = props;
   const s = buildFieldStyles(tokens);
   const ico = resolveIcons(iconOverrides);
+  const scrollRef = useRef<ScrollViewRef>(null);
   const [lastParsed, setLastParsed] = useState<ParsedSegments | null>(null);
   const { state, dispatch, getState } = useTypedSegments(
     value,
@@ -205,13 +221,25 @@ const ValueField: React.FC<ValueFieldProps> = (props) => {
   const typing = !!allowTyping && editable;
   const typedError =
     typing && !state.focused && lastParsed && !lastParsed.isEmpty
-      ? segmentErrorText(lastParsed.errors, strings, yearRange)
+      ? segmentErrorText(lastParsed.errors, errorStrings, yearRange)
       : '';
   const error = typedError || errorMessage || '';
   const hasValue = typing ? !state.parsed.isEmpty : !!value || !!displayText;
   const text =
     displayText ??
     formatValueText(value, type, dateFormat, timeFormat, dateText, strings);
+  // With a fieldDateText style, a single date-time shows its date and time
+  // apart (no sideways scroll).
+  const valueParts =
+    styles?.fieldDateText && displayText === undefined && value
+      ? formatValueParts(value, type, dateFormat, timeFormat, dateText, strings)
+      : null;
+  const parts = valueParts?.time ? valueParts : null;
+  const valueStyle = [
+    s.text,
+    styles?.fieldText,
+    disabled && [s.disabledText, styles?.fieldTextDisabled],
+  ];
 
   const clear = () => {
     dispatch({ type: 'reset', value: null });
@@ -300,19 +328,59 @@ const ValueField: React.FC<ValueFieldProps> = (props) => {
       onPress={onPress}
       style={fieldStyle}
     >
-      <Text
-        numberOfLines={1}
-        style={[
-          s.text,
-          styles?.fieldText,
-          !text && [s.placeholder, styles?.fieldPlaceholder],
-          disabled && [s.disabledText, text ? styles?.fieldTextDisabled : null],
-        ]}
-      >
-        {digits(text) ||
-          placeholder ||
-          placeholderText(type, dateFormat, timeFormat, strings)}
-      </Text>
+      {parts ? (
+        <>
+          <Text
+            numberOfLines={1}
+            ellipsizeMode="clip"
+            style={[valueStyle, s.textScrolled, styles?.fieldDateText]}
+          >
+            {digits(`${parts.date}${strings.dateTimeSeparator ?? ' '}`)}
+          </Text>
+          <Text numberOfLines={1} ellipsizeMode="clip" style={valueStyle}>
+            {digits(parts.time)}
+          </Text>
+        </>
+      ) : text ? (
+        // A value too long for the box scrolls sideways; a tap still opens.
+        <ScrollView
+          ref={scrollRef}
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          keyboardShouldPersistTaps="always"
+          style={s.textScroll}
+          contentContainerStyle={s.textScrollContent}
+          // Right-to-left text (a Hijri date) starts at its right end.
+          onContentSizeChange={() => {
+            if (startsRightToLeft(text))
+              scrollRef.current?.scrollToEnd({ animated: false });
+          }}
+        >
+          <Text
+            numberOfLines={1}
+            // Android can measure a line a pixel short (right-to-left text
+            // most often) and would then swap its last word for "…".
+            ellipsizeMode="clip"
+            style={[valueStyle, s.textScrolled]}
+          >
+            {digits(text)}
+          </Text>
+        </ScrollView>
+      ) : (
+        <Text
+          numberOfLines={1}
+          style={[
+            s.text,
+            styles?.fieldText,
+            s.placeholder,
+            styles?.fieldPlaceholder,
+            disabled && s.disabledText,
+          ]}
+        >
+          {placeholder ||
+            placeholderText(type, dateFormat, timeFormat, strings)}
+        </Text>
+      )}
       {icons}
     </Pressable>
   );

package/src/components/field/fieldStyles.ts

@@ -32,6 +32,10 @@ const create = (t: ThemeTokens) =>
       fontSize: t.fontSizeMedium,
       color: t.text,
     },
+    textScroll: { flex: 1 },
+    textScrollContent: { flexGrow: 1, alignItems: 'center' },
+    // In the scroll, or as a date set apart from its time, the text keeps its full width.
+    textScrolled: { flex: 0, flexShrink: 0 },
     placeholder: { color: t.placeholder },
     disabledText: { color: t.disabledText },
     icons: { flexDirection: 'row', alignItems: 'center', marginStart: 8 },
@@ -55,6 +59,8 @@ const create = (t: ThemeTokens) =>
       alignItems: 'center',
       flexWrap: 'nowrap',
     },
+    // After a date, the time sits in the middle of the space left before the icons.
+    segmentTime: { flexGrow: 1, justifyContent: 'center' },
     segment: {
       paddingVertical: 8,
       paddingHorizontal: 0,

package/src/components/field/fieldText.ts

@@ -36,6 +36,22 @@ export const formatTimeText = (
 /** Writes a value's date some other way, e.g. as a Hijri date. */
 export type DateTextFormatter = (value: DateTimeValue) => string;
 
+/** A value's date and time as two texts; the time is '' for a date or a value without one. */
+export const formatValueParts = (
+  value: DateTimeValue,
+  type: PickerType,
+  dateFormat: string,
+  timeFormat: TimeFormat,
+  dateText?: DateTextFormatter,
+  periods: PeriodLabels = DEFAULT_STRINGS
+): { date: string; time: string } => ({
+  date: dateText ? dateText(value) : formatDateText(value, dateFormat),
+  time:
+    type === 'datetime' && value.time
+      ? formatTimeText(value, timeFormat, periods)
+      : '',
+});
+
 export const formatValueText = (
   value: DateTimeValue | null,
   type: PickerType,
@@ -45,10 +61,15 @@ export const formatValueText = (
   periods: PeriodLabels = DEFAULT_STRINGS
 ): string => {
   if (!value) return '';
-  const date = dateText ? dateText(value) : formatDateText(value, dateFormat);
-  return type === 'datetime' && value.time
-    ? `${date}${periods.dateTimeSeparator ?? ' '}${formatTimeText(value, timeFormat, periods)}`
-    : date;
+  const { date, time } = formatValueParts(
+    value,
+    type,
+    dateFormat,
+    timeFormat,
+    dateText,
+    periods
+  );
+  return time ? `${date}${periods.dateTimeSeparator ?? ' '}${time}` : date;
 };
 
 /** '21-10-2026 – 25-10-2026'; just the start (with the dash) while the end is open. */

package/src/components/theme/defaultStrings.ts

@@ -124,9 +124,19 @@ export const DEFAULT_STRINGS: Required<PickerStrings> = {
   a11yRangeEnd: 'end of range',
 };
 
+/** The keys that have a value: one left `undefined` (or `null`) keeps what's under it. */
+export const compactStrings = (
+  overrides?: Partial<PickerStrings>
+): Partial<PickerStrings> =>
+  overrides
+    ? (Object.fromEntries(
+        Object.entries(overrides).filter(([, v]) => v != null)
+      ) as Partial<PickerStrings>)
+    : {};
+
 /** The English defaults with the caller's overrides on top. */
 export const resolveStrings = (
   overrides?: Partial<PickerStrings>
 ): Required<PickerStrings> => {
-  return { ...DEFAULT_STRINGS, ...overrides };
+  return { ...DEFAULT_STRINGS, ...compactStrings(overrides) };
 };

package/src/components/theme/direction.ts

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+import { I18nManager } from 'react-native';
+
+/**
+ * Whether a part of the picker is laid out right to left. The picker sets it
+ * for the calendar and the time rows while the Hijri tab shows; elsewhere the
+ * app's direction (`I18nManager.isRTL`) decides.
+ */
+export const RtlContext = createContext<boolean | null>(null);
+
+export const useIsRTL = (): boolean =>
+  useContext(RtlContext) ?? I18nManager.isRTL;

package/src/components/theme/styleKeys.ts

@@ -25,6 +25,11 @@ export const STYLE_KEYS = [
   'fieldText',
   /** The value's text while the field is disabled (the placeholder keeps its own colour). */
   'fieldTextDisabled',
+  /**
+   * Sets the date of a single date-time value apart from its time, e.g.
+   * `{ minWidth: '50%' }` starts the time at the middle of the field.
+   */
+  'fieldDateText',
   'fieldPlaceholder',
   'fieldSegment',
   'fieldSegmentFocused',

package/src/components/time/timeStyles.ts

@@ -23,13 +23,13 @@ const create = (t: ThemeTokens) =>
       fontSize: t.fontSizeLarge,
       color: t.heading,
     },
-    // Times read hh:mm in every language, so the boxes don't mirror in RTL.
     boxes: {
       flexDirection: 'row',
       alignItems: 'center',
       gap: 22,
-      direction: 'ltr',
     },
+    // The boxes follow the row's direction: right to left (the Hijri tab, or a
+    // right-to-left app), the hour sits on the right and AM / PM on the left.
     clock: { flexDirection: 'row', alignItems: 'center' },
     // Each box is 50 × 46 with a 1 pt border and radius 6.
     boxWrap: { width: 50 },
@@ -104,7 +104,6 @@ const create = (t: ThemeTokens) =>
       flexDirection: 'row',
       alignItems: 'center',
       alignSelf: 'center',
-      direction: 'ltr',
     },
     wheelColumn: { width: 64, height: 200, overflow: 'hidden' },
     wheelHighlight: {

package/src/components/types.ts

@@ -391,6 +391,13 @@ export interface DateTimePickerProps {
   theme?: Partial<ThemeTokens>;
   styles?: PickerStyles;
   strings?: Partial<PickerStrings>;
+  /**
+   * The texts while the Hijri tab shows (e.g. Arabic), for its calendar and
+   * time rows, the error messages inside the picker, and a date picked in it
+   * (the on-screen field's errors keep `strings`). A key left out (or `undefined`)
+   * keeps AM / PM in `hijriLocale` (ص / م), then `strings`.
+   */
+  hijriStrings?: Partial<PickerStrings>;
   testID?: string;
 
   // events

package/src/core/calendarSystem.ts

@@ -255,6 +255,48 @@ const writeHijriDate = (d: CalendarDate, locale: string): string | null => {
   return `${h.day} ${hijriMonthNames(locale)[h.month - 1]} ${h.year}`;
 };
 
+export interface Periods {
+  am: string;
+  pm: string;
+}
+
+const ARABIC_PERIODS: Periods = { am: 'ص', pm: 'م' };
+const periodCache = new Map<string, Periods | null>();
+
+/**
+ * AM and PM in the Hijri locale's language, as Intl writes them ('ar-SA' →
+ * ص / م). An Arabic locale whose engine gives none, or Latin ones, gets ص / م;
+ * another locale gets null (the picker keeps strings.am / pm).
+ */
+export const hijriPeriods = (locale: string): Periods | null => {
+  if (!periodCache.has(locale)) periodCache.set(locale, readPeriods(locale));
+  return periodCache.get(locale)!;
+};
+
+const readPeriods = (locale: string): Periods | null => {
+  const arabic = /^ar\b/i.test(locale);
+  try {
+    const f = new Intl.DateTimeFormat(locale, {
+      timeZone: 'UTC',
+      hour: 'numeric',
+      hour12: true,
+    });
+    const period = (hour: number) =>
+      f
+        .formatToParts(utcDate(2026, 0, 1, hour))
+        // Some engines write the part type in lower case.
+        .find((p) => p.type.toLowerCase() === 'dayperiod')
+        ?.value.trim();
+    const am = period(9);
+    const pm = period(21);
+    if (am && pm && am !== pm && !(arabic && /[A-Za-z]/.test(am + pm)))
+      return { am, pm };
+  } catch {
+    // An engine without this locale falls through.
+  }
+  return arabic ? ARABIC_PERIODS : null;
+};
+
 /**
  * The system the picker uses: the requested one, Gregorian by default.
  * Anything Hijri falls back to Gregorian when unsupported.

package/src/index.tsx

@@ -31,7 +31,7 @@ export {
   todayIn,
   weekdayOf,
 } from './core/calendarDate';
-export { hijriDateText } from './core/calendarSystem';
+export { hijriDateText, hijriPeriods } from './core/calendarSystem';
 export { arabicDigits } from './core/numerals';
 
 // Types
@@ -71,7 +71,7 @@ export type {
   SheetSize,
   Slot,
 } from './components/types';
-export type { CalendarSystem } from './core/calendarSystem';
+export type { CalendarSystem, Periods } from './core/calendarSystem';
 export type { Numerals } from './core/numerals';
 export type { PickerStrings } from './components/theme/defaultStrings';
 export type {