@sunsama/event-calendar 0.2.0

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

@@ -0,0 +1,51 @@
+import { memo, useContext } from "react";
+import Animated, { useAnimatedStyle } from "react-native-reanimated";
+import { StyleSheet } from "react-native";
+import { ConfigProvider } from "src/utils/globals";
+import { PrefabHour } from "src/types";
+
+type BackgroundHoursContentProps = {
+  hours: PrefabHour[];
+};
+
+const BackgroundHoursContent = memo(
+  ({ hours }: BackgroundHoursContentProps) => {
+    const { theme, zoomLevel } = useContext(ConfigProvider);
+
+    const styleHourSize = useAnimatedStyle(() => {
+      return { height: zoomLevel.value * 60 };
+    }, []);
+
+    return (
+      <>
+        {hours.map((hour) => (
+          <Animated.View
+            style={[
+              styles.hourContainer,
+              hour === hours[hours.length - 1]
+                ? styles.bottomBorder
+                : undefined,
+              theme?.backgroundHoursLayoutContainer,
+              styleHourSize,
+            ]}
+            key={hour.increment}
+          />
+        ))}
+      </>
+    );
+  },
+  () => true
+);
+
+const styles = StyleSheet.create({
+  hourContainer: {
+    borderTopWidth: StyleSheet.hairlineWidth,
+    marginRight: -20,
+    borderColor: "black",
+  },
+  bottomBorder: {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+});
+
+export default BackgroundHoursContent;

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

@@ -0,0 +1,61 @@
+import { memo, useContext } from "react";
+import Animated, { useAnimatedStyle } from "react-native-reanimated";
+import { StyleSheet, Text, View } from "react-native";
+import { ConfigProvider } from "src/utils/globals";
+import { PrefabHour } from "src/types";
+
+type BackgroundHoursLayoutProps = {
+  hours: PrefabHour[];
+};
+
+const BackgroundHoursLayout = memo(
+  ({ hours }: BackgroundHoursLayoutProps) => {
+    const { theme, zoomLevel } = useContext(ConfigProvider);
+
+    const styleHourSize = useAnimatedStyle(() => {
+      return { height: zoomLevel.value * 60 };
+    }, []);
+
+    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>
+    );
+  },
+  () => true
+);
+
+const styles = StyleSheet.create({
+  hourContainer: {
+    flexDirection: "column",
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 50,
+    paddingRight: 6,
+  },
+  hourInnerContainer: {
+    marginTop: -12,
+    marginBottom: 12,
+    marginRight: 0,
+  },
+  hourText: {
+    textAlign: "right",
+    color: "black",
+    fontSize: 10,
+  },
+});
+
+export default BackgroundHoursLayout;

package/src/components/drag-bar.tsx

@@ -0,0 +1,120 @@
+import Animated, { SharedValue, useSharedValue } from "react-native-reanimated";
+import { ReactNode, useMemo } from "react";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import { StyleSheet } from "react-native";
+
+type DragBarProps = {
+  top?: SharedValue<number>;
+  height: SharedValue<number>;
+  render: () => ReactNode;
+  refMainContainer: React.RefObject<any>;
+  fiveMinuteInterval?: boolean;
+  zoomLevel: SharedValue<number>;
+  maximumHour: SharedValue<number>;
+};
+
+const DragBar = ({
+  top,
+  height,
+  render,
+  refMainContainer,
+  fiveMinuteInterval,
+  zoomLevel,
+  maximumHour,
+}: DragBarProps) => {
+  const startY = useSharedValue(0);
+
+  const gesturePan = Gesture.Pan()
+    .blocksExternalGesture(refMainContainer)
+    .onStart(() => {
+      startY.value = top ? top.value : height.value;
+    })
+    .onUpdate(({ translationY }) => {
+      if (top) {
+        const originalY = top.value;
+
+        let freshUpdatedStartTime;
+
+        if (fiveMinuteInterval) {
+          // Set the updated time in 15 minute increments but make sure we never go lower
+          // than the first minute of the day
+          freshUpdatedStartTime = Math.max(
+            0,
+            startY.value +
+              Math.floor(translationY / zoomLevel.value / 5) *
+                (zoomLevel.value * 5)
+          );
+        } else {
+          // Set the updated time in 1 minute increments but make sure we never go lower
+          // than the first minute of the day
+          freshUpdatedStartTime = Math.max(
+            0,
+            startY.value +
+              Math.floor(translationY / zoomLevel.value) * zoomLevel.value
+          );
+        }
+
+        // Make sure the event does not span after midnight, and if so make sure it
+        // is limited to exactly midnight
+        if (freshUpdatedStartTime > maximumHour.value - height.value) {
+          freshUpdatedStartTime = maximumHour.value - height.value;
+        }
+
+        top.value = freshUpdatedStartTime;
+        height.value = height.value + (originalY - top.value);
+
+        return;
+      }
+
+      let freshUpdatedEndTime;
+
+      if (fiveMinuteInterval) {
+        // Set the updated time in 15 minute increments but make sure we never go lower
+        // than the first minute of the day
+        freshUpdatedEndTime = Math.max(
+          0,
+          startY.value +
+            Math.floor(translationY / zoomLevel.value / 5) *
+              (zoomLevel.value * 5)
+        );
+      } else {
+        // Set the updated time in 1 minute increments but make sure we never go lower
+        // than the first minute of the day
+        freshUpdatedEndTime = Math.max(
+          0,
+          startY.value +
+            Math.floor(translationY / zoomLevel.value) * zoomLevel.value
+        );
+      }
+
+      height.value = freshUpdatedEndTime;
+    });
+
+  const styleDragBar = useMemo(
+    () => ({
+      bottom: !top ? 0 : undefined,
+      top: top ? 0 : undefined,
+    }),
+    [top]
+  );
+
+  const renderedComponent = useMemo(render, [render]);
+
+  return (
+    <GestureDetector gesture={gesturePan}>
+      <Animated.View style={[styles.dragBar, styleDragBar]}>
+        {renderedComponent}
+      </Animated.View>
+    </GestureDetector>
+  );
+};
+
+export default DragBar;
+
+const styles = StyleSheet.create({
+  dragBar: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+  },
+});

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

@@ -0,0 +1,158 @@
+import {
+  memo,
+  RefObject,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+} from "react";
+import { useIsEditing } from "src/hooks/use-is-editing";
+import { ConfigProvider } from "src/utils/globals";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, {
+  runOnJS,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+} from "react-native-reanimated";
+import { EventExtend } from "src/types";
+import gesturePan from "src/utils/pan-edit-event-gesture";
+import DragBar from "src/components/drag-bar";
+import { StyleSheet } from "react-native";
+import moment from "moment-timezone";
+
+type EditEventContainerProps = {
+  refNewEvent: RefObject<any>;
+};
+
+const EditEventContainer = memo(
+  ({ refNewEvent }: EditEventContainerProps) => {
+    const { currentY, isEditing: editingEvent, setIsEditing } = useIsEditing();
+    const {
+      maximumHour,
+      fiveMinuteInterval,
+      renderDragBars,
+      zoomLevel,
+      renderEvent,
+      timezone,
+      dayDate,
+    } = useContext(ConfigProvider);
+    const height = useSharedValue(0);
+
+    useEffect(() => {
+      if (editingEvent) {
+        height.value = editingEvent.position.height * zoomLevel.value;
+        currentY.value = editingEvent.position.top * zoomLevel.value;
+      }
+    }, [height, editingEvent, currentY, zoomLevel]);
+
+    useAnimatedReaction(
+      () => zoomLevel.value,
+      (zoom) => {
+        if (editingEvent) {
+          height.value = editingEvent.position.height * zoom;
+          currentY.value = editingEvent.position.top * zoom;
+        }
+      },
+      [height, currentY, zoomLevel, editingEvent]
+    );
+
+    const styleAnimatedPosition = useAnimatedStyle(() => {
+      if (!editingEvent) {
+        return { opacity: 0 };
+      }
+
+      return {
+        marginLeft: StyleSheet.hairlineWidth,
+        position: "absolute",
+        height: height.value,
+        top: currentY.value,
+        opacity: 1,
+        width: "100%",
+      };
+    }, [editingEvent]);
+
+    const startY = useSharedValue(0);
+
+    const updatedStart = useDerivedValue(() => {
+      return currentY.value / zoomLevel.value;
+    }, []);
+
+    const updatedEnd = useDerivedValue(() => {
+      return (currentY.value + height.value) / zoomLevel.value;
+    }, []);
+
+    const endEventEditing = useCallback(
+      (newStart: number, newEnd: number) => {
+        // Format the new start and end times
+        setIsEditing(null, {
+          updatedStart: moment.tz(dayDate, timezone).minutes(newStart).format(),
+          updatedEnd: moment.tz(dayDate, timezone).minutes(newEnd).format(),
+        });
+      },
+      [dayDate, setIsEditing, timezone]
+    );
+
+    const gestureTap = Gesture.Tap()
+      .numberOfTaps(1)
+      .onStart(() => {
+        runOnJS(endEventEditing)(updatedStart.value, updatedEnd.value);
+      });
+
+    const refMainContainer = useRef();
+
+    if (!editingEvent) {
+      return null;
+    }
+
+    return (
+      <GestureDetector
+        gesture={Gesture.Simultaneous(
+          gestureTap,
+          gesturePan(
+            startY,
+            currentY,
+            currentY,
+            zoomLevel,
+            maximumHour,
+            height,
+            refNewEvent,
+            fiveMinuteInterval
+          ).withRef(refMainContainer)
+        )}
+      >
+        <Animated.View style={styleAnimatedPosition}>
+          {renderEvent(editingEvent.event, EventExtend.None, height, {
+            updatedEnd,
+            updatedStart,
+          })}
+          {renderDragBars?.top ? (
+            <DragBar
+              top={currentY}
+              height={height}
+              render={renderDragBars.top}
+              refMainContainer={refMainContainer}
+              zoomLevel={zoomLevel}
+              maximumHour={maximumHour}
+              fiveMinuteInterval={fiveMinuteInterval}
+            />
+          ) : null}
+          {renderDragBars?.bottom ? (
+            <DragBar
+              height={height}
+              render={renderDragBars.bottom}
+              refMainContainer={refMainContainer}
+              zoomLevel={zoomLevel}
+              maximumHour={maximumHour}
+              fiveMinuteInterval={fiveMinuteInterval}
+            />
+          ) : null}
+        </Animated.View>
+      </GestureDetector>
+    );
+  },
+  () => true
+);
+
+export default EditEventContainer;

package/src/components/event-container.tsx

@@ -0,0 +1,44 @@
+import { ConfigProvider } from "src/utils/globals";
+import { useCallback, useContext, useMemo } from "react";
+import { Pressable } from "react-native-gesture-handler";
+import { View } from "react-native";
+import { AllDayEventLayoutType, EventExtend } from "src/types";
+
+type EventContainerProps = {
+  layout: AllDayEventLayoutType;
+};
+
+const EventContainer = ({ layout }: EventContainerProps) => {
+  const { onPressEvent, renderEvent, initialZoomLevel } =
+    useContext(ConfigProvider);
+
+  const render = useMemo(
+    () =>
+      renderEvent(
+        layout.event,
+        (layout as AllDayEventLayoutType).extend
+          ? (layout as AllDayEventLayoutType).extend
+          : EventExtend.None
+      ),
+    [layout, renderEvent]
+  );
+
+  const stylePosition = useMemo(
+    () => ({
+      height: Math.max(28, 24 * initialZoomLevel),
+    }),
+    [initialZoomLevel]
+  );
+
+  const onPress = useCallback(() => {
+    onPressEvent && onPressEvent(layout.event);
+  }, [layout.event, onPressEvent]);
+
+  return (
+    <Pressable onPress={onPress}>
+      <View style={stylePosition}>{render}</View>
+    </Pressable>
+  );
+};
+
+export default EventContainer;

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

@@ -0,0 +1,90 @@
+import { memo, useContext, useMemo, useState } from "react";
+import { ConfigProvider, TOP_MARGIN_PIXEL_OFFSET } from "src/utils/globals";
+import Animated, {
+  runOnJS,
+  useAnimatedReaction,
+  useAnimatedStyle,
+} from "react-native-reanimated";
+import { StyleSheet, View } from "react-native";
+import { useIsEditing } from "src/hooks/use-is-editing";
+
+const NewEventContainer = memo(
+  () => {
+    const {
+      fiveMinuteInterval,
+      renderNewEventContainer,
+      zoomLevel,
+      createY,
+      theme,
+    } = useContext(ConfigProvider);
+
+    const { isEditing } = useIsEditing();
+
+    const styleVisible = useAnimatedStyle(() => {
+      return {
+        opacity: !isEditing && createY.value >= 0 ? 1 : 0,
+        transform: [
+          {
+            translateY: createY.value - TOP_MARGIN_PIXEL_OFFSET,
+          },
+        ],
+        height: zoomLevel.value * 60,
+      };
+    }, [isEditing]);
+
+    const [[hour, minute], setTime] = useState([0, 0]);
+
+    const hasRenderEvent = useMemo(
+      () => !!renderNewEventContainer,
+      [renderNewEventContainer]
+    );
+
+    useAnimatedReaction(
+      () => ({ zoomLevel: zoomLevel.value, createY: createY.value }),
+      (state) => {
+        if (!hasRenderEvent) {
+          return;
+        }
+
+        const freshTime = Math.floor(state.createY / state.zoomLevel);
+        const freshHour = Math.floor(freshTime / 60);
+        const freshMinute = !fiveMinuteInterval
+          ? freshTime - freshHour * 60
+          : Math.round(freshTime / 5) * 5 - freshHour * 60;
+
+        runOnJS(setTime)([freshHour, freshMinute]);
+      },
+      []
+    );
+
+    return (
+      <Animated.View style={[styles.container, styleVisible]}>
+        {renderNewEventContainer ? (
+          renderNewEventContainer(hour, minute)
+        ) : (
+          <View style={[styles.defaultContainer, theme?.newEventContainer]} />
+        )}
+      </Animated.View>
+    );
+  },
+  () => true
+);
+
+export default NewEventContainer;
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    top: 0,
+    left: 51,
+    right: 10,
+    height: 50,
+  },
+  defaultContainer: {
+    flex: 1,
+    borderRadius: 3,
+    padding: 5,
+    backgroundColor: "pink",
+    opacity: 0.8,
+  },
+});

package/src/components/time-indicator.tsx

@@ -0,0 +1,72 @@
+import { memo, useCallback, useContext, useEffect } from "react";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+} from "react-native-reanimated";
+import { ConfigProvider } from "src/utils/globals";
+import moment from "moment-timezone";
+import { AppState, StyleSheet } from "react-native";
+
+const TimeIndicator = memo(
+  () => {
+    const { zoomLevel, timezone, theme } = useContext(ConfigProvider);
+
+    const currentMinutes = useCallback(() => {
+      const time = moment.tz(timezone);
+
+      return time.minutes() + time.hours() * 60;
+    }, [timezone]);
+
+    const currentMoment = useSharedValue<number>(currentMinutes());
+
+    useEffect(() => {
+      let interval = setInterval(() => {
+        currentMoment.value = currentMinutes();
+      }, 20000);
+
+      const subscription = AppState.addEventListener(
+        "change",
+        (appState: string) => {
+          clearInterval(interval);
+
+          if (appState === "active") {
+            interval = setInterval(() => {
+              currentMoment.value = currentMinutes();
+            }, 20000);
+          }
+        }
+      );
+
+      return () => {
+        clearInterval(interval);
+        subscription.remove();
+      };
+    }, [currentMinutes, currentMoment]);
+
+    const style = useAnimatedStyle(() => ({
+      top: zoomLevel.value * currentMoment.value,
+    }));
+
+    return (
+      <Animated.View
+        style={[styles.timeIndicator, style, theme?.timeIndicator]}
+      />
+    );
+  },
+  () => true
+);
+
+export default TimeIndicator;
+
+const styles = StyleSheet.create({
+  timeIndicator: {
+    position: "absolute",
+    left: 0,
+    width: "110%",
+    borderTopWidth: 2,
+    borderTopColor: "#f25a43",
+    zIndex: 2,
+    elevation: 2,
+    opacity: 0.6,
+  },
+});