From bda5e1bab044dd2aa8f6e9cf07842667b16a4adc Mon Sep 17 00:00:00 2001 From: aojunhao123 <1844749591@qq.com> Date: Wed, 24 Dec 2025 23:24:46 +0800 Subject: [PATCH 1/5] add reproduce demo --- docs/demo/nested.md | 8 ++++ docs/examples/nested.tsx | 91 ++++++++++++++++++++++++++++++++++++++++ package.json | 3 +- 3 files changed, 101 insertions(+), 1 deletion(-) create mode 100644 docs/demo/nested.md create mode 100644 docs/examples/nested.tsx diff --git a/docs/demo/nested.md b/docs/demo/nested.md new file mode 100644 index 0000000..cbe3076 --- /dev/null +++ b/docs/demo/nested.md @@ -0,0 +1,8 @@ +--- +title: nested +nav: + title: Demo + path: /demo +--- + + \ No newline at end of file diff --git a/docs/examples/nested.tsx b/docs/examples/nested.tsx new file mode 100644 index 0000000..e759c7f --- /dev/null +++ b/docs/examples/nested.tsx @@ -0,0 +1,91 @@ +import React, { useState } from 'react'; +import { Button, Divider, Modal } from 'antd'; +import Image from '@rc-component/image'; + +const App: React.FC = () => { + const [show1, setShow1] = useState(false); + const [show2, setShow2] = useState(false); + const [show3, setShow3] = useState(false); + return ( + <> + + { + setShow1(open); + }} + onCancel={() => { + setShow1(false); + }} + onOk={() => setShow1(false)} + > + + { + setShow2(open); + }} + onCancel={() => { + setShow2(false); + }} + onOk={() => setShow2(false)} + > + + { + setShow3(open); + }} + onCancel={() => { + setShow3(false); + }} + onOk={() => setShow3(false)} + > + svg image + + + console.log(`current index: ${current}, prev index: ${prev}`), + }} + > + svg image + + + + + + + ); +}; + +export default App; \ No newline at end of file diff --git a/package.json b/package.json index 7ca72ee..bec4620 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,8 @@ "clsx": "^2.1.1" }, "devDependencies": { - "@ant-design/icons": "^5.0.1", + "@ant-design/icons": "^6.1.0", + "antd": "^6.1.2", "@rc-component/father-plugin": "^2.0.2", "@rc-component/np": "^1.0.0", "@testing-library/jest-dom": "^6.4.0", From b4c7b993e5abb985564c7fcd528fe5ab5da0e637 Mon Sep 17 00:00:00 2001 From: aojunhao123 <1844749591@qq.com> Date: Fri, 26 Dec 2025 01:00:21 +0800 Subject: [PATCH 2/5] chore: adjust --- .gitignore | 3 +- assets/preview.less | 1 + docs/examples/nested.tsx | 123 +++++++++++++++++---------------------- package.json | 3 +- 4 files changed, 58 insertions(+), 72 deletions(-) diff --git a/.gitignore b/.gitignore index 0497e3e..fe8ecda 100644 --- a/.gitignore +++ b/.gitignore @@ -44,4 +44,5 @@ es/ .dumi/tmp .dumi/tmp-production -bun.lockb \ No newline at end of file +bun.lockb +.vscode \ No newline at end of file diff --git a/assets/preview.less b/assets/preview.less index dc7eff3..e60e906 100644 --- a/assets/preview.less +++ b/assets/preview.less @@ -5,6 +5,7 @@ overflow: hidden; user-select: none; inset: 0; + z-index: 1055; &-mask { position: absolute; diff --git a/docs/examples/nested.tsx b/docs/examples/nested.tsx index e759c7f..114b466 100644 --- a/docs/examples/nested.tsx +++ b/docs/examples/nested.tsx @@ -1,91 +1,74 @@ import React, { useState } from 'react'; -import { Button, Divider, Modal } from 'antd'; +import { Button, Divider } from 'antd'; +import Dialog from '@rc-component/dialog'; import Image from '@rc-component/image'; +import '@rc-component/dialog/assets/index.css'; +import '../../assets/index.less'; const App: React.FC = () => { - const [show1, setShow1] = useState(false); - const [show2, setShow2] = useState(false); - const [show3, setShow3] = useState(false); + const [show, setShow] = useState(false); return ( <> - { - setShow1(open); + { + setShow(open); }} - onCancel={() => { - setShow1(false); + onClose={() => { + setShow(false); }} - onOk={() => setShow1(false)} + footer={ + <> + + + + } > - - { - setShow2(open); - }} - onCancel={() => { - setShow2(false); - }} - onOk={() => setShow2(false)} - > - - { - setShow3(open); - }} - onCancel={() => { - setShow3(false); - }} - onOk={() => setShow3(false)} - > - svg image - - - console.log(`current index: ${current}, prev index: ${prev}`), - }} - > - svg image - - - - - + svg image + + + ); }; -export default App; \ No newline at end of file +export default App; diff --git a/package.json b/package.json index bec4620..513998f 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ }, "dependencies": { "@rc-component/motion": "^1.0.0", - "@rc-component/portal": "^2.0.0", + "@rc-component/portal": "^2.1.2", "@rc-component/util": "^1.3.0", "clsx": "^2.1.1" }, @@ -50,6 +50,7 @@ "antd": "^6.1.2", "@rc-component/father-plugin": "^2.0.2", "@rc-component/np": "^1.0.0", + "@rc-component/dialog": "^1.7.0", "@testing-library/jest-dom": "^6.4.0", "@testing-library/react": "^15.0.6", "@types/jest": "^30.0.0", From d09309822b15c79c929aa166b3d57afe02bb8fce Mon Sep 17 00:00:00 2001 From: aojunhao123 <1844749591@qq.com> Date: Fri, 26 Dec 2025 14:43:16 +0800 Subject: [PATCH 3/5] fix: optimize ESC key handling in nested portal scenarios --- docs/examples/nested.tsx | 15 ++++++--------- src/Preview/index.tsx | 18 +++++++++++++----- tests/preview.test.tsx | 36 +++++++++++++++++++++++++++++++++++- tsconfig.json | 3 ++- 4 files changed, 56 insertions(+), 16 deletions(-) diff --git a/docs/examples/nested.tsx b/docs/examples/nested.tsx index 114b466..9b581c1 100644 --- a/docs/examples/nested.tsx +++ b/docs/examples/nested.tsx @@ -1,5 +1,4 @@ import React, { useState } from 'react'; -import { Button, Divider } from 'antd'; import Dialog from '@rc-component/dialog'; import Image from '@rc-component/image'; import '@rc-component/dialog/assets/index.css'; @@ -9,13 +8,13 @@ const App: React.FC = () => { const [show, setShow] = useState(false); return ( <> - + { @@ -26,21 +25,20 @@ const App: React.FC = () => { }} footer={ <> - - + } > @@ -49,7 +47,6 @@ const App: React.FC = () => { alt="svg image" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" /> - diff --git a/src/Preview/index.tsx b/src/Preview/index.tsx index 2aab1c8..bd4f67c 100644 --- a/src/Preview/index.tsx +++ b/src/Preview/index.tsx @@ -332,10 +332,6 @@ const Preview: React.FC = props => { if (open) { const { keyCode } = event; - if (keyCode === KeyCode.ESC) { - onClose?.(); - } - if (showLeftOrRightSwitches) { if (keyCode === KeyCode.LEFT) { onActive(-1); @@ -380,6 +376,12 @@ const Preview: React.FC = props => { } }, [open]); + const onEsc: PortalProps['onEsc'] = ({ top }) => { + if (top) { + onClose?.(); + } + }; + // ========================== Render ========================== const bodyStyle: React.CSSProperties = { ...styles.body, @@ -389,7 +391,13 @@ const Preview: React.FC = props => { } return ( - + { const MockPreview = (props: any) => { @@ -1052,6 +1053,39 @@ describe('Preview', () => { expect(afterOpenChange).toHaveBeenCalledTimes(2); }); + it('Esc closes preview then modal', () => { + function NestedTestDemo({ onClose }: { onClose: () => void }) { + const [visible, setVisible] = useState(false); + const [open, setOpen] = useState(false); + return ( + <> + + + + + + ); + } + + const onClose = jest.fn(); + const { baseElement, getByRole } = render(); + + fireEvent.click(getByRole('button')); + expect(getByRole('dialog')).toBeTruthy(); + + fireEvent.click(getByRole('img')); + expect(baseElement.querySelector('.rc-image-preview')).toBeTruthy(); + + fireEvent.keyDown(window, { key: 'Escape' }); + expect(baseElement.querySelector('.rc-image-preview')).toBeFalsy(); + + fireEvent.keyDown(window, { key: 'Escape' }); + expect(onClose).toHaveBeenCalled(); + }); + it('not modify preview image size', () => { render( Date: Fri, 26 Dec 2025 14:50:01 +0800 Subject: [PATCH 4/5] chore: adjust test --- tests/preview.test.tsx | 24 +++++------------------- 1 file changed, 5 insertions(+), 19 deletions(-) diff --git a/tests/preview.test.tsx b/tests/preview.test.tsx index 9e04631..e29fe36 100644 --- a/tests/preview.test.tsx +++ b/tests/preview.test.tsx @@ -1054,27 +1054,13 @@ describe('Preview', () => { }); it('Esc closes preview then modal', () => { - function NestedTestDemo({ onClose }: { onClose: () => void }) { - const [visible, setVisible] = useState(false); - const [open, setOpen] = useState(false); - return ( - <> - - - - - - ); - } - const onClose = jest.fn(); - const { baseElement, getByRole } = render(); - fireEvent.click(getByRole('button')); - expect(getByRole('dialog')).toBeTruthy(); + const { baseElement, getByRole } = render( + + + , + ); fireEvent.click(getByRole('img')); expect(baseElement.querySelector('.rc-image-preview')).toBeTruthy(); From 283014a3aed4f9b88693c3636f4d9ad31001e5c7 Mon Sep 17 00:00:00 2001 From: aojunhao123 <1844749591@qq.com> Date: Fri, 26 Dec 2025 15:15:38 +0800 Subject: [PATCH 5/5] update --- package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/package.json b/package.json index 513998f..9d98386 100644 --- a/package.json +++ b/package.json @@ -46,8 +46,7 @@ "clsx": "^2.1.1" }, "devDependencies": { - "@ant-design/icons": "^6.1.0", - "antd": "^6.1.2", + "@ant-design/icons": "^5.0.1", "@rc-component/father-plugin": "^2.0.2", "@rc-component/np": "^1.0.0", "@rc-component/dialog": "^1.7.0",