@hero-design/rn 8.104.1-alpha.2 → 8.105.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.104.1-alpha.2",
+  "version": "8.105.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/Calendar/CalendarRange.tsx

@@ -3,8 +3,8 @@ import {
   MonthYearPickerViewIOS,
 } from '@hero-design/react-native-month-year-picker';
 import format from 'date-fns/fp/format';
-import React, { useMemo, useState } from 'react';
-import { LayoutChangeEvent, Platform, TouchableOpacity } from 'react-native';
+import React, { useState } from 'react';
+import { Platform, TouchableOpacity } from 'react-native';
 import { useTheme } from '../../theme';
 import { noop } from '../../utils/functions';
 import Box from '../Box';
@@ -21,49 +21,23 @@ import {
   StyledDisabledCalendarRowItem,
 } from './StyledCalendar';
 import {
-  getValidDate,
-  initArray,
+  getCalendarButtonState,
+  getCalendarDate,
   isDateInRange,
   isEqDate,
   setStartOrEndDate,
+  shouldUseMonthPicker,
 } from './helpers';
 import SelectedDate from './CalendarRangeConnector';
-
-const DAYS_OF_WEEK = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
-// Sunday first column => 0
-// Sunday last column  => 1
-const WEEK_INDEX_OFFSET = 1;
-const SUNDAY_INDEX = 6;
-
-// Always render 7 rows x 6 items for consistent layout
-const TOTAL_DATES_ITEMS = 7 * 6;
-
-type ParsedMaskedDate = {
-  [key: string]: boolean;
-};
+import { CalendarProps } from './types';
+import { DAYS_OF_WEEK } from './constants';
+import { useCalendarLayout } from './shared/hooks/useCalendarLayout';
 
 export type CalendarDateRange = {
   startDate?: Date;
   endDate?: Date;
 };
 
-export interface CalendarProps {
-  value?: CalendarDateRange;
-  visibleDate: Date;
-  minDate?: Date;
-  maxDate?: Date;
-  onChange?: (dateRange: CalendarDateRange) => void;
-  onPreviousPress?: () => void;
-  onNextPress?: () => void;
-  onTitlePress?: () => void;
-  markedDates?: Date[];
-  testID?: string;
-  onMonthChange?: (date: Date) => void;
-  onToggleMonthPicker?: (visible: boolean) => void;
-  monthPickerConfirmLabel?: string;
-  monthPickerCancelLabel?: string;
-}
-
 const CalendarRange = ({
   value,
   visibleDate,
@@ -79,87 +53,37 @@ const CalendarRange = ({
   onToggleMonthPicker = noop,
   monthPickerConfirmLabel,
   monthPickerCancelLabel,
-}: CalendarProps) => {
+}: Omit<CalendarProps, 'value' | 'onChange'> & {
+  value?: CalendarDateRange;
+  onChange?: (date: CalendarDateRange) => void;
+}) => {
   const theme = useTheme();
-  const currentMonth = visibleDate.getMonth();
-  const currentYear = visibleDate.getFullYear();
-  const now = new Date();
-  const parsedMaskedDate: ParsedMaskedDate = markedDates.reduce(
-    (current, markedDate) => ({
-      ...current,
-      [markedDate.toDateString()]: true,
-    }),
-    {}
-  );
-  const [monthPickerVisible, setMonthPickerVisible] = useState(false);
-  const [contentHeight, setContentHeight] = useState(0);
-  const [contentWidth, setContentWidth] = useState(0);
-  const calendarItemWidth = useMemo(
-    () =>
-      contentWidth > 0
-        ? Math.floor(
-            (contentWidth - theme.__hd__.calendar.space.cellPadding) / 7
-          )
-        : undefined,
-    [contentWidth, theme]
-  );
-
-  const useMonthPicker = onMonthChange !== noop;
-
-  const firstDateOfMonth = new Date(currentYear, currentMonth, 1);
-  const lastDateOfMonth = new Date(currentYear, currentMonth + 1, 0);
 
-  const lastDateOfPreviousMonth = new Date(currentYear, currentMonth, 0);
-
-  // Index of day in week is shifted by 1 due to Sunday is the last column
-  const firstDayWeekIndexOfMonth =
-    firstDateOfMonth.getDay() === 0
-      ? SUNDAY_INDEX
-      : firstDateOfMonth.getDay() - WEEK_INDEX_OFFSET;
+  const [monthPickerVisible, setMonthPickerVisible] = useState(false);
 
-  const lastDayIndexOfCurrentMonth = lastDateOfMonth.getDate();
-  const lastDayIndexOfPreviousMonth = lastDateOfPreviousMonth.getDate();
+  const { onLayout, contentHeight, contentWidth, calendarItemWidth } =
+    useCalendarLayout();
 
-  const daysOfPreviousMonth = initArray(firstDayWeekIndexOfMonth, (index) => {
-    const reversedIndex = firstDayWeekIndexOfMonth - index - 1;
-    const count = lastDayIndexOfPreviousMonth - reversedIndex;
-    return getValidDate(
-      new Date(currentYear, currentMonth - 1, count),
-      minDate,
-      maxDate
-    );
+  const {
+    parsedMaskedDate,
+    daysOfPreviousMonth,
+    daysOfCurrentMonth,
+    daysOfNextMonth,
+  } = getCalendarDate({
+    visibleDate,
+    markedDates,
+    minDate,
+    maxDate,
+    onMonthChange,
   });
+  const { disablePrevButton, disableNextButton } = getCalendarButtonState({
+    visibleDate,
+    minDate,
+    maxDate,
+  });
+  const shouldShowMonthPicker = shouldUseMonthPicker(onMonthChange);
 
-  const daysOfCurrentMonth = initArray(lastDayIndexOfCurrentMonth, (index) =>
-    getValidDate(
-      new Date(currentYear, currentMonth, index + 1),
-      minDate,
-      maxDate
-    )
-  );
-
-  const daysOfNextMonth = initArray(
-    TOTAL_DATES_ITEMS -
-      (daysOfPreviousMonth.length + daysOfCurrentMonth.length),
-    (index) =>
-      getValidDate(
-        new Date(currentYear, currentMonth + 1, index + 1),
-        minDate,
-        maxDate
-      )
-  );
-
-  const disablePrevButton =
-    minDate === undefined
-      ? false
-      : !daysOfPreviousMonth.some((date) => date !== undefined) &&
-        minDate >= firstDateOfMonth;
-
-  const disableNextButton =
-    maxDate === undefined
-      ? false
-      : !daysOfNextMonth.some((date) => date !== undefined) ||
-        maxDate <= lastDateOfMonth;
+  const now = new Date();
 
   const onDateChange = (date: Date) => {
     const newDateRange = setStartOrEndDate({
@@ -222,18 +146,12 @@ const CalendarRange = ({
     );
   };
 
-  const onLayout = (e: LayoutChangeEvent) => {
-    const { width, height } = e.nativeEvent.layout;
-    setContentHeight(height);
-    setContentWidth(width);
-  };
-
   return (
     <StyledContainer testID={testID}>
       <StyledCalendarHeader>
         <ContentNavigator
           value={
-            !useMonthPicker ? (
+            !shouldShowMonthPicker ? (
               format('MMMM yyyy', visibleDate)
             ) : (
               <TouchableOpacity
@@ -269,7 +187,7 @@ const CalendarRange = ({
           }
           onPreviousPress={onPreviousPress}
           onNextPress={onNextPress}
-          onPress={useMonthPicker ? undefined : onTitlePress}
+          onPress={shouldShowMonthPicker ? undefined : onTitlePress}
           previousDisabled={disablePrevButton}
           nextDisabled={disableNextButton}
           fontSize="large"

package/src/components/Calendar/__tests__/helper.spec.ts

@@ -1,9 +1,13 @@
+import { noop } from '../../../utils/functions';
 import {
+  getCalendarDate,
   getValidDate,
   initArray,
   isDateInRange,
   isEqDate,
   setStartOrEndDate,
+  shouldUseMonthPicker,
+  getCalendarButtonState,
 } from '../helpers';
 
 describe('initArray', () => {
@@ -176,3 +180,196 @@ describe('setStartOrEndDate', () => {
     });
   });
 });
+
+describe('shouldUseMonthPicker', () => {
+  it('returns correct value', () => {
+    const result = shouldUseMonthPicker(noop);
+    expect(result).toEqual(false);
+  });
+});
+
+describe('getCalendarDate', () => {
+  const mockDate = new Date('2025-08-15');
+  const mockMarkedDates = [new Date('2025-08-10'), new Date('2025-08-20')];
+
+  it('should calculate correct dates for current month', () => {
+    const result = getCalendarDate({
+      visibleDate: mockDate,
+      markedDates: [],
+    });
+
+    expect(result.firstDateOfMonth).toEqual(new Date('2025-08-01'));
+    expect(result.lastDateOfMonth).toEqual(new Date('2025-08-31'));
+    expect(result.daysOfCurrentMonth).toHaveLength(31);
+  });
+
+  it('should handle marked dates correctly', () => {
+    const result = getCalendarDate({
+      visibleDate: mockDate,
+      markedDates: mockMarkedDates,
+    });
+
+    expect(result.parsedMaskedDate[mockMarkedDates[0].toDateString()]).toBe(
+      true
+    );
+    expect(result.parsedMaskedDate[mockMarkedDates[1].toDateString()]).toBe(
+      true
+    );
+    expect(result.parsedMaskedDate[new Date('2025-08-15').toDateString()]).toBe(
+      undefined
+    );
+  });
+
+  it('should calculate correct dates for previous month overflow', () => {
+    const result = getCalendarDate({
+      visibleDate: mockDate,
+      markedDates: [],
+    });
+
+    // August 1, 2025 is a Friday, so we should have 4 days from July
+    expect(result.daysOfPreviousMonth).toHaveLength(4);
+
+    // First visible date should be July 28, 2025
+    const firstVisibleDate = result.daysOfPreviousMonth[0];
+    expect(firstVisibleDate?.getFullYear()).toBe(2025);
+    expect(firstVisibleDate?.getMonth()).toBe(6); // 6 = July
+    expect(firstVisibleDate?.getDate()).toBe(28);
+  });
+
+  it('should calculate correct dates for next month overflow', () => {
+    const result = getCalendarDate({
+      visibleDate: mockDate,
+      markedDates: [],
+    });
+
+    // August 31, 2025 is a Sunday, so we should have 7 days from September
+    expect(result.daysOfNextMonth).toHaveLength(7);
+
+    // First date of next month should be September 1, 2025
+    const firstNextMonthDate = result.daysOfNextMonth[0];
+    expect(firstNextMonthDate?.getFullYear()).toBe(2025);
+    expect(firstNextMonthDate?.getMonth()).toBe(8); // 8 = September
+    expect(firstNextMonthDate?.getDate()).toBe(1);
+  });
+
+  it('should respect minDate constraint', () => {
+    const result = getCalendarDate({
+      visibleDate: mockDate,
+      markedDates: [],
+      minDate: new Date('2025-08-01'), // Set minDate to start of August
+    });
+
+    // All dates from previous month should be undefined
+    const invalidDate = result.daysOfPreviousMonth[0];
+    expect(invalidDate).toBeUndefined();
+
+    // First date of current month should be valid
+    const validDate = result.daysOfCurrentMonth[0];
+    expect(validDate).toBeDefined();
+  });
+
+  it('should respect maxDate constraint', () => {
+    const result = getCalendarDate({
+      visibleDate: mockDate,
+      markedDates: [],
+      maxDate: new Date('2025-08-31'), // Set maxDate to end of August
+    });
+
+    // Current month dates should be valid
+    const validDate = result.daysOfCurrentMonth[0];
+    expect(validDate).toBeDefined();
+
+    // All dates from next month should be undefined
+    const invalidDate = result.daysOfNextMonth[0];
+    expect(invalidDate).toBeUndefined();
+  });
+
+  it('should handle edge case when month starts on Sunday', () => {
+    // Using March 2026 which starts on Sunday
+    const sundayDate = new Date('2026-03-01');
+    const result = getCalendarDate({
+      visibleDate: sundayDate,
+      markedDates: [],
+    });
+
+    // When month starts on Sunday, there should be 6 days from previous month
+    expect(result.daysOfPreviousMonth).toHaveLength(6);
+    expect(result.firstDateOfMonth).toEqual(new Date('2026-03-01'));
+  });
+});
+
+describe('calculateCalendarNavigationButtons', () => {
+  const mockVisibleDate = new Date('2025-08-15');
+
+  it('should enable both buttons when no min/max dates are set', () => {
+    const result = getCalendarButtonState({
+      visibleDate: mockVisibleDate,
+      markedDates: [],
+    });
+
+    expect(result.disablePrevButton).toBe(false);
+    expect(result.disableNextButton).toBe(false);
+  });
+
+  it('should disable prev button when minDate is set and no valid previous days', () => {
+    const minDate = new Date('2025-08-01');
+    const result = getCalendarButtonState({
+      visibleDate: mockVisibleDate,
+      markedDates: [],
+      minDate,
+    });
+
+    expect(result.disablePrevButton).toBe(true);
+    expect(result.disableNextButton).toBe(false);
+  });
+
+  it('should disable next button when maxDate is set and no valid next days', () => {
+    const maxDate = new Date('2025-08-31');
+    const result = getCalendarButtonState({
+      visibleDate: mockVisibleDate,
+      markedDates: [],
+      maxDate,
+    });
+
+    expect(result.disablePrevButton).toBe(false);
+    expect(result.disableNextButton).toBe(true);
+  });
+
+  it('should enable prev button when minDate is set but valid previous days exist', () => {
+    const minDate = new Date('2025-07-15');
+    const result = getCalendarButtonState({
+      visibleDate: mockVisibleDate,
+      markedDates: [],
+      minDate,
+    });
+
+    expect(result.disablePrevButton).toBe(false);
+    expect(result.disableNextButton).toBe(false);
+  });
+
+  it('should enable next button when maxDate is set but valid next days exist', () => {
+    const maxDate = new Date('2025-09-15');
+    const result = getCalendarButtonState({
+      visibleDate: mockVisibleDate,
+      markedDates: [],
+      maxDate,
+    });
+
+    expect(result.disablePrevButton).toBe(false);
+    expect(result.disableNextButton).toBe(false);
+  });
+
+  it('should handle both min and max dates together', () => {
+    const minDate = new Date('2025-08-01');
+    const maxDate = new Date('2025-08-31');
+    const result = getCalendarButtonState({
+      visibleDate: mockVisibleDate,
+      markedDates: [],
+      minDate,
+      maxDate,
+    });
+
+    expect(result.disablePrevButton).toBe(true);
+    expect(result.disableNextButton).toBe(true);
+  });
+});

package/src/components/Calendar/constants.ts

@@ -0,0 +1,9 @@
+export const DAYS_OF_WEEK = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+
+// Sunday first column => 0
+// Sunday last column  => 1
+export const WEEK_INDEX_OFFSET = 1;
+export const SUNDAY_INDEX = 6;
+
+// Always render 7 rows x 6 items for consistent layout
+export const TOTAL_DATES_ITEMS = 7 * 6;

package/src/components/Calendar/helpers.ts

@@ -1,3 +1,11 @@
+import { noop } from '../../utils/functions';
+import {
+  SUNDAY_INDEX,
+  TOTAL_DATES_ITEMS,
+  WEEK_INDEX_OFFSET,
+} from './constants';
+import { CalendarProps, ParsedMaskedDate } from './types';
+
 export const initArray = <T>(length: number, func: (value: number) => T): T[] =>
   Array.from(Array(length)).map((_, index) => func(index));
 
@@ -101,3 +109,107 @@ export const setStartOrEndDate = ({
     endDate: undefined,
   };
 };
+
+export const shouldUseMonthPicker = (
+  onMonthChange: CalendarProps['onMonthChange']
+) => onMonthChange !== noop;
+
+export const getCalendarDate = ({
+  visibleDate,
+  markedDates = [],
+  minDate,
+  maxDate,
+}: CalendarProps) => {
+  const currentMonth = visibleDate.getMonth();
+  const currentYear = visibleDate.getFullYear();
+  const parsedMaskedDate: ParsedMaskedDate = markedDates.reduce(
+    (current, markedDate) => ({
+      ...current,
+      [markedDate.toDateString()]: true,
+    }),
+    {}
+  );
+
+  const firstDateOfMonth = new Date(currentYear, currentMonth, 1);
+  const lastDateOfMonth = new Date(currentYear, currentMonth + 1, 0);
+
+  const lastDateOfPreviousMonth = new Date(currentYear, currentMonth, 0);
+
+  // Index of day in week is shifted by 1 due to Sunday is the last column
+  const firstDayWeekIndexOfMonth =
+    firstDateOfMonth.getDay() === 0
+      ? SUNDAY_INDEX
+      : firstDateOfMonth.getDay() - WEEK_INDEX_OFFSET;
+
+  const lastDayIndexOfCurrentMonth = lastDateOfMonth.getDate();
+  const lastDayIndexOfPreviousMonth = lastDateOfPreviousMonth.getDate();
+
+  const daysOfPreviousMonth = initArray(firstDayWeekIndexOfMonth, (index) => {
+    const reversedIndex = firstDayWeekIndexOfMonth - index - 1;
+    const count = lastDayIndexOfPreviousMonth - reversedIndex;
+    return getValidDate(
+      new Date(currentYear, currentMonth - 1, count),
+      minDate,
+      maxDate
+    );
+  });
+
+  const daysOfCurrentMonth = initArray(lastDayIndexOfCurrentMonth, (index) =>
+    getValidDate(
+      new Date(currentYear, currentMonth, index + 1),
+      minDate,
+      maxDate
+    )
+  );
+
+  const daysOfNextMonth = initArray(
+    TOTAL_DATES_ITEMS -
+      (daysOfPreviousMonth.length + daysOfCurrentMonth.length),
+    (index) =>
+      getValidDate(
+        new Date(currentYear, currentMonth + 1, index + 1),
+        minDate,
+        maxDate
+      )
+  );
+
+  return {
+    firstDateOfMonth,
+    lastDateOfMonth,
+    parsedMaskedDate,
+    daysOfPreviousMonth,
+    daysOfCurrentMonth,
+    daysOfNextMonth,
+  };
+};
+
+export const getCalendarButtonState = ({
+  visibleDate,
+  markedDates,
+  minDate,
+  maxDate,
+}: CalendarProps) => {
+  const {
+    daysOfPreviousMonth,
+    daysOfNextMonth,
+    firstDateOfMonth,
+    lastDateOfMonth,
+  } = getCalendarDate({ visibleDate, markedDates, minDate, maxDate });
+
+  const disablePrevButton =
+    minDate === undefined
+      ? false
+      : !daysOfPreviousMonth.some((date) => date !== undefined) &&
+        minDate >= firstDateOfMonth;
+
+  const disableNextButton =
+    maxDate === undefined
+      ? false
+      : !daysOfNextMonth.some((date) => date !== undefined) ||
+        maxDate <= lastDateOfMonth;
+
+  return {
+    disablePrevButton,
+    disableNextButton,
+  };
+};