@sunsama/event-calendar 0.2.0

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

@@ -0,0 +1,124 @@
+import Animated, {
+  runOnJS,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useSharedValue,
+} from "react-native-reanimated";
+import { ConfigProvider } from "src/utils/globals";
+import { RefObject, useCallback, useContext, useMemo } from "react";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import { StyleSheet, View } from "react-native";
+import { useIsEditing } from "src/hooks/use-is-editing";
+import gesturePan from "src/utils/pan-edit-event-gesture";
+import doubleTapGesture from "src/utils/double-tap-reset-zoom-gesture";
+import { EventExtend, PartDayEventLayoutType } from "src/types";
+
+type TimedEventContainerProps = {
+  layout: PartDayEventLayoutType;
+  refNewEvent: RefObject<any>;
+};
+
+const TimedEventContainer = ({
+  layout,
+  refNewEvent,
+}: TimedEventContainerProps) => {
+  const { currentY, setIsEditing, isEditing } = useIsEditing();
+  const {
+    onPressEvent,
+    maximumHour,
+    fiveMinuteInterval,
+    zoomLevel,
+    renderEvent,
+    initialZoomLevel,
+    onZoomChange,
+  } = useContext(ConfigProvider);
+
+  const height = useSharedValue(0);
+  const top = useSharedValue(0);
+
+  const startEditing = useCallback(() => {
+    setIsEditing(layout);
+  }, [layout, setIsEditing]);
+
+  const gestureTap = Gesture.Tap()
+    .enabled(!isEditing)
+    .onStart(() => {
+      if (onPressEvent) {
+        runOnJS(onPressEvent)(layout.event);
+      }
+    });
+
+  const startY = useSharedValue(0);
+
+  const gestures = Gesture.Exclusive(
+    doubleTapGesture(zoomLevel, initialZoomLevel, onZoomChange),
+    gestureTap,
+    gesturePan(
+      startY,
+      top,
+      currentY,
+      zoomLevel,
+      maximumHour,
+      height,
+      refNewEvent,
+      fiveMinuteInterval,
+      isEditing,
+      startEditing
+    ).activateAfterLongPress(500)
+  );
+
+  useAnimatedReaction(
+    () => zoomLevel.value,
+    (newZoomLevel) => {
+      height.value = newZoomLevel * layout.position.height;
+    },
+    [layout.position.height]
+  );
+
+  useAnimatedReaction(
+    () => zoomLevel.value,
+    (newZoomLevel) => {
+      top.value = newZoomLevel * layout.position.top;
+    },
+    [layout.position.top]
+  );
+
+  const render = useMemo(
+    () => renderEvent(layout.event, EventExtend.None, height),
+    [height, layout.event, renderEvent]
+  );
+
+  const stylePosition = useAnimatedStyle(() => {
+    const basePosition: any = {
+      position: "absolute",
+      height: height.value,
+      top: top.value,
+      opacity: 1,
+      width: layout.position.width,
+      marginLeft: layout.position.marginLeft,
+
+      // This is to prevent the event from being clickable while editing
+      pointerEvents: isEditing ? "none" : "auto",
+    };
+
+    if (isEditing?.event.id === layout.event.id) {
+      basePosition.opacity = 0.5;
+    }
+
+    return basePosition;
+  }, [layout, isEditing]);
+
+  return (
+    <GestureDetector gesture={gestures}>
+      <Animated.View style={stylePosition}>
+        <View style={styles.hairline}>{render}</View>
+      </Animated.View>
+    </GestureDetector>
+  );
+};
+
+const styles = StyleSheet.create({
+  hairline: { marginHorizontal: StyleSheet.hairlineWidth, flex: 1 },
+});
+
+export default TimedEventContainer;

package/src/components/timed-events.tsx

@@ -0,0 +1,72 @@
+import { StyleSheet, View } from "react-native";
+import { RefObject, useContext, useMemo } from "react";
+import { ConfigProvider, TOP_MARGIN_PIXEL_OFFSET } from "src/utils/globals";
+import BackgroundHoursLayout from "src/components/background-hours-layout";
+import { generatePrefabHours } from "src/utils/date-utils";
+import BackgroundHoursContent from "src/components/background-hours-content";
+import TimedEventContainer from "src/components/timed-event-container";
+import TimeIndicator from "src/components/time-indicator";
+import NewEventContainer from "src/components/new-event-container";
+import EditEventContainer from "src/components/edit-event-container";
+
+type TimedEventsProps = {
+  refNewEvent: RefObject<any>;
+};
+
+const TimedEvents = ({ refNewEvent }: TimedEventsProps) => {
+  const {
+    theme,
+    canCreateEvents,
+    canEditEvent,
+    timeFormat,
+    layout,
+    showTimeIndicator,
+    extraTimedComponents,
+    zoomLevel,
+  } = useContext(ConfigProvider);
+  const hours = useMemo(() => generatePrefabHours(timeFormat), [timeFormat]);
+
+  const extraRender = useMemo(
+    () => extraTimedComponents?.(zoomLevel) || null,
+    [extraTimedComponents, zoomLevel]
+  );
+
+  return (
+    <View style={[styles.container, theme?.timedEventsContainer]}>
+      <BackgroundHoursLayout hours={hours} />
+      <View style={styles.backgroundContainer}>
+        <BackgroundHoursContent hours={hours} />
+        {extraRender}
+        {layout.partDayEventsLayout.map((partDayLayout) => (
+          <TimedEventContainer
+            key={partDayLayout.event.id}
+            layout={partDayLayout}
+            refNewEvent={refNewEvent}
+          />
+        ))}
+        {showTimeIndicator ? <TimeIndicator /> : null}
+        {canEditEvent ? <EditEventContainer refNewEvent={refNewEvent} /> : null}
+      </View>
+      {canCreateEvents ? <NewEventContainer /> : null}
+    </View>
+  );
+};
+
+export default TimedEvents;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: "row",
+    marginBottom: 30,
+    marginTop: 10,
+  },
+  backgroundContainer: {
+    position: "relative",
+    marginTop: -TOP_MARGIN_PIXEL_OFFSET,
+    flexDirection: "column",
+    flex: 1,
+    paddingRight: 10,
+    overflow: "hidden",
+  },
+});

package/src/components/zoom-provider.tsx

@@ -0,0 +1,146 @@
+import Animated, {
+  runOnJS,
+  useAnimatedReaction,
+  useSharedValue,
+} from "react-native-reanimated";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import { forwardRef, useContext, useEffect } from "react";
+import { ConfigProvider, TOP_MARGIN_PIXEL_OFFSET } from "src/utils/globals";
+import { StyleSheet } from "react-native";
+import { GestureRef } from "react-native-gesture-handler/lib/typescript/handlers/gestures/gesture";
+import { useIsEditing } from "src/hooks/use-is-editing";
+import doubleTapGesture from "src/utils/double-tap-reset-zoom-gesture";
+
+type ZoomProviderProps = {
+  children: any;
+};
+
+// This fraction determines how quickly zoom grows
+const fraction = 0.1;
+
+const ZoomProvider = forwardRef<GestureRef, ZoomProviderProps>(
+  ({ children }, refNewEvent) => {
+    const {
+      canCreateEvents,
+      zoomLevel,
+      initialZoomLevel,
+      createY,
+      onCreateEvent,
+      maximumHour,
+      onZoomChange,
+    } = useContext(ConfigProvider);
+    const previewScale = useSharedValue(-1);
+
+    useEffect(() => {
+      previewScale.value = zoomLevel.get();
+    }, [zoomLevel, previewScale]);
+
+    const pinchGesture = Gesture.Pinch()
+      .onUpdate((event) => {
+        "worklet";
+
+        const newScale =
+          previewScale.value * (1 + fraction * (event.scale - 1));
+
+        zoomLevel.value = Math.min(3, Math.max(0.54, newScale));
+        previewScale.value = zoomLevel.value;
+      })
+      .onEnd(() => {
+        if (onZoomChange) {
+          runOnJS(onZoomChange)(zoomLevel.value);
+        }
+      });
+
+    const yPosition = useSharedValue(-1);
+    const { isEditing } = useIsEditing();
+    const isDragging = useSharedValue(false);
+
+    useAnimatedReaction(
+      () => zoomLevel.value,
+      (zoom) => {
+        maximumHour.value = 1440 * zoom;
+      },
+      [maximumHour]
+    );
+
+    const longPressGesture = Gesture.LongPress()
+      .enabled(canCreateEvents && !isEditing)
+      .withRef(refNewEvent as any)
+      .numberOfPointers(1)
+      .minDuration(250)
+      .maxDistance(10000)
+      .onStart((event) => {
+        "worklet";
+
+        isDragging.value = true;
+        createY.value = Math.max(
+          0,
+          event.y - TOP_MARGIN_PIXEL_OFFSET - (zoomLevel.value * 60) / 2
+        );
+      })
+      .onTouchesMove((event) => {
+        "worklet";
+
+        if (!isDragging.value) {
+          return;
+        }
+
+        createY.value = Math.max(
+          0,
+          event.allTouches[0].y -
+            TOP_MARGIN_PIXEL_OFFSET -
+            (zoomLevel.value * 60) / 2
+        );
+      })
+      .onEnd((event, success) => {
+        "worklet";
+
+        if (!isDragging.value) {
+          return;
+        }
+
+        // Make sure it doesn't show the new event component anymore
+        createY.value = -1;
+        yPosition.value = -1;
+        isDragging.value = false;
+
+        if (!success) {
+          return;
+        }
+
+        // Determine the hour that was clicked and trigger the event creation
+        const normalizedY =
+          event.y - TOP_MARGIN_PIXEL_OFFSET - (zoomLevel.value * 60) / 2;
+        const time = Math.floor(normalizedY / zoomLevel.value);
+        const hour = Math.floor(time / 60);
+        const minute = time - hour * 60;
+
+        if (onCreateEvent) {
+          runOnJS(onCreateEvent)({
+            hour,
+            minute,
+          });
+        }
+      });
+
+    const combinedGesture = Gesture.Simultaneous(
+      pinchGesture,
+      longPressGesture,
+      doubleTapGesture(zoomLevel, initialZoomLevel, onZoomChange)
+    );
+
+    return (
+      <GestureDetector gesture={combinedGesture}>
+        <Animated.View style={styles.container}>{children}</Animated.View>
+      </GestureDetector>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+
+export default ZoomProvider;

package/src/hooks/use-cloned-events.ts

@@ -0,0 +1,26 @@
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import { cloneDeep } from "lodash";
+import { CalendarEvent } from "src/types";
+
+export let updateClonedEvents: Dispatch<SetStateAction<CalendarEvent[]>>;
+
+/**
+ * Returns a cloned version of the events array if the updateLocalStateAfterEdit is set to true.
+ * We do this to make local state updates faster and more responsive. If the updateLocalStateAfterEdit is set to false,
+ * we return the original events array and don't clone it.
+ */
+const useClonedEvents = (
+  events: CalendarEvent[],
+  updateLocalStateAfterEdit: boolean
+) => {
+  const [clonedEvents, setClonedEvents] = useState(events);
+
+  useEffect(() => {
+    setClonedEvents(updateLocalStateAfterEdit ? cloneDeep(events) : events);
+    updateClonedEvents = setClonedEvents;
+  }, [events, updateLocalStateAfterEdit]);
+
+  return clonedEvents;
+};
+
+export default useClonedEvents;

package/src/hooks/use-events-layout.ts

@@ -0,0 +1,55 @@
+import { create } from "zustand";
+import { immer } from "zustand/middleware/immer";
+import generateEventLayouts from "../utils/generate-event-layouts";
+import { useEffect } from "react";
+import {
+  CalendarEvent,
+  CalendarViewIntervalType,
+  FullCalendarEventLayout,
+} from "src/types";
+
+type State = {
+  events: FullCalendarEventLayout;
+};
+
+type Actions = {
+  updateEvents: (props: UpdateEvent) => void;
+};
+
+export type UpdateEvent = {
+  events: CalendarEvent[];
+  userCalendarId: string;
+  timezone: string;
+  startCalendarDate: string;
+  endCalendarDate: string;
+  startDayOfWeekOffset?: number;
+  calendarViewInterval?: CalendarViewIntervalType;
+};
+
+const useEventsLayoutStore = create<State & Actions>()(
+  immer((set) => ({
+    events: {
+      allDayEventsLayout: [],
+      partDayEventsLayout: [],
+    },
+    updateEvents: (props: UpdateEvent) =>
+      set((state) => {
+        state.events = generateEventLayouts(props)[props.startCalendarDate] || {
+          partDayEventsLayout: [],
+          allDayEventsLayout: [],
+        };
+      }),
+  }))
+);
+
+const useEventsLayout = (props: UpdateEvent) => {
+  const { events: layoutEvents } = useEventsLayoutStore();
+
+  useEffect(() => {
+    useEventsLayoutStore.getState().updateEvents(props);
+  }, [props]);
+
+  return layoutEvents;
+};
+
+export default useEventsLayout;

package/src/hooks/use-is-editing.tsx

@@ -0,0 +1,109 @@
+import React, {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useState,
+} from "react";
+import { SharedValue, useSharedValue } from "react-native-reanimated";
+import { ConfigProvider } from "src/utils/globals";
+import { isFunction } from "lodash";
+import { updateClonedEvents } from "src/hooks/use-cloned-events";
+import { EditStatus, PartDayEventLayoutType } from "src/types";
+
+interface IsEditingType {
+  isEditing: null | PartDayEventLayoutType;
+  currentY: SharedValue<number>;
+  setIsEditing: (
+    newValue: PartDayEventLayoutType | null,
+    updatedTimes?: {
+      updatedStart: string;
+      updatedEnd: string;
+    }
+  ) => void;
+}
+
+const IsEditing = createContext<IsEditingType | undefined>(undefined);
+
+export const useIsEditing = () => {
+  const context = useContext(IsEditing);
+
+  if (!context) {
+    throw new Error("useIsEditing must be used within a IsEditingProvider");
+  }
+  return context;
+};
+
+// Provider component
+export const IsEditingProvider = ({ children }: { children: ReactNode }) => {
+  const { canEditEvent, onEventEdit, updateLocalStateAfterEdit } =
+    useContext(ConfigProvider);
+  const [isEditing, baseSetIsEditing] = useState<null | PartDayEventLayoutType>(
+    null
+  );
+  const currentY = useSharedValue(0);
+
+  const setIsEditing = useCallback(
+    (
+      newValue: PartDayEventLayoutType | null,
+      updatedTimes?: {
+        updatedStart: string;
+        updatedEnd: string;
+      }
+    ) => {
+      if (newValue) {
+        if (isEditing) {
+          // Refuse to start a new edit
+          return;
+        }
+
+        const canEditEventParsed = isFunction(canEditEvent)
+          ? canEditEvent(newValue.event)
+          : canEditEvent;
+
+        if (!canEditEventParsed) {
+          return;
+        }
+
+        onEventEdit?.({
+          event: newValue.event,
+          status: EditStatus.Start,
+        });
+      } else if (isEditing) {
+        if (updateLocalStateAfterEdit) {
+          updateClonedEvents((events) => {
+            if (!updatedTimes) {
+              // This means we removed the event
+              return events.filter((event) => event.id !== isEditing.event.id);
+            }
+
+            return events.map((event) =>
+              event.id === isEditing.event.id
+                ? {
+                    ...event,
+                    start: updatedTimes?.updatedStart,
+                    end: updatedTimes?.updatedEnd,
+                  }
+                : event
+            );
+          });
+        }
+
+        onEventEdit?.({
+          event: isEditing.event,
+          status: EditStatus.Finish,
+          updatedTimes,
+        });
+      }
+
+      baseSetIsEditing(newValue);
+    },
+    [canEditEvent, isEditing, onEventEdit, updateLocalStateAfterEdit]
+  );
+
+  return (
+    <IsEditing.Provider value={{ currentY, isEditing, setIsEditing }}>
+      {children}
+    </IsEditing.Provider>
+  );
+};

package/src/index.tsx

@@ -0,0 +1,165 @@
+import { StyleSheet, View } from "react-native";
+import AllDayEvents from "src/components/all-day-events";
+import { ScrollView } from "react-native-gesture-handler";
+import { useSharedValue } from "react-native-reanimated";
+import ZoomProvider from "src/components/zoom-provider";
+import TimedEvents from "src/components/timed-events";
+import useEventsLayout, { UpdateEvent } from "src/hooks/use-events-layout";
+import { ConfigProvider, DEFAULT_MINUTE_HEIGHT } from "src/utils/globals";
+import moment from "moment-timezone";
+import { useMemo, useRef } from "react";
+import { GestureRef } from "react-native-gesture-handler/lib/typescript/handlers/gestures/gesture";
+import { IsEditingProvider } from "src/hooks/use-is-editing";
+import useClonedEvents from "src/hooks/use-cloned-events";
+import type {
+  CalendarEvent,
+  Config,
+  onCreateEvent,
+  ThemeStyle,
+} from "src/types";
+
+type EventCalenderProps = {
+  canCreateEvents?: boolean;
+  canEditEvent?: Config["canEditEvent"];
+  dayDate: string;
+  events: CalendarEvent[];
+  fiveMinuteInterval?: boolean;
+  initialZoomLevel?: number;
+  maxAllDayEvents?: number;
+  onCreateEvent?: onCreateEvent;
+  onEventEdit?: Config["onEventEdit"];
+  onPressEvent?: Config["onPressEvent"];
+  renderDragBars?: Config["renderDragBars"];
+  renderEvent: Config["renderEvent"];
+  renderNewEventContainer?: Config["renderNewEventContainer"];
+  showTimeIndicator?: boolean;
+  theme?: ThemeStyle;
+  timeFormat?: string;
+  timezone?: string;
+  updateLocalStateAfterEdit?: boolean;
+  userCalendarId?: string;
+  extraTimedComponents?: Config["extraTimedComponents"];
+  onZoomChange?: Config["onZoomChange"];
+};
+
+const EventCalendar = ({
+  events,
+  timeFormat = "HH:mm",
+  dayDate,
+  theme,
+  initialZoomLevel = DEFAULT_MINUTE_HEIGHT,
+  onCreateEvent,
+  timezone = "UTC",
+  renderEvent,
+  onPressEvent,
+  userCalendarId = "",
+  showTimeIndicator,
+  maxAllDayEvents = 2,
+  canCreateEvents = true,
+  renderNewEventContainer,
+  fiveMinuteInterval,
+  canEditEvent = true,
+  onEventEdit,
+  renderDragBars,
+  updateLocalStateAfterEdit = true,
+  extraTimedComponents,
+  onZoomChange,
+}: EventCalenderProps) => {
+  const startCalendarDate = useMemo(
+    () => moment.tz(dayDate, timezone).startOf("day"),
+    [dayDate, timezone]
+  );
+
+  const clonedEvents = useClonedEvents(events, updateLocalStateAfterEdit);
+
+  const memoizedProps = useMemo<UpdateEvent>(
+    () => ({
+      startCalendarDate: startCalendarDate.format("YYYY-MM-DD"),
+      calendarViewInterval: "1day",
+      endCalendarDate: startCalendarDate.format("YYYY-MM-DD"),
+      userCalendarId,
+      timezone,
+      startDayOfWeekOffset: 0,
+      events: clonedEvents,
+    }),
+    [startCalendarDate, userCalendarId, timezone, clonedEvents]
+  );
+
+  const layout = useEventsLayout(memoizedProps);
+  const zoomLevel = useSharedValue(initialZoomLevel);
+  const createY = useSharedValue(-1);
+  const maximumHour = useSharedValue(0);
+
+  const refNewEvent = useRef<GestureRef>(null);
+
+  return (
+    <View style={[styles.container, theme?.container]}>
+      <ConfigProvider.Provider
+        value={{
+          dayDate: startCalendarDate,
+          timeFormat,
+          layout,
+          zoomLevel,
+          createY,
+          initialZoomLevel,
+          onCreateEvent,
+          timezone,
+          renderEvent,
+          onPressEvent,
+          showTimeIndicator,
+          maxAllDayEvents,
+          canCreateEvents,
+          renderNewEventContainer,
+          fiveMinuteInterval,
+          canEditEvent,
+          onEventEdit,
+          renderDragBars,
+          maximumHour,
+          updateLocalStateAfterEdit,
+          extraTimedComponents,
+          onZoomChange,
+        }}
+      >
+        <AllDayEvents />
+        <ScrollView
+          bounces={false}
+          keyboardShouldPersistTaps="always"
+          style={[styles.scrollView, theme?.scrollView]}
+        >
+          <IsEditingProvider>
+            <ZoomProvider ref={refNewEvent}>
+              <View style={[styles.borderContainer, theme?.borderContainer]} />
+              <TimedEvents refNewEvent={refNewEvent} />
+            </ZoomProvider>
+          </IsEditingProvider>
+        </ScrollView>
+      </ConfigProvider.Provider>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: "#F0F0F0",
+    overflow: "hidden",
+  },
+  scrollView: {
+    paddingTop: 8,
+    backgroundColor: "white",
+    flex: 1,
+  },
+  borderContainer: {
+    position: "absolute",
+    height: "200%",
+    left: 50,
+    top: -18,
+    width: 5,
+    borderLeftWidth: StyleSheet.hairlineWidth,
+    borderColor: "black",
+  },
+});
+
+export default EventCalendar;