feat: add onLoad callback #110

howljs · Sep 27, 2024 · 0cb58e8 · 0cb58e8
1 parent 666fc7f
commit 0cb58e8
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 15 deletions.
diff --git a/src/CalendarBody.tsx b/src/CalendarBody.tsx
@@ -88,7 +88,7 @@ const CalendarBody: React.FC<CalendarBodyProps> = ({
     overlapEventsSpacing,
   } = useCalendar();
   const locale = useLocale();
-  const { onRefresh } = useActions();
+  const { onRefresh, onLoad } = useActions();
 
   const { onScroll, onVisibleColumnChanged } = useSyncedList({
     id: ScrollType.calendarGrid,
@@ -311,6 +311,7 @@ const CalendarBody: React.FC<CalendarBodyProps> = ({
                     onVisibleColumnChanged={onVisibleColumnChanged}
                     renderAheadItem={pagesPerSide}
                     extraScrollData={extraScrollData}
+                    onLoad={onLoad}
                   />
                 </View>
                 <View

diff --git a/src/CalendarContainer.tsx b/src/CalendarContainer.tsx
@@ -120,6 +120,7 @@ const CalendarContainer: React.ForwardRefRenderFunction<
     rightEdgeSpacing = 1,
     overlapEventsSpacing = 1,
     minRegularEventMinutes = 1,
+    onLoad,
   },
   ref
 ) => {
@@ -542,15 +543,6 @@ const CalendarContainer: React.ForwardRefRenderFunction<
     ]
   );
 
-  useEffect(() => {
-    if (scrollToNow) {
-      // Delay to ensure that the layout is ready
-      setTimeout(() => {
-        goToDate({ hourScroll: true, animatedHour: true });
-      }, 100);
-    }
-  }, [goToDate, scrollToNow]);
-
   const prevMode = useRef(isSingleDay);
   useEffect(() => {
     if (prevMode.current !== isSingleDay) {
@@ -664,6 +656,13 @@ const CalendarContainer: React.ForwardRefRenderFunction<
     ]
   );
 
+  const _onLoad = useLatestCallback(() => {
+    if (scrollToNow) {
+      goToDate({ hourScroll: true, animatedHour: true });
+    }
+    onLoad?.();
+  });
+
   const actionsProps = {
     onPressBackground,
     onPressDayNumber,
@@ -678,6 +677,7 @@ const CalendarContainer: React.ForwardRefRenderFunction<
     onDragSelectedEventEnd,
     onDragCreateEventStart,
     onDragCreateEventEnd,
+    onLoad: _onLoad,
   };
 
   const loadingValue = useMemo(() => ({ isLoading }), [isLoading]);

diff --git a/src/CalendarKit.tsx b/src/CalendarKit.tsx
@@ -25,20 +25,45 @@ const CalendarKit: React.ForwardRefRenderFunction<
     renderCustomOutOfRange,
     renderCustomUnavailableHour,
     renderEvent,
+    renderDraggableEvent,
+    renderDraggingEvent,
+    renderDraggingHour,
+    renderExpandIcon,
+    renderHeaderItem,
+    NowIndicatorComponent,
+    LeftAreaComponent,
+    headerBottomHeight,
+    collapsedItems,
+    eventMaxMinutes,
+    eventInitialMinutes,
+    eventMinMinutes,
     ...rest
   } = props;
 
-  const dayBarProps = {
+  const dayBarProps: CalendarHeaderProps = {
     dayBarHeight,
+    renderHeaderItem,
+    renderExpandIcon,
+    renderEvent,
+    LeftAreaComponent,
+    headerBottomHeight,
+    collapsedItems,
+    eventMaxMinutes,
+    eventInitialMinutes,
+    eventMinMinutes,
   };
 
-  const bodyProps = {
+  const bodyProps: CalendarBodyProps = {
     hourFormat,
     renderHour,
+    renderDraggingHour,
     showNowIndicator,
     renderCustomOutOfRange,
     renderCustomUnavailableHour,
     renderEvent,
+    renderDraggableEvent,
+    renderDraggingEvent,
+    NowIndicatorComponent,
   };
 
   return (

diff --git a/src/components/CalendarListView/index.tsx b/src/components/CalendarListView/index.tsx
@@ -39,6 +39,7 @@ interface CalendarListViewProps {
   }) => void;
   columnsPerPage: number;
   extraScrollData?: Record<string, any>;
+  onLoad?: () => void;
 }
 
 export type CalendarListViewHandle = RecyclerListView<
@@ -70,6 +71,7 @@ const CalendarListView = forwardRef<
     onVisibleColumnChanged,
     columnsPerPage,
     extraScrollData,
+    onLoad,
   } = props;
 
   const layoutProvider = useMemo(
@@ -147,6 +149,7 @@ const CalendarListView = forwardRef<
       columnsPerPage={columnsPerPage}
       onVisibleColumnChanged={onVisibleColumnChanged}
       extraScrollData={extraScrollData}
+      onLoad={onLoad}
     />
   );
 });

diff --git a/src/context/ActionsProvider.tsx b/src/context/ActionsProvider.tsx
@@ -30,6 +30,7 @@ const ActionsProvider: React.FC<PropsWithChildren<ActionsProviderProps>> = ({
     props.onDragCreateEventStart
   );
   const onDragCreateEventEnd = useLatestCallback(props.onDragCreateEventEnd);
+  const onLoad = useLatestCallback(props.onLoad);
 
   const value = useMemo(
     () => ({
@@ -47,6 +48,7 @@ const ActionsProvider: React.FC<PropsWithChildren<ActionsProviderProps>> = ({
       onLongPressBackground,
       onDragCreateEventStart,
       onDragCreateEventEnd,
+      onLoad,
     }),
     [
       onChange,
@@ -63,6 +65,7 @@ const ActionsProvider: React.FC<PropsWithChildren<ActionsProviderProps>> = ({
       onLongPressBackground,
       onDragCreateEventStart,
       onDragCreateEventEnd,
+      onLoad,
     ]
   );
 

diff --git a/src/service/recyclerlistview/core/RecyclerListView.tsx b/src/service/recyclerlistview/core/RecyclerListView.tsx
@@ -51,6 +51,7 @@ export interface RecyclerListViewProps {
   visibleColumns?: number;
   extraScrollData?: Record<string, any>;
   initialScroll?: (offsetX: number) => void;
+  onLoad?: () => void;
 }
 
 export interface RecyclerListViewState {
@@ -87,6 +88,7 @@ export default class RecyclerListView<
   private _pendingRenderStack?: RenderStack;
   private _initialOffset = 0;
   private _scrollComponent: BaseScrollComponent | null = null;
+  private _isFirstRender: boolean = true;
 
   constructor(props: P, context?: any) {
     super(props, context);
@@ -380,9 +382,17 @@ export default class RecyclerListView<
       return;
     }
     if (!this._initStateIfRequired(stack)) {
-      this.setState(() => {
-        return { renderStack: stack };
-      });
+      this.setState(
+        () => {
+          return { renderStack: stack };
+        },
+        () => {
+          if (this._isFirstRender) {
+            this._isFirstRender = false;
+            this.props.onLoad?.();
+          }
+        }
+      );
     }
   };
 

diff --git a/src/types.ts b/src/types.ts
@@ -239,6 +239,11 @@ export interface ActionsProviderProps {
    */
   onDragCreateEventEnd?: (event: OnCreateEventResponse) => Promise<void> | void;
 
+  /**
+   * Callback when the calendar is loaded
+   */
+  onLoad?: () => void;
+
   /**
    * Use all day event
    *