✨ Feat: Update event cursor css when dragging (#268)

* bug(web): remove `cursor: grabbing` from event styles

`cursor` style is overridden in on hover pseudo class, making this line redundant.

* feature(web): Update event cursor css when dragging

* chore(web): rename `useGridClick` to `useGridMouseUp`

Better emphasizes its purpose, since the hook only handles mouseup events.

* feature(web): Implement mouse hold delay for drafting an event

This is a small enhancement that mimics how Google Calendar delays drafting an event when we mouse hold over it without moving the mouse

* chore(web): small refactor

* feature(web): mouse hold delay feature, support all day events

* feature(web): mouse hold delay feature, support draft events

* ♻️ refactor(web): Remove constant from layout and inline in hook

layout.constants is meant for detailing the page's layout, which'll come in handy as we make the page more dynamic and responsive. The values are shared across many parts of the app, so have a dedicated file for it is helpful.

This value isn't related to the layout, and is only used in one place, so it can live there instead.

---------

Co-authored-by: Tyler Dane <tyler@switchback.tech>

Author: that-one-arab

packages/web/src/common/utils/mouse/mouse.util.ts

@@ -3,3 +3,7 @@ import { MouseEvent } from "react";
 export const isRightClick = (e: MouseEvent) => {
   return e.button === 2;
 };
+
+export const isLeftClick = (e: MouseEvent) => {
+  return e.button === 0;
+};

packages/web/src/views/Calendar/components/Draft/Draft.tsx

@@ -8,16 +8,16 @@ import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout"
 import { WeekProps } from "@web/views/Calendar/hooks/useWeek";
 import { useDraftContext } from "./context/useDraftContext";
 import { GridDraft } from "./grid/GridDraft";
-import { useGridClick } from "./grid/hooks/useGridClick";
 import { useGridMouseMove } from "./grid/hooks/useGridMouseMove";
+import { useGridMouseUp } from "./grid/hooks/useGridMouseUp";
 
 interface Props {
   measurements: Measurements_Grid;
   weekProps: WeekProps;
 }
 
 export const Draft: FC<Props> = ({ measurements, weekProps }) => {
-  useGridClick();
+  useGridMouseUp();
   useGridMouseMove();
 
   const category = useAppSelector(selectDraftCategory);

packages/web/src/views/Calendar/components/Draft/grid/GridDraft.tsx

@@ -1,7 +1,9 @@
 import React, { FC, MouseEvent } from "react";
 import { FloatingFocusManager } from "@floating-ui/react";
 import { YEAR_MONTH_DAY_FORMAT } from "@core/constants/date.constants";
+import { Categories_Event } from "@core/types/event.types";
 import { Schema_GridEvent } from "@web/common/types/web.event.types";
+import { useGridEventMouseHold } from "@web/views/Calendar/hooks/grid/useGridEventMouseHold";
 import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout";
 import { WeekProps } from "@web/views/Calendar/hooks/useWeek";
 import { EventForm } from "@web/views/Forms/EventForm";
@@ -33,6 +35,10 @@ export const GridDraft: FC<Props> = ({ measurements, weekProps }) => {
     actions.convert(start, end);
   };
 
+  const { onMouseDown } = useGridEventMouseHold((event) => {
+    setIsDragging(true);
+  }, Categories_Event.TIMED);
+
   if (!draft) return null;
 
   return (
@@ -46,9 +52,8 @@ export const GridDraft: FC<Props> = ({ measurements, weekProps }) => {
         key={`draft-${draft?._id}`}
         measurements={measurements}
         onEventMouseDown={(event: Schema_GridEvent, e: MouseEvent) => {
-          e.stopPropagation();
           e.preventDefault();
-          setIsDragging(true);
+          onMouseDown(e, event);
         }}
         onScalerMouseDown={(
           event: Schema_GridEvent,

packages/web/src/views/Calendar/components/Draft/grid/hooks/useGridMouseMove.ts

@@ -1,4 +1,4 @@
-import { MouseEvent, useCallback } from "react";
+import { MouseEvent, useCallback, useEffect } from "react";
 import { selectIsDrafting } from "@web/ducks/events/selectors/draft.selectors";
 import { useAppSelector } from "@web/store/store.hooks";
 import { useEventListener } from "@web/views/Calendar/hooks/mouse/useEventListener";
@@ -19,11 +19,24 @@ export const useGridMouseMove = () => {
         resize(e);
       } else if (isDragging) {
         e.preventDefault();
+        document.body.style.cursor = "move";
         drag(e);
       }
     },
     [draft?.isAllDay, drag, isDrafting, isDragging, isResizing, resize],
   );
 
+  const _onMouseUp = useCallback(() => {
+    document.body.style.cursor = "";
+  }, []);
+
   useEventListener("mousemove", _onMouseMove);
+  useEventListener("mouseup", _onMouseUp);
+
+  // Ensure cursor resets when the component unmounts
+  useEffect(() => {
+    return () => {
+      document.body.style.cursor = "";
+    };
+  }, []);
 };

…ponents/Draft/grid/hooks/useGridClick.ts …nents/Draft/grid/hooks/useGridMouseUp.tspackages/web/src/views/Calendar/components/Draft/grid/hooks/useGridClick.ts renamed to packages/web/src/views/Calendar/components/Draft/grid/hooks/useGridMouseUp.ts packages/web/src/views/Calendar/components/Draft/grid/hooks/useGridClick.ts renamed to packages/web/src/views/Calendar/components/Draft/grid/hooks/useGridMouseUp.ts

@@ -10,7 +10,7 @@ import { useAppSelector } from "@web/store/store.hooks";
 import { useEventListener } from "@web/views/Calendar/hooks/mouse/useEventListener";
 import { useDraftContext } from "../../context/useDraftContext";
 
-export const useGridClick = () => {
+export const useGridMouseUp = () => {
   const { actions, state } = useDraftContext();
   const { draft, dragStatus, isDragging, isResizing, resizeStatus } = state;
   const { discard, openForm, stopDragging, stopResizing, submit } = actions;

packages/web/src/views/Calendar/components/Event/styled.ts

@@ -52,10 +52,7 @@ export const StyledEvent = styled.div.attrs<StyledEventProps>((props) => {
 })<StyledEventProps>`
   background-color: ${(props) => props.backgroundColor};
   border-radius: 2px;
-  ${(props) => props.isDragging && `cursor: grabbing`}
-  filter: brightness(
-    ${({ isInPast }) => (isInPast ? 0.7 : null)}
-  );
+  filter: brightness(${({ isInPast }) => (isInPast ? 0.7 : null)});
   height: ${({ height }) => height}px;
   left: ${(props) => props.left}px;
   opacity: ${(props) => props.opacity};
@@ -76,6 +73,7 @@ export const StyledEvent = styled.div.attrs<StyledEventProps>((props) => {
       backgroundColor,
       isOptimistic,
       isPlaceholder,
+      isDragging,
       isResizing,
       hoverColor,
       theme,
@@ -84,7 +82,7 @@ export const StyledEvent = styled.div.attrs<StyledEventProps>((props) => {
       !isResizing &&
       `
       background-color: ${isOptimistic ? darken(backgroundColor) : hoverColor};
-      cursor: ${isOptimistic ? "wait" : "pointer"};
+      cursor: ${isDragging ? "move" : isOptimistic ? "wait" : "pointer"};
       drop-shadow(2px 4px 4px ${theme.color.shadow.default});
      `};
   }

packages/web/src/views/Calendar/components/Grid/AllDayRow/AllDayEvents.tsx

@@ -1,12 +1,14 @@
-import React, { MouseEvent } from "react";
+import React from "react";
 import { Categories_Event } from "@core/types/event.types";
 import { ID_GRID_EVENTS_ALLDAY } from "@web/common/constants/web.constants";
 import { Schema_GridEvent } from "@web/common/types/web.event.types";
 import { isSomedayEventFormOpen } from "@web/common/utils";
+import { isLeftClick } from "@web/common/utils/mouse/mouse.util";
 import { selectDraftId } from "@web/ducks/events/selectors/draft.selectors";
 import { selectAllDayEvents } from "@web/ducks/events/selectors/event.selectors";
 import { draftSlice } from "@web/ducks/events/slices/draft.slice";
 import { useAppDispatch, useAppSelector } from "@web/store/store.hooks";
+import { useGridEventMouseHold } from "@web/views/Calendar/hooks/grid/useGridEventMouseHold";
 import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout";
 import { WeekProps } from "@web/views/Calendar/hooks/useWeek";
 import { AllDayEventMemo } from "./AllDayEvent";
@@ -26,13 +28,7 @@ export const AllDayEvents = ({
   const draftId = useAppSelector(selectDraftId);
   const dispatch = useAppDispatch();
 
-  const onMouseDown = (e: MouseEvent, event: Schema_GridEvent) => {
-    e.stopPropagation();
-
-    if (e.button !== 0) {
-      return;
-    }
-
+  const { onMouseDown } = useGridEventMouseHold((event) => {
     if (isSomedayEventFormOpen()) {
       dispatch(draftSlice.actions.discard());
     }
@@ -43,7 +39,7 @@ export const AllDayEvents = ({
         event,
       }),
     );
-  };
+  }, Categories_Event.ALLDAY);
 
   return (
     <StyledEvents id={ID_GRID_EVENTS_ALLDAY}>
@@ -56,7 +52,12 @@ export const AllDayEvents = ({
             startOfView={startOfView}
             endOfView={endOfView}
             measurements={measurements}
-            onMouseDown={onMouseDown}
+            onMouseDown={(e, event) => {
+              if (!isLeftClick(e)) {
+                return;
+              }
+              onMouseDown(e, event);
+            }}
           />
         );
       })}

packages/web/src/views/Calendar/components/Grid/MainGrid/MainGridEvents.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent } from "react";
+import React from "react";
 import { Categories_Event } from "@core/types/event.types";
 import { ID_GRID_EVENTS_TIMED } from "@web/common/constants/web.constants";
 import { Schema_GridEvent } from "@web/common/types/web.event.types";
@@ -8,6 +8,7 @@ import { selectDraftId } from "@web/ducks/events/selectors/draft.selectors";
 import { selectGridEvents } from "@web/ducks/events/selectors/event.selectors";
 import { draftSlice } from "@web/ducks/events/slices/draft.slice";
 import { useAppDispatch, useAppSelector } from "@web/store/store.hooks";
+import { useGridEventMouseHold } from "@web/views/Calendar/hooks/grid/useGridEventMouseHold";
 import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout";
 import { WeekProps } from "@web/views/Calendar/hooks/useWeek";
 import { GridEventMemo } from "../../Event/Grid/GridEvent/GridEvent";
@@ -26,17 +27,15 @@ export const MainGridEvents = ({ measurements, weekProps }: Props) => {
   const adjustedEvents = adjustOverlappingEvents(timedEvents);
   const category = Categories_Event.TIMED;
 
-  const onMouseDown = (e: MouseEvent, event: Schema_GridEvent) => {
-    e.stopPropagation();
+  const { onMouseDown } = useGridEventMouseHold((event) => {
     if (isEventFormOpen()) {
       dispatch(
         draftSlice.actions.swap({ event, category: Categories_Event.TIMED }),
       );
       return;
     }
-
     editTimedEvent(event);
-  };
+  }, Categories_Event.TIMED);
 
   const resizeTimedEvent = (
     event: Schema_GridEvent,

packages/web/src/views/Calendar/hooks/grid/useGridEventMouseHold.ts

@@ -0,0 +1,84 @@
+import { MouseEvent as ReactMouseEvent, useRef } from "react";
+import { Categories_Event } from "@core/types/event.types";
+import {
+  ID_GRID_ALLDAY_ROW,
+  ID_GRID_MAIN,
+} from "@web/common/constants/web.constants";
+import { Schema_GridEvent } from "@web/common/types/web.event.types";
+import { getElemById } from "@web/common/utils/grid.util";
+
+const GRID_EVENT_MOUSE_HOLD_DELAY = 750;
+
+export const useGridEventMouseHold = (
+  cb: (event: Schema_GridEvent) => void,
+  eventType: Categories_Event.TIMED | Categories_Event.ALLDAY,
+  delay: number = GRID_EVENT_MOUSE_HOLD_DELAY,
+) => {
+  const elementEventTypeMap = {
+    [Categories_Event.TIMED]: ID_GRID_MAIN,
+    [Categories_Event.ALLDAY]: ID_GRID_ALLDAY_ROW,
+  };
+
+  const elementId = elementEventTypeMap[eventType];
+
+  const timeoutId = useRef<NodeJS.Timeout | null>(null);
+  const mouseMoved = useRef<boolean>(false);
+
+  const handleCallback = (event: Schema_GridEvent) => {
+    cb(event);
+  };
+
+  const onMouseDown = (e: ReactMouseEvent, event: Schema_GridEvent) => {
+    e.stopPropagation();
+    mouseMoved.current = false;
+
+    timeoutId.current = setTimeout(() => {
+      if (!mouseMoved.current) {
+        handleCallback(event);
+      }
+    }, delay);
+
+    const onMouseMove = () => {
+      mouseMoved.current = true;
+      if (timeoutId.current) {
+        clearTimeout(timeoutId.current);
+      }
+      handleCallback(event);
+      cleanup();
+    };
+
+    const onMouseUp = () => {
+      cleanup();
+
+      // Manually dispatch a new 'mouseup' event to ensure other listeners execute
+      const _event = new MouseEvent("mouseup", {
+        bubbles: true,
+        cancelable: true,
+        button: 0,
+        clientX: e.clientX,
+        clientY: e.clientY,
+      });
+
+      // Delay dispatching the new event to let React flush updates
+      setTimeout(() => {
+        getElemById(elementId).dispatchEvent(_event);
+      }, 1);
+    };
+
+    const cleanup = () => {
+      handleCallback(event);
+
+      if (timeoutId.current) {
+        clearTimeout(timeoutId.current);
+      }
+
+      getElemById(elementId).removeEventListener("mousemove", onMouseMove);
+      getElemById(elementId).removeEventListener("mouseup", onMouseUp);
+    };
+
+    getElemById(elementId).addEventListener("mousemove", onMouseMove);
+    getElemById(elementId).addEventListener("mouseup", onMouseUp);
+  };
+
+  return { onMouseDown };
+};