Merge pull request #1352 from blacktoast/fix/#1327

fix: afterRenderEvent doesn't work in readonly mode ( fix #1327 )

Author: Dohyung Ahn

apps/calendar/src/components/events/horizontalEvent.spec.tsx

@@ -141,6 +141,31 @@ describe(`Firing 'afterRenderEvent'`, () => {
     // Then
     expect(handler).not.toBeCalled();
   });
+
+  it(`should fire 'afterRenderEvent' when it is in readonly mode`, () => {
+    // Given
+    const { eventBus, handler } = setup();
+    const uiModel = new EventUIModel(
+      new EventModel({
+        id: '1',
+        start: new Date(2020, 0, 1, 10, 0),
+        end: new Date(2020, 0, 1, 12, 0),
+        isReadOnly: true,
+      })
+    );
+
+    const props = {
+      uiModel,
+      eventHeight: 30,
+      headerHeight: 0,
+    };
+
+    // When
+    render(<HorizontalEvent {...props} />, { eventBus });
+
+    // Then
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
 });
 
 describe('Apply customStyle', () => {
@@ -307,11 +332,35 @@ describe('Color values', () => {
 });
 
 describe('isReadOnly', () => {
+  function setup() {
+    const eventName = 'readonly-event';
+    const uiModel = new EventUIModel(
+      new EventModel({
+        id: '1',
+        title: eventName,
+        start: new Date(2020, 0, 1, 10, 0),
+        end: new Date(2020, 0, 1, 12, 0),
+        isReadOnly: true,
+      })
+    );
+
+    const props = {
+      uiModel,
+      eventHeight: 30,
+      headerHeight: 0,
+    };
+
+    return {
+      props,
+    };
+  }
+
   it("should be able to show detail popup even if the model's `isReadOnly` property is `true`", () => {
     // Given
     const store = initCalendarStore({
       useDetailPopup: true,
     });
+
     const eventName = 'readonly-event';
     const uiModel = new EventUIModel(
       new EventModel({
@@ -322,6 +371,7 @@ describe('isReadOnly', () => {
         isReadOnly: true,
       })
     );
+
     const props = {
       uiModel,
       eventHeight: 30,

apps/calendar/src/components/events/horizontalEvent.tsx

@@ -16,7 +16,7 @@ import { dndSelector, optionsSelector, viewSelector } from '@src/selectors';
 import { DraggingState } from '@src/slices/dnd';
 import { isSameDate } from '@src/time/datetime';
 import { passConditionalProp } from '@src/utils/preact';
-import { isNil } from '@src/utils/type';
+import { isPresent } from '@src/utils/type';
 
 import type { CalendarColor } from '@t/options';
 
@@ -144,8 +144,9 @@ export function HorizontalEvent({
   const eventContainerRef = useRef<HTMLDivElement>(null);
 
   const { isReadOnly, id, calendarId } = uiModel.model;
-  const isDraggableEvent =
-    !isReadOnlyCalendar && !isReadOnly && isNil(resizingWidth) && isNil(movingLeft);
+
+  const isDraggingGuideEvent = isPresent(resizingWidth) || isPresent(movingLeft);
+  const isDraggableEvent = !isReadOnlyCalendar && !isReadOnly && !isDraggingGuideEvent;
 
   const startDragEvent = (className: string) => {
     setDraggingEventUIModel(uiModel);
@@ -160,8 +161,7 @@ export function HorizontalEvent({
     if (
       draggingState === DraggingState.DRAGGING &&
       draggingEventUIModel?.cid() === uiModel.cid() &&
-      isNil(resizingWidth) &&
-      isNil(movingLeft)
+      !isDraggingGuideEvent
     ) {
       setIsDraggingTarget(true);
     } else {
@@ -170,7 +170,7 @@ export function HorizontalEvent({
   });
 
   useEffect(() => {
-    if (isDraggableEvent) {
+    if (!isDraggingGuideEvent) {
       eventBus.fire('afterRenderEvent', uiModel.model.toEventObject());
     }
     // This effect is only for the first render.