@sunsama/event-calendar 0.13.4 → 0.13.6

package/src/components/edit-event-container.tsx

@@ -18,7 +18,7 @@ import Animated, {
   useSharedValue,
 } from "react-native-reanimated";
 import useAutoScroll from "../hooks/use-auto-scroll";
-import { type CalendarEvent, EventExtend } from "../types";
+import { EventExtend } from "../types";
 import gesturePan from "../utils/pan-edit-event-gesture";
 import DragBar from "../components/drag-bar";
 import { StyleSheet } from "react-native";
@@ -77,9 +77,9 @@ const EditEventContainer = memo(
     });
 
     const calculateHeight = useCallback(
-      (event: CalendarEvent, zoom: number) => {
-        const start = new Date(event.start);
-        const end = new Date(event.end);
+      (startStr: string, endStr: string, zoom: number) => {
+        const start = new Date(startStr);
+        const end = new Date(endStr);
 
         // We can't use the position.height as that has a minimum time of 30 minutes, which might not be relevant to
         // our actual duration, meaning we'll have to calculate the height based on the start and end times
@@ -93,23 +93,31 @@ const EditEventContainer = memo(
         return;
       }
 
-      calculateHeight(editingEvent.event, zoomLevel.value);
+      calculateHeight(
+        editingEvent.event.start,
+        editingEvent.event.end,
+        zoomLevel.value
+      );
       currentY.value = editingEvent.position.top * zoomLevel.value;
     }, [height, editingEvent, currentY, zoomLevel, timezone, calculateHeight]);
 
+    const eventStart = editingEvent?.event.start;
+    const eventEnd = editingEvent?.event.end;
+    const eventTop = editingEvent?.position.top;
     useAnimatedReaction(
       () => zoomLevel.value,
       (zoom) => {
-        if (editingEvent) {
-          runOnJS(calculateHeight)(editingEvent.event, zoom);
-          currentY.value = editingEvent.position.top * zoom;
+        if (eventStart && eventEnd) {
+          runOnJS(calculateHeight)(eventStart, eventEnd, zoom);
+          currentY.value = (eventTop || 0) * zoom;
         }
       },
-      [height, currentY, zoomLevel, editingEvent]
+      [height, currentY, zoomLevel, eventStart, eventEnd, eventTop]
     );
 
+    const hasEditingEvent = !!editingEvent;
     const styleAnimatedPosition = useAnimatedStyle(() => {
-      if (!editingEvent) {
+      if (!hasEditingEvent) {
         return { opacity: 0 };
       }
 
@@ -121,7 +129,7 @@ const EditEventContainer = memo(
         opacity: 1,
         width: "100%",
       };
-    }, [editingEvent]);
+    }, [hasEditingEvent, height, currentY]);
 
     const startY = useSharedValue(0);
 

package/src/components/timed-event-container.tsx

@@ -103,16 +103,18 @@ const TimedEventContainerInner = <T extends CalendarEvent>({
     ).activateAfterLongPress(500)
   );
 
+  const eventStart = layout.event.start;
+  const eventEnd = layout.event.end;
   useAnimatedReaction(
     () => zoomLevel.value,
     (newZoomLevel) => {
-      const start = new Date(layout.event.start);
-      const end = new Date(layout.event.end);
+      const start = new Date(eventStart);
+      const end = new Date(eventEnd);
       const diff = (end.valueOf() - start.valueOf()) / 60_000;
 
       height.value = Math.max(MIN_EVENT_HEIGHT_PX, newZoomLevel * diff);
     },
-    [layout.event]
+    [eventStart, eventEnd]
   );
 
   useAnimatedReaction(
@@ -128,25 +130,29 @@ const TimedEventContainerInner = <T extends CalendarEvent>({
     [height, layout.event, renderEvent]
   );
 
+  const eventId = layout.event.id;
+  const layoutPosition = layout.position;
+  const isEditingEventId = isEditing?.event.id;
+
   const stylePosition = useAnimatedStyle(() => {
     const basePosition: any = {
       position: "absolute",
       height: height.value,
       top: top.value,
       opacity: 1,
-      width: layout.position.width,
-      marginLeft: layout.position.marginLeft,
+      width: layoutPosition.width,
+      marginLeft: layoutPosition.marginLeft,
 
       // This is to prevent the event from being clickable while editing
-      pointerEvents: isEditing ? "none" : "auto",
+      pointerEvents: isEditingEventId ? "none" : "auto",
     };
 
-    if (isEditing?.event.id === layout.event.id) {
+    if (isEditingEventId === eventId) {
       basePosition.opacity = 0.5;
     }
 
     return basePosition;
-  }, [layout, isEditing]);
+  }, [layoutPosition, isEditingEventId, eventId]);
 
   return (
     <GestureDetector gesture={gestures}>

package/src/components/zoom-provider.tsx

@@ -38,7 +38,10 @@ export default function ZoomProvider({
     maximumHour,
     onZoomChange,
   } = useContext(ConfigProvider);
-  const previewScale = useSharedValue(zoomLevel.get());
+  // Always overwritten in onStart before onUpdate reads it, so the initial
+  // value here is never actually used — avoids reading zoomLevel.value
+  // during render, which Reanimated strict mode warns about.
+  const previewScale = useSharedValue(0);
   const focalTime = useSharedValue(0);
   const screenFocalY = useSharedValue(0);
 

package/src/utils/__tests___/date-utils-extended.test.ts

@@ -7,6 +7,7 @@ import {
   daysInRange,
   startOfUserWeek,
   computeCalendarDateRange,
+  normalizeEventDates,
 } from "../date-utils";
 import { CalendarEvent } from "../../types";
 
@@ -301,6 +302,39 @@ describe("startOfUserWeek", () => {
   });
 });
 
+describe("normalizeEventDates", () => {
+  it("should convert Date start/end to ISO strings", () => {
+    const evt = {
+      ...event("", ""),
+      start: new Date("2023-01-01T08:00:00.000Z"),
+      end: new Date("2023-01-01T09:00:00.000Z"),
+    } as unknown as CalendarEvent;
+
+    const normalized = normalizeEventDates(evt);
+
+    expect(normalized.start).toBe("2023-01-01T08:00:00.000Z");
+    expect(normalized.end).toBe("2023-01-01T09:00:00.000Z");
+  });
+
+  it("should leave string start/end untouched and return the same reference", () => {
+    const evt = event("2023-01-01T08:00:00Z", "2023-01-01T09:00:00Z");
+
+    expect(normalizeEventDates(evt)).toBe(evt);
+  });
+
+  it("should normalize only the fields that are Date instances", () => {
+    const evt = {
+      ...event("2023-01-01T08:00:00.000Z", ""),
+      end: new Date("2023-01-01T09:00:00.000Z"),
+    } as unknown as CalendarEvent;
+
+    const normalized = normalizeEventDates(evt);
+
+    expect(normalized.start).toBe("2023-01-01T08:00:00.000Z");
+    expect(normalized.end).toBe("2023-01-01T09:00:00.000Z");
+  });
+});
+
 describe("computeCalendarDateRange", () => {
   it("should return single day for 1day view", () => {
     const result = computeCalendarDateRange("2023-10-10", "UTC", "1day", 0);

package/src/utils/__tests___/generate-event-layout.test.ts

@@ -38,6 +38,35 @@ describe("generateEventLayouts", () => {
     expect(dayLayout.partDayEventsLayout[0].event.id).toBe("2");
   });
 
+  it("should normalize Date start/end to strings in the resulting layout", () => {
+    // Consumers may pass native Date objects even though CalendarEvent types
+    // start/end as string; layouts flow into Reanimated worklet closures that
+    // can't clone a Date, so generateEventLayouts must normalize them first.
+    const events = [
+      {
+        id: "1",
+        calendarId: "primary-calendar",
+        title: "Timed Event",
+        start: new Date("2023-10-10T08:30:00Z"),
+        end: new Date("2023-10-10T09:30:00Z"),
+      },
+    ] as unknown as CalendarEvent[];
+
+    const layouts = generateEventLayouts({
+      startCalendarDate: "2023-10-10",
+      endCalendarDate: "2023-10-10",
+      events,
+      timezone: "UTC",
+      userCalendarId: "primary-calendar",
+    });
+
+    const { event } = layouts["2023-10-10"]!.partDayEventsLayout[0]!;
+    expect(typeof event.start).toBe("string");
+    expect(typeof event.end).toBe("string");
+    expect(event.start).toBe("2023-10-10T08:30:00.000Z");
+    expect(event.end).toBe("2023-10-10T09:30:00.000Z");
+  });
+
   it("should handle events with overlapping times", () => {
     const events: CalendarEvent[] = [
       {

package/src/utils/date-utils.ts

@@ -24,6 +24,24 @@ function toDate(date: Date | string): Date {
   return typeof date === "string" ? new Date(date) : date;
 }
 
+// Event layouts flow into Reanimated worklet closures (useAnimatedReaction,
+// useAnimatedStyle, gesture handlers), which can't clone a `Date` instance
+// across the JS/UI thread boundary ("[Worklets] Cannot copy value of type
+// 'Date'."). Consumers may pass `start`/`end` as `Date` objects even though
+// `CalendarEvent` types them as `string`, so normalize to ISO strings as
+// soon as events enter the layout pipeline.
+export const normalizeEventDates = <T extends CalendarEvent>(event: T): T => {
+  if (!isDate(event.start) && !isDate(event.end)) {
+    return event;
+  }
+
+  return {
+    ...event,
+    start: isDate(event.start) ? event.start.toISOString() : event.start,
+    end: isDate(event.end) ? event.end.toISOString() : event.end,
+  };
+};
+
 export const generatePrefabHours = (
   timeFormat: string = "HH:mm"
 ): PrefabHour[] => {

package/src/utils/generate-event-layouts.ts

@@ -10,6 +10,7 @@ import {
   getDuration,
   getDurationInDays,
   isAllDayOrSpansMidnight,
+  normalizeEventDates,
   startOfUserWeek,
 } from "../utils/date-utils";
 import computePositioning from "../utils/compute-positioning";
@@ -42,6 +43,10 @@ export const generateEventLayouts = <T extends CalendarEvent>({
   startDayOfWeekOffset = 0,
   timezone,
 }: GenerateEventLayouts<T>) => {
+  // Normalize start/end to strings before events flow into any layout object,
+  // since layouts get closed over by Reanimated worklets that can't clone Dates.
+  events = events.map(normalizeEventDates);
+
   // Calculate spacial layout for CalendarViewDay events
   // in month view, midnight-spanning part-day events are rendered as all-day multi-day
   const [allDayEvents, partDayEvents] = _partition([...events], (event) =>

package/src/utils/pan-edit-event-gesture.ts

@@ -16,16 +16,17 @@ const gesturePan = <T extends CalendarEvent>(
   startEditing?: () => void,
   isDragging?: SharedValue<boolean>,
   autoScrollOffset?: SharedValue<number>
-) =>
-  Gesture.Pan()
+) => {
+  const hasIsEditing = !!isEditing;
+  return Gesture.Pan()
     .blocksExternalGesture(refNewEvent)
     .onStart(() => {
       if (startEditing) {
-        if (isEditing) {
+        if (hasIsEditing) {
           return;
         }
 
-        if (!isEditing) {
+        if (!hasIsEditing) {
           runOnJS(startEditing)();
         }
       }
@@ -69,5 +70,6 @@ const gesturePan = <T extends CalendarEvent>(
     .onFinalize(() => {
       if (isDragging) isDragging.value = false;
     });
+};
 
 export default gesturePan;