From b31152727a6f419d81c5e894ee37b84c4607bde4 Mon Sep 17 00:00:00 2001 From: bsholmes Date: Mon, 18 Sep 2023 13:04:33 -0700 Subject: [PATCH 1/3] draggable modals --- package.json | 1 + src/components/BeamContext.tsx | 6 ++- src/components/Modal/Modal.tsx | 74 +++++++++++++++++++--------------- yarn.lock | 14 +++++++ 4 files changed, 62 insertions(+), 33 deletions(-) diff --git a/package.json b/package.json index 2123039e9..5cdd132bc 100644 --- a/package.json +++ b/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", diff --git a/src/components/BeamContext.tsx b/src/components/BeamContext.tsx index b45111dad..36b2bf1d5 100644 --- a/src/components/BeamContext.tsx +++ b/src/components/BeamContext.tsx @@ -53,7 +53,11 @@ export function BeamProvider({ children, ...presentationProps }: BeamProviderPro // So we use refs + a tick. const [, tick] = useReducer((prev) => prev + 1, 0); const modalRef = useRef(); - const modalHeaderDiv = useMemo(() => document.createElement("div"), []); + const modalHeaderDiv = useMemo(() => { + const d = document.createElement("div"); + d.id = "draggable"; + 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. diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx index f44ebfc76..3944be46a 100644 --- a/src/components/Modal/Modal.tsx +++ b/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 !== "draggable") { + return false; + } + }; + return (
-
- {/* Setup three children (header, content, footer), and flex grow the content. */} -
-

- - - -

-
+
- {/* We'll include content here, but we expect ModalBody and ModalFooter to use their respective portals. */} - {content} -
-
-
-
-
+ {/* Setup three children (header, content, footer), and flex grow the content. */} +
+

+ + + +

+
+ {/* We'll include content here, but we expect ModalBody and ModalFooter to use their respective portals. */} + {content} +
+
+
+
+
+ diff --git a/yarn.lock b/yarn.lock index b6d14a546..d21dd6850 100644 --- a/yarn.lock +++ b/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" From a50dbdd330a65d591a88c3164b385ab475a6e699 Mon Sep 17 00:00:00 2001 From: bsholmes Date: Mon, 18 Sep 2023 13:07:35 -0700 Subject: [PATCH 2/3] comment --- src/components/BeamContext.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/BeamContext.tsx b/src/components/BeamContext.tsx index 36b2bf1d5..e23edfc34 100644 --- a/src/components/BeamContext.tsx +++ b/src/components/BeamContext.tsx @@ -55,6 +55,7 @@ export function BeamProvider({ children, ...presentationProps }: BeamProviderPro const modalRef = useRef(); const modalHeaderDiv = useMemo(() => { const d = document.createElement("div"); + // necessary to make modal header draggable d.id = "draggable"; return d; }, []); From 3252b20338212941c07f3da4ac2dd93c5af4dc5c Mon Sep 17 00:00:00 2001 From: bsholmes Date: Tue, 19 Sep 2023 11:10:52 -0700 Subject: [PATCH 3/3] unique ids --- src/components/BeamContext.tsx | 2 +- src/components/Modal/Modal.tsx | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/BeamContext.tsx b/src/components/BeamContext.tsx index e23edfc34..e6eaa74bb 100644 --- a/src/components/BeamContext.tsx +++ b/src/components/BeamContext.tsx @@ -56,7 +56,7 @@ export function BeamProvider({ children, ...presentationProps }: BeamProviderPro const modalHeaderDiv = useMemo(() => { const d = document.createElement("div"); // necessary to make modal header draggable - d.id = "draggable"; + d.id = "draggable_header_div"; return d; }, []); const modalBodyDiv = useMemo(() => { diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx index 3944be46a..0b7fc1966 100644 --- a/src/components/Modal/Modal.tsx +++ b/src/components/Modal/Modal.tsx @@ -104,7 +104,7 @@ export function Modal(props: ModalProps) { ); const event = (evt: DraggableEvent) => { - if ((evt.target as HTMLElement).id !== "draggable") { + if ((evt.target as HTMLElement).id.includes("draggable")) { return false; } }; @@ -116,7 +116,7 @@ export function Modal(props: ModalProps) {
+ >/ {/* Setup three children (header, content, footer), and flex grow the content. */} -
+