@sunsama/event-calendar 0.2.5 → 0.2.7

package/src/index.tsx

@@ -14,52 +14,52 @@ import type { CalendarEvent, Config, onCreateEvent, ThemeStyle } from "./types";
 
 export * from "./types";
 
-type EventCalenderProps = {
+type EventCalenderProps<T extends CalendarEvent> = {
   canCreateEvents?: boolean;
-  canEditEvent?: Config["canEditEvent"];
+  canEditEvent?: Config<T>["canEditEvent"];
   dayDate: string;
-  events: CalendarEvent[];
+  events: T[];
   fiveMinuteInterval?: boolean;
   initialZoomLevel?: number;
   maxAllDayEvents?: number;
   onCreateEvent?: onCreateEvent;
-  onEventEdit?: Config["onEventEdit"];
-  onPressEvent?: Config["onPressEvent"];
-  renderDragBars?: Config["renderDragBars"];
-  renderEvent: Config["renderEvent"];
-  renderNewEventContainer?: Config["renderNewEventContainer"];
+  onEventEdit?: Config<T>["onEventEdit"];
+  onPressEvent?: Config<T>["onPressEvent"];
+  renderDragBars?: Config<T>["renderDragBars"];
+  renderEvent: Config<T>["renderEvent"];
+  renderNewEventContainer?: Config<T>["renderNewEventContainer"];
   showTimeIndicator?: boolean;
   theme?: ThemeStyle;
   timeFormat?: string;
   timezone?: string;
   updateLocalStateAfterEdit?: boolean;
   userCalendarId?: string;
-  extraTimedComponents?: Config["extraTimedComponents"];
-  onZoomChange?: Config["onZoomChange"];
+  extraTimedComponents?: Config<T>["extraTimedComponents"];
+  onZoomChange?: Config<T>["onZoomChange"];
 };
 
-type EventCalenderContentProps = {
+type EventCalenderContentProps<T extends CalendarEvent> = {
   canCreateEvents: boolean;
-  canEditEvent: Config["canEditEvent"];
+  canEditEvent: Config<T>["canEditEvent"];
   startCalendarDate: Moment;
   fiveMinuteInterval?: boolean;
   initialZoomLevel: number;
   maxAllDayEvents: number;
   onCreateEvent?: onCreateEvent;
-  onEventEdit?: Config["onEventEdit"];
-  onPressEvent?: Config["onPressEvent"];
-  renderDragBars?: Config["renderDragBars"];
-  renderEvent: Config["renderEvent"];
-  renderNewEventContainer?: Config["renderNewEventContainer"];
+  onEventEdit?: Config<T>["onEventEdit"];
+  onPressEvent?: Config<T>["onPressEvent"];
+  renderDragBars?: Config<T>["renderDragBars"];
+  renderEvent: Config<T>["renderEvent"];
+  renderNewEventContainer?: Config<T>["renderNewEventContainer"];
   showTimeIndicator?: boolean;
   theme?: ThemeStyle;
   timeFormat: string;
   timezone: string;
   updateLocalStateAfterEdit: boolean;
-  extraTimedComponents?: Config["extraTimedComponents"];
-  onZoomChange?: Config["onZoomChange"];
+  extraTimedComponents?: Config<T>["extraTimedComponents"];
+  onZoomChange?: Config<T>["onZoomChange"];
 };
-const EventCalendarContent = ({
+const EventCalendarContent = <T extends CalendarEvent>({
   canCreateEvents,
   canEditEvent,
   fiveMinuteInterval,
@@ -79,7 +79,7 @@ const EventCalendarContent = ({
   extraTimedComponents,
   onZoomChange,
   startCalendarDate,
-}: EventCalenderContentProps) => {
+}: EventCalenderContentProps<T>) => {
   const zoomLevel = useSharedValue(initialZoomLevel);
   const createY = useSharedValue(-1);
   const maximumHour = useSharedValue(0);
@@ -114,6 +114,7 @@ const EventCalendarContent = ({
           extraTimedComponents,
           onZoomChange,
           updateLocalStateAfterEdit,
+          theme,
         }}
       >
         <AllDayEvents />
@@ -137,7 +138,7 @@ const EventCalendarContent = ({
 /**
  * Wraps `EventCalendarContent` inside `ClonedEventsProvider` to manage cloned events independently.
  */
-const EventCalendar = ({
+const EventCalendar = <T extends CalendarEvent>({
   timeFormat = "HH:mm",
   dayDate,
   events,
@@ -149,7 +150,7 @@ const EventCalendar = ({
   canCreateEvents = true,
   canEditEvent = true,
   ...props
-}: EventCalenderProps) => {
+}: EventCalenderProps<T>) => {
   const startCalendarDate = useMemo(
     () => moment.tz(dayDate, timezone).startOf("day"),
     [dayDate, timezone]

package/src/types.ts

@@ -12,16 +12,16 @@ export type CalendarEvent = {
   isAllDay?: boolean;
 };
 
-export type AllDayEventLayoutType = {
-  event: CalendarEvent;
+export type AllDayEventLayoutType<T extends CalendarEvent> = {
+  event: T;
   rowIndex?: number;
   visibleWidthDays?: number;
   extend: EventExtend;
   isPrimaryRendered?: boolean;
 };
 
-export type PartDayEventLayoutType = {
-  event: CalendarEvent;
+export type PartDayEventLayoutType<T extends CalendarEvent> = {
+  event: T;
   collisions?: {
     total: number;
     order: number;
@@ -29,8 +29,8 @@ export type PartDayEventLayoutType = {
   position: EventPosition;
 };
 
-export interface CollisionObject {
-  event: CalendarEvent;
+export interface CollisionObject<T extends CalendarEvent> {
+  event: T;
   collisions?: { total: number; order: number };
 }
 
@@ -41,9 +41,9 @@ export type EventPosition = {
   marginLeft: string;
 };
 
-export type FullCalendarEventLayout = {
-  allDayEventsLayout: AllDayEventLayoutType[];
-  partDayEventsLayout: PartDayEventLayoutType[];
+export type FullCalendarEventLayout<T extends CalendarEvent> = {
+  allDayEventsLayout: AllDayEventLayoutType<T>[];
+  partDayEventsLayout: PartDayEventLayoutType<T>[];
 };
 
 export type ThemeStyle = {
@@ -65,12 +65,6 @@ export type ThemeStyle = {
   backgroundHoursLayoutContainer?: ViewStyle;
   // New event inner container, if you don't want to use the `renderNewEventContainer` prop
   newEventContainer?: ViewStyle;
-  // Event container title
-  eventTitle?: TextStyle;
-  // Event container subtitle
-  eventSubtitle?: TextStyle;
-  // Event container main container
-  eventContainer?: ViewStyle;
   // Style the time indicator
   timeIndicator?: ViewStyle;
   // All day main container
@@ -91,19 +85,19 @@ export type OnCreateEventProps = {
 
 export type onCreateEvent = (arg: OnCreateEventProps) => void;
 
-export type Config = {
+export type Config<T extends CalendarEvent> = {
   timezone: string;
   timeFormat: string;
   dayDate: Moment;
   theme?: ThemeStyle;
   zoomLevel: SharedValue<number>;
-  layout: FullCalendarEventLayout;
+  layout: FullCalendarEventLayout<T>;
   createY: SharedValue<number>;
   maximumHour: SharedValue<number>;
   onCreateEvent?: onCreateEvent;
   initialZoomLevel: number;
   renderEvent: (
-    event: CalendarEvent,
+    event: T,
     extended: EventExtend,
     eventHeight?: SharedValue<number>,
     updatedTimes?: {
@@ -112,18 +106,18 @@ export type Config = {
     }
   ) => ReactNode;
   onEventEdit?: (params: {
-    event: CalendarEvent;
+    event: T;
     status: EditStatus;
     updatedTimes?: {
       updatedStart: string;
       updatedEnd: string;
     };
   }) => void;
-  onPressEvent?: (event: CalendarEvent) => void;
+  onPressEvent?: (event: T) => void;
   showTimeIndicator?: boolean;
   maxAllDayEvents: number;
   canCreateEvents: boolean;
-  canEditEvent: boolean | ((event: CalendarEvent) => boolean);
+  canEditEvent: boolean | ((event: T) => boolean);
   renderNewEventContainer?: (hour: number, minute: number) => ReactNode;
   fiveMinuteInterval?: boolean;
   renderDragBars?: { top?: () => ReactNode; bottom?: () => ReactNode };

package/src/utils/__tests___/compute-positioning.test.ts

@@ -4,7 +4,7 @@ import { PartDayEventLayoutType } from "../../types";
 
 describe("computePositioning", () => {
   it("should compute positioning correctly without collisions", () => {
-    const layout: PartDayEventLayoutType = {
+    const layout: PartDayEventLayoutType<any> = {
       event: {
         start: "2023-10-01T09:00:00Z",
         end: "2023-10-01T10:00:00Z",

package/src/utils/compute-positioning.ts

@@ -1,18 +1,18 @@
 import moment, { Moment } from "moment-timezone";
-import { CollisionObject, EventPosition } from "../types";
+import { type CalendarEvent, CollisionObject, EventPosition } from "../types";
 
-type ComputePositioning = {
+type ComputePositioning<T extends CalendarEvent> = {
   // We only need the collisions part of this type
-  collisionObject: CollisionObject;
+  collisionObject: CollisionObject<T>;
   startOfDayMoment: Moment;
   timezone: string;
 };
 
-const computePositioning = ({
+const computePositioning = <T extends CalendarEvent>({
   collisionObject,
   startOfDayMoment,
   timezone,
-}: ComputePositioning): EventPosition => {
+}: ComputePositioning<T>): EventPosition => {
   const startDateMoment = moment.tz(collisionObject.event.start, timezone);
   const durationMinutes = moment
     .tz(collisionObject.event.end, timezone)

package/src/utils/double-tap-reset-zoom-gesture.ts

@@ -1,11 +1,11 @@
 import { Gesture } from "react-native-gesture-handler";
 import { runOnJS, SharedValue } from "react-native-reanimated";
-import { Config } from "../types";
+import { type CalendarEvent, Config } from "../types";
 
-const doubleTapGesture = (
+const doubleTapGesture = <T extends CalendarEvent>(
   zoomLevel: SharedValue<number>,
   initialZoomLevel: number,
-  onZoomChange?: Config["onZoomChange"]
+  onZoomChange?: Config<T>["onZoomChange"]
 ) =>
   Gesture.Tap()
     .numberOfTaps(2)

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

@@ -23,8 +23,8 @@ import {
   PartDayEventLayoutType,
 } from "../types";
 
-interface GenerateEventLayouts {
-  events: CalendarEvent[];
+interface GenerateEventLayouts<T extends CalendarEvent> {
+  events: T[];
   userCalendarId: string;
   timezone: string;
   startCalendarDate: string;
@@ -33,7 +33,7 @@ interface GenerateEventLayouts {
   calendarViewInterval?: CalendarViewIntervalType;
 }
 
-export const generateEventLayouts = ({
+export const generateEventLayouts = <T extends CalendarEvent>({
   events,
   startCalendarDate,
   endCalendarDate,
@@ -41,7 +41,7 @@ export const generateEventLayouts = ({
   calendarViewInterval = "1day",
   startDayOfWeekOffset = 0,
   timezone,
-}: GenerateEventLayouts) => {
+}: GenerateEventLayouts<T>) => {
   // 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) =>
@@ -99,7 +99,7 @@ export const generateEventLayouts = ({
   });
 
   const result: {
-    [day: string]: FullCalendarEventLayout;
+    [day: string]: FullCalendarEventLayout<T>;
   } = {};
 
   calendarViewDateRanges.forEach((date) => {
@@ -142,8 +142,8 @@ export const generateEventLayouts = ({
       const endDate = moment.tz(startDate, timezone).endOf("day").toDate();
       const showHours = !["month"].includes(calendarViewInterval);
       const dayId = calendarDate;
-      const allDayEventsLayout: AllDayEventLayoutType[] = [];
-      let partDayEventsLayout: PartDayEventLayoutType[] = [];
+      const allDayEventsLayout: AllDayEventLayoutType<T>[] = [];
+      let partDayEventsLayout: PartDayEventLayoutType<T>[] = [];
 
       const x = moment(startDate).diff(
         moment.tz(date.basisDate, timezone),
@@ -174,7 +174,7 @@ export const generateEventLayouts = ({
         partDayEventsLayout = partDayEventsLayout.concat(
           handleCollisions(
             events.filter(
-              (event) =>
+              (event: T) =>
                 !isAllDayOrSpansMidnight(event, timezone) &&
                 dateRangeIntersect(
                   {
@@ -201,11 +201,11 @@ export const generateEventLayouts = ({
   return result;
 };
 
-const combineEventPosition = (
+const combineEventPosition = <T extends CalendarEvent>(
   dayDate: Moment,
   timezone: string,
-  collisionObject: CollisionObject
-): PartDayEventLayoutType => {
+  collisionObject: CollisionObject<T>
+): PartDayEventLayoutType<T> => {
   const position = computePositioning({
     timezone,
     collisionObject: collisionObject,
@@ -218,12 +218,12 @@ const combineEventPosition = (
   };
 };
 
-const handleCollisions = (
-  allEvents: CalendarEvent[],
+const handleCollisions = <T extends CalendarEvent>(
+  allEvents: T[],
   userCalendarId: string,
   dayDate: Moment,
   timezone: string
-): PartDayEventLayoutType[] => {
+): PartDayEventLayoutType<T>[] => {
   let stackableEvents = _sortBy(allEvents, (event) => event.id);
   stackableEvents = _sortBy(stackableEvents, (event) => {
     // current user's primary calendar should always be leftmost option
@@ -233,8 +233,8 @@ const handleCollisions = (
     new Date(event.start).valueOf()
   );
   // calculate overlap stack properties
-  const stackedEvtsByPos: Record<string, PartDayEventLayoutType[]> = {};
-  let curStack: (CollisionObject | null)[] = [];
+  const stackedEvtsByPos: Record<string, PartDayEventLayoutType<T>[]> = {};
+  let curStack: (CollisionObject<T> | null)[] = [];
 
   for (const evt of stackableEvents) {
     // already sorted by startDate
@@ -302,7 +302,7 @@ const handleCollisions = (
   }
 
   // always draw position 0 stack elements first.
-  let stackedEvents: PartDayEventLayoutType[] = [];
+  let stackedEvents: PartDayEventLayoutType<T>[] = [];
 
   Object.keys(stackedEvtsByPos).forEach(
     (pos) => (stackedEvents = stackedEvents.concat(stackedEvtsByPos[pos]))

package/src/utils/globals.ts

@@ -1,7 +1,7 @@
 import { createContext } from "react";
 import { Config } from "../types";
 
-export const ConfigProvider = createContext<Config>(undefined as never);
+export const ConfigProvider = createContext<Config<any>>(undefined as never);
 
 export const DEFAULT_MINUTE_HEIGHT = 0.8;
 

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

@@ -1,9 +1,9 @@
 import { Gesture } from "react-native-gesture-handler";
 import { runOnJS, SharedValue } from "react-native-reanimated";
 import { RefObject } from "react";
-import { PartDayEventLayoutType } from "../types";
+import { type CalendarEvent, PartDayEventLayoutType } from "../types";
 
-const gesturePan = (
+const gesturePan = <T extends CalendarEvent>(
   startY: SharedValue<number>,
   top: SharedValue<number>,
   currentY: SharedValue<number>,
@@ -12,7 +12,7 @@ const gesturePan = (
   height: SharedValue<number>,
   refNewEvent: RefObject<any>,
   fiveMinuteInterval?: boolean,
-  isEditing?: null | PartDayEventLayoutType,
+  isEditing?: null | PartDayEventLayoutType<T>,
   startEditing?: () => void
 ) =>
   Gesture.Pan()