From 11dbd04a5fa4a95e4d38f80ae8fd272fba46ab81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=AC=A2?= Date: Thu, 16 Jul 2026 17:41:35 +0800 Subject: [PATCH 1/6] feat: add wheel prop to control mouse wheel zoom MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add wheel prop to InternalPreviewConfig interface - Modify useMouseEvent hook to accept wheel parameter - Add test case for wheel: false - Update README documentation BREAKING CHANGE: N 🤖 Generated with [Claude Code](https://claude.com/claude-code) --- README.md | 2 ++ src/Preview/index.tsx | 5 +++++ src/hooks/useMouseEvent.ts | 3 ++- tests/preview.test.tsx | 39 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 48 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index acf4a5b6..66e79c1e 100644 --- a/README.md +++ b/README.md @@ -81,6 +81,7 @@ export default () => ( | closeIcon | React.ReactNode | - | Custom close icon | | src | string | - | Customize preview src | | movable | boolean | true | Enable drag | +| wheel | boolean | true | Enable mouse wheel zoom | | scaleStep | number | 0.5 | The number to which the scale is increased or decreased | | minScale | number | 1 | Min scale | | maxScale | number | 50 | Max scale | @@ -122,6 +123,7 @@ export default () => ( | --- | --- | --- | --- | | open | boolean | - | Whether the preview is open or not | | movable | boolean | true | Enable drag | +| wheel | boolean | true | Enable mouse wheel zoom | | current | number | - | Current index | | closeIcon | React.ReactNode | - | Custom close icon | | scaleStep | number | 0.5 | The number to which the scale is increased or decreased | diff --git a/src/Preview/index.tsx b/src/Preview/index.tsx index 02d22529..3d5892be 100644 --- a/src/Preview/index.tsx +++ b/src/Preview/index.tsx @@ -81,6 +81,9 @@ export interface InternalPreviewConfig { minScale?: number; maxScale?: number; + /** Whether to enable mouse wheel zoom. Default is true. */ + wheel?: boolean; + // Display motionName?: string; open?: boolean; @@ -192,6 +195,7 @@ const Preview: React.FC = props => { styles = {}, mousePosition, zIndex, + wheel = true, } = props; const imgRef = useRef(); @@ -215,6 +219,7 @@ const Preview: React.FC = props => { transform, updateTransform, dispatchZoomChange, + wheel, ); const { isTouching, onTouchStart, onTouchMove, onTouchEnd } = useTouchEvent( imgRef, diff --git a/src/hooks/useMouseEvent.ts b/src/hooks/useMouseEvent.ts index b9ce378c..33fe1669 100644 --- a/src/hooks/useMouseEvent.ts +++ b/src/hooks/useMouseEvent.ts @@ -17,6 +17,7 @@ export default function useMouseEvent( transform: TransformType, updateTransform: UpdateTransformFunc, dispatchZoomChange: DispatchZoomChangeFunc, + wheel: boolean = true, ) { const { rotate, scale, x, y } = transform; @@ -83,7 +84,7 @@ export default function useMouseEvent( }; const onWheel = (event: React.WheelEvent) => { - if (!open || event.deltaY == 0) return; + if (!open || !wheel || event.deltaY == 0) return; // Scale ratio depends on the deltaY size const scaleRatio = Math.abs(event.deltaY / 100); // Limit the maximum scale ratio diff --git a/tests/preview.test.tsx b/tests/preview.test.tsx index 7307608f..ae82a690 100644 --- a/tests/preview.test.tsx +++ b/tests/preview.test.tsx @@ -256,6 +256,45 @@ describe('Preview', () => { }); }); + it('should not zoom with wheel when wheel is false', () => { + const { container } = render( + , + ); + + expect(document.querySelector('.rc-image-preview-img')).toHaveStyle({ + transform: 'translate3d(0px, 0px, 0) scale3d(1, 1, 1) rotate(0deg)', + }); + + // Wheel zoom should not work when wheel is false + fireEvent.wheel(document.querySelector('.rc-image-preview-img'), { + deltaY: -50, + }); + + act(() => { + jest.runAllTimers(); + }); + + // Scale should remain 1 + expect(document.querySelector('.rc-image-preview-img')).toHaveStyle({ + transform: 'translate3d(0px, 0px, 0) scale3d(1, 1, 1) rotate(0deg)', + }); + + // But zoom in button should still work + fireEvent.click(document.querySelectorAll('.rc-image-preview-actions-action')[5]); + act(() => { + jest.runAllTimers(); + }); + expect(document.querySelector('.rc-image-preview-img')).toHaveStyle({ + transform: 'translate3d(-256px, -192px, 0) scale3d(1.5, 1.5, 1) rotate(0deg)', + }); + }); + it('scaleStep = 1', () => { const { container } = render( Date: Thu, 16 Jul 2026 18:08:39 +0800 Subject: [PATCH 2/6] feat: add wheel prop to description --- README.zh-CN.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.zh-CN.md b/README.zh-CN.md index 12cfa841..507dd9a5 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -102,6 +102,7 @@ npm start | open | 受控预览打开状态 | boolean | - | | scaleStep | 缩放步长 | number | 0.5 | | src | 自定义预览图像源 | string | - | +| wheel | 启用鼠标滚轮缩放 | boolean | true | | onOpenChange | 预览打开状态变化时回调 | `(open: boolean) => void` | - | | onTransform | 变换变化时的回调 | `(info: { transform: TransformType; action: TransformAction }) => void` | - | From 8f125b4b6b8394615f1556f6f8b5ca808b09ddb2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=AC=A2?= Date: Fri, 17 Jul 2026 10:17:30 +0800 Subject: [PATCH 3/6] feat: add wheel zoom functionality when wheel prop is true --- tests/preview.test.tsx | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/tests/preview.test.tsx b/tests/preview.test.tsx index e108febb..2d48c43d 100644 --- a/tests/preview.test.tsx +++ b/tests/preview.test.tsx @@ -289,6 +289,40 @@ describe('Preview', () => { }); }); + it('should zoom with wheel when wheel is explicitly true', () => { + const { container } = render( + , + ); + fireEvent.click(container.querySelector('.rc-image')); + act(() => { + jest.runAllTimers(); + }); + + expect(document.querySelector('.rc-image-preview-img')).toHaveStyle({ + transform: 'translate3d(0px, 0px, 0) scale3d(1, 1, 1) rotate(0deg)', + }); + + // Wheel zoom should work when wheel is true + fireEvent.wheel(document.querySelector('.rc-image-preview-img'), { + deltaY: -50, + }); + + act(() => { + jest.runAllTimers(); + }); + + // Scale should change to 1.25 + expect(document.querySelector('.rc-image-preview-img')).toHaveStyle({ + transform: 'translate3d(0px, 0px, 0) scale3d(1.25, 1.25, 1) rotate(0deg)', + }); + }); + it('should not zoom with wheel when wheel is false', () => { const { container } = render( Date: Fri, 17 Jul 2026 14:58:06 +0800 Subject: [PATCH 4/6] ci: run React Doctor with Node 22 --- .github/workflows/react-doctor.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.github/workflows/react-doctor.yml b/.github/workflows/react-doctor.yml index 097eb883..04e5de6c 100644 --- a/.github/workflows/react-doctor.yml +++ b/.github/workflows/react-doctor.yml @@ -25,3 +25,5 @@ jobs: fetch-depth: 0 persist-credentials: false - uses: millionco/react-doctor@0b4f4f4bd248a154e64eb508a48347f71154b3f3 + with: + node-version: 22 From 04d94fdd27b5f59f9464bd3f02a86b896af92bf8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 17 Jul 2026 15:00:13 +0800 Subject: [PATCH 5/6] ci: pin React Doctor before JSON report regression --- .github/workflows/react-doctor.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/react-doctor.yml b/.github/workflows/react-doctor.yml index 04e5de6c..2565803b 100644 --- a/.github/workflows/react-doctor.yml +++ b/.github/workflows/react-doctor.yml @@ -26,4 +26,4 @@ jobs: persist-credentials: false - uses: millionco/react-doctor@0b4f4f4bd248a154e64eb508a48347f71154b3f3 with: - node-version: 22 + version: 0.7.6 From c428556e2f7ff20d6a93006c4b047b1047c5a428 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 17 Jul 2026 15:01:23 +0800 Subject: [PATCH 6/6] ci: use stable React Doctor release --- .github/workflows/react-doctor.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/react-doctor.yml b/.github/workflows/react-doctor.yml index 2565803b..47ba966c 100644 --- a/.github/workflows/react-doctor.yml +++ b/.github/workflows/react-doctor.yml @@ -26,4 +26,4 @@ jobs: persist-credentials: false - uses: millionco/react-doctor@0b4f4f4bd248a154e64eb508a48347f71154b3f3 with: - version: 0.7.6 + version: 0.7.4