donghy 0.0.1

package/dist/cjs/components/display/image/Image.js

@@ -0,0 +1,481 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Image = exports.GroupContext = void 0;
+exports.PreviewOverlay = PreviewOverlay;
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _useEscapeKey = require("../../shared/hooks/useEscapeKey");
+var _ImageModule = _interopRequireDefault(require("./Image.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+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(arr) { if (Array.isArray(arr)) return arr; } /**
+ * 图片语义化 DOM 节点
+ */ /**
+ * 图片预览配置
+ */ /**
+ * 图片组件属性
+ */
+function getSemantic(part, defaultClass, classNamesProp, stylesProp) {
+  var classExtra = classNamesProp === null || classNamesProp === void 0 ? void 0 : classNamesProp[part];
+  var styleExtra = stylesProp === null || stylesProp === void 0 ? void 0 : stylesProp[part];
+  return {
+    className: [defaultClass, classExtra].filter(Boolean).join(' '),
+    style: styleExtra || {}
+  };
+}
+var ZOOM_IN_SVG = /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+  viewBox: "0 0 24 24",
+  width: "16",
+  height: "16",
+  fill: "currentColor",
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M15.5 14h-.79l-.28-.27A6.47 6.47 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM12 10h-2v2h-1v-2H7V9h2V7h1v2h2v1z"
+  })
+});
+var ZOOM_OUT_SVG = /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+  viewBox: "0 0 24 24",
+  width: "16",
+  height: "16",
+  fill: "currentColor",
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M15.5 14h-.79l-.28-.27A6.47 6.47 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z"
+  })
+});
+var ROTATE_LEFT_SVG = /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+  viewBox: "0 0 24 24",
+  width: "16",
+  height: "16",
+  fill: "currentColor",
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M7.11 8.53L5.7 7.11C4.8 8.27 4.24 9.61 4.07 11h2.02c.14-.87.49-1.72 1.02-2.47zM6.09 13H4.07c.17 1.39.72 2.73 1.62 3.89l1.41-1.42c-.52-.75-.87-1.59-1.01-2.47zm1.01 5.32c1.16.9 2.51 1.44 3.9 1.61V17.9c-.87-.15-1.71-.49-2.46-1.03L7.1 18.32zM13 4.07V1L8.45 5.55 13 10V6.09c2.84.48 5 2.94 5 5.91s-2.16 5.43-5 5.91v2.02c3.95-.49 7-3.85 7-7.93s-3.05-7.44-7-7.93z"
+  })
+});
+var ROTATE_RIGHT_SVG = /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+  viewBox: "0 0 24 24",
+  width: "16",
+  height: "16",
+  fill: "currentColor",
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M16.89 8.53c.53.75.88 1.6 1.02 2.47h2.02c-.17-1.39-.72-2.73-1.62-3.89l-1.42 1.42zm1.02 4.47c-.14.87-.49 1.72-1.02 2.47l1.41 1.41c.9-1.16 1.45-2.5 1.62-3.89h-2.01zM13 17.9v2.02c1.39-.17 2.74-.71 3.9-1.61l-1.44-1.44c-.75.54-1.59.89-2.46 1.03zm-5.9-1.01c.75.53 1.6.88 2.47 1.02V17.9c-.87-.14-1.71-.49-2.46-1.03L7.1 16.89zM15.55 5.55L11 1v3.07C7.05 4.56 4 7.92 4 12s3.05 7.44 7 7.93v-2.02c-2.84-.48-5-2.94-5-5.91s2.16-5.43 5-5.91V10l4.55-4.45z"
+  })
+});
+var FLIP_H_SVG = /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+  viewBox: "0 0 24 24",
+  width: "16",
+  height: "16",
+  fill: "currentColor",
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M15 21h2v-2h-2v2zm4-12h2V7h-2v2zm0 8h2v-2h-2v2zm-8 4h2V3h-2v18zm8-12h2v-2h-2v2zm0-8v2h2V3h-2zm-4 18h2v-2h-2v2zm0-16h2V3h-2v2zM3 21h2V3H3v18zm4 0h2v-2H7v2zm0-8h2v-2H7v2zm0-8h2V3H7v2z"
+  })
+});
+var RESET_SVG = /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+  viewBox: "0 0 24 24",
+  width: "16",
+  height: "16",
+  fill: "currentColor",
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"
+  })
+});
+var CLOSE_SVG = /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+  viewBox: "0 0 24 24",
+  width: "20",
+  height: "20",
+  fill: "currentColor",
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+  })
+});
+var PREV_SVG = /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+  viewBox: "0 0 24 24",
+  width: "20",
+  height: "20",
+  fill: "currentColor",
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
+  })
+});
+var NEXT_SVG = /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+  viewBox: "0 0 24 24",
+  width: "20",
+  height: "20",
+  fill: "currentColor",
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z"
+  })
+});
+var DEFAULT_PREVIEW_STATE = {
+  visible: false,
+  scale: 1,
+  rotate: 0,
+  flipH: false,
+  flipV: false,
+  translateX: 0,
+  translateY: 0
+};
+var GroupContext = exports.GroupContext = /*#__PURE__*/(0, _react.createContext)(null);
+function PreviewOverlay(_ref) {
+  var _previewConfig$scaleS, _previewConfig$minSca, _previewConfig$maxSca, _previewConfig$movabl, _previewConfig$closeI;
+  var src = _ref.src,
+    previewConfig = _ref.previewConfig,
+    onClose = _ref.onClose,
+    groupInfo = _ref.groupInfo;
+  var _useState = (0, _react.useState)(DEFAULT_PREVIEW_STATE),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var dragRef = (0, _react.useRef)(null);
+  var scaleStep = (_previewConfig$scaleS = previewConfig.scaleStep) !== null && _previewConfig$scaleS !== void 0 ? _previewConfig$scaleS : 0.5;
+  var minScale = (_previewConfig$minSca = previewConfig.minScale) !== null && _previewConfig$minSca !== void 0 ? _previewConfig$minSca : 1;
+  var maxScale = (_previewConfig$maxSca = previewConfig.maxScale) !== null && _previewConfig$maxSca !== void 0 ? _previewConfig$maxSca : 50;
+  var movable = (_previewConfig$movabl = previewConfig.movable) !== null && _previewConfig$movabl !== void 0 ? _previewConfig$movabl : true;
+  var resetTransform = (0, _react.useCallback)(function () {
+    setState(function (s) {
+      return _objectSpread(_objectSpread({}, s), {}, {
+        scale: 1,
+        rotate: 0,
+        flipH: false,
+        flipV: false,
+        translateX: 0,
+        translateY: 0
+      });
+    });
+  }, []);
+  var zoomIn = (0, _react.useCallback)(function () {
+    setState(function (s) {
+      return _objectSpread(_objectSpread({}, s), {}, {
+        scale: Math.min(s.scale + scaleStep, maxScale)
+      });
+    });
+  }, [scaleStep, maxScale]);
+  var zoomOut = (0, _react.useCallback)(function () {
+    setState(function (s) {
+      return _objectSpread(_objectSpread({}, s), {}, {
+        scale: Math.max(s.scale - scaleStep, minScale)
+      });
+    });
+  }, [scaleStep, minScale]);
+  var rotateLeft = (0, _react.useCallback)(function () {
+    setState(function (s) {
+      return _objectSpread(_objectSpread({}, s), {}, {
+        rotate: s.rotate - 90
+      });
+    });
+  }, []);
+  var rotateRight = (0, _react.useCallback)(function () {
+    setState(function (s) {
+      return _objectSpread(_objectSpread({}, s), {}, {
+        rotate: s.rotate + 90
+      });
+    });
+  }, []);
+  var flipH = (0, _react.useCallback)(function () {
+    setState(function (s) {
+      return _objectSpread(_objectSpread({}, s), {}, {
+        flipH: !s.flipH
+      });
+    });
+  }, []);
+  (0, _useEscapeKey.useEscapeKey)(onClose);
+  var handleKeyDown = (0, _react.useCallback)(function (e) {
+    if (e.key === 'ArrowLeft' && groupInfo) {
+      var prev = groupInfo.currentIndex - 1;
+      if (prev >= 0) {
+        groupInfo.onNavigate(prev);
+        resetTransform();
+      }
+    } else if (e.key === 'ArrowRight' && groupInfo) {
+      var next = groupInfo.currentIndex + 1;
+      if (next < groupInfo.urls.length) {
+        groupInfo.onNavigate(next);
+        resetTransform();
+      }
+    }
+  }, [groupInfo, resetTransform]);
+  (0, _react.useEffect)(function () {
+    document.addEventListener('keydown', handleKeyDown);
+    document.body.style.overflow = 'hidden';
+    return function () {
+      document.removeEventListener('keydown', handleKeyDown);
+      document.body.style.overflow = '';
+    };
+  }, [handleKeyDown]);
+  var handleMaskClick = (0, _react.useCallback)(function (e) {
+    if (e.target === e.currentTarget) onClose();
+  }, [onClose]);
+  var handleMouseDown = (0, _react.useCallback)(function (e) {
+    if (!movable || state.scale <= 1) return;
+    e.preventDefault();
+    dragRef.current = {
+      startX: e.clientX,
+      startY: e.clientY,
+      originX: state.translateX,
+      originY: state.translateY
+    };
+    var handleMouseMove = function handleMouseMove(ev) {
+      if (!dragRef.current) return;
+      var dx = ev.clientX - dragRef.current.startX;
+      var dy = ev.clientY - dragRef.current.startY;
+      setState(function (s) {
+        return _objectSpread(_objectSpread({}, s), {}, {
+          translateX: dragRef.current.originX + dx,
+          translateY: dragRef.current.originY + dy
+        });
+      });
+    };
+    var handleMouseUp = function handleMouseUp() {
+      dragRef.current = null;
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+  }, [movable, state.scale, state.translateX, state.translateY]);
+  var imgTransform = ["scale(".concat(state.flipH ? -state.scale : state.scale, ", ").concat(state.flipV ? -state.scale : state.scale, ")"), "rotate(".concat(state.rotate, "deg)"), "translate(".concat(state.translateX, "px, ").concat(state.translateY, "px)")].join(' ');
+  var defaultActions = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      className: _ImageModule.default.previewAction,
+      onClick: zoomOut,
+      type: "button",
+      "aria-label": "Zoom out",
+      children: ZOOM_OUT_SVG
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      className: _ImageModule.default.previewAction,
+      onClick: zoomIn,
+      type: "button",
+      "aria-label": "Zoom in",
+      children: ZOOM_IN_SVG
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      className: _ImageModule.default.previewAction,
+      onClick: rotateLeft,
+      type: "button",
+      "aria-label": "Rotate left",
+      children: ROTATE_LEFT_SVG
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      className: _ImageModule.default.previewAction,
+      onClick: rotateRight,
+      type: "button",
+      "aria-label": "Rotate right",
+      children: ROTATE_RIGHT_SVG
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      className: _ImageModule.default.previewAction,
+      onClick: flipH,
+      type: "button",
+      "aria-label": "Flip horizontal",
+      children: FLIP_H_SVG
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      className: _ImageModule.default.previewAction,
+      onClick: resetTransform,
+      type: "button",
+      "aria-label": "Reset",
+      children: RESET_SVG
+    })]
+  });
+  var actionsNode = previewConfig.actionsRender ? previewConfig.actionsRender(defaultActions, _objectSpread(_objectSpread({}, state), {}, {
+    src: src
+  })) : defaultActions;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: _ImageModule.default.previewRoot,
+    "data-open": "true",
+    "data-preview": true,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: _ImageModule.default.previewMask,
+      onClick: handleMaskClick
+    }), groupInfo && groupInfo.urls.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        className: [_ImageModule.default.previewArrow, _ImageModule.default.previewArrowLeft].join(' '),
+        onClick: function onClick() {
+          if (groupInfo.currentIndex > 0) {
+            groupInfo.onNavigate(groupInfo.currentIndex - 1);
+            resetTransform();
+          }
+        },
+        type: "button",
+        "aria-label": "Previous image",
+        style: {
+          opacity: groupInfo.currentIndex > 0 ? 1 : 0.3
+        },
+        children: PREV_SVG
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        className: [_ImageModule.default.previewArrow, _ImageModule.default.previewArrowRight].join(' '),
+        onClick: function onClick() {
+          if (groupInfo.currentIndex < groupInfo.urls.length - 1) {
+            groupInfo.onNavigate(groupInfo.currentIndex + 1);
+            resetTransform();
+          }
+        },
+        type: "button",
+        "aria-label": "Next image",
+        style: {
+          opacity: groupInfo.currentIndex < groupInfo.urls.length - 1 ? 1 : 0.3
+        },
+        children: NEXT_SVG
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: _ImageModule.default.previewBody,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        className: _ImageModule.default.previewImg,
+        src: src,
+        alt: "Preview",
+        style: {
+          transform: imgTransform
+        },
+        onMouseDown: handleMouseDown,
+        draggable: false
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: _ImageModule.default.previewActions,
+      children: [actionsNode, groupInfo && groupInfo.urls.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        className: _ImageModule.default.previewCount,
+        children: [groupInfo.currentIndex + 1, " / ", groupInfo.urls.length]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      className: _ImageModule.default.previewClose,
+      onClick: onClose,
+      type: "button",
+      "aria-label": "Close preview",
+      children: (_previewConfig$closeI = previewConfig.closeIcon) !== null && _previewConfig$closeI !== void 0 ? _previewConfig$closeI : CLOSE_SVG
+    })]
+  });
+}
+var Image = exports.Image = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
+  var src = _ref2.src,
+    alt = _ref2.alt,
+    width = _ref2.width,
+    height = _ref2.height,
+    fallback = _ref2.fallback,
+    placeholder = _ref2.placeholder,
+    _ref2$preview = _ref2.preview,
+    preview = _ref2$preview === void 0 ? true : _ref2$preview,
+    onError = _ref2.onError,
+    classNamesProp = _ref2.classNames,
+    stylesProp = _ref2.styles,
+    className = _ref2.className,
+    style = _ref2.style,
+    children = _ref2.children;
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    loaded = _useState4[0],
+    setLoaded = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    error = _useState6[0],
+    setError = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    previewOpen = _useState8[0],
+    setPreviewOpen = _useState8[1];
+  var groupContext = (0, _react.useContext)(GroupContext);
+  var registeredIndex = (0, _react.useRef)(null);
+  var previewConfig = typeof preview === 'boolean' ? {
+    open: undefined
+  } : preview;
+  var isPreviewEnabled = typeof preview === 'boolean' ? preview : true;
+  var previewSrc = previewConfig.src || src || '';
+  (0, _react.useEffect)(function () {
+    if (src && groupContext) {
+      registeredIndex.current = groupContext.register(src);
+    }
+  }, [src, groupContext]);
+  (0, _react.useEffect)(function () {
+    setLoaded(false);
+    setError(false);
+  }, [src]);
+  var handleLoad = (0, _react.useCallback)(function () {
+    setLoaded(true);
+  }, []);
+  var handleError = (0, _react.useCallback)(function (e) {
+    setError(true);
+    onError === null || onError === void 0 || onError(e.nativeEvent);
+  }, [onError]);
+  var handlePreviewOpen = (0, _react.useCallback)(function () {
+    if (!isPreviewEnabled) return;
+    if (groupContext && registeredIndex.current !== null) {
+      groupContext.preview(registeredIndex.current);
+    } else {
+      var _previewConfig$onChan;
+      setPreviewOpen(true);
+      (_previewConfig$onChan = previewConfig.onChange) === null || _previewConfig$onChan === void 0 || _previewConfig$onChan.call(previewConfig, true);
+    }
+  }, [isPreviewEnabled, groupContext, previewConfig]);
+  var handlePreviewClose = (0, _react.useCallback)(function () {
+    var _previewConfig$onChan2;
+    setPreviewOpen(false);
+    (_previewConfig$onChan2 = previewConfig.onChange) === null || _previewConfig$onChan2 === void 0 || _previewConfig$onChan2.call(previewConfig, false);
+  }, [previewConfig]);
+  var rootSemantic = getSemantic('root', _ImageModule.default.root, classNamesProp, stylesProp);
+  var imageSemantic = getSemantic('image', _ImageModule.default.img, classNamesProp, stylesProp);
+  var coverSemantic = getSemantic('cover', _ImageModule.default.cover, classNamesProp, stylesProp);
+  var rootClass = [rootSemantic.className, className].filter(Boolean).join(' ');
+  var rootStyle = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, rootSemantic.style), style), width !== undefined ? {
+    width: width
+  } : {}), height !== undefined ? {
+    height: height
+  } : {});
+  var displaySrc = error && fallback ? fallback : src;
+  var isPlaceholderObject = _typeof(placeholder) === 'object' && placeholder !== null && 'progress' in placeholder;
+  var placeholderEl = isPlaceholderObject ? null : placeholder;
+  var progressConfig = isPlaceholderObject ? placeholder.progress : null;
+  var showPlaceholder = !loaded && !error && src;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      ref: ref,
+      className: rootClass,
+      style: rootStyle,
+      "data-image": true,
+      children: [showPlaceholder && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: _ImageModule.default.placeholder,
+        "data-hidden": loaded || error ? 'true' : undefined,
+        children: progressConfig ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: _ImageModule.default.progressWrapper,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: _ImageModule.default.progressBar,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: _ImageModule.default.progressFill,
+              style: {
+                width: _typeof(progressConfig) === 'object' && 'percent' in progressConfig ? "".concat(progressConfig.percent, "%") : '0%'
+              }
+            })
+          })
+        }) : placeholderEl
+      }), displaySrc && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        className: imageSemantic.className,
+        style: imageSemantic.style,
+        src: displaySrc,
+        alt: alt,
+        onLoad: handleLoad,
+        onError: handleError,
+        "data-loading": !loaded ? 'true' : undefined,
+        "data-loaded": loaded ? 'true' : undefined
+      }), isPreviewEnabled && loaded && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: coverSemantic.className,
+        style: coverSemantic.style,
+        onClick: handlePreviewOpen,
+        "data-cover": true,
+        children: ZOOM_IN_SVG
+      }), children]
+    }), isPreviewEnabled && previewOpen && !groupContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(PreviewOverlay, {
+      src: previewSrc,
+      previewConfig: previewConfig,
+      onClose: handlePreviewClose
+    })]
+  });
+});
+Image.displayName = 'Image';
+var _default = exports.default = Image;