feat(ui): support destroy node after element hided

Author: xiejay97

packages/ui/src/components/_transition/Transition.tsx

@@ -11,13 +11,24 @@ export interface DTransitionProps {
   dDuring: number | { enter: number; leave: number };
   dMountBeforeFirstEnter?: boolean;
   dSkipFirstTransition?: boolean | [boolean, boolean];
+  dDestroyWhenLeaved?: boolean;
   onEnter?: () => void;
   afterEnter?: () => void;
   afterLeave?: () => void;
 }
 
 export function DTransition(props: DTransitionProps): JSX.Element | null {
-  const { children, dIn, dDuring, dMountBeforeFirstEnter = true, dSkipFirstTransition = true, onEnter, afterEnter, afterLeave } = props;
+  const {
+    children,
+    dIn,
+    dDuring,
+    dMountBeforeFirstEnter = true,
+    dSkipFirstTransition = true,
+    dDestroyWhenLeaved = false,
+    onEnter,
+    afterEnter,
+    afterLeave,
+  } = props;
 
   const initState = useMemo<DTransitionState>(() => {
     const [skipEnter, skipLeave] = isArray(dSkipFirstTransition) ? dSkipFirstTransition : [dSkipFirstTransition, dSkipFirstTransition];
@@ -101,6 +112,10 @@ export function DTransition(props: DTransitionProps): JSX.Element | null {
   }, [stateChange]);
 
   const shouldRender = (() => {
+    if (state === 'leaved' && dDestroyWhenLeaved) {
+      return false;
+    }
+
     if (dataRef.current.isFirstEnter && !dMountBeforeFirstEnter) {
       return false;
     }

packages/ui/src/components/alert/Alert.tsx

@@ -60,6 +60,7 @@ export function DAlert(props: DAlertProps): JSX.Element | null {
         },
         leaved: { display: 'none' },
       }}
+      dDestroyWhenLeaved
       afterEnter={() => {
         afterVisibleChange?.(true);
       }}

packages/ui/src/components/button/Button.tsx

@@ -106,6 +106,7 @@ function Button(props: DButtonProps, ref: React.ForwardedRef<HTMLButtonElement>)
                   },
                   leaved: { display: 'none' },
                 }}
+                dDestroyWhenLeaved
               >
                 {(collapseRef, collapseStyle) => buttonIcon(true, collapseRef, collapseStyle)}
               </DCollapseTransition>

packages/ui/src/components/drawer/Drawer.tsx

@@ -29,6 +29,7 @@ export interface DDrawerProps extends React.HTMLAttributes<HTMLDivElement> {
   dMaskClosable?: boolean;
   dEscClosable?: boolean;
   dSkipFirstTransition?: boolean;
+  dDestroyAfterClose?: boolean;
   dHeader?: React.ReactElement | string;
   dFooter?: React.ReactElement;
   dChildDrawer?: React.ReactElement;
@@ -59,6 +60,7 @@ export const DDrawer: {
     dMaskClosable = true,
     dEscClosable = true,
     dSkipFirstTransition = true,
+    dDestroyAfterClose = true,
     dHeader,
     dFooter,
     dChildDrawer,
@@ -232,6 +234,7 @@ export const DDrawer: {
         dIn={visible}
         dDuring={TTANSITION_DURING_BASE}
         dSkipFirstTransition={dSkipFirstTransition}
+        dDestroyWhenLeaved={dDestroyAfterClose}
         afterEnter={() => {
           afterVisibleChange?.(true);
         }}

packages/ui/src/components/image/ImagePreview.tsx

@@ -238,6 +238,7 @@ export function DImagePreview(props: DImagePreviewProps): JSX.Element | null {
       <DTransition
         dIn={visible}
         dDuring={TTANSITION_DURING_BASE}
+        dDestroyWhenLeaved
         afterEnter={() => {
           afterVisibleChange?.(true);
         }}

packages/ui/src/components/modal/Modal.tsx

@@ -26,6 +26,7 @@ export interface DModalProps extends React.HTMLAttributes<HTMLDivElement> {
   dMaskClosable?: boolean;
   dEscClosable?: boolean;
   dSkipFirstTransition?: boolean;
+  dDestroyAfterClose?: boolean;
   dType?: {
     type: 'success' | 'warning' | 'error' | 'info';
     title?: React.ReactNode;
@@ -54,6 +55,7 @@ export const DModal: {
     dMaskClosable = true,
     dEscClosable = true,
     dSkipFirstTransition = true,
+    dDestroyAfterClose = true,
     dType,
     dHeader,
     dFooter,
@@ -137,6 +139,7 @@ export const DModal: {
         dIn={visible}
         dDuring={TTANSITION_DURING_BASE}
         dSkipFirstTransition={dSkipFirstTransition}
+        dDestroyWhenLeaved={dDestroyAfterClose}
         onEnter={() => {
           if (isUndefined(ROOT_DATA.clickEvent) || performance.now() - ROOT_DATA.clickEvent.time > 100) {
             dataRef.current.transformOrigin = undefined;

packages/ui/src/components/popover/Popover.tsx

@@ -29,6 +29,7 @@ export interface DPopoverProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   dContainer?: DRefExtra | false;
   dPlacement?: DPopupPlacement;
   dEscClosable?: boolean;
+  dDestroyAfterClose?: boolean;
   dArrow?: boolean;
   dModal?: boolean;
   dDistance?: number;
@@ -53,6 +54,7 @@ function Popover(props: DPopoverProps, ref: React.ForwardedRef<DPopoverRef>): JS
     dContainer,
     dPlacement = 'top',
     dEscClosable = true,
+    dDestroyAfterClose = false,
     dArrow = true,
     dModal = false,
     dDistance = 10,
@@ -292,6 +294,7 @@ function Popover(props: DPopoverProps, ref: React.ForwardedRef<DPopoverRef>): JS
               <DTransition
                 dIn={visible}
                 dDuring={TTANSITION_DURING}
+                dDestroyWhenLeaved={dDestroyAfterClose}
                 onEnter={updatePosition}
                 afterEnter={() => {
                   afterVisibleChange?.(true);

packages/ui/src/components/spinner/Spinner.tsx

@@ -93,6 +93,7 @@ export function DSpinner(props: DSpinnerProps): JSX.Element | null {
           containerRef.current.style.height = `${spinnerRef.current.clientHeight}px`;
         }
       }}
+      dDestroyWhenLeaved
       afterEnter={() => {
         afterVisibleChange?.(true);
       }}