@sunsama/event-calendar 0.8.3 → 0.10.0

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

@@ -1,22 +1,27 @@
 import React, {
   createContext,
+  forwardRef,
   ReactNode,
+  type Ref,
   useCallback,
   useContext,
+  useImperativeHandle,
   useState,
 } from "react";
 import { SharedValue, useSharedValue } from "react-native-reanimated";
 import { ConfigProvider } from "../utils/globals";
-import { isFunction } from "lodash";
+import { debounce, isFunction } from "lodash";
 import {
   type CalendarEvent,
   EditStatus,
   PartDayEventLayoutType,
 } from "../types";
 import { useEvents } from "./use-events";
+import moment from "moment-timezone";
 
 interface IsEditingType<T extends CalendarEvent> {
   isEditing: null | PartDayEventLayoutType<T>;
+  updateEditing: (top: number, height: number) => void;
   currentY: SharedValue<number>;
   setIsEditing: (
     newValue: PartDayEventLayoutType<T> | null,
@@ -38,19 +43,54 @@ export const useIsEditing = () => {
   return context;
 };
 
-// Provider component
-export const IsEditingProvider = <T extends CalendarEvent>({
-  children,
-}: {
+type IsEditingProviderInnerProps = {
   children: ReactNode;
-}) => {
-  const { canEditEvent, onEventEdit, updateLocalStateAfterEdit } =
+};
+
+export type IsEditingProviderInnerMethods<T extends CalendarEvent> = {
+  startEditing: (layout: PartDayEventLayoutType<T>) => void;
+  endEditing: () => void;
+};
+
+const IsEditingProviderInner = <T extends CalendarEvent>(
+  { children }: IsEditingProviderInnerProps,
+  refMethods: Ref<IsEditingProviderInnerMethods<T>>
+) => {
+  const { canEditEvent, onEventEdit, updateLocalStateAfterEdit, timezone } =
     useContext(ConfigProvider);
   const { updateClonedEvents } = useEvents();
   const [isEditing, baseSetIsEditing] =
     useState<null | PartDayEventLayoutType<T>>(null);
   const currentY = useSharedValue(0);
 
+  const updateEditing = debounce(
+    (start: number, end: number) => {
+      if (!isEditing) {
+        return;
+      }
+
+      const newStart = moment
+        .tz(isEditing.event.start, timezone)
+        .startOf("day")
+        .add(start, "minutes");
+      const newEnd = moment
+        .tz(isEditing.event.start, timezone)
+        .startOf("day")
+        .add(end, "minutes");
+
+      onEventEdit?.({
+        event: isEditing.event,
+        status: EditStatus.Update,
+        updatedTimes: {
+          updatedStart: newStart.format(),
+          updatedEnd: newEnd.format(),
+        },
+      });
+    },
+    500,
+    { trailing: true }
+  );
+
   const setIsEditing = useCallback(
     (
       newValue: PartDayEventLayoutType<T> | null,
@@ -115,9 +155,51 @@ export const IsEditingProvider = <T extends CalendarEvent>({
     ]
   );
 
+  useImperativeHandle(
+    refMethods,
+    () => ({
+      endEditing: () => {
+        if (!isEditing) {
+          return;
+        }
+
+        onEventEdit?.({
+          event: isEditing?.event,
+          status: EditStatus.Finish,
+        });
+        baseSetIsEditing(null);
+      },
+      startEditing: (layout) => {
+        if (isEditing) {
+          onEventEdit?.({
+            event: isEditing.event,
+            status: EditStatus.Finish,
+          });
+        }
+
+        onEventEdit?.({
+          event: layout.event,
+          status: EditStatus.Start,
+        });
+        baseSetIsEditing(layout);
+      },
+    }),
+    [baseSetIsEditing, isEditing, onEventEdit]
+  );
+
   return (
-    <IsEditing.Provider value={{ currentY, isEditing, setIsEditing }}>
+    <IsEditing.Provider
+      value={{ currentY, isEditing, setIsEditing, updateEditing }}
+    >
       {children}
     </IsEditing.Provider>
   );
 };
+
+export const IsEditingProvider = forwardRef(IsEditingProviderInner) as <
+  T extends CalendarEvent,
+>(
+  props: IsEditingProviderInnerProps & {
+    ref?: Ref<IsEditingProviderInnerMethods<T>>;
+  }
+) => ReturnType<typeof IsEditingProviderInner>;

package/src/index.tsx

@@ -23,7 +23,10 @@ import React, {
   useRef,
 } from "react";
 import { GestureRef } from "react-native-gesture-handler/lib/typescript/handlers/gestures/gesture";
-import { IsEditingProvider } from "./hooks/use-is-editing";
+import {
+  IsEditingProvider,
+  type IsEditingProviderInnerMethods,
+} from "./hooks/use-is-editing";
 import { EventsProvider, useEvents } from "./hooks/use-events";
 import type { CalendarEvent, Config, onCreateEvent, ThemeStyle } from "./types";
 import {
@@ -35,6 +38,7 @@ import type { NativeScrollEvent } from "react-native/Libraries/Components/Scroll
 export * from "./types";
 
 type EventCalenderProps<T extends CalendarEvent> = {
+  initialEventEdit?: string;
   onScroll?: (y: number) => void;
   canCreateEvents?: boolean;
   canEditEvent?: Config<T>["canEditEvent"];
@@ -63,6 +67,7 @@ type EventCalenderProps<T extends CalendarEvent> = {
 };
 
 type EventCalenderContentProps<T extends CalendarEvent> = {
+  initialEventEdit?: string;
   onScroll?: (y: number) => void;
   canCreateEvents: boolean;
   canEditEvent: Config<T>["canEditEvent"];
@@ -91,10 +96,13 @@ type EventCalenderContentProps<T extends CalendarEvent> = {
 export type EventCalendarMethods = {
   scrollToTime: (minutes: number, animated?: boolean, offset?: number) => void;
   scrollToOffset: (y: number, animated?: boolean) => void;
+  startEditMode: (eventId: string) => void;
+  endEditMode: () => void;
 };
 
 function EventCalendarContentInner<T extends CalendarEvent>(
   {
+    initialEventEdit,
     canCreateEvents,
     canEditEvent,
     fiveMinuteInterval,
@@ -128,11 +136,14 @@ function EventCalendarContentInner<T extends CalendarEvent>(
   const refNewEvent = useRef<GestureRef>(null);
   const refScrollView = useRef<ScrollView>(null);
   const refScrollViewHeight = useRef<number>(0);
+  const refEditingProvider = useRef<IsEditingProviderInnerMethods<T>>(null);
 
   const onLayoutScrollView = useCallback((event: LayoutChangeEvent) => {
     refScrollViewHeight.current = event.nativeEvent.layout.height;
   }, []);
 
+  const { eventsLayout } = useEvents();
+
   useImperativeHandle(
     refMethods,
     () => ({
@@ -148,8 +159,22 @@ function EventCalendarContentInner<T extends CalendarEvent>(
           animated,
         });
       },
+      endEditMode: () => {
+        refEditingProvider.current?.endEditing();
+      },
+      startEditMode: (eventId: string) => {
+        const layout = eventsLayout.partDayEventsLayout.find(
+          (item) => item.event.id === eventId
+        );
+
+        if (!layout) {
+          return;
+        }
+
+        refEditingProvider.current?.startEditing(layout);
+      },
     }),
-    [zoomLevel]
+    [zoomLevel, eventsLayout]
   );
 
   const onScrollFeedback = useCallback(
@@ -159,8 +184,6 @@ function EventCalendarContentInner<T extends CalendarEvent>(
     [onScroll]
   );
 
-  const { eventsLayout } = useEvents();
-
   return (
     <View style={[styles.container, theme?.container]}>
       <ConfigProvider.Provider
@@ -191,6 +214,7 @@ function EventCalendarContentInner<T extends CalendarEvent>(
           onZoomChange,
           updateLocalStateAfterEdit,
           theme,
+          initialEventEdit,
         }}
       >
         <AllDayEvents />
@@ -202,7 +226,7 @@ function EventCalendarContentInner<T extends CalendarEvent>(
           ref={refScrollView}
           onScroll={onScrollFeedback}
         >
-          <IsEditingProvider>
+          <IsEditingProvider ref={refEditingProvider}>
             <ZoomProvider ref={refNewEvent}>
               <View style={[styles.borderContainer, theme?.borderContainer]} />
               <TimedEvents refNewEvent={refNewEvent} />

package/src/types.ts

@@ -98,6 +98,7 @@ export interface OnEventEditParams<T extends CalendarEvent> {
 }
 
 export type Config<T extends CalendarEvent> = {
+  initialEventEdit?: string;
   timezone: string;
   timeFormat: string;
   dayDate: Moment;
@@ -164,6 +165,7 @@ export enum EventExtend {
 
 export enum EditStatus {
   Start,
+  Update,
   Finish,
   Delete,
 }