Fix scroll position issue (#19)

.changeset/mean-plants-shop.md

@@ -0,0 +1,5 @@
+---
+"@marceloterreiro/flash-calendar": patch
+---
+
+Fix incorrect scroll position when using the `calendarMinDateId` prop

apps/example/src/components/GithubIssues/CalendarListGithubIssues.stories.tsx

@@ -1,5 +1,7 @@
-import { Calendar } from "@marceloterreiro/flash-calendar";
+import { Calendar, toDateId } from "@marceloterreiro/flash-calendar";
 import type { Meta } from "@storybook/react";
+import React, { useState } from "react";
+import { Text, View } from "react-native";
 
 const CalendarMeta: Meta<typeof Calendar> = {
   title: "Calendar.List/Github Issues",
@@ -33,3 +35,27 @@ export const Issue11 = () => {
     />
   );
 };
+
+const today = toDateId(new Date());
+
+// See more: https://github.com/MarceloPrado/flash-calendar/issues/16
+export const Issue16 = () => {
+  const [selectedDate, setSelectedDate] = useState(today);
+
+  return (
+    <View style={{ flex: 1 }}>
+      <Text>Selected date: {selectedDate}</Text>
+      <Calendar.List
+        calendarActiveDateRanges={[
+          {
+            startId: "2024-02-25",
+            endId: "2024-03-02",
+          },
+        ]}
+        calendarInitialMonthId="2024-01-01"
+        calendarMinDateId="2023-02-27"
+        onCalendarDayPress={setSelectedDate}
+      />
+    </View>
+  );
+};

packages/flash-calendar/src/hooks/useCalendarList.test.ts

@@ -358,4 +358,24 @@ describe("useCalendarList", () => {
     const currentMonthList = result.current.monthList;
     expect(currentMonthList).toHaveLength(1);
   });
+
+  describe("github issues", () => {
+    it("#16: Incorrect scroll position when setting calendarMinDateId", () => {
+      const { result } = renderHook(() =>
+        useCalendarList({
+          calendarInitialMonthId: "2024-01-05",
+          calendarMinDateId: "2023-02-27",
+          calendarFirstDayOfWeek: "sunday",
+          calendarFutureScrollRangeInMonths: 12,
+          calendarPastScrollRangeInMonths: 12,
+        })
+      );
+
+      const { monthList, initialMonthIndex } = result.current;
+
+      expect(monthList[0].id).toBe("2023-02-01");
+      expect(initialMonthIndex).toBe(11);
+      expect(monthList.at(-1)?.id).toBe("2025-01-01");
+    });
+  });
 });

packages/flash-calendar/src/hooks/useCalendarList.tsx

@@ -11,6 +11,7 @@ import {
   getWeeksInMonth,
 } from "@/helpers/dates";
 import type { UseCalendarParams } from "@/hooks/useCalendar";
+import { pipe } from "@/helpers/functions";
 
 export interface CalendarMonth {
   id: string;
@@ -101,9 +102,10 @@ const getStartingMonth = (
   const newStartingMonthId = toDateId(startingMonthFromRange);
   const safeMinDateId = calendarMinDateId ?? newStartingMonthId;
 
-  // We've exceeded the min date
+  // We've exceeded the min date.
   return safeMinDateId > newStartingMonthId
-    ? fromDateId(safeMinDateId)
+    ? // Normalize to start of month since each month ID is represented by the first day of month
+      pipe(fromDateId(safeMinDateId), startOfMonth)
     : startingMonthFromRange;
 };
 
@@ -119,10 +121,13 @@ export const useCalendarList = ({
   calendarMaxDateId,
   calendarMinDateId,
 }: UseCalendarListParams) => {
+  // Initialize key values
   const { initialMonth, initialMonthId } = useMemo(() => {
     const baseDate = calendarInitialMonthId
       ? fromDateId(calendarInitialMonthId)
       : fromDateId(toDateId(new Date()));
+
+    // Normalize to start of month since each month ID is represented by the first day of month
     const baseStartOfMonth = startOfMonth(baseDate);
 
     return {