react-inner-image-zoom/es/components/ZoomImage.js

A React component for magnifying an image within its parent container 🔎

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var ZoomImage = function ZoomImage(_ref) {
  var src = _ref.src,
    fadeDuration = _ref.fadeDuration,
    top = _ref.top,
    left = _ref.left,
    isZoomed = _ref.isZoomed,
    onLoad = _ref.onLoad,
    onDragStart = _ref.onDragStart,
    onDragEnd = _ref.onDragEnd,
    onClose = _ref.onClose,
    onFadeOut = _ref.onFadeOut;
  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("img", {
    className: "iiz__zoom-img ".concat(isZoomed ? 'iiz__zoom-img--visible' : ''),
    style: {
      top: top,
      left: left,
      transition: "opacity ".concat(fadeDuration, "ms linear, visibility ").concat(fadeDuration, "ms linear")
    },
    src: src,
    onLoad: onLoad,
    onTouchStart: onDragStart,
    onTouchEnd: onDragEnd,
    onMouseDown: onDragStart,
    onMouseUp: onDragEnd,
    onTransitionEnd: onFadeOut,
    draggable: "false",
    alt: ""
  }), onClose && /*#__PURE__*/_react.default.createElement("button", {
    className: "iiz__btn iiz__close ".concat(isZoomed ? 'iiz__close--visible' : ''),
    style: {
      transition: "opacity ".concat(fadeDuration, "ms linear, visibility ").concat(fadeDuration, "ms linear")
    },
    onClick: onClose,
    "aria-label": "Zoom Out"
  }));
};
var _default = ZoomImage;
exports.default = _default;