diff options
author | crupest <crupest@outlook.com> | 2023-07-29 18:26:24 +0800 |
---|---|---|
committer | crupest <crupest@outlook.com> | 2023-07-29 18:26:24 +0800 |
commit | 13f6f2a451feede8037d18cfbac64843e108ccbd (patch) | |
tree | ed27f20f477d4a0f24ba711f8001d2ac1a67ecdd /FrontEnd/src/views/common/dialog/Dialog.tsx | |
parent | 2d4a75a21a8a97db8017b56e321c56c7d70bc674 (diff) | |
download | timeline-13f6f2a451feede8037d18cfbac64843e108ccbd.tar.gz timeline-13f6f2a451feede8037d18cfbac64843e108ccbd.tar.bz2 timeline-13f6f2a451feede8037d18cfbac64843e108ccbd.zip |
...
Diffstat (limited to 'FrontEnd/src/views/common/dialog/Dialog.tsx')
-rw-r--r-- | FrontEnd/src/views/common/dialog/Dialog.tsx | 10 |
1 files changed, 8 insertions, 2 deletions
diff --git a/FrontEnd/src/views/common/dialog/Dialog.tsx b/FrontEnd/src/views/common/dialog/Dialog.tsx index 9ce344dc..2ff7bea8 100644 --- a/FrontEnd/src/views/common/dialog/Dialog.tsx +++ b/FrontEnd/src/views/common/dialog/Dialog.tsx @@ -1,4 +1,4 @@ -import { ReactNode } from "react"; +import { ReactNode, useRef } from "react"; import ReactDOM from "react-dom"; import { CSSTransition } from "react-transition-group"; import classNames from "classnames"; @@ -30,15 +30,21 @@ export default function Dialog({ }: DialogProps) { color = color ?? "primary"; + const nodeRef = useRef(null); + return ReactDOM.createPortal( <CSSTransition + nodeRef={nodeRef} mountOnEnter unmountOnExit in={open} timeout={300} classNames="cru-dialog" > - <div className={classNames("cru-dialog-overlay", `cru-${color}`)}> + <div + ref={nodeRef} + className={classNames("cru-dialog-overlay", `cru-${color}`)} + > <div className="cru-dialog-background" onClick={ |