tdesign-react 0.40.0 → 0.40.1

package/lib/_chunks/dep-921483b3.js

@@ -0,0 +1,47 @@
+/**
+ * tdesign v0.40.1
+ * (c) 2022 tdesign
+ * @license MIT
+ */
+
+'use strict';
+
+/**
+ * The base implementation of `_.slice` without an iteratee call guard.
+ *
+ * @private
+ * @param {Array} array The array to slice.
+ * @param {number} [start=0] The start position.
+ * @param {number} [end=array.length] The end position.
+ * @returns {Array} Returns the slice of `array`.
+ */
+
+function baseSlice(array, start, end) {
+  var index = -1,
+      length = array.length;
+
+  if (start < 0) {
+    start = -start > length ? 0 : length + start;
+  }
+
+  end = end > length ? length : end;
+
+  if (end < 0) {
+    end += length;
+  }
+
+  length = start > end ? 0 : end - start >>> 0;
+  start >>>= 0;
+  var result = Array(length);
+
+  while (++index < length) {
+    result[index] = array[index + start];
+  }
+
+  return result;
+}
+
+var _baseSlice = baseSlice;
+
+exports._baseSlice = _baseSlice;
+//# sourceMappingURL=dep-921483b3.js.map

package/lib/_chunks/dep-921483b3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dep-921483b3.js","sources":["../../node_modules/lodash/_baseSlice.js"],"sourcesContent":["/**\n * The base implementation of `_.slice` without an iteratee call guard.\n *\n * @private\n * @param {Array} array The array to slice.\n * @param {number} [start=0] The start position.\n * @param {number} [end=array.length] The end position.\n * @returns {Array} Returns the slice of `array`.\n */\nfunction baseSlice(array, start, end) {\n  var index = -1,\n      length = array.length;\n\n  if (start < 0) {\n    start = -start > length ? 0 : (length + start);\n  }\n  end = end > length ? length : end;\n  if (end < 0) {\n    end += length;\n  }\n  length = start > end ? 0 : ((end - start) >>> 0);\n  start >>>= 0;\n\n  var result = Array(length);\n  while (++index < length) {\n    result[index] = array[index + start];\n  }\n  return result;\n}\n\nmodule.exports = baseSlice;\n"],"names":["baseSlice","array","start","end","index","length","result","Array","_baseSlice"],"mappings":";;;;;;;;;;;;;;;;;;AASA,SAASA,SAAT,CAAmBC,KAAnB,EAA0BC,KAA1B,EAAiCC,GAAjC,EAAsC;EACpC,IAAIC,KAAK,GAAG,CAAC,CAAb;AAAA,MACIC,MAAM,GAAGJ,KAAK,CAACI,MADnB,CAAA;;EAGA,IAAIH,KAAK,GAAG,CAAZ,EAAe;IACbA,KAAK,GAAG,CAACA,KAAD,GAASG,MAAT,GAAkB,CAAlB,GAAuBA,MAAM,GAAGH,KAAxC,CAAA;AACD,GAAA;;AACDC,EAAAA,GAAG,GAAGA,GAAG,GAAGE,MAAN,GAAeA,MAAf,GAAwBF,GAA9B,CAAA;;EACA,IAAIA,GAAG,GAAG,CAAV,EAAa;AACXA,IAAAA,GAAG,IAAIE,MAAP,CAAA;AACD,GAAA;;EACDA,MAAM,GAAGH,KAAK,GAAGC,GAAR,GAAc,CAAd,GAAoBA,GAAG,GAAGD,KAAP,KAAkB,CAA9C,CAAA;AACAA,EAAAA,KAAK,MAAM,CAAX,CAAA;AAEA,EAAA,IAAII,MAAM,GAAGC,KAAK,CAACF,MAAD,CAAlB,CAAA;;AACA,EAAA,OAAO,EAAED,KAAF,GAAUC,MAAjB,EAAyB;IACvBC,MAAM,CAACF,KAAD,CAAN,GAAgBH,KAAK,CAACG,KAAK,GAAGF,KAAT,CAArB,CAAA;AACD,GAAA;;AACD,EAAA,OAAOI,MAAP,CAAA;AACD,CAAA;;AAEDE,IAAAA,UAAc,GAAGR;;;;"}

package/lib/_chunks/dep-9389eb12.js

@@ -0,0 +1,563 @@
+/**
+ * tdesign v0.40.1
+ * (c) 2022 tdesign
+ * @license MIT
+ */
+
+'use strict';
+
+var objectWithoutProperties = require('./dep-283e1d35.js');
+var defineProperty = require('./dep-54da1aad.js');
+var slicedToArray = require('./dep-7f3aafd5.js');
+var React = require('react');
+var isArray = require('./dep-47f12383.js');
+var isFunction = require('./dep-6558b9be.js');
+var tdesignIconsReact = require('tdesign-icons-react');
+var classNames = require('classnames');
+var tooltip_index = require('../tooltip/index.js');
+var hooks_useConfig = require('../hooks/useConfig.js');
+var imageViewer_utils = require('../image-viewer/utils.js');
+var dialog_index = require('../dialog/index.js');
+var imageViewer_hooks_useMirror = require('../image-viewer/hooks/useMirror.js');
+var imageViewer_hooks_usePosition = require('../image-viewer/hooks/usePosition.js');
+var imageViewer_hooks_useIndex = require('../image-viewer/hooks/useIndex.js');
+var imageViewer_hooks_useRotate = require('../image-viewer/hooks/useRotate.js');
+var imageViewer_hooks_useScale = require('../image-viewer/hooks/useScale.js');
+var hooks_useGlobalIcon = require('../hooks/useGlobalIcon.js');
+var imageViewer_hooks_useIconMap = require('../image-viewer/hooks/useIconMap.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { defineProperty._defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var ImageModelMiniContent = function ImageModelMiniContent(props) {
+  var _useConfig = hooks_useConfig["default"](),
+      classPrefix = _useConfig.classPrefix;
+
+  return /* @__PURE__ */React__default["default"].createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer-mini__content")
+  }, /* @__PURE__ */React__default["default"].createElement(ImageModelItem, {
+    rotateZ: props.rotateZ,
+    scale: props.scale,
+    mirror: props.mirror,
+    src: props.currentImage.mainImage,
+    preSrc: props.currentImage.thumbnail
+  }));
+};
+var DIALOG_CSS_PADDING = {
+  padding: 0
+};
+var ImageModelMini = function ImageModelMini(props) {
+  var visible = props.visible,
+      index = props.index,
+      images = props.images,
+      scale = props.scale,
+      currentImage = props.currentImage,
+      onZoomOut = props.onZoomOut,
+      onZoom = props.onZoom,
+      onClose = props.onClose,
+      onRotate = props.onRotate,
+      onMirror = props.onMirror,
+      onReset = props.onReset;
+
+  var _useConfig2 = hooks_useConfig["default"](),
+      classPrefix = _useConfig2.classPrefix;
+
+  var _useGlobalIcon = hooks_useGlobalIcon["default"]({
+    CloseIcon: tdesignIconsReact.CloseIcon
+  }),
+      CloseIcon = _useGlobalIcon.CloseIcon;
+
+  var header = /* @__PURE__ */React__default["default"].createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer__mini--header")
+  }, "".concat(index + 1, "/").concat(images.length), /* @__PURE__ */React__default["default"].createElement("span", {
+    className: "".concat(classPrefix, "-image-viewer__mini--close")
+  }, /* @__PURE__ */React__default["default"].createElement(CloseIcon, {
+    size: "1.5rem",
+    onClick: function onClick(e) {
+      return onClose({
+        trigger: "close-btn",
+        e: e
+      });
+    }
+  })));
+  var footer = /* @__PURE__ */React__default["default"].createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer-mini__footer")
+  }, /* @__PURE__ */React__default["default"].createElement(ImageViewerUtils, {
+    onZoom: onZoom,
+    onZoomOut: onZoomOut,
+    scale: scale,
+    currentImage: currentImage,
+    onRotate: onRotate,
+    onMirror: onMirror,
+    onReset: onReset
+  }));
+  return /* @__PURE__ */React__default["default"].createElement(dialog_index.Dialog, {
+    className: "".concat(classPrefix, "-image-viewer__dialog"),
+    draggable: true,
+    visible: visible,
+    width: "1000px",
+    placement: "center",
+    mode: "modeless",
+    cancelBtn: null,
+    confirmBtn: null,
+    closeBtn: false,
+    header: header,
+    footer: footer,
+    onClose: onClose,
+    style: DIALOG_CSS_PADDING
+  }, /* @__PURE__ */React__default["default"].createElement(ImageModelMiniContent, _objectSpread({}, props)));
+};
+
+var _excluded = ["closeOnOverlay", "showOverlay", "zIndex", "images", "isMini", "imageScale", "viewerScale", "closeBtn", "draggable", "onOpen", "onClose", "visible"];
+
+var ImageError = function ImageError() {
+  var _useConfig = hooks_useConfig["default"](),
+      classPrefix = _useConfig.classPrefix;
+
+  var _useGlobalIcon = hooks_useGlobalIcon["default"]({
+    ImageErrorIcon: tdesignIconsReact.ImageErrorIcon
+  }),
+      ImageErrorIcon = _useGlobalIcon.ImageErrorIcon;
+
+  return /* @__PURE__ */React__default["default"].createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer__img-error")
+  }, /* @__PURE__ */React__default["default"].createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer__img-error--content")
+  }, /* @__PURE__ */React__default["default"].createElement(ImageErrorIcon, {
+    size: "4em"
+  }), /* @__PURE__ */React__default["default"].createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer__img-error--text")
+  }, "\u56FE\u7247\u52A0\u8F7D\u5931\u8D25\uFF0C\u53EF\u5C1D\u8BD5\u91CD\u65B0\u52A0\u8F7D")));
+};
+
+var ImageModelItem = function ImageModelItem(_ref) {
+  var rotateZ = _ref.rotateZ,
+      scale = _ref.scale,
+      src = _ref.src,
+      preSrc = _ref.preSrc,
+      mirror = _ref.mirror;
+
+  var _useConfig2 = hooks_useConfig["default"](),
+      classPrefix = _useConfig2.classPrefix;
+
+  var _usePosition = imageViewer_hooks_usePosition["default"]({
+    initPosition: [0, 0]
+  }),
+      _usePosition2 = slicedToArray._slicedToArray(_usePosition, 2),
+      position = _usePosition2[0],
+      _onMouseDown = _usePosition2[1];
+
+  var _useState = React.useState(false),
+      _useState2 = slicedToArray._slicedToArray(_useState, 2),
+      loaded = _useState2[0],
+      setLoaded = _useState2[1];
+
+  var _useState3 = React.useState(false),
+      _useState4 = slicedToArray._slicedToArray(_useState3, 2),
+      error = _useState4[0],
+      setError = _useState4[1];
+
+  var imgStyle = {
+    transform: "rotateZ(".concat(rotateZ, "deg) scale(").concat(scale, ")"),
+    display: !preSrc || loaded ? "block" : "none"
+  };
+  var preImgStyle = {
+    transform: "rotateZ(".concat(rotateZ, "deg) scale(").concat(scale, ")"),
+    display: !loaded ? "block" : "none"
+  };
+  var boxStyle = {
+    transform: "translate(".concat(position[0], "px, ").concat(position[1], "px) scale(").concat(mirror, ", 1)")
+  };
+  React.useEffect(function () {
+    setError(false);
+  }, [src]);
+  return /* @__PURE__ */React__default["default"].createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer__modal--pic")
+  }, /* @__PURE__ */React__default["default"].createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer__modal--box"),
+    style: boxStyle
+  }, error && /* @__PURE__ */React__default["default"].createElement(ImageError, null), !error && !!preSrc && /* @__PURE__ */React__default["default"].createElement("img", {
+    className: "".concat(classPrefix, "-image-viewer__modal--image"),
+    onMouseDown: function onMouseDown(event) {
+      event.stopPropagation();
+
+      _onMouseDown(event);
+    },
+    src: preSrc,
+    style: preImgStyle,
+    "data-testid": "img-drag",
+    alt: "image",
+    draggable: "false"
+  }), !error && /* @__PURE__ */React__default["default"].createElement("img", {
+    className: "".concat(classPrefix, "-image-viewer__modal--image"),
+    onMouseDown: function onMouseDown(event) {
+      event.stopPropagation();
+
+      _onMouseDown(event);
+    },
+    src: src,
+    onLoad: function onLoad() {
+      return setLoaded(true);
+    },
+    onError: function onError() {
+      return setError(true);
+    },
+    style: imgStyle,
+    "data-testid": "img-drag",
+    alt: "image",
+    draggable: "false"
+  })));
+};
+var ROTATE_COUNT = 90;
+
+var ImageModelIcon = function ImageModelIcon(_ref2) {
+  var onClick = _ref2.onClick,
+      className = _ref2.className,
+      disabled = _ref2.disabled,
+      isRange = _ref2.isRange,
+      name = _ref2.name,
+      label = _ref2.label,
+      _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? "3em" : _ref2$size;
+
+  var _useConfig3 = hooks_useConfig["default"](),
+      classPrefix = _useConfig3.classPrefix;
+
+  var Icons = imageViewer_hooks_useIconMap["default"]();
+  var Icon = Icons[name];
+  return /* @__PURE__ */React__default["default"].createElement("div", {
+    className: classNames__default["default"]("".concat(classPrefix, "-image-viewer__modal--icon"), className, defineProperty._defineProperty({}, "".concat(classPrefix, "-is-disabled"), disabled)),
+    onClick: onClick
+  }, name && /* @__PURE__ */React__default["default"].createElement(Icon, {
+    size: size,
+    className: isRange ? "is-range" : null
+  }), label && /* @__PURE__ */React__default["default"].createElement("span", {
+    className: "".concat(classPrefix, "-image-viewer__modal--icon-label")
+  }, label));
+};
+
+var ImageViewerUtils = function ImageViewerUtils(_ref3) {
+  var onZoom = _ref3.onZoom,
+      scale = _ref3.scale,
+      onZoomOut = _ref3.onZoomOut,
+      currentImage = _ref3.currentImage,
+      onRotate = _ref3.onRotate,
+      onMirror = _ref3.onMirror,
+      onReset = _ref3.onReset;
+
+  var _useConfig4 = hooks_useConfig["default"](),
+      classPrefix = _useConfig4.classPrefix;
+
+  var _useGlobalIcon2 = hooks_useGlobalIcon["default"]({
+    MirrorIcon: tdesignIconsReact.MirrorIcon,
+    RotationIcon: tdesignIconsReact.RotationIcon,
+    ImageIcon: tdesignIconsReact.ImageIcon
+  }),
+      MirrorIcon = _useGlobalIcon2.MirrorIcon,
+      RotationIcon = _useGlobalIcon2.RotationIcon,
+      ImageIcon = _useGlobalIcon2.ImageIcon;
+
+  return /* @__PURE__ */React__default["default"].createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer__utils")
+  }, /* @__PURE__ */React__default["default"].createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer__utils--content")
+  }, /* @__PURE__ */React__default["default"].createElement(tooltip_index.Tooltip, {
+    overlayClassName: "".concat(classPrefix, "-image-viewer__utils--tip"),
+    content: "\u955C\u50CF",
+    destroyOnClose: true,
+    placement: "top",
+    showArrow: true,
+    theme: "default"
+  }, /* @__PURE__ */React__default["default"].createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer__modal--icon")
+  }, /* @__PURE__ */React__default["default"].createElement(MirrorIcon, {
+    size: "medium",
+    onClick: onMirror
+  }))), /* @__PURE__ */React__default["default"].createElement(tooltip_index.Tooltip, {
+    overlayClassName: "".concat(classPrefix, "-image-viewer__utils--tip"),
+    content: "\u65CB\u8F6C",
+    destroyOnClose: true,
+    placement: "top",
+    showArrow: true,
+    theme: "default"
+  }, /* @__PURE__ */React__default["default"].createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer__modal--icon")
+  }, /* @__PURE__ */React__default["default"].createElement(RotationIcon, {
+    size: "medium",
+    onClick: function onClick() {
+      return onRotate(-ROTATE_COUNT);
+    }
+  }))), /* @__PURE__ */React__default["default"].createElement(ImageModelIcon, {
+    size: "medium",
+    name: "zoom-out",
+    onClick: onZoomOut
+  }), /* @__PURE__ */React__default["default"].createElement(ImageModelIcon, {
+    className: "".concat(classPrefix, "-image-viewer__utils--scale"),
+    size: "medium",
+    label: "".concat(scale * 100, "%")
+  }), /* @__PURE__ */React__default["default"].createElement(ImageModelIcon, {
+    size: "medium",
+    name: "zoom-in",
+    onClick: onZoom
+  }), /* @__PURE__ */React__default["default"].createElement(tooltip_index.Tooltip, {
+    overlayClassName: "".concat(classPrefix, "-image-viewer__utils--tip"),
+    content: "\u539F\u59CB\u5927\u5C0F",
+    destroyOnClose: true,
+    placement: "top",
+    showArrow: true,
+    theme: "default"
+  }, /* @__PURE__ */React__default["default"].createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer__modal--icon")
+  }, /* @__PURE__ */React__default["default"].createElement(ImageIcon, {
+    size: "medium",
+    name: "image",
+    onClick: function onClick() {
+      onReset();
+    }
+  }))), currentImage.download && /* @__PURE__ */React__default["default"].createElement(ImageModelIcon, {
+    size: "medium",
+    name: "download",
+    onClick: function onClick() {
+      imageViewer_utils.downloadFile(currentImage.mainImage);
+    }
+  })));
+};
+
+var ImageViewerHeader = function ImageViewerHeader(props) {
+  var _useConfig5 = hooks_useConfig["default"](),
+      classPrefix = _useConfig5.classPrefix;
+
+  var images = props.images,
+      currentIndex = props.currentIndex,
+      onImgClick = props.onImgClick;
+
+  var _useState5 = React.useState(true),
+      _useState6 = slicedToArray._slicedToArray(_useState5, 2),
+      isExpand = _useState6[0],
+      setIsExpand = _useState6[1];
+
+  var transStyle = {
+    transform: "translateX(-".concat(currentIndex * 84, "px)")
+  };
+  return /* @__PURE__ */React__default["default"].createElement("div", {
+    className: classNames__default["default"]("".concat(classPrefix, "-image-viewer__modal-header"), defineProperty._defineProperty({}, "".concat(classPrefix, "-is-show"), isExpand))
+  }, /* @__PURE__ */React__default["default"].createElement(ImageModelIcon, {
+    size: "20px",
+    name: "chevron-down",
+    className: "".concat(classPrefix, "-image-viewer__header--pre__bt"),
+    onClick: function onClick() {
+      return setIsExpand(!isExpand);
+    }
+  }), /* @__PURE__ */React__default["default"].createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer__header--prev")
+  }, /* @__PURE__ */React__default["default"].createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer__bokeh--left")
+  }), /* @__PURE__ */React__default["default"].createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer__bokeh--right")
+  }), /* @__PURE__ */React__default["default"].createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer__header--trans"),
+    style: transStyle
+  }, images.map(function (image, index) {
+    return /* @__PURE__ */React__default["default"].createElement("div", {
+      key: index,
+      className: classNames__default["default"]("".concat(classPrefix, "-image-viewer__header--box"), defineProperty._defineProperty({}, "".concat(classPrefix, "-is-active"), index === currentIndex))
+    }, /* @__PURE__ */React__default["default"].createElement("img", {
+      alt: "",
+      src: image.thumbnail || image.mainImage,
+      className: "".concat(classPrefix, "-image-viewer__header--img"),
+      onClick: function onClick() {
+        return onImgClick(index);
+      }
+    }));
+  }))));
+};
+
+var ImageModal = function ImageModal(props) {
+  var closeOnOverlay = props.closeOnOverlay,
+      _props$showOverlay = props.showOverlay,
+      showOverlay = _props$showOverlay === void 0 ? true : _props$showOverlay,
+      zIndex = props.zIndex,
+      images = props.images,
+      isMini = props.isMini,
+      imageScale = props.imageScale,
+      viewerScale = props.viewerScale,
+      closeBtn = props.closeBtn,
+      draggable = props.draggable,
+      onOpen = props.onOpen,
+      onClose = props.onClose,
+      visible = props.visible,
+      resProps = objectWithoutProperties._objectWithoutProperties(props, _excluded);
+
+  var _useConfig6 = hooks_useConfig["default"](),
+      classPrefix = _useConfig6.classPrefix;
+
+  if (resProps.index === void 0) delete resProps.index;
+
+  var _useIndex = imageViewer_hooks_useIndex["default"](resProps, images),
+      index = _useIndex.index,
+      next = _useIndex.next,
+      prev = _useIndex.prev,
+      setIndex = _useIndex.setIndex;
+
+  var _useRotate = imageViewer_hooks_useRotate["default"](),
+      rotateZ = _useRotate.rotateZ,
+      onResetRotate = _useRotate.onResetRotate,
+      onRotate = _useRotate.onRotate;
+
+  var _useScale = imageViewer_hooks_useScale["default"](imageScale),
+      scale = _useScale.scale,
+      onZoom = _useScale.onZoom,
+      onZoomOut = _useScale.onZoomOut,
+      onResetScale = _useScale.onResetScale;
+
+  var _useMirror = imageViewer_hooks_useMirror["default"](),
+      mirror = _useMirror.mirror,
+      onResetMirror = _useMirror.onResetMirror,
+      onMirror = _useMirror.onMirror;
+
+  var onReset = React.useCallback(function () {
+    onResetScale();
+    onResetRotate();
+    onResetMirror();
+  }, [onResetMirror, onResetScale, onResetRotate]);
+  var onScroll = React.useCallback(function (e) {
+    var deltaY = e.deltaY;
+    deltaY > 0 ? onZoom() : onZoomOut();
+  }, [onZoom, onZoomOut]);
+  var onKeyDown = React.useCallback(function (event) {
+    switch (event.code) {
+      case "ArrowRight":
+        return next();
+
+      case "ArrowLeft":
+        return prev();
+
+      case "ArrowUp":
+        return onZoom();
+
+      case "ArrowDown":
+        return onZoomOut();
+
+      case "Escape":
+        return onClose === null || onClose === void 0 ? void 0 : onClose({
+          trigger: "esc",
+          e: event
+        });
+    }
+  }, [next, onClose, prev, onZoom, onZoomOut]);
+  React.useEffect(function () {
+    document.addEventListener("keydown", onKeyDown);
+    return function () {
+      return document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [onKeyDown]);
+  React.useEffect(function () {
+    onReset();
+  }, [index, onReset]);
+  if (!isArray.isArray_1(images) || images.length < 1) return null;
+  var currentImage = images[index];
+
+  if (isMini) {
+    return /* @__PURE__ */React__default["default"].createElement(ImageModelMini, {
+      visible: visible,
+      draggable: draggable,
+      index: index,
+      images: images,
+      imageScale: imageScale,
+      viewerScale: viewerScale,
+      rotateZ: rotateZ,
+      zIndex: zIndex,
+      currentImage: currentImage,
+      prev: prev,
+      next: next,
+      mirror: mirror,
+      scale: scale,
+      onMirror: onMirror,
+      onZoom: onZoom,
+      onClose: onClose,
+      onZoomOut: onZoomOut,
+      onScroll: onScroll,
+      onReset: onReset,
+      onRotate: onRotate
+    });
+  }
+
+  var closeNode = closeBtn;
+
+  if (closeBtn === true) {
+    closeNode = /* @__PURE__ */React__default["default"].createElement(ImageModelIcon, {
+      name: "close",
+      size: "24px",
+      className: "".concat(classPrefix, "-image-viewer__modal--close-bt "),
+      onClick: function onClick(e) {
+        return onClose && onClose({
+          trigger: "close-btn",
+          e: e
+        });
+      }
+    });
+  } else if (isFunction.isFunction_1(closeBtn)) closeNode = closeBtn({
+    onClose: onClose,
+    onOpen: onOpen
+  });
+
+  return /* @__PURE__ */React__default["default"].createElement("div", {
+    className: classNames__default["default"]("".concat(classPrefix, "-image-viewer-preview-image"), defineProperty._defineProperty({}, "".concat(classPrefix, "-is-hide"), !visible)),
+    onWheel: onScroll,
+    style: {
+      zIndex: zIndex
+    }
+  }, !!showOverlay && /* @__PURE__ */React__default["default"].createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer__modal--mask"),
+    onClick: function onClick(e) {
+      return closeOnOverlay && (onClose === null || onClose === void 0 ? void 0 : onClose({
+        trigger: "overlay",
+        e: e
+      }));
+    }
+  }), images.length > 1 && /* @__PURE__ */React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */React__default["default"].createElement(ImageViewerHeader, {
+    images: images,
+    currentIndex: index,
+    onImgClick: setIndex
+  }), /* @__PURE__ */React__default["default"].createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer__modal--index")
+  }, "".concat(index + 1, "/").concat(images.length)), /* @__PURE__ */React__default["default"].createElement(ImageModelIcon, {
+    size: "24px",
+    name: "chevron-left",
+    className: "".concat(classPrefix, "-image-viewer__modal--prev-bt"),
+    onClick: prev,
+    disabled: index <= 0
+  }), /* @__PURE__ */React__default["default"].createElement(ImageModelIcon, {
+    size: "24px",
+    name: "chevron-right",
+    className: "".concat(classPrefix, "-image-viewer__modal--next-bt"),
+    onClick: next,
+    disabled: index >= images.length - 1
+  })), /* @__PURE__ */React__default["default"].createElement(ImageViewerUtils, {
+    onZoom: onZoom,
+    onZoomOut: onZoomOut,
+    scale: scale,
+    currentImage: currentImage,
+    onRotate: onRotate,
+    onMirror: onMirror,
+    onReset: onReset
+  }), closeNode, /* @__PURE__ */React__default["default"].createElement(ImageModelItem, {
+    scale: scale,
+    rotateZ: rotateZ,
+    mirror: mirror,
+    preSrc: currentImage.thumbnail,
+    src: currentImage.mainImage
+  }));
+};
+
+exports.ImageModal = ImageModal;
+exports.ImageModelItem = ImageModelItem;
+exports.ImageModelMini = ImageModelMini;
+exports.ImageModelMiniContent = ImageModelMiniContent;
+exports.ImageViewerUtils = ImageViewerUtils;
+//# sourceMappingURL=dep-9389eb12.js.map