✨ Feat: Improve draft form interactions with Floating UI

Author: tyler-dane

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

@@ -1,4 +1,5 @@
 import React, { FC, MouseEvent } from "react";
+import { FloatingFocusManager } from "@floating-ui/react";
 import { Schema_GridEvent } from "@web/common/types/web.event.types";
 import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout";
 import { EventForm } from "@web/views/Forms/EventForm";
@@ -29,7 +30,8 @@ export const GridDraft: FC<Props> = ({
   measurements,
   weekProps,
 }) => {
-  const { x, y, refs, strategy } = formProps;
+  const { context, getReferenceProps, getFloatingProps, x, y, refs, strategy } =
+    formProps;
 
   const onConvert = () => {
     const start = weekProps.component.startOfView.format(YEAR_MONTH_DAY_FORMAT);
@@ -65,25 +67,31 @@ export const GridDraft: FC<Props> = ({
         }}
         ref={refs.setReference}
         weekProps={weekProps}
+        {...getReferenceProps()}
       />
 
       <div>
         {draft?.isOpen && (
-          <StyledFloatContainer
-            ref={refs.setFloating}
-            strategy={strategy}
-            top={y ?? 0}
-            left={x ?? 0}
-          >
-            <EventForm
-              event={draft}
-              onClose={draftUtil.discard}
-              onConvert={onConvert}
-              onDelete={draftUtil.deleteEvent}
-              onSubmit={(_draft: Schema_GridEvent) => draftUtil.submit(_draft)}
-              setEvent={draftUtil.setDraft}
-            />
-          </StyledFloatContainer>
+          <FloatingFocusManager context={context}>
+            <StyledFloatContainer
+              ref={refs.setFloating}
+              strategy={strategy}
+              top={y ?? 0}
+              left={x ?? 0}
+              {...getFloatingProps()}
+            >
+              <EventForm
+                event={draft}
+                onClose={draftUtil.discard}
+                onConvert={onConvert}
+                onDelete={draftUtil.deleteEvent}
+                onSubmit={(_draft: Schema_GridEvent) =>
+                  draftUtil.submit(_draft)
+                }
+                setEvent={draftUtil.setDraft}
+              />
+            </StyledFloatContainer>
+          </FloatingFocusManager>
         )}
       </div>
     </>

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

@@ -3,7 +3,7 @@ import mergeRefs from "react-merge-refs";
 import { Dayjs } from "dayjs";
 import { Categories_Event } from "@core/types/event.types";
 import { DRAFT_DURATION_MIN } from "@web/views/Calendar/layout.constants";
-import { useAppDispatch } from "@web/store/store.hooks";
+import { useAppDispatch, useAppSelector } from "@web/store/store.hooks";
 import { Ref_Callback } from "@web/common/types/util.types";
 import { WeekProps } from "@web/views/Calendar/hooks/useWeek";
 import { DateCalcs } from "@web/views/Calendar/hooks/grid/useDateCalcs";
@@ -23,6 +23,7 @@ import {
 } from "./styled";
 import { MainGridEvents } from "./MainGridEvents";
 import { MainGridColumns } from "../Columns/MainGridColumns";
+import { selectIsDrafting } from "@web/ducks/events/selectors/draft.selectors";
 
 interface Props {
   dateCalcs: DateCalcs;
@@ -47,10 +48,12 @@ export const MainGrid: FC<Props> = ({
 
   const { component } = weekProps;
   const { isCurrentWeek, week, weekDays } = component;
+  const isDrafting = useAppSelector(selectIsDrafting);
 
   const onMouseDown = async (e: MouseEvent) => {
-    if (isEventFormOpen()) {
-      dispatch(draftSlice.actions.discard());
+    if (isDrafting) {
+      console.log("moused down while drafting, discarding....");
+      dispatch(draftSlice.actions.discard({}));
       return;
     }
 

packages/web/src/views/Calendar/hooks/draft/actions/useDraftActions.ts

@@ -153,11 +153,14 @@ export const useDraftActions = (
   };
 
   const discard = useCallback(() => {
+    console.log("draft", draft);
     if (draft) {
       setDraft(null);
     }
 
+    console.log("discarding ...");
     if (reduxDraft || reduxDraftType) {
+      console.log("discarding redux draft...");
       dispatch(draftSlice.actions.discard({}));
     }
   }, [dispatch, draft, reduxDraft, reduxDraftType]);
@@ -369,7 +372,7 @@ export const useDraftActions = (
   const handleChange = useCallback(async () => {
     if (!isDrafting) return;
 
-    if (activity === "createShortcut" || activity === "gridClick") {
+    if (activity === "createShortcut") {
       await handleShortcutOrClick();
       return;
     }

packages/web/src/views/Calendar/hooks/draft/effects/useDraftEffects.ts

@@ -40,11 +40,20 @@ export const useDraftEffects = (
   }, [dateBeingChanged, isResizing]);
 
   useEffect(() => {
-    const isStaleDraft = !isDrafting && isFormOpen;
+    // const isStaleDraft = !isDrafting && (isResizing || isDragging);
+    const isStaleDraft = !isDrafting;
     if (isStaleDraft) {
+      console.log("setting draft to null");
+      console.log(state);
       setDraft(null);
+      setIsDragging(false);
+      setIsFormOpen(false);
+      setIsResizing(false);
+      setDragStatus(null);
+      setResizeStatus(null);
+      setDateBeingChanged(null);
     }
-  }, [isDrafting, isFormOpen]);
+  }, [isDrafting]);
 
   useEffect(() => {
     handleChange();

packages/web/src/views/Calendar/hooks/draft/form/useDraftForm.ts

@@ -0,0 +1,45 @@
+import { OpenChangeReason } from "@floating-ui/react";
+import { useEventForm } from "@web/views/Forms/hooks/useEventForm";
+
+export const useDraftForm = (
+  isFormOpen: boolean,
+  reset: () => void,
+  discard: () => void,
+  setIsFormOpen: (isOpen: boolean) => void
+) => {
+  const handleDiscard = (reason?: OpenChangeReason) => {
+    reset();
+
+    if (reason === "escape-key") {
+      console.log("discarding draft cuz escape key was pressed");
+      discard();
+      return;
+    }
+
+    if (reason === "outside-press") {
+      console.log("discarding draft cuz outside press");
+      discard();
+      return;
+    }
+  };
+
+  const onIsFormOpenChange = (isOpen: boolean, reason?: OpenChangeReason) => {
+    const isFormAlreadyOpen = isFormOpen === true;
+    console.log("isFormAlreadyOpen", isFormAlreadyOpen);
+    if (isFormAlreadyOpen) {
+      // console.log("discarding (local) draft cuz form already open");
+      handleDiscard(reason);
+      return;
+    }
+
+    setIsFormOpen(isOpen);
+
+    if (isOpen === false) {
+      console.log("resetting and discarding");
+      reset();
+      discard();
+    }
+  };
+  const formProps = useEventForm("grid", isFormOpen, onIsFormOpenChange);
+  return { formProps };
+};

packages/web/src/views/Calendar/hooks/draft/useDraft.ts

@@ -2,6 +2,7 @@ import { DateCalcs } from "../grid/useDateCalcs";
 import { WeekProps } from "../useWeek";
 import { useDraftState } from "./state/useDraftState";
 import { useDraftActions } from "./actions/useDraftActions";
+import { useDraftForm } from "./form/useDraftForm";
 
 export const useDraft = (
   dateCalcs: DateCalcs,
@@ -44,10 +45,18 @@ export const useDraft = (
     isSidebarOpen
   );
 
+  const { formProps } = useDraftForm(
+    isFormOpen,
+    actions.reset,
+    actions.discard,
+    setIsFormOpen
+  );
+
   return {
     draftState: {
       draft,
       dragStatus,
+      formProps,
       isDragging,
       isFormOpen,
       isResizing,

packages/web/src/views/Forms/hooks/useEventForm.ts

@@ -2,13 +2,18 @@ import {
   autoUpdate,
   flip,
   offset,
+  OpenChangeReason,
   shift,
+  useDismiss,
   useFloating,
   UseFloatingOptions,
+  useInteractions,
 } from "@floating-ui/react";
 
 export const useEventForm = (
-  eventType: "grid" | "sidebarWeek" | "sidebarMonth"
+  eventType: "grid" | "sidebarWeek" | "sidebarMonth",
+  isOpen: boolean,
+  onIsFormOpenChange: (isOpen: boolean, reason?: OpenChangeReason) => void
 ) => {
   let options: Partial<UseFloatingOptions>;
 
@@ -40,10 +45,22 @@ export const useEventForm = (
     };
   }
 
-  const { context, x, y, refs, strategy } = useFloating(options);
+  const { context, x, y, refs, strategy } = useFloating({
+    ...options,
+    open: isOpen,
+    onOpenChange(newIsOpen, event, reason) {
+      console.log("onOpenChange", newIsOpen, event, reason);
+      onIsFormOpenChange(newIsOpen, reason);
+    },
+  });
+
+  const dismiss = useDismiss(context);
+  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);
 
   return {
     context,
+    getFloatingProps,
+    getReferenceProps,
     refs,
     strategy,
     x,