diff options
Diffstat (limited to 'FrontEnd/src/views/common/dialog/Dialog.tsx')
-rw-r--r-- | FrontEnd/src/views/common/dialog/Dialog.tsx | 63 |
1 files changed, 0 insertions, 63 deletions
diff --git a/FrontEnd/src/views/common/dialog/Dialog.tsx b/FrontEnd/src/views/common/dialog/Dialog.tsx deleted file mode 100644 index 2ff7bea8..00000000 --- a/FrontEnd/src/views/common/dialog/Dialog.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { ReactNode, useRef } from "react"; -import ReactDOM from "react-dom"; -import { CSSTransition } from "react-transition-group"; -import classNames from "classnames"; - -import { ThemeColor } from "../common"; - -import "./Dialog.css"; - -const optionalPortalElement = document.getElementById("portal"); -if (optionalPortalElement == null) { - throw new Error("Portal element not found"); -} -const portalElement = optionalPortalElement; - -interface DialogProps { - open: boolean; - onClose: () => void; - color?: ThemeColor; - children?: ReactNode; - disableCloseOnClickOnOverlay?: boolean; -} - -export default function Dialog({ - open, - onClose, - color, - children, - disableCloseOnClickOnOverlay, -}: DialogProps) { - color = color ?? "primary"; - - const nodeRef = useRef(null); - - return ReactDOM.createPortal( - <CSSTransition - nodeRef={nodeRef} - mountOnEnter - unmountOnExit - in={open} - timeout={300} - classNames="cru-dialog" - > - <div - ref={nodeRef} - className={classNames("cru-dialog-overlay", `cru-${color}`)} - > - <div - className="cru-dialog-background" - onClick={ - disableCloseOnClickOnOverlay - ? undefined - : () => { - onClose(); - } - } - /> - <div className="cru-dialog-container">{children}</div> - </div> - </CSSTransition>, - portalElement, - ); -} |