From e92037cc7dd8f96fe144aa367264d08db52fe154 Mon Sep 17 00:00:00 2001
From: timothycarambat <rambat1010@gmail.com>
Date: Wed, 12 Jun 2024 12:21:37 -0700
Subject: [PATCH] update ModalWrapper component for `noPortal` prop
---
.../src/components/ModalWrapper/index.jsx | 22 ++++++++++++++++++-
1 file changed, 21 insertions(+), 1 deletion(-)
diff --git a/frontend/src/components/ModalWrapper/index.jsx b/frontend/src/components/ModalWrapper/index.jsx
index bd3995ce4..b780e5731 100644
--- a/frontend/src/components/ModalWrapper/index.jsx
+++ b/frontend/src/components/ModalWrapper/index.jsx
@@ -1,8 +1,28 @@
import { createPortal } from "react-dom";
+/**
+ * @typedef {Object} ModalWrapperProps
+ * @property {import("react").ReactComponentElement} children - The DOM/JSX to render
+ * @property {boolean} isOpen - Option that renders the modal
+ * @property {boolean} noPortal - (default: false) Used for creating sub-DOM modals that need to be rendered as a child element instead of a modal placed at the root
+ * Note: This can impact the bg-overlay presentation due to conflicting DOM positions so if using this property you should
+ double check it renders as desired.
+ */
-export default function ModalWrapper({ children, isOpen }) {
+/**
+ * @param {ModalWrapperProps} props - ModalWrapperProps to pass
+ * @returns {import("react").ReactNode}
+ */
+export default function ModalWrapper({ children, isOpen, noPortal = false }) {
if (!isOpen) return null;
+ if (noPortal) {
+ return (
+ <div className="bg-black/60 backdrop-blur-sm fixed top-0 left-0 outline-none w-screen h-screen flex items-center justify-center z-30">
+ {children}
+ </div>
+ );
+ }
+
return createPortal(
<div className="bg-black/60 backdrop-blur-sm fixed top-0 left-0 outline-none w-screen h-screen flex items-center justify-center z-30">
{children}
--
GitLab