diff --git a/.github/workflows/react-doctor.yml b/.github/workflows/react-doctor.yml index 097eb883..47ba966c 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: + version: 0.7.4 diff --git a/README.md b/README.md index add7d03c..98327cf8 100644 --- a/README.md +++ b/README.md @@ -102,6 +102,7 @@ Native image attributes are also supported. | open | Controlled preview open state | boolean | - | | scaleStep | Scale step | number | 0.5 | | src | Custom preview image source | string | - | +| wheel | Enable mouse wheel zoom | boolean | true | | onOpenChange | Callback when preview open state changes | `(open: boolean) => void` | - | | onTransform | Callback when transform changes | `(info: { transform: TransformType; action: TransformAction }) => void` | - | 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` | - | diff --git a/src/Preview/index.tsx b/src/Preview/index.tsx index 464d6ff7..03a43f47 100644 --- a/src/Preview/index.tsx +++ b/src/Preview/index.tsx @@ -79,6 +79,9 @@ export interface InternalPreviewConfig { minScale?: number; maxScale?: number; + /** Whether to enable mouse wheel zoom. Default is true. */ + wheel?: boolean; + // Display motionName?: string; open?: boolean; @@ -196,6 +199,7 @@ const Preview: React.FC = props => { styles = {}, mousePosition, zIndex, + wheel = true, focusTrap = true, } = props; @@ -223,6 +227,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 29228042..96b22b25 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 23007613..2d48c43d 100644 --- a/tests/preview.test.tsx +++ b/tests/preview.test.tsx @@ -289,6 +289,79 @@ 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( + , + ); + + 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(