From b7d23d63ae98707661d2dff7d6da446f5cf664be Mon Sep 17 00:00:00 2001
From: Subina <subina@togglecorp.com>
Date: Mon, 1 Jul 2024 15:01:38 +0545
Subject: [PATCH] Add props for disabling image zoom on scroll

---
 src/components/ImagePreview/index.tsx      | 7 ++++++-
 storybook/stories/ImagePreview.stories.tsx | 6 ++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/ImagePreview/index.tsx b/src/components/ImagePreview/index.tsx
index 485e8dc5..304a628c 100644
--- a/src/components/ImagePreview/index.tsx
+++ b/src/components/ImagePreview/index.tsx
@@ -27,6 +27,7 @@ export interface Props {
     src: HTMLImageProps['src'];
     alt: HTMLImageProps['alt'];
     hideTools?: boolean;
+    disableZoomOnScroll?: boolean;
 }
 
 function ImagePreview(props: Props) {
@@ -35,6 +36,7 @@ function ImagePreview(props: Props) {
         src,
         alt,
         hideTools,
+        disableZoomOnScroll,
     } = props;
 
     const [expanded, , setExpandedFalse, , toggleExpanded] = useBooleanState(false);
@@ -65,7 +67,10 @@ function ImagePreview(props: Props) {
         >
             {pending && <PendingMessage />}
             <TransformWrapper
-                wheel={{ step: 0.2 }}
+                wheel={{
+                    step: 0.2,
+                    wheelDisabled: disableZoomOnScroll,
+                }}
                 centerZoomedOut
                 centerOnInit
                 minScale={0.2}
diff --git a/storybook/stories/ImagePreview.stories.tsx b/storybook/stories/ImagePreview.stories.tsx
index a4010865..40adabf9 100644
--- a/storybook/stories/ImagePreview.stories.tsx
+++ b/storybook/stories/ImagePreview.stories.tsx
@@ -28,6 +28,12 @@ Default.args = {
     // alt: 'Image cannot be loaded',
 };
 
+export const NoZoomOnScroll = Template.bind({});
+NoZoomOnScroll.args = {
+    src: 'https://i.imgur.com/5ehANlp.jpg',
+    disableZoomOnScroll: true,
+};
+
 export const WithoutImage = Template.bind({});
 WithoutImage.args = {
     src: '',