Merge pull request #172 from the-deep/fix/disable-scroll-zoom

Add props for disabling image zoom on scroll
the-deep · Jul 9, 2024 · 9480169 · 9480169
2 parents a15e881 + 6ee0463
commit 9480169
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@the-deep/deep-ui",
-    "version": "2.0.7-beta.1",
+    "version": "2.0.7-beta.2",
     "description": "React component library by Deep",
     "files": [
         "/build"

diff --git 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
@@ -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: '',