diff --git a/docs/examples/forceRender.tsx b/docs/examples/forceRender.tsx index b046d353..3b2148a5 100755 --- a/docs/examples/forceRender.tsx +++ b/docs/examples/forceRender.tsx @@ -32,7 +32,7 @@ export default () => { width="20vw" open={open2} onClose={() => setOpen2(false)} - destroyOnClose + destroyOnHidden placement="left" {...motionProps} > diff --git a/package.json b/package.json index fce06255..ffcaefff 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ "@testing-library/react": "^14.0.0", "@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", diff --git a/src/Drawer.tsx b/src/Drawer.tsx index 63745442..7231c481 100644 --- a/src/Drawer.tsx +++ b/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; classNames?: DrawerClassNames; @@ -41,7 +41,7 @@ const Drawer: React.FC = props => { getContainer, forceRender, afterOpenChange, - destroyOnClose, + destroyOnHidden, onMouseEnter, onMouseOver, onMouseLeave, @@ -95,15 +95,10 @@ const Drawer: React.FC = 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 = props => { onKeyDown, onKeyUp, }; + const drawerPopupProps = { ...props, open: mergedOpen, diff --git a/src/DrawerPanel.tsx b/src/DrawerPanel.tsx index 7799c2b5..a8e08374 100644 --- a/src/DrawerPanel.tsx +++ b/src/DrawerPanel.tsx @@ -33,7 +33,7 @@ export interface DrawerPanelProps containerRef?: React.Ref; } -const DrawerPanel = (props: DrawerPanelProps) => { +const DrawerPanel: React.FC> = props => { const { prefixCls, className, containerRef, ...restProps } = props; const { panel: panelRef } = React.useContext(RefContext); diff --git a/src/DrawerPopup.tsx b/src/DrawerPopup.tsx index f1108768..3cb6a7ca 100644 --- a/src/DrawerPopup.tsx +++ b/src/DrawerPopup.tsx @@ -77,7 +77,10 @@ export interface DrawerPopupProps drawerRender?: (node: React.ReactNode) => React.ReactNode; } -function DrawerPopup(props: DrawerPopupProps, ref: React.Ref) { +const DrawerPopup: React.ForwardRefRenderFunction< + HTMLDivElement, + DrawerPopupProps +> = (props, ref) => { const { prefixCls, open, @@ -375,7 +378,7 @@ function DrawerPopup(props: DrawerPopupProps, ref: React.Ref) { ); -} +}; const RefDrawerPopup = React.forwardRef(DrawerPopup); diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx index d3aa2a75..d41e9493 100755 --- a/tests/index.spec.tsx +++ b/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(); + const { rerender } = render(); expect(document.querySelector('.rc-drawer')).toBeTruthy(); - rerender(); + rerender(); expect(document.querySelector('.rc-drawer')).toBeFalsy(); }); it('inline', () => { const { container, rerender } = render( - , + , ); expect(container.querySelector('.rc-drawer')).toBeTruthy(); - rerender(); + rerender(); expect(container.querySelector('.rc-drawer')).toBeFalsy(); }); });