gdx-ui 1.15.3 → 2.0.1

package/components/images/Thumb.js

@@ -1,61 +1,37 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Thumb = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _util = require("../util");
+var _useImageLoader2 = require("./useImageLoader");
 var _noImage = _interopRequireDefault(require("../../assets/no-image.jpg"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } // import noImage from '../../../assets/logo.svg';
+// import noImage from '../../../assets/logo.svg';
+
 var Thumb = exports.Thumb = function Thumb(_ref) {
   var src = _ref.src,
     alt = _ref.alt,
     _ref$bordered = _ref.bordered,
     bordered = _ref$bordered === void 0 ? false : _ref$bordered,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    onClick = _ref.onClick;
-  var _useState = (0, _react.useState)(),
-    _useState2 = _slicedToArray(_useState, 2),
-    imageData = _useState2[0],
-    setImageData = _useState2[1];
-  (0, _react.useEffect)(function () {
-    var image = new Image();
-    image.src = src;
-    image.onload = function () {
-      var width = image.width,
-        height = image.height;
-      setImageData({
-        width: width,
-        height: height
-      });
-    };
-  }, [src]);
-  var isClickable = typeof onClick === 'function';
-  return /*#__PURE__*/_react["default"].createElement("div", _extends({
-    className: "thumb thumb-".concat(size, " ").concat(bordered ? 'thumb-bordered' : '', " ").concat(isClickable ? 'clickable bordered-hover' : '')
-  }, isClickable && {
-    onClick: onClick,
-    role: 'button',
-    tabIndex: 0,
-    onKeyDown: function onKeyDown(e) {
-      if (e.key === 'Enter' || e.key === ' ') onClick(e);
-    }
-  }), imageData ? /*#__PURE__*/_react["default"].createElement("img", {
+    size = _ref$size === void 0 ? 'medium' : _ref$size;
+  var _useImageLoader = (0, _useImageLoader2.useImageLoader)(src),
+    isLoading = _useImageLoader.isLoading,
+    hasError = _useImageLoader.hasError,
+    width = _useImageLoader.width,
+    height = _useImageLoader.height;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "thumb thumb-".concat(size, " ").concat(bordered ? 'thumb-bordered' : '')
+  }, isLoading ? /*#__PURE__*/_react["default"].createElement(_util.Loader, {
+    inline: true
+  }) : !hasError ? /*#__PURE__*/_react["default"].createElement("img", {
     src: src,
     alt: alt,
-    className: "center-by-".concat(imageData.width > imageData.height ? 'width' : 'height')
+    className: "center-by-".concat(width > height ? 'width' : 'height')
   }) : /*#__PURE__*/_react["default"].createElement("img", {
     src: _noImage["default"],
     alt: alt,

package/components/images/{ImageZoom.js → ZoomImage.js}

@@ -4,12 +4,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ImageZoom = void 0;
+exports.ZoomImage = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _util = require("../util");
-var _button = require("../button");
-var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+var _useImageLoader2 = require("./useImageLoader");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
@@ -18,7 +17,7 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-var ImageZoom = exports.ImageZoom = function ImageZoom(_ref) {
+var ZoomImage = exports.ZoomImage = function ZoomImage(_ref) {
   var src = _ref.src,
     alt = _ref.alt,
     _ref$width = _ref.width,
@@ -29,81 +28,59 @@ var ImageZoom = exports.ImageZoom = function ImageZoom(_ref) {
     bordered = _ref$bordered === void 0 ? false : _ref$bordered,
     _ref$maxZoom = _ref.maxZoom,
     maxZoom = _ref$maxZoom === void 0 ? 1.5 : _ref$maxZoom,
-    _ref$showHelp = _ref.showHelp,
-    showHelp = _ref$showHelp === void 0 ? true : _ref$showHelp;
-  var _useState = (0, _react.useState)(),
+    _ref$showHelper = _ref.showHelper,
+    showHelper = _ref$showHelper === void 0 ? true : _ref$showHelper;
+  var normalizedMaxZoom = Math.min(5, Math.max(1, Number(maxZoom) || 1));
+  var _useImageLoader = (0, _useImageLoader2.useImageLoader)(src),
+    isLoading = _useImageLoader.isLoading,
+    hasError = _useImageLoader.hasError,
+    imageWidth = _useImageLoader.width,
+    imageHeight = _useImageLoader.height;
+  var imageData = (0, _react.useMemo)(function () {
+    return !isLoading && !hasError && imageWidth > 0 && imageHeight > 0 ? {
+      width: imageWidth,
+      height: imageHeight
+    } : null;
+  }, [isLoading, hasError, imageWidth, imageHeight]);
+  var _useState = (0, _react.useState)(1),
     _useState2 = _slicedToArray(_useState, 2),
-    imageData = _useState2[0],
-    setImageData = _useState2[1];
+    zoom = _useState2[0],
+    setZoom = _useState2[1];
   var _useState3 = (0, _react.useState)(1),
     _useState4 = _slicedToArray(_useState3, 2),
-    zoom = _useState4[0],
-    setZoom = _useState4[1];
-  var _useState5 = (0, _react.useState)(1),
+    minZoom = _useState4[0],
+    setMinZoom = _useState4[1];
+  var _useState5 = (0, _react.useState)(normalizedMaxZoom),
     _useState6 = _slicedToArray(_useState5, 2),
-    minZoom = _useState6[0],
-    setMinZoom = _useState6[1];
-  var _useState7 = (0, _react.useState)(maxZoom),
-    _useState8 = _slicedToArray(_useState7, 2),
-    maxZoomState = _useState8[0],
-    setMaxZoomState = _useState8[1];
-  var _useState9 = (0, _react.useState)({
+    maxZoomState = _useState6[0],
+    setMaxZoomState = _useState6[1];
+  var _useState7 = (0, _react.useState)({
       x: 0,
       y: 0
     }),
+    _useState8 = _slicedToArray(_useState7, 2),
+    offset = _useState8[0],
+    setOffset = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
     _useState0 = _slicedToArray(_useState9, 2),
-    offset = _useState0[0],
-    setOffset = _useState0[1];
-  var _useState1 = (0, _react.useState)(false),
-    _useState10 = _slicedToArray(_useState1, 2),
-    dragging = _useState10[0],
-    setDragging = _useState10[1];
-  var _useState11 = (0, _react.useState)({
+    dragging = _useState0[0],
+    setDragging = _useState0[1];
+  var _useState1 = (0, _react.useState)({
       x: 0,
       y: 0
     }),
-    _useState12 = _slicedToArray(_useState11, 2),
-    dragStart = _useState12[0],
-    setDragStart = _useState12[1];
-  var _useState13 = (0, _react.useState)({
+    _useState10 = _slicedToArray(_useState1, 2),
+    dragStart = _useState10[0],
+    setDragStart = _useState10[1];
+  var _useState11 = (0, _react.useState)({
       x: 0,
       y: 0
     }),
-    _useState14 = _slicedToArray(_useState13, 2),
-    imgStart = _useState14[0],
-    setImgStart = _useState14[1];
+    _useState12 = _slicedToArray(_useState11, 2),
+    imgStart = _useState12[0],
+    setImgStart = _useState12[1];
   var containerRef = (0, _react.useRef)(null);
 
-  // Cuando la imagen y el wrapper están listos, calcula el zoom mínimo y máximo
-  (0, _react.useEffect)(function () {
-    if (!src) return;
-    var image = new Image();
-    image.src = src;
-    image.onload = function () {
-      setImageData({
-        width: image.width,
-        height: image.height
-      });
-    };
-  }, [src]);
-  (0, _react.useEffect)(function () {
-    if (!imageData || !containerRef.current) return;
-    var wrapper = containerRef.current;
-    var dispW = wrapper.clientWidth;
-    var dispH = wrapper.clientHeight;
-    var zoomW = dispW / imageData.width;
-    var zoomH = dispH / imageData.height;
-    var fitZoom = Math.min(zoomW, zoomH);
-    setMinZoom(fitZoom);
-    setZoom(fitZoom);
-    setMaxZoomState(Math.max(fitZoom, maxZoom));
-    setOffset({
-      x: 0,
-      y: 0
-    });
-    // eslint-disable-next-line
-  }, [imageData, maxZoom, width, height]);
-
   // Limita el offset para que la imagen no se salga del área visible
   var clampOffset = function clampOffset(ox, oy, zoomVal) {
     if (!imageData || !containerRef.current) return {
@@ -164,51 +141,28 @@ var ImageZoom = exports.ImageZoom = function ImageZoom(_ref) {
   var onTouchEnd = function onTouchEnd() {
     return setDragging(false);
   };
+  var applyZoomFromPoint = function applyZoomFromPoint(newZoom, anchorX, anchorY) {
+    if (!imageData || !containerRef.current) {
+      return;
+    }
+    setOffset(function (current) {
+      var relX = (anchorX - current.x) / zoom;
+      var relY = (anchorY - current.y) / zoom;
+      var nextX = anchorX - relX * newZoom;
+      var nextY = anchorY - relY * newZoom;
+      return clampOffset(nextX, nextY, newZoom);
+    });
+    setZoom(newZoom);
+  };
   var handleDoubleClick = function handleDoubleClick(e) {
     if (!imageData || !containerRef.current) return;
-    var wrapper = containerRef.current;
-    var rect = wrapper.getBoundingClientRect();
-    var clickX = e.clientX - rect.left;
-    var clickY = e.clientY - rect.top;
+    var rect = containerRef.current.getBoundingClientRect();
+    var anchorX = e.clientX - rect.left;
+    var anchorY = e.clientY - rect.top;
     if (zoom < maxZoomState) {
-      // Zoom al máximo desde el punto del click
-      var newZoom = maxZoomState;
-      var dispW = wrapper.clientWidth;
-      var dispH = wrapper.clientHeight;
-
-      // Calcula el punto relativo en la imagen original
-      var relX = (clickX - offset.x) / zoom;
-      var relY = (clickY - offset.y) / zoom;
-
-      // Calcula el nuevo offset para centrar ese punto
-      var offsetX = dispW / 2 - relX * newZoom;
-      var offsetY = dispH / 2 - relY * newZoom;
-
-      // Limita el offset para no salirte del área visible
-      var imgW = imageData.width * newZoom;
-      var imgH = imageData.height * newZoom;
-      var minX = Math.min(0, dispW - imgW);
-      var minY = Math.min(0, dispH - imgH);
-      offsetX = Math.max(minX, Math.min(offsetX, 0));
-      offsetY = Math.max(minY, Math.min(offsetY, 0));
-      setZoom(newZoom);
-      setOffset({
-        x: offsetX,
-        y: offsetY
-      });
+      applyZoomFromPoint(maxZoomState, anchorX, anchorY);
     } else {
-      // Regresa al zoom inicial y centra la imagen
-      var _dispW = wrapper.clientWidth;
-      var _dispH = wrapper.clientHeight;
-      var _imgW = imageData.width * minZoom;
-      var _imgH = imageData.height * minZoom;
-      var _offsetX = (_dispW - _imgW) / 2;
-      var _offsetY = (_dispH - _imgH) / 2;
-      setZoom(minZoom);
-      setOffset({
-        x: _offsetX,
-        y: _offsetY
-      });
+      applyZoomFromPoint(minZoom, anchorX, anchorY);
     }
   };
   (0, _react.useEffect)(function () {
@@ -221,7 +175,7 @@ var ImageZoom = exports.ImageZoom = function ImageZoom(_ref) {
     var fitZoom = Math.min(zoomW, zoomH);
     setMinZoom(fitZoom);
     setZoom(fitZoom);
-    setMaxZoomState(Math.max(fitZoom, maxZoom));
+    setMaxZoomState(Math.max(fitZoom, normalizedMaxZoom));
 
     // Centra la imagen al inicio
     var imgW = imageData.width * fitZoom;
@@ -232,8 +186,7 @@ var ImageZoom = exports.ImageZoom = function ImageZoom(_ref) {
       x: offsetX,
       y: offsetY
     });
-    // eslint-disable-next-line
-  }, [imageData, maxZoom, width, height]);
+  }, [imageData, normalizedMaxZoom, width, height]);
   (0, _react.useEffect)(function () {
     if (zoom === minZoom && imageData && containerRef.current) {
       var dispW = containerRef.current.clientWidth;
@@ -262,7 +215,7 @@ var ImageZoom = exports.ImageZoom = function ImageZoom(_ref) {
     onTouchMove: onTouchMove,
     onTouchEnd: onTouchEnd,
     className: "image-zoom ".concat(bordered ? 'bordered' : '', " margin-bottom")
-  }, showHelp && /*#__PURE__*/_react["default"].createElement("div", {
+  }, showHelper && /*#__PURE__*/_react["default"].createElement("div", {
     className: "image-zoom-caption"
   }, "Doble click para ampliar o reducir la imagen"), imageData ? /*#__PURE__*/_react["default"].createElement("img", {
     src: src,
@@ -274,7 +227,7 @@ var ImageZoom = exports.ImageZoom = function ImageZoom(_ref) {
       left: offset.x,
       top: offset.y,
       cursor: zoom > minZoom ? dragging ? 'grabbing' : 'grab' : 'default',
-      transition: dragging ? 'none' : 'left 0.1s, top 0.1s'
+      transition: dragging ? 'none' : 'left 0.18s ease-out, top 0.18s ease-out, width 0.18s ease-out, height 0.18s ease-out'
     },
     onMouseDown: zoom > minZoom ? onMouseDown : undefined,
     onTouchStart: zoom > minZoom ? onTouchStart : undefined
@@ -283,11 +236,21 @@ var ImageZoom = exports.ImageZoom = function ImageZoom(_ref) {
     height: height
   }));
 };
-ImageZoom.propTypes = {
+ZoomImage.propTypes = {
   src: _propTypes["default"].string.isRequired,
   alt: _propTypes["default"].string,
   width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   bordered: _propTypes["default"].bool,
-  maxZoom: _propTypes["default"].number
+  maxZoom: function maxZoom(props, propName, componentName) {
+    var value = props[propName];
+    if (value === undefined || value === null) {
+      return null;
+    }
+    if (typeof value !== 'number' || Number.isNaN(value) || value < 1 || value > 5) {
+      return new Error("Invalid prop `".concat(propName, "` supplied to `").concat(componentName, "`. Expected a number between 1 and 5."));
+    }
+    return null;
+  },
+  showHelper: _propTypes["default"].bool
 };

package/components/images/{PictureZoomBtns.js → ZoomImageButtons.js}

@@ -4,12 +4,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PictureZoom = void 0;
+exports.ZoomImageButtons = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _util = require("../util");
 var _button = require("../button");
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+var _useImageLoader2 = require("./useImageLoader");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
@@ -18,7 +19,7 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-var PictureZoom = exports.PictureZoom = function PictureZoom(_ref) {
+var ZoomImageButtons = exports.ZoomImageButtons = function ZoomImageButtons(_ref) {
   var src = _ref.src,
     alt = _ref.alt,
     _ref$width = _ref.width,
@@ -29,79 +30,56 @@ var PictureZoom = exports.PictureZoom = function PictureZoom(_ref) {
     bordered = _ref$bordered === void 0 ? false : _ref$bordered,
     _ref$maxZoom = _ref.maxZoom,
     maxZoom = _ref$maxZoom === void 0 ? 1.5 : _ref$maxZoom;
-  var _useState = (0, _react.useState)(),
+  var _useImageLoader = (0, _useImageLoader2.useImageLoader)(src),
+    isLoading = _useImageLoader.isLoading,
+    hasError = _useImageLoader.hasError,
+    imageWidth = _useImageLoader.width,
+    imageHeight = _useImageLoader.height;
+  var imageData = (0, _react.useMemo)(function () {
+    return !isLoading && !hasError && imageWidth > 0 && imageHeight > 0 ? {
+      width: imageWidth,
+      height: imageHeight
+    } : null;
+  }, [isLoading, hasError, imageWidth, imageHeight]);
+  var _useState = (0, _react.useState)(1),
     _useState2 = _slicedToArray(_useState, 2),
-    imageData = _useState2[0],
-    setImageData = _useState2[1];
+    zoom = _useState2[0],
+    setZoom = _useState2[1];
   var _useState3 = (0, _react.useState)(1),
     _useState4 = _slicedToArray(_useState3, 2),
-    zoom = _useState4[0],
-    setZoom = _useState4[1];
-  var _useState5 = (0, _react.useState)(1),
+    minZoom = _useState4[0],
+    setMinZoom = _useState4[1];
+  var _useState5 = (0, _react.useState)(maxZoom),
     _useState6 = _slicedToArray(_useState5, 2),
-    minZoom = _useState6[0],
-    setMinZoom = _useState6[1];
-  var _useState7 = (0, _react.useState)(maxZoom),
-    _useState8 = _slicedToArray(_useState7, 2),
-    maxZoomState = _useState8[0],
-    setMaxZoomState = _useState8[1];
-  var _useState9 = (0, _react.useState)({
+    maxZoomState = _useState6[0],
+    setMaxZoomState = _useState6[1];
+  var _useState7 = (0, _react.useState)({
       x: 0,
       y: 0
     }),
+    _useState8 = _slicedToArray(_useState7, 2),
+    offset = _useState8[0],
+    setOffset = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
     _useState0 = _slicedToArray(_useState9, 2),
-    offset = _useState0[0],
-    setOffset = _useState0[1];
-  var _useState1 = (0, _react.useState)(false),
-    _useState10 = _slicedToArray(_useState1, 2),
-    dragging = _useState10[0],
-    setDragging = _useState10[1];
-  var _useState11 = (0, _react.useState)({
+    dragging = _useState0[0],
+    setDragging = _useState0[1];
+  var _useState1 = (0, _react.useState)({
       x: 0,
       y: 0
     }),
-    _useState12 = _slicedToArray(_useState11, 2),
-    dragStart = _useState12[0],
-    setDragStart = _useState12[1];
-  var _useState13 = (0, _react.useState)({
+    _useState10 = _slicedToArray(_useState1, 2),
+    dragStart = _useState10[0],
+    setDragStart = _useState10[1];
+  var _useState11 = (0, _react.useState)({
       x: 0,
       y: 0
     }),
-    _useState14 = _slicedToArray(_useState13, 2),
-    imgStart = _useState14[0],
-    setImgStart = _useState14[1];
+    _useState12 = _slicedToArray(_useState11, 2),
+    imgStart = _useState12[0],
+    setImgStart = _useState12[1];
   var containerRef = (0, _react.useRef)(null);
 
-  // Cuando la imagen y el wrapper están listos, calcula el zoom mínimo y máximo
-  (0, _react.useEffect)(function () {
-    if (!src) return;
-    var image = new Image();
-    image.src = src;
-    image.onload = function () {
-      setImageData({
-        width: image.width,
-        height: image.height
-      });
-    };
-  }, [src]);
-  (0, _react.useEffect)(function () {
-    if (!imageData || !containerRef.current) return;
-    var wrapper = containerRef.current;
-    var dispW = wrapper.clientWidth;
-    var dispH = wrapper.clientHeight;
-    var zoomW = dispW / imageData.width;
-    var zoomH = dispH / imageData.height;
-    var fitZoom = Math.min(zoomW, zoomH);
-    setMinZoom(fitZoom);
-    setZoom(fitZoom);
-    setMaxZoomState(Math.max(fitZoom, maxZoom));
-    setOffset({
-      x: 0,
-      y: 0
-    });
-    // eslint-disable-next-line
-  }, [imageData, maxZoom, width, height]);
-
   // Limita el offset para que la imagen no se salga del área visible
   var clampOffset = function clampOffset(ox, oy, zoomVal) {
     if (!imageData || !containerRef.current) return {
@@ -124,8 +102,18 @@ var PictureZoom = exports.PictureZoom = function PictureZoom(_ref) {
   var handleZoom = function handleZoom(delta) {
     setZoom(function (prev) {
       var next = Math.max(minZoom, Math.min(prev + delta, maxZoomState));
+      if (!containerRef.current || !imageData) {
+        return next;
+      }
+      var wrapper = containerRef.current;
+      var centerX = wrapper.clientWidth / 2;
+      var centerY = wrapper.clientHeight / 2;
       setOffset(function (current) {
-        return clampOffset(current.x, current.y, next);
+        var relX = (centerX - current.x) / prev;
+        var relY = (centerY - current.y) / prev;
+        var nextX = centerX - relX * next;
+        var nextY = centerY - relY * next;
+        return clampOffset(nextX, nextY, next);
       });
       return next;
     });
@@ -207,7 +195,6 @@ var PictureZoom = exports.PictureZoom = function PictureZoom(_ref) {
       x: offsetX,
       y: offsetY
     });
-    // eslint-disable-next-line
   }, [imageData, maxZoom, width, height]);
   (0, _react.useEffect)(function () {
     if (zoom === minZoom && imageData && containerRef.current) {
@@ -253,7 +240,7 @@ var PictureZoom = exports.PictureZoom = function PictureZoom(_ref) {
       left: offset.x,
       top: offset.y,
       cursor: zoom > minZoom ? dragging ? 'grabbing' : 'grab' : 'default',
-      transition: dragging ? 'none' : 'left 0.1s, top 0.1s',
+      transition: dragging ? 'none' : 'left 0.18s ease-out, top 0.18s ease-out, width 0.18s ease-out, height 0.18s ease-out',
       userSelect: 'none'
     },
     onMouseDown: zoom > minZoom ? onMouseDown : undefined,
@@ -297,7 +284,7 @@ var PictureZoom = exports.PictureZoom = function PictureZoom(_ref) {
     }
   })));
 };
-PictureZoom.propTypes = {
+ZoomImageButtons.propTypes = {
   src: _propTypes["default"].string.isRequired,
   alt: _propTypes["default"].string,
   width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),

package/components/images/{Picture.js → ZoomImageSquare.js}

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Picture = void 0;
+exports.ZoomImageSquare = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _util = require("../util");
@@ -16,7 +16,7 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-var Picture = exports.Picture = function Picture(_ref) {
+var ZoomImageSquare = exports.ZoomImageSquare = function ZoomImageSquare(_ref) {
   var src = _ref.src,
     alt = _ref.alt,
     width = _ref.width,
@@ -148,7 +148,7 @@ var Picture = exports.Picture = function Picture(_ref) {
     height: height
   }));
 };
-Picture.propTypes = {
+ZoomImageSquare.propTypes = {
   src: _propTypes["default"].string.isRequired,
   alt: _propTypes["default"].string,
   width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),

package/components/images/index.js

@@ -14,17 +14,6 @@ Object.keys(_CarouselImages).forEach(function (key) {
     }
   });
 });
-var _ImageZoom = require("./ImageZoom");
-Object.keys(_ImageZoom).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ImageZoom[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _ImageZoom[key];
-    }
-  });
-});
 var _Img = require("./Img");
 Object.keys(_Img).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -46,4 +35,37 @@ Object.keys(_Thumb).forEach(function (key) {
       return _Thumb[key];
     }
   });
+});
+var _ZoomImage = require("./ZoomImage");
+Object.keys(_ZoomImage).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ZoomImage[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ZoomImage[key];
+    }
+  });
+});
+var _ZoomImageButtons = require("./ZoomImageButtons");
+Object.keys(_ZoomImageButtons).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ZoomImageButtons[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ZoomImageButtons[key];
+    }
+  });
+});
+var _ZoomImageSquare = require("./ZoomImageSquare");
+Object.keys(_ZoomImageSquare).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ZoomImageSquare[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ZoomImageSquare[key];
+    }
+  });
 });