update destroyOnClose to destroyOnHidden (#481)

Author: lijianan

docs/examples/forceRender.tsx

@@ -32,7 +32,7 @@ export default () => {
         width="20vw"
         open={open2}
         onClose={() => setOpen2(false)}
-        destroyOnClose
+        destroyOnHidden
         placement="left"
         {...motionProps}
       >

package.json

@@ -56,6 +56,7 @@
     "@testing-library/react": "^15.0.7",
     "@types/classnames": "^2.2.9",
     "@types/jest": "^29.5.11",
+    "@types/node": "^22.15.18",
     "@types/raf": "^3.4.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",

src/Drawer.tsx

@@ -21,7 +21,7 @@ export interface DrawerProps
   prefixCls?: string;
   open?: boolean;
   onClose?: (e: React.MouseEvent | React.KeyboardEvent) => void;
-  destroyOnClose?: boolean;
+  destroyOnHidden?: boolean;
   getContainer?: PortalProps['getContainer'];
   panelRef?: React.Ref<HTMLDivElement>;
   classNames?: DrawerClassNames;
@@ -41,7 +41,7 @@ const Drawer: React.FC<DrawerProps> = props => {
     getContainer,
     forceRender,
     afterOpenChange,
-    destroyOnClose,
+    destroyOnHidden,
     onMouseEnter,
     onMouseOver,
     onMouseLeave,
@@ -95,15 +95,10 @@ const Drawer: React.FC<DrawerProps> = props => {
     };
 
   // =========================== Context ============================
-  const refContext = React.useMemo(
-    () => ({
-      panel: panelRef,
-    }),
-    [panelRef],
-  );
+  const refContext = React.useMemo(() => ({ panel: panelRef }), [panelRef]);
 
   // ============================ Render ============================
-  if (!forceRender && !animatedVisible && !mergedOpen && destroyOnClose) {
+  if (!forceRender && !animatedVisible && !mergedOpen && destroyOnHidden) {
     return null;
   }
 
@@ -115,6 +110,7 @@ const Drawer: React.FC<DrawerProps> = props => {
     onKeyDown,
     onKeyUp,
   };
+
   const drawerPopupProps = {
     ...props,
     open: mergedOpen,

src/DrawerPanel.tsx

@@ -33,7 +33,7 @@ export interface DrawerPanelProps
   containerRef?: React.Ref<HTMLDivElement>;
 }
 
-const DrawerPanel = (props: DrawerPanelProps) => {
+const DrawerPanel: React.FC<Readonly<DrawerPanelProps>> = props => {
   const { prefixCls, className, containerRef, ...restProps } = props;
 
   const { panel: panelRef } = React.useContext(RefContext);

src/DrawerPopup.tsx

@@ -77,7 +77,10 @@ export interface DrawerPopupProps
   drawerRender?: (node: React.ReactNode) => React.ReactNode;
 }
 
-function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
+const DrawerPopup: React.ForwardRefRenderFunction<
+  HTMLDivElement,
+  DrawerPopupProps
+> = (props, ref) => {
   const {
     prefixCls,
     open,
@@ -375,7 +378,7 @@ function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
       </div>
     </DrawerContext.Provider>
   );
-}
+};
 
 const RefDrawerPopup = React.forwardRef(DrawerPopup);
 

tests/index.spec.tsx

@@ -183,20 +183,20 @@ describe('rc-drawer-menu', () => {
     expect(document.querySelector('.rc-drawer')).toBeTruthy();
   });
 
-  describe('destroyOnClose', () => {
+  describe('destroyOnHidden', () => {
     it('basic', () => {
-      const { rerender } = render(<Drawer destroyOnClose open />);
+      const { rerender } = render(<Drawer destroyOnHidden open />);
       expect(document.querySelector('.rc-drawer')).toBeTruthy();
-      rerender(<Drawer destroyOnClose />);
+      rerender(<Drawer destroyOnHidden />);
       expect(document.querySelector('.rc-drawer')).toBeFalsy();
     });
 
     it('inline', () => {
       const { container, rerender } = render(
-        <Drawer destroyOnClose open getContainer={false} />,
+        <Drawer destroyOnHidden open getContainer={false} />,
       );
       expect(container.querySelector('.rc-drawer')).toBeTruthy();
-      rerender(<Drawer destroyOnClose getContainer={false} />);
+      rerender(<Drawer destroyOnHidden getContainer={false} />);
       expect(container.querySelector('.rc-drawer')).toBeFalsy();
     });
   });