fix: include the min

Author: jason89521

packages/react-use-calendar-component/src/lib/utils/getDateInfoByIndex.ts

@@ -26,7 +26,7 @@ export function getDateInfoByIndex(
   // If this offset is larger than or equal to the `numberOfDays`, means that the date at the current index is in the next month.
   // Otherwise means that the date at the current index is at the target month.
   const offset = index - weekDayOfFirstDay;
-  const dayOfMonth =
+  const monthDay =
     (offset < 0 ? prevNumberOfDays + offset : offset % numberOfDays) + 1;
   const monthOffset = offset < 0 ? -1 : offset >= numberOfDays ? 1 : 0;
   const { dateYear, dateMonth } = (() => {
@@ -56,8 +56,8 @@ export function getDateInfoByIndex(
     year: dateYear,
     month: dateMonth,
     weekDay: index % 7,
-    monthDay: dayOfMonth,
+    monthDay,
     monthStatus,
-    isToday: isToday(dateYear, dateMonth, dayOfMonth),
+    isToday: isToday(dateYear, dateMonth, monthDay),
   };
 }

packages/react-use-calendar-component/src/lib/utils/isExcludedDate.ts

@@ -1,16 +1,16 @@
 import type { ExcludedDates } from '../types';
 import { isSameDate } from './isSameDate';
 
-function largerThan(a: Date, b: Date) {
-  return a.getTime() > b.getTime();
+function lessThan(a: Date, b: Date) {
+  return a.getTime() < b.getTime();
 }
 
 export function isExcludedDate(
   date: Date,
   { min, max, arbitrary }: ExcludedDates
 ) {
-  if (min && !largerThan(date, min)) return true;
-  if (max && largerThan(date, max)) return true;
+  if (min && lessThan(date, min)) return true;
+  if (max && !lessThan(date, max)) return true;
   if (arbitrary && !!arbitrary.find(d => isSameDate(d, date))) return true;
 
   return false;

packages/react-use-calendar-component/src/test/getDateInfoByIndex.test.ts

@@ -0,0 +1,98 @@
+import { act, renderHook } from '@testing-library/react';
+import { useState } from 'react';
+
+import useCalendarComponent from '../lib';
+import type { ExcludedDates } from '../lib/types';
+
+// use 2022-10-01 to test
+const now = new Date(2022, 9, 1);
+const nowYear = now.getFullYear();
+const nowMonth = now.getMonth();
+
+describe('useCalendarComponent', () => {
+  it('should generate correct calendar cell', () => {
+    jest.useFakeTimers({ now });
+    const { result } = renderHook(() => useCalendarComponent());
+    const cells = result.current.getDateCellInfos();
+    const previousCells = cells.splice(0, 6);
+    const currentCells = cells.splice(0, 31);
+    const nextCells = cells;
+
+    previousCells.forEach(({ year, month, monthDay, monthStatus }, index) => {
+      expect(year).toBe(nowYear);
+      expect(month).toBe(nowMonth - 1);
+      expect(monthDay).toBe(25 + index);
+      expect(monthStatus).toBe('previous');
+    });
+    currentCells.forEach(({ year, month, monthDay, monthStatus }, index) => {
+      expect(year).toBe(nowYear);
+      expect(month).toBe(nowMonth);
+      expect(monthDay).toBe(1 + index);
+      expect(monthStatus).toBe('current');
+    });
+    nextCells.forEach(({ year, month, monthDay, monthStatus }, index) => {
+      expect(year).toBe(nowYear);
+      expect(month).toBe(nowMonth + 1);
+      expect(monthDay).toBe(1 + index);
+      expect(monthStatus).toBe('next');
+    });
+  });
+
+  it('should select the date cell correctly with single mode', () => {
+    jest.useFakeTimers({ now });
+    const { result } = renderHook(() => {
+      const [value, setValue] = useState(now);
+      return { ...useCalendarComponent({ value, onChange: setValue }), value };
+    });
+    const cells = result.current.getDateCellInfos();
+    // 2022-10-01
+    expect(cells[6]).toMatchObject({
+      isToday: true,
+      isSelected: true,
+      isExcluded: false,
+    });
+    expect(result.current.value).toEqual(now);
+
+    // select the date at previous month
+    act(() => {
+      // 2022-09-25
+      cells[0]?.selectThisDate();
+    });
+    expect(result.current.value).toEqual(new Date(2022, 8, 25));
+    // select the date at next month
+    act(() => {
+      // 2022-11-05
+      cells.at(-1)?.selectThisDate();
+    });
+    expect(result.current.value).toEqual(new Date(2022, 10, 5));
+  });
+
+  it('should distinguish whether a date is excluded', () => {
+    jest.useFakeTimers({ now });
+    const excludedDates: ExcludedDates = {
+      min: now,
+      max: new Date(2022, 10, 1),
+      arbitrary: [new Date(2022, 9, 15)],
+    };
+    const { result } = renderHook(
+      excludedDates => useCalendarComponent({ excludedDates }),
+      {
+        initialProps: excludedDates,
+      }
+    );
+    const cells = result.current.getDateCellInfos();
+    const previousCells = cells.splice(0, 6);
+    const currentCells = cells.splice(0, 31);
+    const nextCells = cells;
+    previousCells.forEach(({ isExcluded }) => {
+      expect(isExcluded).toBe(true);
+    });
+    currentCells.forEach(({ monthDay, isExcluded }) => {
+      if (monthDay === 15) expect(isExcluded).toBe(true);
+      else expect(isExcluded).toBe(false);
+    });
+    nextCells.forEach(({ isExcluded }) => {
+      expect(isExcluded).toBe(true);
+    });
+  });
+});