@sunsama/event-calendar 0.11.0 → 0.11.2

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

@@ -225,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>