@lazerlen/legend-calendar 1.3.0 → 1.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lazerlen/legend-calendar",
-  "version": "1.3.0",
+  "version": "1.4.1",
   "private": false,
   "description": "A better calendar for React Native.",
   "repository": {

package/src/components/CalendarList.stories.tsx

@@ -249,6 +249,57 @@ export const DatePicker = () => {
   );
 };
 
+export function AutoScrollToActiveRange() {
+  const futureDate = addMonths(today, 6);
+  const futureDateEnd = addMonths(futureDate, 1);
+
+  return (
+    <VStack grow spacing={20}>
+      <Text>
+        This calendar has a date range 6 months in the future. It automatically
+        scrolls to show the active range on mount.
+      </Text>
+      <View style={{ flex: 1, width: "100%" }}>
+        <Calendar.List
+          calendarActiveDateRanges={[
+            {
+              startId: toDateId(futureDate),
+              endId: toDateId(futureDateEnd),
+            },
+          ]}
+          onCalendarDayPress={loggingHandler("onCalendarDayPress")}
+        />
+      </View>
+    </VStack>
+  );
+}
+
+export function AutoScrollDisabled() {
+  const futureDate = addMonths(today, 6);
+  const futureDateEnd = addMonths(futureDate, 1);
+
+  return (
+    <VStack grow spacing={20}>
+      <Text>
+        This calendar has auto-scroll disabled. It opens at the current month
+        even though the active range is 6 months in the future.
+      </Text>
+      <View style={{ flex: 1, width: "100%" }}>
+        <Calendar.List
+          calendarActiveDateRanges={[
+            {
+              startId: toDateId(futureDate),
+              endId: toDateId(futureDateEnd),
+            },
+          ]}
+          calendarInitialScrollToActiveRange={false}
+          onCalendarDayPress={loggingHandler("onCalendarDayPress")}
+        />
+      </View>
+    </VStack>
+  );
+}
+
 export const TwoCalendarListsMounted = () => {
   return (
     <VStack grow spacing={48}>

package/src/components/CalendarList.tsx

@@ -8,7 +8,12 @@ import { StyleSheet, View } from "react-native";
 
 import type { CalendarProps } from "@/components/Calendar";
 import { Calendar } from "@/components/Calendar";
-import { getWeekOfMonth, startOfMonth, toDateId } from "@/helpers/dates";
+import {
+  fromDateId,
+  getWeekOfMonth,
+  startOfMonth,
+  toDateId,
+} from "@/helpers/dates";
 import type { CalendarMonth } from "@/hooks/useCalendarList";
 import { getHeightForMonth, useCalendarList } from "@/hooks/useCalendarList";
 import { activeDateRangesStore } from "@/hooks/useOptimizedDayMetadata";
@@ -69,6 +74,20 @@ export interface CalendarListProps
    */
   calendarInitialMonthId?: string;
 
+  /**
+   * When enabled, automatically scrolls to the month containing the start date
+   * of the first active range on mount. Only applies when
+   * `calendarActiveDateRanges` has at least one range with a `startId`.
+   *
+   * Takes precedence over `calendarInitialMonthId` when enabled and a valid
+   * range exists.
+   *
+   * Uses `initialScrollIndex` internally, so scrolling only happens on mount.
+   *
+   * @defaultValue true
+   */
+  calendarInitialScrollToActiveRange?: boolean;
+
   /**
    * Overwrites the default `Calendar` component.
    *
@@ -113,6 +132,7 @@ export function CalendarList({
   const {
     // List-related props
     calendarInitialMonthId,
+    calendarInitialScrollToActiveRange = true,
     calendarPastScrollRangeInMonths = 12,
     calendarFutureScrollRangeInMonths = 12,
     calendarFirstDayOfWeek = "sunday",
@@ -198,6 +218,25 @@ export function CalendarList({
     calendarMinDateId,
   });
 
+  // Compute the scroll index based on active date range if enabled
+  let computedInitialScrollIndex = initialMonthIndex;
+  if (calendarInitialScrollToActiveRange && calendarActiveDateRanges) {
+    const firstRange = calendarActiveDateRanges[0];
+    if (firstRange?.startId) {
+      // Convert the startId to the first day of that month
+      const startDate = fromDateId(firstRange.startId);
+      const monthId = toDateId(startOfMonth(startDate));
+
+      // Find the index of this month in the monthList
+      const monthIndex = monthList.findIndex((month) => month.id === monthId);
+
+      // Use this index if found, otherwise fall back to initialMonthIndex
+      if (monthIndex !== -1) {
+        computedInitialScrollIndex = monthIndex;
+      }
+    }
+  }
+
   const monthListWithCalendarProps = monthList.map((month) => ({
     ...month,
     calendarProps,
@@ -320,7 +359,7 @@ export function CalendarList({
       drawDistance={560}
       estimatedItemSize={273}
       getFixedItemSize={getFixedItemSize}
-      initialScrollIndex={initialMonthIndex}
+      initialScrollIndex={computedInitialScrollIndex}
       keyExtractor={keyExtractor}
       maintainVisibleContentPosition
       onEndReached={handleOnEndReached}

package/src/hooks/useCalendarList.tsx

@@ -156,6 +156,9 @@ export const useCalendarList = ({
    * Append new months to the list.
    */
   const appendMonths = (numberOfMonths: number) => {
+    if (numberOfMonths <= 0) {
+      return monthList;
+    }
     // Last month + 1
     const startingMonth = addMonths(monthList[monthList.length - 1].date, 1);
 
@@ -188,6 +191,9 @@ export const useCalendarList = ({
   };
 
   const prependMonths = (numberOfMonths: number) => {
+    if (numberOfMonths <= 0) {
+      return monthList;
+    }
     const endingMonth = subMonths(monthList[0].date, 1);
 
     const startingMonth = getStartingMonth(

package/CHANGELOG.md

@@ -1,127 +0,0 @@
-# @marceloterreiro/flash-calendar
-
-## 1.0.0
-
-### Major Changes
-
-- 7eb13ae: Remove CalendarScrollComponent prop from Calendar.List
-
-  The `CalendarScrollComponent` prop has been removed from `Calendar.List`. LegendList is now the only supported list implementation and cannot be replaced.
-
-  **Migration:**
-
-  If you were using `CalendarScrollComponent` to integrate with bottom sheets or other custom scroll containers:
-
-  1. Wrap `Calendar.List` in your custom scroll container, or
-  2. Use the standalone `Calendar` component with your own list implementation
-
-  This change simplifies the API and reduces maintenance burden by focusing on a single, well-supported list implementation.
-
-## 1.6.0
-
-### Minor Changes
-
-- 256b67d: Add callback support to `activeDayFiller` for dynamic styling based on day metadata
-
-## 1.5.0
-
-### Minor Changes
-
-- 3b65183: Fixes an infinite loop triggered when calendarMaxDateId is today and calendarFutureScrollRangeInMonths is one.
-
-## 1.4.0
-
-### Minor Changes
-
-- f291f09: Add support for passing custom pressable components
-
-## 1.3.0
-
-### Minor Changes
-
-- b66668c: Added support for react-native-web Pressable InteractionState to support hovered and focused alongside pressed
-
-## 1.2.0
-
-### Minor Changes
-
-- f3b9ec8: Add the ability to pass TextProps to the <Text> fields especially when supporting accessibility
-
-## 1.1.0
-
-### Minor Changes
-
-- 863edce: Add the ability to mount more than one calendar at once
-
-## 1.0.0
-
-### Major Changes
-
-- 9bf22ed: Flash Calendar 1.0.0 🚢 🎉
-
-  This release officially marks the package as production-ready (`1.0.0`).
-  While it's been stable since the first release, bumping to `1.0.0` was something
-  I had in mind for a while.
-
-  - New: Add `.scrollToMonth` and `.scrollToDate`, increasing the options available for imperative scrolling.
-
-  ## Breaking changes
-
-  This release introduces one small change in behavior if your app uses
-  imperative scrolling. Previously, `.scrollToDate` would scroll to the month
-  containing the date instead of the exact date. Now, `.scrollToDate` scrolls
-  to the exact date as implied by the name.
-
-  If you intentionally want to scroll to the month instead, a new `.scrollToMonth`
-  method is available (same signature).
-
-  I don't expect this to cause any issues, but worth mentioned
-  nonetheless.
-
-## 0.0.9
-
-### Patch Changes
-
-- 6d00992: - Add an optional `calendarColorScheme` prop that enables overriding the color scheme used by Flash Calendar.
-
-## 0.0.8
-
-### Patch Changes
-
-- 4fe1276: Remove `borderRadius` type from `itemDay.container`, given it gets overwritten by the base component.
-
-## 0.0.7
-
-### Patch Changes
-
-- ee6b4e5: Fix incorrect scroll position when using the `calendarMinDateId` prop
-
-## 0.0.6
-
-### Patch Changes
-
-- 5363835: Fix `<Calendar.List />` losing track of the active date ranges when the list is scrolled past certain amount
-
-## 0.0.5
-
-### Patch Changes
-
-- cbc7728: Update the registry to Github Packages
-
-## 0.0.4
-
-### Patch Changes
-
-- 801bc18: Fix locale not being forwarded to `Calendar` component
-
-## 0.0.3
-
-### Patch Changes
-
-- e680a96: Add the `calendarFormatLocale` prop
-
-## 0.0.2
-
-### Patch Changes
-
-- First release to test the publish scripts