@dreamstack-us/kaal 0.0.1 → 0.0.3

package/src/components/CalendarGrid/CalendarGrid.tsx

@@ -1,5 +1,6 @@
 import React, { memo, useCallback, useMemo } from 'react';
 import { FlatList, Pressable, Text, View } from 'react-native';
+import { useDatePickerOverrides } from '../../context/ThemeOverrideContext';
 import {
   addMonths,
   compareDates,
@@ -13,23 +14,83 @@ import {
 import { styles } from './CalendarGrid.styles';
 import { DayCell } from './DayCell';
 
-interface CalendarGridProps {
-  value: Date;
-  onChange: (date: Date) => void;
+import type { DateRange } from '../../types/datepicker';
+
+interface CalendarGridBaseProps {
   minDate?: Date;
   maxDate?: Date;
   disabledDates?: Date[];
   themeMode: 'ios' | 'android' | 'custom';
+  /**
+   * First day of the week: 0 = Sunday, 1 = Monday
+   * @default 0 (Sunday)
+   */
+  weekStartsOn?: 0 | 1;
 }
 
+interface CalendarGridSingleProps extends CalendarGridBaseProps {
+  selectionMode?: 'single';
+  value: Date;
+  onChange: (date: Date) => void;
+  startDate?: never;
+  endDate?: never;
+  onRangeChange?: never;
+}
+
+interface CalendarGridRangeProps extends CalendarGridBaseProps {
+  selectionMode: 'range';
+  startDate: Date | null;
+  endDate: Date | null;
+  onRangeChange: (range: DateRange) => void;
+  value?: never;
+  onChange?: never;
+}
+
+type CalendarGridProps = CalendarGridSingleProps | CalendarGridRangeProps;
+
 const CELL_SIZE = 44;
-const WEEK_DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
 
-const generateMonthDays = (currentMonth: Date): (Date | null)[] => {
+// Week day labels starting from Sunday
+const WEEK_DAYS_SUNDAY_START = [
+  'Sun',
+  'Mon',
+  'Tue',
+  'Wed',
+  'Thu',
+  'Fri',
+  'Sat',
+];
+const WEEK_DAYS_MONDAY_START = [
+  'Mon',
+  'Tue',
+  'Wed',
+  'Thu',
+  'Fri',
+  'Sat',
+  'Sun',
+];
+
+/**
+ * Generate padding days for the month grid based on week start day
+ * TODO: This logic should be refactored when adding locale support
+ */
+const generateMonthDays = (
+  currentMonth: Date,
+  weekStartsOn: 0 | 1,
+): (Date | null)[] => {
   const firstDay = getFirstDayOfMonth(currentMonth);
-  // getDayOfWeek returns 0 for Sunday, we want Monday = 0
-  const startOfWeek = getDayOfWeek(firstDay);
-  const paddingDays = startOfWeek === 0 ? 6 : startOfWeek - 1;
+  // getDayOfWeek returns 0 for Sunday, 1 for Monday, etc.
+  const dayOfWeek = getDayOfWeek(firstDay);
+
+  // Calculate padding days based on week start
+  let paddingDays: number;
+  if (weekStartsOn === 0) {
+    // Sunday start: Sunday = 0 padding, Monday = 1, etc.
+    paddingDays = dayOfWeek;
+  } else {
+    // Monday start: Monday = 0 padding, Sunday = 6 padding
+    paddingDays = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+  }
 
   const days: (Date | null)[] = [];
 
@@ -55,97 +116,216 @@ const generateMonthDays = (currentMonth: Date): (Date | null)[] => {
   return days;
 };
 
-export const CalendarGrid: React.FC<CalendarGridProps> = memo(
-  ({ value, onChange, minDate, maxDate, disabledDates, themeMode }) => {
-    const [currentMonth, setCurrentMonth] = React.useState(() =>
-      getFirstDayOfMonth(value),
-    );
+export const CalendarGrid: React.FC<CalendarGridProps> = memo((props) => {
+  const {
+    minDate,
+    maxDate,
+    disabledDates,
+    themeMode,
+    weekStartsOn = 0,
+    selectionMode = 'single',
+  } = props;
+
+  // Extract mode-specific props
+  const singleValue = selectionMode === 'single' ? props.value : null;
+  const singleOnChange = selectionMode === 'single' ? props.onChange : null;
+  const rangeStart = selectionMode === 'range' ? props.startDate : null;
+  const rangeEnd = selectionMode === 'range' ? props.endDate : null;
+  const rangeOnChange = selectionMode === 'range' ? props.onRangeChange : null;
 
-    const days = useMemo(() => generateMonthDays(currentMonth), [currentMonth]);
+  const overrides = useDatePickerOverrides();
+  const [currentMonth, setCurrentMonth] = React.useState(() =>
+    getFirstDayOfMonth(singleValue ?? rangeStart ?? new Date()),
+  );
+
+  const days = useMemo(
+    () => generateMonthDays(currentMonth, weekStartsOn),
+    [currentMonth, weekStartsOn],
+  );
 
-    const todayDate = useMemo(() => today(), []);
+  const weekDays =
+    weekStartsOn === 0 ? WEEK_DAYS_SUNDAY_START : WEEK_DAYS_MONDAY_START;
 
-    const isDisabled = useCallback(
-      (date: Date | null): boolean => {
-        if (!date) return true;
-        if (minDate && compareDates(date, minDate) < 0) return true;
-        if (maxDate && compareDates(date, maxDate) > 0) return true;
-        if (disabledDates?.some((d) => isSameDay(date, d))) return true;
+  const todayDate = useMemo(() => today(), []);
+
+  const isDisabled = useCallback(
+    (date: Date | null): boolean => {
+      if (!date) return true;
+      if (minDate && compareDates(date, minDate) < 0) return true;
+      if (maxDate && compareDates(date, maxDate) > 0) return true;
+      if (disabledDates?.some((d) => isSameDay(date, d))) return true;
+      return false;
+    },
+    [minDate, maxDate, disabledDates],
+  );
+
+  const navigateMonth = useCallback((direction: 1 | -1) => {
+    setCurrentMonth((prev) => addMonths(prev, direction));
+  }, []);
+
+  // Handle date press for both single and range modes
+  const handleDatePress = useCallback(
+    (date: Date) => {
+      if (selectionMode === 'single' && singleOnChange) {
+        singleOnChange(date);
+      } else if (selectionMode === 'range' && rangeOnChange) {
+        // Range selection logic:
+        // 1. If no start date, set start date
+        // 2. If start date but no end date, set end date (if after start)
+        // 3. If both dates exist, reset to new start date
+        if (!rangeStart || (rangeStart && rangeEnd)) {
+          rangeOnChange({ startDate: date, endDate: null });
+        } else {
+          // Have start but no end
+          if (compareDates(date, rangeStart) < 0) {
+            // Clicked before start - make this the new start
+            rangeOnChange({ startDate: date, endDate: null });
+          } else if (isSameDay(date, rangeStart)) {
+            // Clicked same day - clear selection
+            rangeOnChange({ startDate: date, endDate: null });
+          } else {
+            // Clicked after start - set as end date
+            rangeOnChange({ startDate: rangeStart, endDate: date });
+          }
+        }
+      }
+    },
+    [selectionMode, singleOnChange, rangeOnChange, rangeStart, rangeEnd],
+  );
+
+  // Check if date is in range (between start and end)
+  const isDateInRange = useCallback(
+    (date: Date | null): boolean => {
+      if (!date || selectionMode !== 'range' || !rangeStart || !rangeEnd) {
         return false;
-      },
-      [minDate, maxDate, disabledDates],
-    );
+      }
+      return (
+        compareDates(date, rangeStart) > 0 && compareDates(date, rangeEnd) < 0
+      );
+    },
+    [selectionMode, rangeStart, rangeEnd],
+  );
 
-    const navigateMonth = useCallback((direction: 1 | -1) => {
-      setCurrentMonth((prev) => addMonths(prev, direction));
-    }, []);
+  const renderDay = useCallback(
+    ({ item }: { item: Date | null }) => {
+      const isRangeStart =
+        selectionMode === 'range' && item && rangeStart
+          ? isSameDay(item, rangeStart)
+          : false;
+      const isRangeEnd =
+        selectionMode === 'range' && item && rangeEnd
+          ? isSameDay(item, rangeEnd)
+          : false;
+      const isSelected =
+        selectionMode === 'single' && item && singleValue
+          ? isSameDay(item, singleValue)
+          : false;
 
-    const renderDay = useCallback(
-      ({ item }: { item: Date | null }) => (
+      return (
         <DayCell
           date={item}
-          isSelected={item ? isSameDay(item, value) : false}
+          isSelected={isSelected}
           isToday={item ? isSameDay(item, todayDate) : false}
           isDisabled={isDisabled(item)}
           isWeekend={
             item ? getDayOfWeek(item) === 0 || getDayOfWeek(item) === 6 : false
           }
-          onPress={item && !isDisabled(item) ? () => onChange(item) : undefined}
-        />
-      ),
-      [value, todayDate, isDisabled, onChange],
-    );
-
-    const keyExtractor = useCallback(
-      (item: Date | null, index: number) =>
-        item?.toISOString() ?? `empty-${index}`,
-      [],
-    );
-
-    const getItemLayout = useCallback(
-      (_data: ArrayLike<Date | null> | null | undefined, index: number) => ({
-        length: CELL_SIZE,
-        offset: CELL_SIZE * Math.floor(index / 7),
-        index,
-      }),
-      [],
-    );
-
-    return (
-      <View style={styles.container}>
-        <View style={styles.header}>
-          <Pressable onPress={() => navigateMonth(-1)} style={styles.navButton}>
-            <Text style={styles.navText}>‹</Text>
-          </Pressable>
-          <Text style={styles.monthTitle}>{formatYearMonth(currentMonth)}</Text>
-          <Pressable onPress={() => navigateMonth(1)} style={styles.navButton}>
-            <Text style={styles.navText}>›</Text>
-          </Pressable>
-        </View>
-
-        <View style={styles.weekDays}>
-          {WEEK_DAYS.map((day) => (
-            <Text key={day} style={styles.weekDayText}>
-              {day}
-            </Text>
-          ))}
-        </View>
-
-        <FlatList
-          data={days}
-          renderItem={renderDay}
-          keyExtractor={keyExtractor}
-          getItemLayout={getItemLayout}
-          numColumns={7}
-          scrollEnabled={false}
-          removeClippedSubviews={true}
-          maxToRenderPerBatch={14}
-          windowSize={3}
-          initialNumToRender={42}
+          isRangeStart={isRangeStart}
+          isRangeEnd={isRangeEnd}
+          isInRange={isDateInRange(item)}
+          onPress={
+            item && !isDisabled(item) ? () => handleDatePress(item) : undefined
+          }
         />
+      );
+    },
+    [
+      selectionMode,
+      singleValue,
+      rangeStart,
+      rangeEnd,
+      todayDate,
+      isDisabled,
+      isDateInRange,
+      handleDatePress,
+    ],
+  );
+
+  const keyExtractor = useCallback(
+    (item: Date | null, index: number) =>
+      item?.toISOString() ?? `empty-${index}`,
+    [],
+  );
+
+  const getItemLayout = useCallback(
+    (_data: ArrayLike<Date | null> | null | undefined, index: number) => ({
+      length: CELL_SIZE,
+      offset: CELL_SIZE * Math.floor(index / 7),
+      index,
+    }),
+    [],
+  );
+
+  // Build override styles from themeOverrides
+  const containerStyle = useMemo(
+    () => ({
+      backgroundColor: overrides?.backgroundColor ?? '#1E1E1E',
+      borderRadius: overrides?.borderRadius ?? 16,
+      padding: overrides?.padding ?? 16,
+    }),
+    [overrides],
+  );
+
+  const navTextStyle = useMemo(
+    () => ({
+      color: overrides?.primaryColor ?? '#4DA6FF',
+    }),
+    [overrides],
+  );
+
+  const monthTitleStyle = useMemo(
+    () => ({
+      color: overrides?.textColor ?? '#FFFFFF',
+    }),
+    [overrides],
+  );
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <View style={styles.header}>
+        <Pressable onPress={() => navigateMonth(-1)} style={styles.navButton}>
+          <Text style={[styles.navText, navTextStyle]}>‹</Text>
+        </Pressable>
+        <Text style={[styles.monthTitle, monthTitleStyle]}>
+          {formatYearMonth(currentMonth)}
+        </Text>
+        <Pressable onPress={() => navigateMonth(1)} style={styles.navButton}>
+          <Text style={[styles.navText, navTextStyle]}>›</Text>
+        </Pressable>
+      </View>
+
+      <View style={styles.weekDays}>
+        {weekDays.map((day) => (
+          <Text key={day} style={styles.weekDayText}>
+            {day}
+          </Text>
+        ))}
       </View>
-    );
-  },
-);
+
+      <FlatList
+        data={days}
+        renderItem={renderDay}
+        keyExtractor={keyExtractor}
+        getItemLayout={getItemLayout}
+        numColumns={7}
+        scrollEnabled={false}
+        removeClippedSubviews={true}
+        maxToRenderPerBatch={14}
+        windowSize={3}
+        initialNumToRender={42}
+      />
+    </View>
+  );
+});
 
 CalendarGrid.displayName = 'CalendarGrid';