chore: destroyOnClose

Author: zombieJ

docs/demo/forceRender.md

@@ -0,0 +1,3 @@
+## Force Render
+
+<code src="../examples/forceRender.tsx">

docs/demo/openRenderDom.md

@@ -0,0 +1,54 @@
+import { Button } from 'antd';
+import * as React from 'react';
+
+import Drawer from 'rc-drawer';
+
+import 'antd/lib/button/style';
+import 'antd/lib/menu/style';
+import 'antd/lib/style';
+
+import '../../assets/index.less';
+import './assets/index.less';
+import motionProps from './motion';
+
+export default () => {
+  const [open, setOpen] = React.useState(false);
+  const [open2, setOpen2] = React.useState(false);
+
+  return (
+    <div>
+      <Drawer
+        width="20vw"
+        open={open}
+        onClose={() => setOpen(false)}
+        forceRender
+        {...motionProps}
+      >
+        Hello World!
+      </Drawer>
+      <Drawer
+        width="20vw"
+        open={open2}
+        onClose={() => setOpen2(false)}
+        destroyOnClose
+        placement='left'
+        {...motionProps}
+      >
+        Hello World!
+      </Drawer>
+      <div
+        style={{
+          width: '100%',
+          height: 667,
+          background: '#fff000',
+          color: '#fff',
+          textAlign: 'center',
+          lineHeight: '667px',
+        }}
+      >
+        <Button onClick={() => setOpen(true)}>Force Render</Button>
+        <Button onClick={() => setOpen2(true)}>Destroy On Close</Button>
+      </div>
+    </div>
+  );
+};

docs/examples/forceRender.tsx

@@ -6,31 +6,21 @@ import type { DrawerPopupProps } from './DrawerPopup';
 
 export type Placement = 'left' | 'top' | 'right' | 'bottom';
 
-type LevelMove = number | [number, number];
-
 export interface DrawerProps extends Omit<DrawerPopupProps, 'prefixCls'> {
   prefixCls?: string;
 
   width?: string | number;
   height?: string | number;
   open?: boolean;
-  handler?: React.ReactElement | null | false;
   placement?: Placement;
-  level?: null | string | string[];
-  levelMove?:
-    | LevelMove
-    | ((e: { target: HTMLElement; open: boolean }) => LevelMove);
   duration?: string;
-  ease?: string;
-  showMask?: boolean;
-  onChange?: (open?: boolean) => void;
-  onHandleClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
   onClose?: (e: React.MouseEvent | React.KeyboardEvent) => void;
   keyboard?: boolean;
   contentWrapperStyle?: React.CSSProperties;
   autoFocus?: boolean;
   wrapperClassName?: string;
-  forceRender?: boolean;
+  destroyOnClose?: boolean;
+
   getContainer?: GetContainer | false;
 }
 
@@ -43,17 +33,34 @@ export default function Drawer(props: DrawerProps) {
     forceRender,
     wrapperClassName,
     prefixCls = 'rc-drawer',
+    afterOpenChange,
+    destroyOnClose,
   } = props;
 
+  const [animatedVisible, setAnimatedVisible] = React.useState(false);
+
+  // ============================= Open =============================
+  const internalAfterOpenChange: DrawerProps['afterOpenChange'] =
+    nextVisible => {
+      setAnimatedVisible(nextVisible);
+      afterOpenChange?.(nextVisible);
+    };
+
+  // ============================ Render ============================
   const sharedDrawerProps = {
     ...props,
     prefixCls,
+    afterOpenChange: internalAfterOpenChange,
   };
 
   if (getContainer === false) {
     return <DrawerPopup {...sharedDrawerProps} inline />;
   }
 
+  if (!forceRender && !animatedVisible && !open && destroyOnClose) {
+    return null;
+  }
+
   return (
     <Portal
       visible={open}

docs/examples/openRenderDom.tsx

@@ -15,6 +15,7 @@ export interface DrawerPopupProps {
   placement?: Placement;
   inline?: boolean;
   push?: { distance?: number | string };
+  forceRender?: boolean;
 
   // MISC
   scrollLocker?: ScrollLocker;
@@ -48,9 +49,10 @@ export default function DrawerPopup(props: DrawerPopupProps) {
   const {
     prefixCls,
     open,
-    placement = 'left',
+    placement = 'right',
     inline,
     push,
+    forceRender,
 
     // MISC
     scrollLocker,
@@ -152,6 +154,7 @@ export default function DrawerPopup(props: DrawerPopupProps) {
         key="panel"
         {...motionProps}
         visible={open}
+        forceRender={forceRender}
         onVisibleChanged={nextVisible => {
           afterOpenChange?.(nextVisible);
           if (!nextVisible) {