Merge pull request #944 from rpearce/fix/prevent-zoom-click-event-propagation

fix: prevent zoom click even propagation

Author: rpearce

.changeset/red-dingos-know.md

@@ -0,0 +1,5 @@
+---
+"react-medium-image-zoom": minor
+---
+
+Add support for onZoomChange reporting to Uncontrolled components and include additional argument housing the fired event

README.md

@@ -101,6 +101,15 @@ export interface UncontrolledProps {
   // Default: false
   isDisabled?: boolean
 
+  // First argument: boolean value of a new zoomed state (Uncontrolled
+  // component) or a suggested new state (Controlled component).
+  // Second argument: object containing the event that triggered the change.
+  // Default: undefined
+  onZoomChange?: (
+    value: boolean,
+    data: { event: React.SyntheticEvent | Event }
+  ) => void
+
   // Swipe gesture threshold after which to unzoom.
   // Default: 10
   swipeToUnzoomThreshold?: number
@@ -137,10 +146,6 @@ export interface ControlledProps {
   // Tell the component whether or not it should be zoomed
   // Default: false
   isZoomed: boolean
-
-  // Listen for hints from the component about when you
-  // should zoom (`true` value) or unzoom (`false` value)
-  onZoomChange?: (value: boolean) => void
 }
 ```
 

source/Controlled.tsx

@@ -63,15 +63,15 @@ export interface ControlledProps {
   IconZoom?: React.ElementType
   isDisabled?: boolean
   isZoomed: boolean
-  onZoomChange?: (value: boolean) => void
+  onZoomChange?: (value: boolean, data: { event: React.SyntheticEvent | Event }) => void
   swipeToUnzoomThreshold?: number
   wrapElement?: 'div' | 'span'
   ZoomContent?: (data: {
     buttonUnzoom: React.ReactElement<HTMLButtonElement>
     img: React.ReactElement | null
     isZoomImgLoaded: boolean
     modalState: ModalState
-    onUnzoom: () => void
+    onUnzoom: (e: Event) => void
   }) => React.ReactElement
   zoomImg?: React.ImgHTMLAttributes<HTMLImageElement>
   zoomMargin?: number
@@ -527,18 +527,18 @@ class ControlledBase extends React.Component<ControlledPropsWithDefaults, Contro
   /**
    * Report that zooming should occur
    */
-  handleZoom = () => {
+  handleZoom = (e: React.SyntheticEvent | Event) => {
     if (!this.props.isDisabled && this.hasImage()) {
-      this.props.onZoomChange?.(true)
+      this.props.onZoomChange?.(true, { event: e })
     }
   }
 
   /**
    * Report that unzooming should occur
    */
-  handleUnzoom = () => {
+  handleUnzoom = (e: React.SyntheticEvent | Event) => {
     if (!this.props.isDisabled) {
-      this.props.onZoomChange?.(false)
+      this.props.onZoomChange?.(false, { event: e })
     }
   }
 
@@ -550,7 +550,7 @@ class ControlledBase extends React.Component<ControlledPropsWithDefaults, Contro
   handleBtnUnzoomClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault()
     e.stopPropagation()
-    this.handleUnzoom()
+    this.handleUnzoom(e)
   }
 
   // ===========================================================================
@@ -570,7 +570,7 @@ class ControlledBase extends React.Component<ControlledPropsWithDefaults, Contro
   handleDialogClick = (e: React.MouseEvent<HTMLDialogElement>) => {
     if (e.target === this.refModalContent.current || e.target === this.refModalImg.current) {
       e.stopPropagation()
-      this.handleUnzoom()
+      this.handleUnzoom(e)
     }
   }
 
@@ -581,7 +581,7 @@ class ControlledBase extends React.Component<ControlledPropsWithDefaults, Contro
    */
   handleDialogClose = (e: React.SyntheticEvent<HTMLDialogElement>) => {
     e.stopPropagation()
-    this.handleUnzoom()
+    this.handleUnzoom(e)
   }
 
   // ===========================================================================
@@ -593,7 +593,7 @@ class ControlledBase extends React.Component<ControlledPropsWithDefaults, Contro
     if (e.key === 'Escape' || e.keyCode === 27) {
       e.preventDefault()
       e.stopPropagation()
-      this.handleUnzoom()
+      this.handleUnzoom(e)
     }
   }
 
@@ -608,7 +608,7 @@ class ControlledBase extends React.Component<ControlledPropsWithDefaults, Contro
 
     e.stopPropagation()
     queueMicrotask(() => {
-      this.handleUnzoom()
+      this.handleUnzoom(e)
     })
   }
 
@@ -650,7 +650,7 @@ class ControlledBase extends React.Component<ControlledPropsWithDefaults, Contro
       if (delta > this.props.swipeToUnzoomThreshold) {
         this.touchYStart = undefined
         this.touchYEnd = undefined
-        this.handleUnzoom()
+        this.handleUnzoom(e)
       }
     }
   }

source/Uncontrolled.tsx

@@ -1,13 +1,20 @@
 import React from 'react'
-import { Controlled, ControlledProps } from './Controlled'
+import { Controlled, type ControlledProps } from './Controlled'
 
 // =============================================================================
 
 export type UncontrolledProps =
-  Omit<ControlledProps, 'isZoomed' | 'onZoomChange'>
+  Omit<ControlledProps, 'isZoomed'>
 
-export function Uncontrolled (props: UncontrolledProps) {
+export function Uncontrolled ({ onZoomChange, ...props }: UncontrolledProps) {
   const [isZoomed, setIsZoomed] = React.useState(false)
 
-  return <Controlled {...props} isZoomed={isZoomed} onZoomChange={setIsZoomed} />
+  const handleZoomChange = React.useCallback<
+    NonNullable<ControlledProps['onZoomChange']>
+  >((value, { event }) => {
+    setIsZoomed(value)
+    onZoomChange?.(value, { event })
+  }, [onZoomChange])
+
+  return <Controlled {...props} isZoomed={isZoomed} onZoomChange={handleZoomChange} />
 }

stories/Img.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta } from '@storybook/react-webpack5'
 
 import { waitFor, within, userEvent, expect } from 'storybook/test'
 
-import Zoom, { UncontrolledProps } from '../source'
+import Zoom, { type UncontrolledProps } from '../source'
 import '../source/styles.css'
 import './base.css'
 
@@ -45,11 +45,17 @@ function shuffle<T extends unknown[]>(xs: T): T {
 // =============================================================================
 
 export const Regular = (props: typeof Zoom) => {
+  const handleZoomChange = React.useCallback<
+    NonNullable<React.ComponentProps<typeof Zoom>['onZoomChange']>
+  >((value, { event }) => {
+    console.log('handleZoomChange info!', { value, event })
+  }, [])
+
   return (
     <main aria-label="Story">
       <h1>Zooming a regular image</h1>
       <div className="mw-600" style={{ display: 'flex', flexDirection: 'column' }}>
-        <Zoom {...props} wrapElement="span">
+        <Zoom {...props} onZoomChange={handleZoomChange} wrapElement="span">
           <img
             alt={imgThatWanakaTree.alt}
             src={imgThatWanakaTree.src}
@@ -734,6 +740,90 @@ export const SwipeToUnzoomThreshold = (props: typeof Zoom) => (
   </main>
 )
 
+// =============================================================================
+
+export const SelectCards = (props: typeof Zoom) => {
+  return (
+    <main aria-label="Story">
+      <h1>Selecting cards and zooming without triggering selection state</h1>
+      <div className="mw-600" style={{ display: 'flex', flexDirection: 'column' }}>
+        <ul className="cards">
+          <CardItem
+            alt={imgThatWanakaTree.alt}
+            src={imgThatWanakaTree.src}
+            zoomProps={props}
+          />
+          <CardItem
+            alt={imgGlenorchyLagoon.alt}
+            src={imgGlenorchyLagoon.src}
+            zoomProps={props}
+          />
+        </ul>
+      </div>
+    </main>
+  )
+}
+
+function CardItem({
+  alt,
+  src,
+  zoomProps,
+}: {
+  alt: string,
+  src: string,
+  zoomProps: typeof Zoom,
+}) {
+  const [isSelected, setIsSelected] = React.useState(false)
+
+  const handleItemClick = React.useCallback(() => {
+    setIsSelected(isSelected => !isSelected)
+  }, [])
+
+  const handleInputClick: React.MouseEventHandler<HTMLInputElement> = React.useCallback((e) => {
+    e.stopPropagation()
+  }, [])
+
+  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = React.useCallback((e) => {
+    setIsSelected(e.currentTarget.checked)
+  }, [])
+
+  const handleZoomChange = React.useCallback<
+    NonNullable<React.ComponentProps<typeof Zoom>['onZoomChange']>
+  >((value, { event }) => {
+    event.stopPropagation()
+
+    console.log(
+      'handleZoomChange (after event.stopPropagation())',
+      { value, event }
+    )
+  }, [])
+
+  return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+    <li className="card" onClick={handleItemClick}>
+      <label>
+        <input
+          aria-label="Select item"
+          checked={isSelected}
+          onChange={handleInputChange}
+          onClick={handleInputClick}
+          type="checkbox"
+        />
+      </label>
+      <Zoom {...zoomProps} onZoomChange={handleZoomChange} wrapElement="span">
+        <img
+          alt={alt}
+          src={src}
+          height="320"
+          width="320"
+          decoding="async"
+          loading="lazy"
+        />
+      </Zoom>
+    </li>
+  )
+}
+
 // =============================================================================
 // INTERACTIONS
 

stories/base.css

@@ -143,6 +143,38 @@ img {
   border-radius: 50%;
   animation: spin 1s linear infinite;
 }
+.cards {
+  align-items: baseline;
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: 2rem;
+}
+.card {
+  border: 1px solid #c0c0c0;
+  border-radius: 8px;
+  flex-shrink: 0;
+  padding-block: 3.2rem 1.2rem;
+  padding-inline: 1.2rem;
+  position: relative;
+}
+.card label {
+  align-items: center;
+  background-color: #fff;
+  display: flex;
+  height: max-content;
+  inset-block-start: 0.8rem;
+  inset-inline: auto 1rem;
+  justify-content: center;
+  position: absolute;
+  width: max-content;
+}
+.card img {
+  object-fit: cover;
+  object-position: center;
+  user-select: none;
+}
 @keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }