@trafilea/afrodita-components 5.0.0-beta.120 → 5.0.0-beta.121

package/build/index.esm.js

@@ -10732,7 +10732,7 @@ var Image$1 = function Image(_ref) {
   }), /*#__PURE__*/React__default.createElement("img", _extends$1({}, imgAttributes, {
     className: "iiz__img " + (imgAttributes.className || '') + " " + (isZoomed ? 'iiz__img--hidden' : '') + " " + (createSpacer ? 'iiz__img--abs' : ''),
     style: {
-      transition: "linear 0ms opacity " + (isZoomed ? fadeDuration : 0) + "ms, linear " + fadeDuration + "ms visibility " + (isZoomed ? fadeDuration : 0) + "ms"
+      transition: "opacity 0ms linear " + (isZoomed ? fadeDuration : 0) + "ms, visibility 0ms linear " + (isZoomed ? fadeDuration : 0) + "ms"
     },
     src: src,
     width: width,
@@ -10740,7 +10740,7 @@ var Image$1 = function Image(_ref) {
   }))) : /*#__PURE__*/React__default.createElement("img", _extends$1({}, imgAttributes, {
     className: "iiz__img " + (imgAttributes.className || '') + " " + (isZoomed ? 'iiz__img--hidden' : '') + " " + (createSpacer ? 'iiz__img--abs' : ''),
     style: {
-      transition: "linear 0ms opacity " + (isZoomed ? fadeDuration : 0) + "ms, linear " + fadeDuration + "ms visibility " + (isZoomed ? fadeDuration : 0) + "ms"
+      transition: "opacity 0ms linear " + (isZoomed ? fadeDuration : 0) + "ms, visibility 0ms linear " + (isZoomed ? fadeDuration : 0) + "ms"
     },
     src: src,
     width: width,
@@ -10775,7 +10775,7 @@ var ZoomImage = function ZoomImage(_ref) {
     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,
@@ -10789,7 +10789,7 @@ var ZoomImage = function ZoomImage(_ref) {
   }), onClose && /*#__PURE__*/React__default.createElement("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"
@@ -10906,6 +10906,7 @@ var InnerImageZoom = function InnerImageZoom(_ref) {
 
   var handleMouseEnter = function handleMouseEnter(e) {
     setIsActive(true);
+    setIsFading(false);
     zoomType === 'hover' && !isZoomed && handleClick(e);
   };
 
@@ -10918,7 +10919,7 @@ var InnerImageZoom = function InnerImageZoom(_ref) {
   var handleClick = function handleClick(e) {
     if (isZoomed) {
       if (isTouch) {
-        hideCloseButton && handleClose();
+        hideCloseButton && handleClose(e);
       } else {
         !isValidDrag && zoomOut();
       }
@@ -10963,7 +10964,9 @@ var InnerImageZoom = function InnerImageZoom(_ref) {
   };
 
   var handleDragStart = function handleDragStart(e) {
-    imgProps.current.offsets = getOffsets(e.pageX || e.changedTouches[0].pageX, e.pageY || e.changedTouches[0].pageY, zoomImg.current.offsetLeft, zoomImg.current.offsetTop);
+    var pageX = typeof e.pageX === 'number' ? e.pageX : e.changedTouches[0].pageX;
+    var 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);
 
     if (!isTouch) {
@@ -10976,8 +10979,10 @@ var InnerImageZoom = function InnerImageZoom(_ref) {
 
   var handleDragMove = useCallback(function (e) {
     e.stopPropagation();
-    var left = (e.pageX || e.changedTouches[0].pageX) - imgProps.current.offsets.x;
-    var top = (e.pageY || e.changedTouches[0].pageY) - imgProps.current.offsets.y;
+    var pageX = typeof e.pageX === 'number' ? e.pageX : e.changedTouches[0].pageX;
+    var pageY = typeof e.pageY === 'number' ? e.pageY : e.changedTouches[0].pageY;
+    var left = pageX - imgProps.current.offsets.x;
+    var 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);
     setLeft(left);
@@ -10995,14 +11000,16 @@ var InnerImageZoom = function InnerImageZoom(_ref) {
   };
 
   var handleMouseLeave = function handleMouseLeave(e) {
-    currentMoveType === 'drag' && isZoomed ? handleDragEnd(e) : handleClose();
+    currentMoveType === 'drag' && isZoomed ? handleDragEnd(e) : handleClose(e);
   };
 
-  var handleClose = function handleClose() {
-    if (!isZoomed || isFullscreen || !fadeDuration) {
-      handleFadeOut({}, true);
-    } else {
-      setIsFading(true);
+  var handleClose = function handleClose(e) {
+    if (!(!isTouch && e.target.classList.contains('iiz__close'))) {
+      if (!isZoomed || isFullscreen || !fadeDuration) {
+        handleFadeOut({}, true);
+      } else {
+        setIsFading(true);
+      }
     }
 
     zoomOut();