Merge pull request #125 from laurenashpole/release/3.0.2

Release/3.0.2

CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [3.0.2](https://github.com/laurenashpole/react-inner-image-zoom/compare/v3.0.1...v3.0.2) (2022-07-22)
+
+
+### Fixed
+
+- A bug re-zooming after clicking the close button on non-touch devices when `zoomPreload` is false.
+
+🎉🎉🎉 Special thanks to [MaxDAyala](https://github.com/MaxdAyala) for tackling the following:
+
+- A Firefox error when the zoomed image is dragged to the far left of the container.
+- The timing of the fade out `visibility` and `opacity` transitions.
+- An intermittent issue where zooming became disabled by panning in and out at a fast speed.
+
+## [3.0.1](https://github.com/laurenashpole/react-inner-image-zoom/compare/v3.0.0...v3.0.1) (2022-06-12)
+
+### Fixed
+
+- Added `prop-types` to the `peerDependencies`.
+
 ## [3.0.0](https://github.com/laurenashpole/react-inner-image-zoom/compare/v2.1.0...v3.0.0) (2022-01-03)
 
 ### Changed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-inner-image-zoom",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "A React component for magnifying an image within its original container.",
   "main": "lib/index.js",
   "module": "es/index.js",

src/InnerImageZoom/InnerImageZoom.js

@@ -41,6 +41,7 @@ const InnerImageZoom = ({
 
   const handleMouseEnter = (e) => {
     setIsActive(true);
+    setIsFading(false);
     zoomType === 'hover' && !isZoomed && handleClick(e);
   };
 
@@ -53,7 +54,7 @@ const InnerImageZoom = ({
   const handleClick = (e) => {
     if (isZoomed) {
       if (isTouch) {
-        hideCloseButton && handleClose();
+        hideCloseButton && handleClose(e);
       } else {
         !isValidDrag && zoomOut();
       }
@@ -100,12 +101,9 @@ const InnerImageZoom = ({
   };
 
   const handleDragStart = (e) => {
-    imgProps.current.offsets = getOffsets(
-      e.pageX || e.changedTouches[0].pageX,
-      e.pageY || e.changedTouches[0].pageY,
-      zoomImg.current.offsetLeft,
-      zoomImg.current.offsetTop
-    );
+    const pageX = typeof e.pageX === 'number' ? e.pageX : e.changedTouches[0].pageX;
+    const pageY = typeof e.pageY === 'number' ? e.pageY : e.changedTouches[0].pageY;
+    imgProps.current.offsets = getOffsets(pageX, pageY, zoomImg.current.offsetLeft, zoomImg.current.offsetTop);
 
     setIsDragging(true);
 
@@ -119,8 +117,10 @@ const InnerImageZoom = ({
 
   const handleDragMove = useCallback((e) => {
     e.stopPropagation();
-    let left = (e.pageX || e.changedTouches[0].pageX) - imgProps.current.offsets.x;
-    let top = (e.pageY || e.changedTouches[0].pageY) - imgProps.current.offsets.y;
+    const pageX = typeof e.pageX === 'number' ? e.pageX : e.changedTouches[0].pageX;
+    const pageY = typeof e.pageY === 'number' ? e.pageY : e.changedTouches[0].pageY;
+    let left = pageX - imgProps.current.offsets.x;
+    let top = pageY - imgProps.current.offsets.y;
 
     left = Math.max(Math.min(left, 0), (imgProps.current.scaledDimensions.width - imgProps.current.bounds.width) * -1);
     top = Math.max(Math.min(top, 0), (imgProps.current.scaledDimensions.height - imgProps.current.bounds.height) * -1);
@@ -140,14 +140,16 @@ const InnerImageZoom = ({
   };
 
   const handleMouseLeave = (e) => {
-    currentMoveType === 'drag' && isZoomed ? handleDragEnd(e) : handleClose();
+    currentMoveType === 'drag' && isZoomed ? handleDragEnd(e) : handleClose(e);
   };
 
-  const handleClose = () => {
-    if (!isZoomed || isFullscreen || !fadeDuration) {
-      handleFadeOut({}, true);
-    } else {
-      setIsFading(true);
+  const handleClose = (e) => {
+    if (!(!isTouch && e.target.classList.contains('iiz__close'))) {
+      if (!isZoomed || isFullscreen || !fadeDuration) {
+        handleFadeOut({}, true);
+      } else {
+        setIsFading(true);
+      }
     }
 
     zoomOut();

src/InnerImageZoom/components/Image.js

@@ -18,7 +18,7 @@ const Image = ({ src, sources, width, height, hasSpacer, imgAttributes, isZoomed
               createSpacer ? 'iiz__img--abs' : ''
             }`}
             style={{
-              transition: `linear 0ms opacity ${isZoomed ? fadeDuration : 0}ms, linear ${fadeDuration}ms visibility ${
+              transition: `opacity 0ms linear ${isZoomed ? fadeDuration : 0}ms, visibility 0ms linear ${
                 isZoomed ? fadeDuration : 0
               }ms`
             }}
@@ -34,7 +34,7 @@ const Image = ({ src, sources, width, height, hasSpacer, imgAttributes, isZoomed
             createSpacer ? 'iiz__img--abs' : ''
           }`}
           style={{
-            transition: `linear 0ms opacity ${isZoomed ? fadeDuration : 0}ms, linear ${fadeDuration}ms visibility ${
+            transition: `opacity 0ms linear ${isZoomed ? fadeDuration : 0}ms, visibility 0ms linear ${
               isZoomed ? fadeDuration : 0
             }ms`
           }}

src/InnerImageZoom/components/ZoomImage.js

@@ -9,7 +9,7 @@ const ZoomImage = ({ src, fadeDuration, top, left, isZoomed, onLoad, onDragStart
         style={{
           top: top,
           left: left,
-          transition: `linear ${fadeDuration}ms opacity, linear ${fadeDuration}ms visibility`
+          transition: `opacity ${fadeDuration}ms linear, visibility ${fadeDuration}ms linear`
         }}
         src={src}
         onLoad={onLoad}
@@ -26,7 +26,7 @@ const ZoomImage = ({ src, fadeDuration, top, left, isZoomed, onLoad, onDragStart
         <button
           className={`iiz__btn iiz__close ${isZoomed ? 'iiz__close--visible' : ''}`}
           style={{
-            transition: `linear ${fadeDuration}ms opacity, linear ${fadeDuration}ms visibility`
+            transition: `opacity ${fadeDuration}ms linear, visibility ${fadeDuration}ms linear`
           }}
           onClick={onClose}
           aria-label="Zoom Out"

tests/index.spec.js

@@ -407,6 +407,23 @@ describe('InnerImageZoom', function () {
       };
     });
 
+    it('persists the zoomed image after clicking the close button if moveType is drag', (done) => {
+      innerImageZoom({ moveType: 'drag' });
+      const figure = findRenderedDOMComponentWithTag(component, 'figure');
+      Simulate.mouseEnter(figure);
+      Simulate.click(figure, { pageX: 100, pageY: 100 });
+      const zoomImg = findRenderedDOMComponentWithClass(component, 'iiz__zoom-img');
+
+      zoomImg.onload = () => {
+        const button = findRenderedDOMComponentWithTag(component, 'button');
+        Simulate.click(button, { pageX: 0, pageY: 0 });
+        Simulate.transitionEnd(zoomImg, { propertyName: 'opacity' });
+        const img = scryRenderedDOMComponentsWithTag(component, 'img');
+        expect(img.length).toBe(2);
+        done();
+      };
+    });
+
     it('fires afterZoomOut callback on zoom out', (done) => {
       const afterZoomOut = createSpy();
       innerImageZoom({ afterZoomOut: afterZoomOut });