feat: Hackday: make beam modals draggable

package.json

@@ -46,6 +46,7 @@
     "mobx-utils": "^6.0.8",
     "react-aria": "^3.26.0",
     "react-day-picker": "8.0.7",
+    "react-draggable": "^4.4.5",
     "react-popper": "^2.3.0",
     "react-router": "^5.3.4",
     "react-router-dom": "^5.3.4",

src/components/BeamContext.tsx

@@ -53,7 +53,12 @@ export function BeamProvider({ children, ...presentationProps }: BeamProviderPro
   // So we use refs + a tick.
   const [, tick] = useReducer((prev) => prev + 1, 0);
   const modalRef = useRef<ModalProps | undefined>();
-  const modalHeaderDiv = useMemo(() => document.createElement("div"), []);
+  const modalHeaderDiv = useMemo(() => {
+    const d = document.createElement("div");
+    // necessary to make modal header draggable
+    d.id = "draggable_header_div";
+    return d;
+  }, []);
   const modalBodyDiv = useMemo(() => {
     const el = document.createElement("div");
     // Ensure this wrapping div takes up the full height of its container in the case of a virtualized table within.

src/components/Modal/Modal.tsx

@@ -2,6 +2,7 @@ import { useResizeObserver } from "@react-aria/utils";
 import { MutableRefObject, PropsWithChildren, ReactNode, useCallback, useEffect, useRef, useState } from "react";
 import { FocusScope, OverlayContainer, useDialog, useModal, useOverlay, usePreventScroll } from "react-aria";
 import { createPortal } from "react-dom";
+import Draggable, { DraggableEvent } from "react-draggable";
 import { AutoSaveStatusProvider } from "src/components";
 import { useBeamContext } from "src/components/BeamContext";
 import { IconButton } from "src/components/IconButton";
@@ -102,44 +103,53 @@ export function Modal(props: ModalProps) {
     [modalBodyRef, modalFooterRef, modalHeaderRef],
   );
 
+  const event = (evt: DraggableEvent) => {
+    if ((evt.target as HTMLElement).id.includes("draggable")) {
+      return false;
+    }
+  };
+
   return (
     <OverlayContainer>
       <AutoSaveStatusProvider>
         <div css={Css.underlay.z4.$} {...underlayProps} {...testId.underlay}>
           <FocusScope contain restoreFocus autoFocus>
-            <div
-              css={
-                Css.br24.bgWhite.bshModal.overflowHidden
-                  .maxh("90vh")
-                  .df.fdc.wPx(width)
-                  .mhPx(defaultMinHeight)
-                  .if(isFixedHeight)
-                  .hPx(height).$
-              }
-              ref={ref}
-              {...overlayProps}
-              {...dialogProps}
-              {...modalProps}
-              {...testId}
-            >
-              {/* Setup three children (header, content, footer), and flex grow the content. */}
-              <header css={Css.df.p3.fs0.if(drawHeaderBorder).bb.bGray200.$}>
-                <h1 css={Css.fg1.xl2Sb.gray900.$} ref={modalHeaderRef} {...titleProps} {...testId.title} />
-                <span css={Css.fs0.pl1.$}>
-                  <IconButton icon="x" onClick={closeModal} {...testId.titleClose} />
-                </span>
-              </header>
-              <main
-                ref={modalBodyRef}
-                css={Css.fg1.overflowYAuto.if(hasScroll).bb.bGray200.if(!!forceScrolling).overflowYScroll.$}
-              >
-                {/* We'll include content here, but we expect ModalBody and ModalFooter to use their respective portals. */}
-                {content}
-              </main>
-              <footer css={Css.fs0.$}>
-                <div ref={modalFooterRef} />
-              </footer>
-            </div>
+            <Draggable onDrag={event} onMouseDown={event} onStart={event} onStop={event}>
+              <div
+                id="draggable_container"
+                css={
+                  Css.br24.bgWhite.bshModal.overflowHidden
+                    .maxh("90vh")
+                    .df.fdc.wPx(width)
+                    .mhPx(defaultMinHeight)
+                    .if(isFixedHeight)
+                    .hPx(height).$
+                }
+                ref={ref}
+                {...overlayProps}
+                {...dialogProps}
+                {...modalProps}
+                {...testId}
+              >/
+                {/* Setup three children (header, content, footer), and flex grow the content. */}
+                <header id="draggable_header" css={Css.df.p3.fs0.if(drawHeaderBorder).bb.bGray200.$}>
+                  <h1 css={Css.fg1.xl2Sb.gray900.$} ref={modalHeaderRef} {...titleProps} {...testId.title} />
+                  <span css={Css.fs0.pl1.$}>
+                    <IconButton icon="x" onClick={closeModal} {...testId.titleClose} />
+                  </span>
+                </header>
+                <main
+                  ref={modalBodyRef}
+                  css={Css.fg1.overflowYAuto.if(hasScroll).bb.bGray200.if(!!forceScrolling).overflowYScroll.$}
+                >
+                  {/* We'll include content here, but we expect ModalBody and ModalFooter to use their respective portals. */}
+                  {content}
+                </main>
+                <footer css={Css.fs0.$}>
+                  <div ref={modalFooterRef} />
+                </footer>
+              </div>
+            </Draggable>
           </FocusScope>
         </div>
       </AutoSaveStatusProvider>

yarn.lock

@@ -2684,6 +2684,7 @@ __metadata:
     react-aria: ^3.26.0
     react-day-picker: 8.0.7
     react-dom: ^18.2.0
+    react-draggable: ^4.4.5
     react-popper: ^2.3.0
     react-router: ^5.3.4
     react-router-dom: ^5.3.4
@@ -17765,6 +17766,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-draggable@npm:^4.4.5":
+  version: 4.4.5
+  resolution: "react-draggable@npm:4.4.5"
+  dependencies:
+    clsx: ^1.1.1
+    prop-types: ^15.8.1
+  peerDependencies:
+    react: ">= 16.3.0"
+    react-dom: ">= 16.3.0"
+  checksum: 21c3775db086e13020967627c20acd41d1ddbc7c7d7fca51491a5bbb54a0aa7e1730a4bc9af17141eb50a4954e547a5e25b2368f5f54b70db6f2686a897bacf2
+  languageName: node
+  linkType: hard
+
 "react-element-to-jsx-string@npm:^15.0.0":
   version: 15.0.0
   resolution: "react-element-to-jsx-string@npm:15.0.0"