@sunsama/event-calendar 0.2.0

package/src/types.ts

@@ -0,0 +1,163 @@
+import { Moment } from "moment-timezone";
+import { TextStyle, ViewStyle } from "react-native";
+import { DerivedValue, SharedValue } from "react-native-reanimated";
+import { ReactNode } from "react";
+
+export type CalendarEvent = {
+  id: string;
+  calendarId: string;
+  title: string;
+  start: string;
+  end: string;
+  isAllDay?: boolean;
+};
+
+export type AllDayEventLayoutType = {
+  event: CalendarEvent;
+  rowIndex?: number;
+  visibleWidthDays?: number;
+  extend: EventExtend;
+  isPrimaryRendered?: boolean;
+};
+
+export type PartDayEventLayoutType = {
+  event: CalendarEvent;
+  collisions?: {
+    total: number;
+    order: number;
+  };
+  position: EventPosition;
+};
+
+export interface CollisionObject {
+  event: CalendarEvent;
+  collisions?: { total: number; order: number };
+}
+
+export type EventPosition = {
+  top: number;
+  height: number;
+  width: string;
+  marginLeft: string;
+};
+
+export type FullCalendarEventLayout = {
+  allDayEventsLayout: AllDayEventLayoutType[];
+  partDayEventsLayout: PartDayEventLayoutType[];
+};
+
+export type ThemeStyle = {
+  // Main container style
+  container?: ViewStyle;
+  // Vertical scroll view
+  scrollView?: ViewStyle;
+  // Timed events main container
+  timedEventsContainer?: ViewStyle;
+  // Border container used to separate the hours and the main grid
+  borderContainer?: ViewStyle;
+  // Background hours container
+  backgroundHoursContainer?: ViewStyle;
+  // Background hours inner container
+  backgroundHoursInnerContainer?: ViewStyle;
+  // Background hours text
+  backgroundHoursText?: TextStyle;
+  // Background hours layout container
+  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
+  allDayContainer?: ViewStyle;
+  // All day event container
+  allDayEventContainer?: ViewStyle;
+  // Container showing when there are too many all day events to show
+  allDayShowMoreContainer?: ViewStyle;
+  // Text showing when there are too many all day events to show
+  allDayShowMoreText?: TextStyle;
+};
+
+export type OnCreateEventProps = {
+  hour?: number;
+  minute?: number;
+  isAllDay?: boolean;
+};
+
+export type onCreateEvent = (arg: OnCreateEventProps) => void;
+
+export type Config = {
+  timezone: string;
+  timeFormat: string;
+  dayDate: Moment;
+  theme?: ThemeStyle;
+  zoomLevel: SharedValue<number>;
+  layout: FullCalendarEventLayout;
+  createY: SharedValue<number>;
+  maximumHour: SharedValue<number>;
+  onCreateEvent?: onCreateEvent;
+  initialZoomLevel: number;
+  renderEvent: (
+    event: CalendarEvent,
+    extended: EventExtend,
+    eventHeight?: SharedValue<number>,
+    updatedTimes?: {
+      updatedStart: DerivedValue<number>;
+      updatedEnd: DerivedValue<number>;
+    }
+  ) => ReactNode;
+  onEventEdit?: (params: {
+    event: CalendarEvent;
+    status: EditStatus;
+    updatedTimes?: {
+      updatedStart: string;
+      updatedEnd: string;
+    };
+  }) => void;
+  onPressEvent?: (event: CalendarEvent) => void;
+  showTimeIndicator?: boolean;
+  maxAllDayEvents: number;
+  canCreateEvents: boolean;
+  canEditEvent: boolean | ((event: CalendarEvent) => boolean);
+  renderNewEventContainer?: (hour: number, minute: number) => ReactNode;
+  fiveMinuteInterval?: boolean;
+  renderDragBars?: { top?: () => ReactNode; bottom?: () => ReactNode };
+  updateLocalStateAfterEdit: boolean;
+  extraTimedComponents?: (zoomLevel: SharedValue<number>) => ReactNode;
+  onZoomChange?: (zoomLevel: number) => void;
+};
+
+export type PrefabHour = {
+  increment: number;
+  hourFormatted: string;
+  hourMoment: Moment;
+};
+
+export type CalendarViewIntervalType =
+  | "month"
+  | "workweek"
+  | "3day"
+  | "1day"
+  | "week";
+
+/**
+ * Tells us if an event extends into the next day, the previous day, or both.
+ * Used for all day events.
+ */
+export enum EventExtend {
+  // Keep None as value 0
+  None,
+  Past,
+  Future,
+  Both,
+}
+
+export enum EditStatus {
+  Start,
+  Finish,
+}

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

@@ -0,0 +1,255 @@
+import computePositioning from "src/utils/compute-positioning";
+import moment from "moment-timezone";
+import { PartDayEventLayoutType } from "src/types";
+
+describe("computePositioning", () => {
+  it("should compute positioning correctly without collisions", () => {
+    const layout: PartDayEventLayoutType = {
+      event: {
+        start: "2023-10-01T09:00:00Z",
+        end: "2023-10-01T10:00:00Z",
+        id: "test",
+        title: "",
+        calendarId: "",
+      },
+      // We don't have to test this
+      position: {
+        top: 540,
+        height: 60,
+        width: "100%",
+        marginLeft: "0%",
+      },
+    };
+    const startOfDayMoment = moment
+      .tz(layout.event.start, "UTC")
+      .startOf("day");
+
+    const result = computePositioning({
+      collisionObject: layout,
+      startOfDayMoment,
+      timezone: "UTC",
+    });
+
+    expect(result).toEqual({
+      top: 540,
+      height: 60,
+      width: "100%",
+      marginLeft: "0%",
+    });
+  });
+
+  it("should compute positioning correctly with collisions (total: 3, order: 0)", () => {
+    const layout = {
+      event: {
+        start: "2023-10-01T09:00:00Z",
+        end: "2023-10-01T10:00:00Z",
+        id: "test",
+        title: "",
+        calendarId: "",
+      },
+      collisions: { total: 3, order: 0 },
+      // We don't have to test this
+      position: {
+        top: 540,
+        height: 60,
+        width: "100%",
+        marginLeft: "0%",
+      },
+    };
+    const startOfDayMoment = moment
+      .tz(layout.event.start, "UTC")
+      .startOf("day");
+
+    const result = computePositioning({
+      collisionObject: layout,
+      startOfDayMoment,
+      timezone: "UTC",
+    });
+
+    expect(result).toEqual({
+      top: 540,
+      height: 60,
+      width: "64%",
+      marginLeft: "0%",
+    });
+  });
+
+  it("should compute positioning correctly with collisions (total: 3, order: 1)", () => {
+    const layout = {
+      event: {
+        start: "2023-10-01T09:00:00Z",
+        end: "2023-10-01T10:00:00Z",
+        id: "test",
+        title: "",
+        calendarId: "",
+      },
+      collisions: { total: 3, order: 1 },
+      // We don't have to test this
+      position: {
+        top: 540,
+        height: 60,
+        width: "100%",
+        marginLeft: "0%",
+      },
+    };
+    const startOfDayMoment = moment
+      .tz(layout.event.start, "UTC")
+      .startOf("day");
+
+    const result = computePositioning({
+      collisionObject: layout,
+      startOfDayMoment,
+      timezone: "UTC",
+    });
+
+    expect(result).toEqual({
+      top: 540,
+      height: 60,
+      width: "64%",
+      marginLeft: "33.333333333333336%",
+    });
+  });
+
+  it("should compute positioning correctly with collisions (total: 3, order: 2)", () => {
+    const layout = {
+      event: {
+        start: "2023-10-01T09:00:00Z",
+        end: "2023-10-01T10:00:00Z",
+        id: "test",
+        title: "",
+        calendarId: "",
+      },
+      collisions: { total: 3, order: 2 },
+      // We don't have to test this
+      position: {
+        top: 540,
+        height: 60,
+        width: "100%",
+        marginLeft: "0%",
+      },
+    };
+    const startOfDayMoment = moment
+      .tz(layout.event.start, "UTC")
+      .startOf("day");
+
+    const result = computePositioning({
+      collisionObject: layout,
+      startOfDayMoment,
+      timezone: "UTC",
+    });
+
+    expect(result).toEqual({
+      top: 540,
+      height: 60,
+      width: "33.333333333333336%",
+      marginLeft: "66.66666666666667%",
+    });
+  });
+
+  it("should compute positioning correctly with collisions (total: 4, order: 3)", () => {
+    const layout = {
+      event: {
+        start: "2023-10-01T09:00:00Z",
+        end: "2023-10-01T10:00:00Z",
+        id: "test",
+        title: "",
+        calendarId: "",
+      },
+      collisions: { total: 4, order: 3 },
+      // We don't have to test this
+      position: {
+        top: 540,
+        height: 60,
+        width: "100%",
+        marginLeft: "0%",
+      },
+    };
+    const startOfDayMoment = moment
+      .tz(layout.event.start, "UTC")
+      .startOf("day");
+
+    const result = computePositioning({
+      collisionObject: layout,
+      startOfDayMoment,
+      timezone: "UTC",
+    });
+
+    expect(result).toEqual({
+      top: 540,
+      height: 60,
+      width: "25%",
+      marginLeft: "75%",
+    });
+  });
+
+  it("should compute positioning correctly with collisions", () => {
+    const layout = {
+      event: {
+        start: "2023-10-01T09:00:00Z",
+        end: "2023-10-01T10:00:00Z",
+        id: "test",
+        title: "",
+        calendarId: "",
+      },
+      collisions: { total: 2, order: 1 },
+      // We don't have to test this
+      position: {
+        top: 540,
+        height: 60,
+        width: "100%",
+        marginLeft: "0%",
+      },
+    };
+    const startOfDayMoment = moment
+      .tz(layout.event.start, "UTC")
+      .startOf("day");
+
+    const result = computePositioning({
+      collisionObject: layout,
+      startOfDayMoment,
+      timezone: "UTC",
+    });
+
+    expect(result).toEqual({
+      top: 540,
+      height: 60,
+      width: "50%",
+      marginLeft: "50%",
+    });
+  });
+
+  it("should handle minimum height correctly", () => {
+    const layout = {
+      event: {
+        start: "2023-10-01T09:00:00Z",
+        end: "2023-10-01T09:15:00Z",
+        id: "test",
+        title: "",
+        calendarId: "",
+      },
+      // We don't have to test this
+      position: {
+        top: 540,
+        height: 60,
+        width: "100%",
+        marginLeft: "0%",
+      },
+    };
+    const startOfDayMoment = moment
+      .tz(layout.event.start, "UTC")
+      .startOf("day");
+
+    const result = computePositioning({
+      collisionObject: layout,
+      startOfDayMoment,
+      timezone: "UTC",
+    });
+
+    expect(result).toEqual({
+      top: 540,
+      height: 30,
+      width: "100%",
+      marginLeft: "0%",
+    });
+  });
+});

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

@@ -0,0 +1,41 @@
+import moment from "moment-timezone";
+import { generatePrefabHours } from "../date-utils";
+
+describe("generatePrefabHours", () => {
+  it("should generate 24 hours with default format", () => {
+    const hours = generatePrefabHours();
+    expect(hours.length).toBe(24);
+    expect(hours[0]!.hourFormatted).toBe(
+      moment().startOf("day").format("HH:mm")
+    );
+    expect(hours[23]!.hourFormatted).toBe(
+      moment().startOf("day").hour(23).format("HH:mm")
+    );
+  });
+
+  it("should generate 24 hours with US format", () => {
+    const customFormat = "h A";
+    const hours = generatePrefabHours(customFormat);
+    expect(hours.length).toBe(24);
+    expect(hours[0]!.hourFormatted).toBe(
+      moment().startOf("day").format(customFormat)
+    );
+    expect(hours[23]!.hourFormatted).toBe(
+      moment().startOf("day").hour(23).format(customFormat)
+    );
+  });
+
+  it("should generate correct hour moments", () => {
+    const hours = generatePrefabHours();
+    hours.forEach((hour, index) => {
+      expect(hour.hourMoment.hour()).toBe(index);
+    });
+  });
+
+  it("should generate correct increments", () => {
+    const hours = generatePrefabHours();
+    hours.forEach((hour, index) => {
+      expect(hour.increment).toBe(index);
+    });
+  });
+});