@lotics/ui 1.11.1 → 1.13.0

package/src/date_calendar.tsx

@@ -0,0 +1,679 @@
+import React, { useCallback, useImperativeHandle, useMemo, useState } from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+import { Text } from "./text";
+import { colors } from "./colors";
+import { useScreenSize } from "./use_screen_size";
+import { Picker, PickerOption } from "./picker";
+import { IconButton } from "./icon_button";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export type CalendarSingleValue = Date | null;
+export type CalendarRangeValue = { start: Date | null; end: Date | null };
+
+/** Day of week: 0 = Sunday, 1 = Monday, ..., 6 = Saturday */
+export type DayOfWeek = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+
+export type CalendarValue<TMode extends "single" | "range"> = TMode extends "single"
+  ? CalendarSingleValue
+  : CalendarRangeValue;
+
+export interface CalendarRef {
+  /** Navigate calendar view to a specific month */
+  navigateToMonth: (year: number, month: number) => void;
+}
+
+interface CalendarBaseProps {
+  /** First day of the week (0 = Sunday, 1 = Monday, ..., 6 = Saturday). Default: 1 (Monday) */
+  firstDayOfWeek?: DayOfWeek;
+  /** BCP-47 locale for weekday/month names. Default: "en-US". */
+  locale?: string;
+  /** Ref to access calendar methods like navigateToMonth */
+  ref?: React.Ref<CalendarRef>;
+}
+
+export type CalendarProps<TMode extends "single" | "range" = "single" | "range"> =
+  CalendarBaseProps &
+    (TMode extends "single"
+      ? {
+          mode: "single";
+          value: CalendarSingleValue;
+          onValueChange: (value: CalendarSingleValue) => void;
+        }
+      : TMode extends "range"
+        ? {
+            mode: "range";
+            value: CalendarRangeValue;
+            onValueChange: (value: CalendarRangeValue) => void;
+          }
+        : {
+            mode: "single" | "range";
+            value: CalendarSingleValue | CalendarRangeValue;
+            onValueChange: (value: CalendarSingleValue | CalendarRangeValue) => void;
+          });
+
+interface CalendarMonthProps {
+  year: number;
+  month: number;
+  selectedDate: Date | null;
+  rangeStart: Date | null;
+  rangeEnd: Date | null;
+  isRange: boolean;
+  onDateSelect: (date: Date) => void;
+  onMonthChange: (year: number, month: number) => void;
+  showNavigation?: boolean;
+  /** Show only left arrow (for range mode left calendar) */
+  showLeftArrow?: boolean;
+  /** Show only right arrow (for range mode right calendar) */
+  showRightArrow?: boolean;
+  /** Callback for left arrow click (for range mode) */
+  onPrevMonth?: () => void;
+  /** Callback for right arrow click (for range mode) */
+  onNextMonth?: () => void;
+  /** First day of the week (0 = Sunday, 1 = Monday, ..., 6 = Saturday). Default: 1 (Monday) */
+  firstDayOfWeek?: DayOfWeek;
+  /** BCP-47 locale for weekday/month names. */
+  locale: string;
+}
+
+// =============================================================================
+// Helper Functions
+// =============================================================================
+
+/** BCP-47 locale used when a caller does not supply one. */
+const DEFAULT_LOCALE = "en-US";
+
+interface LocalizedNames {
+  /** Weekday short names, index 0 = Sunday. */
+  weekdays: string[];
+  /** Month long names, index 0 = January. */
+  months: string[];
+  /** Month names as Picker options keyed by month index. */
+  monthOptions: PickerOption<string>[];
+  /** Full date string for a day cell's accessible name. */
+  formatDayLabel: (date: Date) => string;
+}
+
+// Jan 1 2017 was a Sunday — formatting Jan 1..7 yields Sun..Sat. Sample dates are
+// built in local time so the runtime timezone can't shift the rendered name.
+function buildLocalizedNames(locale: string): LocalizedNames {
+  const weekdayFormatter = new Intl.DateTimeFormat(locale, { weekday: "short" });
+  const weekdays = [1, 2, 3, 4, 5, 6, 7].map((day) =>
+    weekdayFormatter.format(new Date(2017, 0, day)),
+  );
+  const monthFormatter = new Intl.DateTimeFormat(locale, { month: "long" });
+  const months = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((month) =>
+    monthFormatter.format(new Date(2017, month, 1)),
+  );
+  const dayLabelFormatter = new Intl.DateTimeFormat(locale, { dateStyle: "full" });
+  return {
+    weekdays,
+    months,
+    monthOptions: months.map((month, index) => ({ label: month, value: String(index) })),
+    formatDayLabel: (date) => dayLabelFormatter.format(date),
+  };
+}
+
+// Intl formatters are costly to construct; derive each locale's names once.
+const localizedNamesCache = new Map<string, LocalizedNames>();
+
+function getLocalizedNames(locale: string): LocalizedNames {
+  let names = localizedNamesCache.get(locale);
+  if (!names) {
+    names = buildLocalizedNames(locale);
+    localizedNamesCache.set(locale, names);
+  }
+  return names;
+}
+
+function getDaysOfWeekLabels(weekdays: string[], firstDayOfWeek: DayOfWeek): string[] {
+  const result: string[] = [];
+  for (let i = 0; i < 7; i++) {
+    result.push(weekdays[(firstDayOfWeek + i) % 7]);
+  }
+  return result;
+}
+
+function getYearOptions(currentYear: number): PickerOption<string>[] {
+  const options: PickerOption<string>[] = [];
+  for (let year = currentYear - 10; year <= currentYear + 10; year++) {
+    options.push({ label: String(year), value: String(year) });
+  }
+  return options;
+}
+
+function getDaysInMonth(year: number, month: number): number {
+  return new Date(year, month + 1, 0).getDate();
+}
+
+function getFirstDayOfMonth(year: number, month: number, firstDayOfWeek: DayOfWeek): number {
+  const day = new Date(year, month, 1).getDay();
+  // Calculate offset based on first day of week
+  return (day - firstDayOfWeek + 7) % 7;
+}
+
+function isSameDay(date1: Date | null, date2: Date | null): boolean {
+  if (!date1 || !date2) return false;
+  return (
+    date1.getFullYear() === date2.getFullYear() &&
+    date1.getMonth() === date2.getMonth() &&
+    date1.getDate() === date2.getDate()
+  );
+}
+
+function isInRange(date: Date, start: Date | null, end: Date | null): boolean {
+  if (!start || !end) return false;
+  const time = date.getTime();
+  const startTime = start.getTime();
+  const endTime = end.getTime();
+  return time > Math.min(startTime, endTime) && time < Math.max(startTime, endTime);
+}
+
+function isToday(date: Date): boolean {
+  const today = new Date();
+  return isSameDay(date, today);
+}
+
+// =============================================================================
+// Calendar Month Component
+// =============================================================================
+
+function CalendarMonth(props: CalendarMonthProps) {
+  const {
+    year,
+    month,
+    selectedDate,
+    rangeStart,
+    rangeEnd,
+    isRange,
+    onDateSelect,
+    onMonthChange,
+    showNavigation = true,
+    showLeftArrow = false,
+    showRightArrow = false,
+    onPrevMonth,
+    onNextMonth,
+    firstDayOfWeek = 1, // Default to Monday
+    locale,
+  } = props;
+
+  const names = getLocalizedNames(locale);
+  const daysInMonth = getDaysInMonth(year, month);
+  const firstDayOffset = getFirstDayOfMonth(year, month, firstDayOfWeek);
+  const daysOfWeekLabels = useMemo(
+    () => getDaysOfWeekLabels(names.weekdays, firstDayOfWeek),
+    [names, firstDayOfWeek],
+  );
+
+  const handlePrevMonth = useCallback(() => {
+    if (month === 0) {
+      onMonthChange(year - 1, 11);
+    } else {
+      onMonthChange(year, month - 1);
+    }
+  }, [year, month, onMonthChange]);
+
+  const handleNextMonth = useCallback(() => {
+    if (month === 11) {
+      onMonthChange(year + 1, 0);
+    } else {
+      onMonthChange(year, month + 1);
+    }
+  }, [year, month, onMonthChange]);
+
+  const handleMonthPickerChange = useCallback(
+    (newMonth: string) => {
+      onMonthChange(year, parseInt(newMonth, 10));
+    },
+    [year, onMonthChange],
+  );
+
+  const handleYearPickerChange = useCallback(
+    (newYear: string) => {
+      onMonthChange(parseInt(newYear, 10), month);
+    },
+    [month, onMonthChange],
+  );
+
+  const yearOptions = useMemo(() => getYearOptions(year), [year]);
+
+  const weeks = useMemo(() => {
+    const result: (number | null)[][] = [];
+    let currentWeek: (number | null)[] = [];
+
+    // Add empty cells for days before the first day of month
+    for (let i = 0; i < firstDayOffset; i++) {
+      currentWeek.push(null);
+    }
+
+    // Add days of the month
+    for (let day = 1; day <= daysInMonth; day++) {
+      currentWeek.push(day);
+      if (currentWeek.length === 7) {
+        result.push(currentWeek);
+        currentWeek = [];
+      }
+    }
+
+    // Add empty cells for remaining days
+    if (currentWeek.length > 0) {
+      while (currentWeek.length < 7) {
+        currentWeek.push(null);
+      }
+      result.push(currentWeek);
+    }
+
+    return result;
+  }, [daysInMonth, firstDayOffset]);
+
+  return (
+    <View style={styles.monthContainer}>
+      {/* Header with month/year and navigation */}
+      <View style={styles.monthHeader}>
+        {showNavigation && (
+          <IconButton
+            icon="chevron-left"
+            accessibilityLabel="Previous month"
+            onPress={handlePrevMonth}
+          />
+        )}
+        {showLeftArrow && onPrevMonth && (
+          <IconButton
+            icon="chevron-left"
+            accessibilityLabel="Previous month"
+            onPress={onPrevMonth}
+          />
+        )}
+        {showNavigation ? (
+          <View style={styles.pickerContainer}>
+            <Picker
+              value={String(month)}
+              options={names.monthOptions}
+              onValueChange={handleMonthPickerChange}
+            />
+            <Picker
+              value={String(year)}
+              options={yearOptions}
+              onValueChange={handleYearPickerChange}
+            />
+          </View>
+        ) : (
+          <View style={styles.monthYearText}>
+            <Text weight="medium" size="sm">
+              {names.months[month]} {year}
+            </Text>
+          </View>
+        )}
+        {showNavigation && (
+          <IconButton
+            icon="chevron-right"
+            accessibilityLabel="Next month"
+            onPress={handleNextMonth}
+          />
+        )}
+        {showRightArrow && onNextMonth && (
+          <IconButton
+            icon="chevron-right"
+            accessibilityLabel="Next month"
+            onPress={onNextMonth}
+          />
+        )}
+      </View>
+
+      {/* Days of week header */}
+      <View style={styles.weekHeader}>
+        {daysOfWeekLabels.map((day) => (
+          <View key={day} style={styles.dayHeaderCell}>
+            <Text size="xs" color="zinc-500">
+              {day}
+            </Text>
+          </View>
+        ))}
+      </View>
+
+      {/* Calendar grid */}
+      {weeks.map((week, weekIndex) => (
+        <View key={weekIndex} style={styles.weekRow}>
+          {week.map((day, dayIndex) => {
+            if (day === null) {
+              return <View key={dayIndex} style={styles.dayCell} />;
+            }
+
+            const date = new Date(year, month, day);
+            const isSelected = isSameDay(date, selectedDate);
+            const isRangeStart = isRange && isSameDay(date, rangeStart);
+            const isRangeEnd = isRange && isSameDay(date, rangeEnd);
+            const inRange = isRange && isInRange(date, rangeStart, rangeEnd);
+            const isTodayDate = isToday(date);
+            const isActive = isSelected || isRangeStart || isRangeEnd;
+
+            return (
+              <Pressable
+                key={dayIndex}
+                accessibilityRole="button"
+                accessibilityLabel={names.formatDayLabel(date)}
+                accessibilityState={{ selected: isActive }}
+                style={({ hovered }) => [
+                  styles.dayCell,
+                  inRange && styles.dayCellInRange,
+                  isActive && styles.dayCellSelected,
+                  hovered && !isActive && styles.dayCellHovered,
+                ]}
+                onPress={() => onDateSelect(date)}
+              >
+                <Text
+                  size="sm"
+                  color={isActive ? "inverted" : "default"}
+                  userSelect="none"
+                  weight={isTodayDate ? "semibold" : "regular"}
+                >
+                  {day}
+                </Text>
+                {isTodayDate && (
+                  <View style={[styles.todayDot, isActive && styles.todayDotInverted]} />
+                )}
+              </Pressable>
+            );
+          })}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+// =============================================================================
+// Main Calendar Component
+// =============================================================================
+
+export function Calendar<TMode extends "single" | "range">(
+  props: CalendarProps<TMode>,
+): React.ReactElement {
+  const screenSize = useScreenSize();
+  const firstDayOfWeek = props.firstDayOfWeek ?? 1; // Default to Monday
+  const locale = props.locale ?? DEFAULT_LOCALE;
+
+  if (props.mode === "single") {
+    return (
+      <SingleCalendar
+        value={props.value as CalendarSingleValue}
+        onValueChange={props.onValueChange as (value: CalendarSingleValue) => void}
+        firstDayOfWeek={firstDayOfWeek}
+        locale={locale}
+      />
+    );
+  }
+
+  return (
+    <RangeCalendar
+      ref={props.ref}
+      value={props.value as CalendarRangeValue}
+      onValueChange={props.onValueChange as (value: CalendarRangeValue) => void}
+      isSmall={screenSize.small}
+      firstDayOfWeek={firstDayOfWeek}
+      locale={locale}
+    />
+  );
+}
+
+// =============================================================================
+// Single Calendar
+// =============================================================================
+
+interface SingleCalendarInternalProps {
+  value: Date | null;
+  onValueChange: (value: Date | null) => void;
+  firstDayOfWeek: DayOfWeek;
+  locale: string;
+}
+
+function SingleCalendar(props: SingleCalendarInternalProps) {
+  const { value, onValueChange, firstDayOfWeek, locale } = props;
+
+  const initialDate = useMemo(() => value || new Date(), [value]);
+  const [viewYear, setViewYear] = useState(initialDate.getFullYear());
+  const [viewMonth, setViewMonth] = useState(initialDate.getMonth());
+
+  const handleDateSelect = useCallback(
+    (date: Date) => {
+      onValueChange(date);
+    },
+    [onValueChange],
+  );
+
+  const handleMonthChange = useCallback((year: number, month: number) => {
+    setViewYear(year);
+    setViewMonth(month);
+  }, []);
+
+  return (
+    <View style={styles.calendarContainer}>
+      <CalendarMonth
+        year={viewYear}
+        month={viewMonth}
+        selectedDate={value}
+        rangeStart={null}
+        rangeEnd={null}
+        isRange={false}
+        onDateSelect={handleDateSelect}
+        onMonthChange={handleMonthChange}
+        firstDayOfWeek={firstDayOfWeek}
+        locale={locale}
+      />
+    </View>
+  );
+}
+
+// =============================================================================
+// Range Calendar
+// =============================================================================
+
+interface RangeCalendarInternalProps {
+  value: { start: Date | null; end: Date | null };
+  onValueChange: (value: { start: Date | null; end: Date | null }) => void;
+  isSmall: boolean;
+  firstDayOfWeek: DayOfWeek;
+  locale: string;
+  ref?: React.Ref<CalendarRef>;
+}
+
+function RangeCalendar(props: RangeCalendarInternalProps) {
+  const { value, onValueChange, isSmall, firstDayOfWeek, locale, ref } = props;
+
+  // Initialize view to show start date's month, or current month
+  const initialDate = useMemo(() => value.start || new Date(), [value.start]);
+  const [leftYear, setLeftYear] = useState(initialDate.getFullYear());
+  const [leftMonth, setLeftMonth] = useState(initialDate.getMonth());
+
+  // Expose navigation method via ref
+  useImperativeHandle(ref, () => ({
+    navigateToMonth: (year: number, month: number) => {
+      setLeftYear(year);
+      setLeftMonth(month);
+    },
+  }));
+
+  // Right calendar shows next month
+  const rightYear = leftMonth === 11 ? leftYear + 1 : leftYear;
+  const rightMonth = leftMonth === 11 ? 0 : leftMonth + 1;
+
+  // Track which part of range we're selecting
+  const [selectingEnd, setSelectingEnd] = useState(false);
+
+  const handleDateSelect = useCallback(
+    (date: Date) => {
+      if (!value.start || (value.start && value.end) || !selectingEnd) {
+        // Start new selection
+        onValueChange({ start: date, end: null });
+        setSelectingEnd(true);
+      } else {
+        // Complete selection
+        const start = value.start;
+        // Ensure start is before end
+        if (date < start) {
+          onValueChange({ start: date, end: start });
+        } else {
+          onValueChange({ start, end: date });
+        }
+        setSelectingEnd(false);
+      }
+    },
+    [value, onValueChange, selectingEnd],
+  );
+
+  const handleMonthChange = useCallback((year: number, month: number) => {
+    setLeftYear(year);
+    setLeftMonth(month);
+  }, []);
+
+  // Shared navigation - navigates both calendars together
+  const handlePrevMonth = useCallback(() => {
+    if (leftMonth === 0) {
+      setLeftYear(leftYear - 1);
+      setLeftMonth(11);
+    } else {
+      setLeftMonth(leftMonth - 1);
+    }
+  }, [leftYear, leftMonth]);
+
+  const handleNextMonth = useCallback(() => {
+    if (leftMonth === 11) {
+      setLeftYear(leftYear + 1);
+      setLeftMonth(0);
+    } else {
+      setLeftMonth(leftMonth + 1);
+    }
+  }, [leftYear, leftMonth]);
+
+  // On small screens: single calendar with navigation in header
+  // On desktop: horizontal layout with arrows inline
+  if (isSmall) {
+    return (
+      <View style={styles.calendarContainer}>
+        <CalendarMonth
+          year={leftYear}
+          month={leftMonth}
+          selectedDate={null}
+          rangeStart={value.start}
+          rangeEnd={value.end}
+          isRange={true}
+          onDateSelect={handleDateSelect}
+          onMonthChange={handleMonthChange}
+          showNavigation={true}
+          firstDayOfWeek={firstDayOfWeek}
+          locale={locale}
+        />
+      </View>
+    );
+  }
+
+  // Desktop: horizontal layout with arrows inline with month/year
+  return (
+    <View style={[styles.calendarContainer, { flexDirection: "row", gap: 24 }]}>
+      <CalendarMonth
+        year={leftYear}
+        month={leftMonth}
+        selectedDate={null}
+        rangeStart={value.start}
+        rangeEnd={value.end}
+        isRange={true}
+        onDateSelect={handleDateSelect}
+        onMonthChange={handleMonthChange}
+        showNavigation={false}
+        showLeftArrow={true}
+        onPrevMonth={handlePrevMonth}
+        firstDayOfWeek={firstDayOfWeek}
+        locale={locale}
+      />
+      <CalendarMonth
+        year={rightYear}
+        month={rightMonth}
+        selectedDate={null}
+        rangeStart={value.start}
+        rangeEnd={value.end}
+        isRange={true}
+        onDateSelect={handleDateSelect}
+        onMonthChange={handleMonthChange}
+        showNavigation={false}
+        showRightArrow={true}
+        onNextMonth={handleNextMonth}
+        firstDayOfWeek={firstDayOfWeek}
+        locale={locale}
+      />
+    </View>
+  );
+}
+
+// =============================================================================
+// Styles
+// =============================================================================
+
+const styles = StyleSheet.create({
+  calendarContainer: {},
+  monthContainer: {
+    minWidth: 280,
+  },
+  monthHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 8,
+  },
+  pickerContainer: {
+    flex: 1,
+    flexDirection: "row",
+    gap: 8,
+    justifyContent: "center",
+  },
+  monthYearText: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  weekHeader: {
+    flexDirection: "row",
+    justifyContent: "space-around",
+    borderBottomWidth: 1,
+    borderBottomColor: colors.zinc["200"],
+    paddingBottom: 8,
+    marginBottom: 4,
+  },
+  dayHeaderCell: {
+    width: 36,
+    alignItems: "center",
+    justifyContent: "center",
+    height: 32,
+  },
+  weekRow: {
+    flexDirection: "row",
+    justifyContent: "space-around",
+  },
+  dayCell: {
+    width: 36,
+    height: 36,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 999,
+  },
+  dayCellSelected: {
+    backgroundColor: colors.zinc["800"],
+  },
+  dayCellInRange: {
+    backgroundColor: colors.zinc["100"],
+  },
+  dayCellHovered: {
+    backgroundColor: colors.zinc["50"],
+  },
+  todayDot: {
+    position: "absolute",
+    bottom: 4,
+    width: 4,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: colors.zinc["800"],
+  },
+  todayDotInverted: {
+    backgroundColor: colors.white,
+  },
+});