@sunsama/event-calendar 0.10.4 → 0.11.1

package/src/components/background-hours-layout.tsx

@@ -1,38 +1,45 @@
-import { memo, useContext } from "react";
+import { memo, type RefObject, useContext } from "react";
 import Animated, { useAnimatedStyle } from "react-native-reanimated";
 import { StyleSheet, Text, View } from "react-native";
 import { ConfigProvider, TOP_MARGIN_PIXEL_OFFSET } from "../utils/globals";
 import { PrefabHour } from "../types";
+import { GestureDetector } from "react-native-gesture-handler";
+import useLongPressNewEvent from "src/hooks/use-long-press-new-event";
 
 type BackgroundHoursLayoutProps = {
   hours: PrefabHour[];
+  refNewEvent: RefObject<any>;
 };
 
 const BackgroundHoursLayout = memo(
-  ({ hours }: BackgroundHoursLayoutProps) => {
+  ({ refNewEvent, hours }: BackgroundHoursLayoutProps) => {
     const { theme, zoomLevel } = useContext(ConfigProvider);
 
     const styleHourSize = useAnimatedStyle(() => {
       return { height: zoomLevel.value * 60 };
     }, []);
 
+    const longPressNewEvent = useLongPressNewEvent(refNewEvent);
+
     return (
-      <View style={[styles.hourContainer, theme?.backgroundHoursContainer]}>
-        {hours.map((hour) => (
-          <Animated.View
-            style={[
-              styles.hourInnerContainer,
-              theme?.backgroundHoursInnerContainer,
-              styleHourSize,
-            ]}
-            key={hour.increment}
-          >
-            <Text style={[styles.hourText, theme?.backgroundHoursText]}>
-              {hour.hourFormatted}
-            </Text>
-          </Animated.View>
-        ))}
-      </View>
+      <GestureDetector gesture={longPressNewEvent}>
+        <View style={[styles.hourContainer, theme?.backgroundHoursContainer]}>
+          {hours.map((hour) => (
+            <Animated.View
+              style={[
+                styles.hourInnerContainer,
+                theme?.backgroundHoursInnerContainer,
+                styleHourSize,
+              ]}
+              key={hour.increment}
+            >
+              <Text style={[styles.hourText, theme?.backgroundHoursText]}>
+                {hour.hourFormatted}
+              </Text>
+            </Animated.View>
+          ))}
+        </View>
+      </GestureDetector>
     );
   },
   () => true

package/src/components/timed-events.tsx

@@ -33,9 +33,9 @@ const TimedEvents = ({ refNewEvent }: TimedEventsProps) => {
 
   return (
     <View style={[styles.container, theme?.timedEventsContainer]}>
-      <BackgroundHoursLayout hours={hours} />
+      <BackgroundHoursLayout refNewEvent={refNewEvent} hours={hours} />
       <View style={styles.backgroundContainer}>
-        <BackgroundHoursContent hours={hours} />
+        <BackgroundHoursContent refNewEvent={refNewEvent} hours={hours} />
         {layout.partDayEventsLayout.map((partDayLayout) => (
           <TimedEventContainer
             key={partDayLayout.event.id}

package/src/components/zoom-provider.tsx

@@ -4,10 +4,9 @@ import Animated, {
   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 "../utils/globals";
+import { useContext, useEffect } from "react";
+import { ConfigProvider } from "../utils/globals";
 import { StyleSheet } from "react-native";
-import { useIsEditing } from "../hooks/use-is-editing";
 import doubleTapGesture from "../utils/double-tap-reset-zoom-gesture";
 
 type ZoomProviderProps = {
@@ -17,160 +16,61 @@ type ZoomProviderProps = {
 // This fraction determines how quickly zoom grows
 const fraction = 0.1;
 
-const ZoomProvider = forwardRef<any, ZoomProviderProps>(
-  ({ children }, refNewEvent) => {
-    const {
-      canCreateEvents,
-      zoomLevel,
-      defaultZoomLevel,
-      createY,
-      onCreateEvent,
-      maxZoomLevel,
-      minZoomLevel,
-      maximumHour,
-      onZoomChange,
-      fiveMinuteInterval,
-    } = 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(
-          maxZoomLevel,
-          Math.max(minZoomLevel, 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;
-        }
-
-        if (!fiveMinuteInterval) {
-          createY.value = Math.max(
-            0,
-            event.allTouches[0].y -
-              TOP_MARGIN_PIXEL_OFFSET -
-              (zoomLevel.value * 60) / 2
-          );
-        } else {
-          const normalizedY =
-            event.allTouches[0].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;
-          const minuteInterval = Math.floor(minute / 5) * 5;
-
-          createY.value = (hour * 60 + minuteInterval) * zoomLevel.value;
-        }
-      })
-      .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) {
-          return;
-        }
-
-        if (fiveMinuteInterval) {
-          const minuteInterval = Math.floor(minute / 5) * 5;
-
-          runOnJS(onCreateEvent)({
-            hour,
-            minute: minuteInterval,
-          });
-          return;
-        }
-
-        runOnJS(onCreateEvent)({
-          hour,
-          minute,
-        });
-      });
-
-    const combinedGesture = Gesture.Simultaneous(
-      pinchGesture,
-      longPressGesture,
-      doubleTapGesture(zoomLevel, defaultZoomLevel, onZoomChange)
-    );
-
-    return (
-      <GestureDetector gesture={combinedGesture}>
-        <Animated.View style={styles.container}>{children}</Animated.View>
-      </GestureDetector>
-    );
-  }
-);
+export default function ZoomProvider({ children }: ZoomProviderProps) {
+  const {
+    zoomLevel,
+    defaultZoomLevel,
+    maxZoomLevel,
+    minZoomLevel,
+    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(
+        maxZoomLevel,
+        Math.max(minZoomLevel, newScale)
+      );
+      previewScale.value = zoomLevel.value;
+    })
+    .onEnd(() => {
+      if (onZoomChange) {
+        runOnJS(onZoomChange)(zoomLevel.value);
+      }
+    });
+
+  useAnimatedReaction(
+    () => zoomLevel.value,
+    (zoom) => {
+      maximumHour.value = 1440 * zoom;
+    },
+    [maximumHour]
+  );
+
+  const combinedGesture = Gesture.Simultaneous(
+    pinchGesture,
+    doubleTapGesture(zoomLevel, defaultZoomLevel, 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-long-press-new-event.ts

@@ -0,0 +1,103 @@
+import { Gesture } from "react-native-gesture-handler";
+import { ConfigProvider, TOP_MARGIN_PIXEL_OFFSET } from "src/utils/globals";
+import { runOnJS, useSharedValue } from "react-native-reanimated";
+import { useIsEditing } from "src/hooks/use-is-editing";
+import { type RefObject, useContext } from "react";
+
+export default function useLongPressNewEvent(refNewEvent: RefObject<any>) {
+  const {
+    canCreateEvents,
+    zoomLevel,
+    createY,
+    onCreateEvent,
+    fiveMinuteInterval,
+  } = useContext(ConfigProvider);
+  const yPosition = useSharedValue(-1);
+  const { isEditing } = useIsEditing();
+  const isDragging = useSharedValue(false);
+
+  return 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;
+      }
+
+      if (!fiveMinuteInterval) {
+        createY.value = Math.max(
+          0,
+          event.allTouches[0].y -
+            TOP_MARGIN_PIXEL_OFFSET -
+            (zoomLevel.value * 60) / 2
+        );
+      } else {
+        const normalizedY =
+          event.allTouches[0].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;
+        const minuteInterval = Math.floor(minute / 5) * 5;
+
+        createY.value = (hour * 60 + minuteInterval) * zoomLevel.value;
+      }
+    })
+    .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) {
+        return;
+      }
+
+      if (fiveMinuteInterval) {
+        const minuteInterval = Math.floor(minute / 5) * 5;
+
+        runOnJS(onCreateEvent)({
+          hour,
+          minute: minuteInterval,
+        });
+        return;
+      }
+
+      runOnJS(onCreateEvent)({
+        hour,
+        minute,
+      });
+    });
+}

package/src/index.tsx

@@ -92,6 +92,7 @@ export interface EventCalendarMethods {
   scrollToOffset: (y: number, animated?: boolean) => void;
   startEditMode: (eventId: string) => void;
   endEditMode: () => void;
+  setZoomLevel: (newZoomLevel: number) => void;
 }
 
 function EventCalendarContentInner<T extends CalendarEvent>(
@@ -167,6 +168,9 @@ function EventCalendarContentInner<T extends CalendarEvent>(
 
         refEditingProvider.current?.startEditing(layout);
       },
+      setZoomLevel: (newZoomLevel: number) => {
+        zoomLevel.value = newZoomLevel;
+      },
     }),
     [zoomLevel, eventsLayout]
   );
@@ -221,7 +225,7 @@ function EventCalendarContentInner<T extends CalendarEvent>(
           onScroll={onScrollFeedback}
         >
           <IsEditingProvider ref={refEditingProvider}>
-            <ZoomProvider ref={refNewEvent}>
+            <ZoomProvider>
               <View style={[styles.borderContainer, theme?.borderContainer]} />
               <TimedEvents refNewEvent={refNewEvent} />
             </ZoomProvider>