feat(dialog): dialog support destroy

dialog support destroy
Tencent · Apr 14, 2022 · 376193d · 376193d
1 parent 759ca48
commit 376193d
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 9 deletions.
diff --git a/src/dialog/Dialog.tsx b/src/dialog/Dialog.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useMemo } from 'react';
+import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
 import isString from 'lodash/isString';
 import { CloseIcon, InfoCircleFilledIcon, CheckCircleFilledIcon } from 'tdesign-icons-react';
 import { useLocaleReceiver } from '../locale/LocalReceiver';
@@ -19,6 +19,7 @@ export interface DialogProps extends TdDialogProps, StyledProps {
 
 const Dialog = forwardRef((props: DialogProps, ref: React.Ref<DialogInstance>) => {
   const { classPrefix } = useConfig();
+  const dialogDom = useRef<HTMLDivElement>();
   const [state, setState] = useSetState<DialogProps>({
     width: 520,
     visible: false,
@@ -75,7 +76,9 @@ const Dialog = forwardRef((props: DialogProps, ref: React.Ref<DialogInstance>) =
     hide() {
       setState({ visible: false });
     },
-    destroy: noop,
+    destroy() {
+      setState({ visible: false, destroyOnClose: true });
+    },
     update(newOptions) {
       setState((prevState) => ({
         ...prevState,
@@ -161,6 +164,7 @@ const Dialog = forwardRef((props: DialogProps, ref: React.Ref<DialogInstance>) =
       classPrefix={classPrefix}
       onClose={onClose}
       footer={footer === undefined ? defaultFooter() : footer}
+      ref={dialogDom}
     />
   );
 });

diff --git a/src/dialog/RenderDialog.tsx b/src/dialog/RenderDialog.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, CSSProperties, useEffect } from 'react';
+import React, { useRef, CSSProperties, useEffect, forwardRef, useImperativeHandle } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import classnames from 'classnames';
 import Portal from '../common/Portal';
@@ -30,7 +30,7 @@ const getClickPosition = (e: MouseEvent) => {
 if (typeof window !== 'undefined' && window.document && window.document.documentElement) {
   document.documentElement.addEventListener('click', getClickPosition, true);
 }
-const RenderDialog: React.FC<RenderDialogProps> = (props) => {
+const RenderDialog = forwardRef((props: RenderDialogProps, ref: React.Ref<HTMLDivElement>) => {
   const {
     prefixCls,
     attach,
@@ -47,17 +47,19 @@ const RenderDialog: React.FC<RenderDialogProps> = (props) => {
     closeBtn,
     closeOnEscKeydown = true,
     closeOnOverlayClick = true,
+    destroyOnClose = false,
   } = props;
   const wrap = useRef<HTMLDivElement>();
   const dialog = useRef<HTMLDivElement>();
   const maskRef = useRef<HTMLDivElement>();
+  const domRef = useRef<HTMLDivElement>();
   const bodyOverflow = useRef<string>();
   const bodyCssTextRef = useRef<string>();
   const isModal = mode === 'modal';
   const canDraggable = props.draggable && mode === 'modeless';
   const dialogOpenClass = `${prefixCls}__open`;
   useDialogEsc(visible, wrap);
-
+  useImperativeHandle(ref, () => domRef.current);
   useLayoutEffect(() => {
     bodyOverflow.current = document.body.style.overflow;
     bodyCssTextRef.current = document.body.style.cssText;
@@ -119,6 +121,9 @@ const RenderDialog: React.FC<RenderDialogProps> = (props) => {
       style.left = '50%';
       style.top = '50%';
     }
+    if (destroyOnClose) {
+      domRef.current?.parentNode?.removeChild(domRef.current);
+    }
     onClosed && onClosed();
   };
 
@@ -232,7 +237,7 @@ const RenderDialog: React.FC<RenderDialogProps> = (props) => {
         in={props.visible}
         appear
         mountOnEnter
-        unmountOnExit={props.destroyOnClose}
+        unmountOnExit={destroyOnClose}
         timeout={transitionTime}
         classNames={`${prefixCls}-zoom`}
         onEntered={props.onOpened}
@@ -293,15 +298,20 @@ const RenderDialog: React.FC<RenderDialogProps> = (props) => {
     if (visible || wrap.current) {
       if (!attach) {
         dom = dialog;
+        domRef.current = dom;
       } else {
-        dom = <Portal attach={attach}>{dialog}</Portal>;
+        dom = (
+          <Portal attach={attach} ref={domRef}>
+            {dialog}
+          </Portal>
+        );
       }
     }
 
     return dom;
   };
 
   return render();
-};
+});
 
 export default RenderDialog;
diff --git a/src/dialog/plugin.tsx b/src/dialog/plugin.tsx
@@ -14,6 +14,7 @@ const createDialog: DialogPlugin = (props: DialogOptions): DialogInstance => {
   const dialogRef = React.createRef<DialogInstance>();
   const options = { ...props };
   const div = document.createElement('div');
+
   ReactDOM.render(
     <DialogComponent {...(options as DialogProps)} visible={true} ref={dialogRef} isPlugin />,
     div,
@@ -30,16 +31,19 @@ const createDialog: DialogPlugin = (props: DialogOptions): DialogInstance => {
 
   const dialogNode: DialogInstance = {
     show: () => {
+      container.appendChild(div);
       dialogRef.current?.show();
     },
     hide: () => {
+      div?.parentNode?.removeChild(div);
       dialogRef.current?.hide();
     },
     update: (updateOptions: DialogOptions) => {
       dialogRef.current?.update(updateOptions);
     },
     destroy: () => {
-      container.contains(div) && container.removeChild(div);
+      dialogRef.current?.destroy();
+      div?.parentNode?.removeChild(div);
     },
   };
   return dialogNode;