kamp/anything-llm
1
0
Fork 0
mirror of https://github.com/Mintplex-Labs/anything-llm.git synced 2024-11-10 17:00:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

update ModalWrapper component for noPortal prop

Browse Source
This commit is contained in:
timothycarambat 2024-06-12 12:21:37 -07:00
parent 9c3014de70
commit e92037cc7d
1 changed files with 21 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/components/ModalWrapper/index.jsx
View File

@ -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}