tdesign-react 0.42.5-alpha.1 → 0.42.5-alpha.2

package/es/_chunks/dep-13634d7d.js

@@ -0,0 +1,63 @@
+/**
+ * tdesign v0.42.4
+ * (c) 2022 tdesign
+ * @license MIT
+ */
+
+import './dep-6747abf3.js';
+import { i as isArrayLike_1 } from './dep-6148325c.js';
+import { i as isObjectLike_1 } from './dep-067115d4.js';
+import { i as identity_1, a as _overRest, b as _setToString } from './dep-6f226eb1.js';
+
+var isArrayLike = isArrayLike_1,
+  isObjectLike = isObjectLike_1;
+
+/**
+ * This method is like `_.isArrayLike` except that it also checks if `value`
+ * is an object.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an array-like object,
+ *  else `false`.
+ * @example
+ *
+ * _.isArrayLikeObject([1, 2, 3]);
+ * // => true
+ *
+ * _.isArrayLikeObject(document.body.children);
+ * // => true
+ *
+ * _.isArrayLikeObject('abc');
+ * // => false
+ *
+ * _.isArrayLikeObject(_.noop);
+ * // => false
+ */
+function isArrayLikeObject(value) {
+  return isObjectLike(value) && isArrayLike(value);
+}
+var isArrayLikeObject_1 = isArrayLikeObject;
+
+var identity = identity_1,
+  overRest = _overRest,
+  setToString = _setToString;
+
+/**
+ * The base implementation of `_.rest` which doesn't validate or coerce arguments.
+ *
+ * @private
+ * @param {Function} func The function to apply a rest parameter to.
+ * @param {number} [start=func.length-1] The start position of the rest parameter.
+ * @returns {Function} Returns the new function.
+ */
+function baseRest(func, start) {
+  return setToString(overRest(func, start, identity), func + '');
+}
+var _baseRest = baseRest;
+
+export { _baseRest as _, isArrayLikeObject_1 as i };
+//# sourceMappingURL=dep-13634d7d.js.map

package/es/_chunks/dep-13634d7d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dep-13634d7d.js","sources":["../../node_modules/lodash/isArrayLikeObject.js","../../node_modules/lodash/_baseRest.js"],"sourcesContent":["var isArrayLike = require('./isArrayLike'),\n    isObjectLike = require('./isObjectLike');\n\n/**\n * This method is like `_.isArrayLike` except that it also checks if `value`\n * is an object.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is an array-like object,\n *  else `false`.\n * @example\n *\n * _.isArrayLikeObject([1, 2, 3]);\n * // => true\n *\n * _.isArrayLikeObject(document.body.children);\n * // => true\n *\n * _.isArrayLikeObject('abc');\n * // => false\n *\n * _.isArrayLikeObject(_.noop);\n * // => false\n */\nfunction isArrayLikeObject(value) {\n  return isObjectLike(value) && isArrayLike(value);\n}\n\nmodule.exports = isArrayLikeObject;\n","var identity = require('./identity'),\n    overRest = require('./_overRest'),\n    setToString = require('./_setToString');\n\n/**\n * The base implementation of `_.rest` which doesn't validate or coerce arguments.\n *\n * @private\n * @param {Function} func The function to apply a rest parameter to.\n * @param {number} [start=func.length-1] The start position of the rest parameter.\n * @returns {Function} Returns the new function.\n */\nfunction baseRest(func, start) {\n  return setToString(overRest(func, start, identity), func + '');\n}\n\nmodule.exports = baseRest;\n"],"names":["isArrayLike","require$$0","isObjectLike","require$$1","isArrayLikeObject","value","isArrayLikeObject_1","identity","overRest","setToString","require$$2","baseRest","func","start","_baseRest"],"mappings":";;;;;;;;;;;AAAA,IAAIA,WAAW,GAAGC,aAAwB;AACtCC,EAAAA,YAAY,GAAGC,cAAyB,CAAA;;AAE5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,iBAAiB,CAACC,KAAK,EAAE;EAChC,OAAOH,YAAY,CAACG,KAAK,CAAC,IAAIL,WAAW,CAACK,KAAK,CAAC,CAAA;AAClD,CAAA;AAEAC,IAAAA,mBAAc,GAAGF;;AChCjB,IAAIG,QAAQ,GAAGN,UAAqB;AAChCO,EAAAA,QAAQ,GAAGL,SAAsB;AACjCM,EAAAA,WAAW,GAAGC,YAAyB,CAAA;;AAE3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,QAAQ,CAACC,IAAI,EAAEC,KAAK,EAAE;AAC7B,EAAA,OAAOJ,WAAW,CAACD,QAAQ,CAACI,IAAI,EAAEC,KAAK,EAAEN,QAAQ,CAAC,EAAEK,IAAI,GAAG,EAAE,CAAC,CAAA;AAChE,CAAA;AAEAE,IAAAA,SAAc,GAAGH;;;;"}

package/es/_chunks/dep-1505c94a.js

@@ -0,0 +1,57 @@
+/**
+ * tdesign v0.42.4
+ * (c) 2022 tdesign
+ * @license MIT
+ */
+
+import './dep-6747abf3.js';
+import { a as _castSlice, _ as _hasUnicode, b as _stringToArray } from './dep-1dfce7c7.js';
+import { t as toString_1 } from './dep-ccb36b1d.js';
+
+var castSlice = _castSlice,
+  hasUnicode = _hasUnicode,
+  stringToArray = _stringToArray,
+  toString = toString_1;
+
+/**
+ * Creates a function like `_.lowerFirst`.
+ *
+ * @private
+ * @param {string} methodName The name of the `String` case method to use.
+ * @returns {Function} Returns the new case function.
+ */
+function createCaseFirst$1(methodName) {
+  return function (string) {
+    string = toString(string);
+    var strSymbols = hasUnicode(string) ? stringToArray(string) : undefined;
+    var chr = strSymbols ? strSymbols[0] : string.charAt(0);
+    var trailing = strSymbols ? castSlice(strSymbols, 1).join('') : string.slice(1);
+    return chr[methodName]() + trailing;
+  };
+}
+var _createCaseFirst = createCaseFirst$1;
+
+var createCaseFirst = _createCaseFirst;
+
+/**
+ * Converts the first character of `string` to upper case.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category String
+ * @param {string} [string=''] The string to convert.
+ * @returns {string} Returns the converted string.
+ * @example
+ *
+ * _.upperFirst('fred');
+ * // => 'Fred'
+ *
+ * _.upperFirst('FRED');
+ * // => 'FRED'
+ */
+var upperFirst = createCaseFirst('toUpperCase');
+var upperFirst_1 = upperFirst;
+
+export { upperFirst_1 as u };
+//# sourceMappingURL=dep-1505c94a.js.map

package/es/_chunks/dep-1505c94a.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dep-1505c94a.js","sources":["../../node_modules/lodash/_createCaseFirst.js","../../node_modules/lodash/upperFirst.js"],"sourcesContent":["var castSlice = require('./_castSlice'),\n    hasUnicode = require('./_hasUnicode'),\n    stringToArray = require('./_stringToArray'),\n    toString = require('./toString');\n\n/**\n * Creates a function like `_.lowerFirst`.\n *\n * @private\n * @param {string} methodName The name of the `String` case method to use.\n * @returns {Function} Returns the new case function.\n */\nfunction createCaseFirst(methodName) {\n  return function(string) {\n    string = toString(string);\n\n    var strSymbols = hasUnicode(string)\n      ? stringToArray(string)\n      : undefined;\n\n    var chr = strSymbols\n      ? strSymbols[0]\n      : string.charAt(0);\n\n    var trailing = strSymbols\n      ? castSlice(strSymbols, 1).join('')\n      : string.slice(1);\n\n    return chr[methodName]() + trailing;\n  };\n}\n\nmodule.exports = createCaseFirst;\n","var createCaseFirst = require('./_createCaseFirst');\n\n/**\n * Converts the first character of `string` to upper case.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category String\n * @param {string} [string=''] The string to convert.\n * @returns {string} Returns the converted string.\n * @example\n *\n * _.upperFirst('fred');\n * // => 'Fred'\n *\n * _.upperFirst('FRED');\n * // => 'FRED'\n */\nvar upperFirst = createCaseFirst('toUpperCase');\n\nmodule.exports = upperFirst;\n"],"names":["castSlice","require$$0","hasUnicode","require$$1","stringToArray","require$$2","toString","require$$3","createCaseFirst","methodName","string","strSymbols","undefined","chr","charAt","trailing","join","slice","_createCaseFirst","upperFirst","upperFirst_1"],"mappings":";;;;;;;;;;AAAA,IAAIA,SAAS,GAAGC,UAAuB;AACnCC,EAAAA,UAAU,GAAGC,WAAwB;AACrCC,EAAAA,aAAa,GAAGC,cAA2B;AAC3CC,EAAAA,QAAQ,GAAGC,UAAqB,CAAA;;AAEpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,iBAAe,CAACC,UAAU,EAAE;EACnC,OAAO,UAASC,MAAM,EAAE;AACtBA,IAAAA,MAAM,GAAGJ,QAAQ,CAACI,MAAM,CAAC,CAAA;AAEzB,IAAA,IAAIC,UAAU,GAAGT,UAAU,CAACQ,MAAM,CAAC,GAC/BN,aAAa,CAACM,MAAM,CAAC,GACrBE,SAAS,CAAA;AAEb,IAAA,IAAIC,GAAG,GAAGF,UAAU,GAChBA,UAAU,CAAC,CAAC,CAAC,GACbD,MAAM,CAACI,MAAM,CAAC,CAAC,CAAC,CAAA;IAEpB,IAAIC,QAAQ,GAAGJ,UAAU,GACrBX,SAAS,CAACW,UAAU,EAAE,CAAC,CAAC,CAACK,IAAI,CAAC,EAAE,CAAC,GACjCN,MAAM,CAACO,KAAK,CAAC,CAAC,CAAC,CAAA;AAEnB,IAAA,OAAOJ,GAAG,CAACJ,UAAU,CAAC,EAAE,GAAGM,QAAQ,CAAA;GACpC,CAAA;AACH,CAAA;AAEA,IAAAG,gBAAc,GAAGV,iBAAe;;AChChC,IAAIA,eAAe,GAAGP,gBAA6B,CAAA;;AAEnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIkB,UAAU,GAAGX,eAAe,CAAC,aAAa,CAAC,CAAA;AAE/CY,IAAAA,YAAc,GAAGD;;;;"}

package/es/_chunks/dep-159e471d.js

@@ -0,0 +1,504 @@
+/**
+ * tdesign v0.42.4
+ * (c) 2022 tdesign
+ * @license MIT
+ */
+
+import { _ as _objectWithoutProperties } from './dep-d6973d46.js';
+import { _ as _defineProperty } from './dep-aedd89f2.js';
+import { _ as _slicedToArray } from './dep-86d485ae.js';
+import React, { useState, useEffect, useCallback } from 'react';
+import { i as isArray_1 } from './dep-a71da993.js';
+import { i as isFunction_1 } from './dep-31c02ac9.js';
+import { CloseIcon, ImageErrorIcon, MirrorIcon, RotationIcon, ImageIcon } from 'tdesign-icons-react';
+import classNames from 'classnames';
+import { TooltipLite } from '../tooltip/index.js';
+import useConfig from '../hooks/useConfig.js';
+import { downloadFile } from '../image-viewer/utils.js';
+import { Dialog } from '../dialog/index.js';
+import useMirror from '../image-viewer/hooks/useMirror.js';
+import usePosition from '../image-viewer/hooks/usePosition.js';
+import useIndex from '../image-viewer/hooks/useIndex.js';
+import useRotate from '../image-viewer/hooks/useRotate.js';
+import useScale from '../image-viewer/hooks/useScale.js';
+import useGlobalIcon from '../hooks/useGlobalIcon.js';
+import useIconMap from '../image-viewer/hooks/useIconMap.js';
+
+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(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 = useConfig(),
+    classPrefix = _useConfig.classPrefix;
+  return /* @__PURE__ */React.createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer-mini__content")
+  }, /* @__PURE__ */React.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,
+    title = props.title,
+    index = props.index,
+    images = props.images,
+    scale = props.scale,
+    currentImage = props.currentImage,
+    draggable = props.draggable,
+    onZoomOut = props.onZoomOut,
+    onZoom = props.onZoom,
+    onClose = props.onClose,
+    onRotate = props.onRotate,
+    onMirror = props.onMirror,
+    onReset = props.onReset;
+  var _useConfig2 = useConfig(),
+    classPrefix = _useConfig2.classPrefix;
+  var _useGlobalIcon = useGlobalIcon({
+      CloseIcon: CloseIcon
+    }),
+    CloseIcon$1 = _useGlobalIcon.CloseIcon;
+  var header = /* @__PURE__ */React.createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer__mini-header")
+  }, /* @__PURE__ */React.createElement("span", null, title), "".concat(index + 1, "/").concat(images.length), /* @__PURE__ */React.createElement("span", {
+    className: "".concat(classPrefix, "-image-viewer__mini-close")
+  }, /* @__PURE__ */React.createElement(CloseIcon$1, {
+    size: "1.5rem",
+    onClick: function onClick(e) {
+      return onClose({
+        trigger: "close-btn",
+        e: e
+      });
+    }
+  })));
+  var footer = /* @__PURE__ */React.createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer-mini__footer")
+  }, /* @__PURE__ */React.createElement(ImageViewerUtils, {
+    onZoom: onZoom,
+    onZoomOut: onZoomOut,
+    scale: scale,
+    currentImage: currentImage,
+    onRotate: onRotate,
+    onMirror: onMirror,
+    onReset: onReset
+  }));
+  return /* @__PURE__ */React.createElement(Dialog, {
+    className: "".concat(classPrefix, "-image-viewer__dialog"),
+    draggable: draggable,
+    visible: visible,
+    width: "min(90vw, 1000px)",
+    placement: "center",
+    mode: "modeless",
+    cancelBtn: null,
+    confirmBtn: null,
+    closeBtn: false,
+    header: header,
+    footer: footer,
+    onClose: onClose,
+    style: DIALOG_CSS_PADDING
+  }, /* @__PURE__ */React.createElement(ImageModelMiniContent, _objectSpread({}, props)));
+};
+
+var _excluded = ["closeOnOverlay", "showOverlay", "zIndex", "images", "isMini", "imageScale", "viewerScale", "closeBtn", "draggable", "onOpen", "onClose", "visible", "title"];
+var ImageError = function ImageError() {
+  var _useConfig = useConfig(),
+    classPrefix = _useConfig.classPrefix;
+  var _useGlobalIcon = useGlobalIcon({
+      ImageErrorIcon: ImageErrorIcon
+    }),
+    ImageErrorIcon$1 = _useGlobalIcon.ImageErrorIcon;
+  return /* @__PURE__ */React.createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer__img-error")
+  }, /* @__PURE__ */React.createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer__img-error-content")
+  }, /* @__PURE__ */React.createElement(ImageErrorIcon$1, {
+    size: "4em"
+  }), /* @__PURE__ */React.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 = useConfig(),
+    classPrefix = _useConfig2.classPrefix;
+  var _usePosition = usePosition({
+      initPosition: [0, 0]
+    }),
+    _usePosition2 = _slicedToArray(_usePosition, 2),
+    position = _usePosition2[0],
+    _onMouseDown = _usePosition2[1];
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    loaded = _useState2[0],
+    setLoaded = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _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)")
+  };
+  useEffect(function () {
+    setError(false);
+  }, [src]);
+  return /* @__PURE__ */React.createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer__modal-pic")
+  }, /* @__PURE__ */React.createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer__modal-box"),
+    style: boxStyle
+  }, error && /* @__PURE__ */React.createElement(ImageError, null), !error && !!preSrc && /* @__PURE__ */React.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.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 = useConfig(),
+    classPrefix = _useConfig3.classPrefix;
+  var Icons = useIconMap();
+  var Icon = Icons[name];
+  return /* @__PURE__ */React.createElement("div", {
+    className: classNames("".concat(classPrefix, "-image-viewer__modal-icon"), className, _defineProperty({}, "".concat(classPrefix, "-is-disabled"), disabled)),
+    onClick: onClick
+  }, name && /* @__PURE__ */React.createElement(Icon, {
+    size: size,
+    className: isRange ? "is-range" : null
+  }), label && /* @__PURE__ */React.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 = useConfig(),
+    classPrefix = _useConfig4.classPrefix;
+  var _useGlobalIcon2 = useGlobalIcon({
+      MirrorIcon: MirrorIcon,
+      RotationIcon: RotationIcon,
+      ImageIcon: ImageIcon
+    }),
+    MirrorIcon$1 = _useGlobalIcon2.MirrorIcon,
+    RotationIcon$1 = _useGlobalIcon2.RotationIcon,
+    ImageIcon$1 = _useGlobalIcon2.ImageIcon;
+  return /* @__PURE__ */React.createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer__utils")
+  }, /* @__PURE__ */React.createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer__utils-content")
+  }, /* @__PURE__ */React.createElement(TooltipLite, {
+    className: "".concat(classPrefix, "-image-viewer__utils--tip"),
+    content: "\u955C\u50CF",
+    showShadow: false
+  }, /* @__PURE__ */React.createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer__modal-icon")
+  }, /* @__PURE__ */React.createElement(MirrorIcon$1, {
+    size: "medium",
+    onClick: onMirror
+  }))), /* @__PURE__ */React.createElement(TooltipLite, {
+    className: "".concat(classPrefix, "-image-viewer__utils--tip"),
+    content: "\u65CB\u8F6C",
+    showShadow: false
+  }, /* @__PURE__ */React.createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer__modal-icon")
+  }, /* @__PURE__ */React.createElement(RotationIcon$1, {
+    size: "medium",
+    onClick: function onClick() {
+      return onRotate(-ROTATE_COUNT);
+    }
+  }))), /* @__PURE__ */React.createElement(ImageModelIcon, {
+    size: "medium",
+    name: "zoom-out",
+    onClick: onZoomOut
+  }), /* @__PURE__ */React.createElement(ImageModelIcon, {
+    className: "".concat(classPrefix, "-image-viewer__utils-scale"),
+    size: "medium",
+    label: "".concat(scale * 100, "%")
+  }), /* @__PURE__ */React.createElement(ImageModelIcon, {
+    size: "medium",
+    name: "zoom-in",
+    onClick: onZoom
+  }), /* @__PURE__ */React.createElement(TooltipLite, {
+    className: "".concat(classPrefix, "-image-viewer__utils--tip"),
+    content: "\u539F\u59CB\u5927\u5C0F",
+    showShadow: false
+  }, /* @__PURE__ */React.createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer__modal-icon")
+  }, /* @__PURE__ */React.createElement(ImageIcon$1, {
+    size: "medium",
+    name: "image",
+    onClick: function onClick() {
+      onReset();
+    }
+  }))), currentImage.download && /* @__PURE__ */React.createElement(ImageModelIcon, {
+    size: "medium",
+    name: "download",
+    onClick: function onClick() {
+      downloadFile(currentImage.mainImage);
+    }
+  })));
+};
+var ImageViewerHeader = function ImageViewerHeader(props) {
+  var _useConfig5 = useConfig(),
+    classPrefix = _useConfig5.classPrefix;
+  var images = props.images,
+    currentIndex = props.currentIndex,
+    onImgClick = props.onImgClick;
+  var _useState5 = useState(true),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isExpand = _useState6[0],
+    setIsExpand = _useState6[1];
+  var transStyle = {
+    transform: "translateX(-".concat(currentIndex * 84, "px)")
+  };
+  return /* @__PURE__ */React.createElement("div", {
+    className: classNames("".concat(classPrefix, "-image-viewer__modal-header"), _defineProperty({}, "".concat(classPrefix, "-is-show"), isExpand))
+  }, /* @__PURE__ */React.createElement(ImageModelIcon, {
+    size: "20px",
+    name: "chevron-down",
+    className: "".concat(classPrefix, "-image-viewer__header-pre-bt"),
+    onClick: function onClick() {
+      return setIsExpand(!isExpand);
+    }
+  }), /* @__PURE__ */React.createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer__header-prev")
+  }, /* @__PURE__ */React.createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer__bokeh-left")
+  }), /* @__PURE__ */React.createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer__bokeh-right")
+  }), /* @__PURE__ */React.createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer__header-trans"),
+    style: transStyle
+  }, images.map(function (image, index) {
+    return /* @__PURE__ */React.createElement("div", {
+      key: index,
+      className: classNames("".concat(classPrefix, "-image-viewer__header-box"), _defineProperty({}, "".concat(classPrefix, "-is-active"), index === currentIndex)),
+      onClick: function onClick() {
+        return onImgClick(index);
+      }
+    }, /* @__PURE__ */React.createElement("img", {
+      alt: "",
+      src: image.thumbnail || image.mainImage,
+      className: "".concat(classPrefix, "-image-viewer__header-img")
+    }));
+  }))));
+};
+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,
+    title = props.title,
+    resProps = _objectWithoutProperties(props, _excluded);
+  var _useConfig6 = useConfig(),
+    classPrefix = _useConfig6.classPrefix;
+  if (resProps.index === void 0) delete resProps.index;
+  var _useIndex = useIndex(resProps, images),
+    index = _useIndex.index,
+    next = _useIndex.next,
+    prev = _useIndex.prev,
+    setIndex = _useIndex.setIndex;
+  var _useRotate = useRotate(),
+    rotateZ = _useRotate.rotateZ,
+    onResetRotate = _useRotate.onResetRotate,
+    onRotate = _useRotate.onRotate;
+  var _useScale = useScale(imageScale),
+    scale = _useScale.scale,
+    onZoom = _useScale.onZoom,
+    onZoomOut = _useScale.onZoomOut,
+    onResetScale = _useScale.onResetScale;
+  var _useMirror = useMirror(),
+    mirror = _useMirror.mirror,
+    onResetMirror = _useMirror.onResetMirror,
+    onMirror = _useMirror.onMirror;
+  var onReset = useCallback(function () {
+    onResetScale();
+    onResetRotate();
+    onResetMirror();
+  }, [onResetMirror, onResetScale, onResetRotate]);
+  var onScroll = useCallback(function (e) {
+    var deltaY = e.deltaY;
+    deltaY > 0 ? onZoom() : onZoomOut();
+  }, [onZoom, onZoomOut]);
+  var onKeyDown = useCallback(function (event) {
+    switch (event.key) {
+      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]);
+  useEffect(function () {
+    document.addEventListener("keydown", onKeyDown);
+    return function () {
+      return document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [onKeyDown]);
+  useEffect(function () {
+    onReset();
+  }, [index, onReset]);
+  if (!isArray_1(images) || images.length < 1) return null;
+  var currentImage = images[index];
+  if (isMini) {
+    return /* @__PURE__ */React.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,
+      title: title,
+      onMirror: onMirror,
+      onZoom: onZoom,
+      onClose: onClose,
+      onZoomOut: onZoomOut,
+      onScroll: onScroll,
+      onReset: onReset,
+      onRotate: onRotate
+    });
+  }
+  var closeNode = closeBtn;
+  if (closeBtn === true) {
+    closeNode = /* @__PURE__ */React.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_1(closeBtn)) closeNode = closeBtn({
+    onClose: onClose,
+    onOpen: onOpen
+  });
+  return /* @__PURE__ */React.createElement("div", {
+    className: classNames("".concat(classPrefix, "-image-viewer-preview-image"), _defineProperty({}, "".concat(classPrefix, "-is-hide"), !visible)),
+    onWheel: onScroll,
+    style: {
+      zIndex: zIndex
+    }
+  }, !!showOverlay && /* @__PURE__ */React.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.createElement(React.Fragment, null, /* @__PURE__ */React.createElement(ImageViewerHeader, {
+    images: images,
+    currentIndex: index,
+    onImgClick: setIndex
+  }), /* @__PURE__ */React.createElement("div", {
+    className: "".concat(classPrefix, "-image-viewer__modal-index")
+  }, /* @__PURE__ */React.createElement("span", null, title), "".concat(index + 1, "/").concat(images.length)), /* @__PURE__ */React.createElement(ImageModelIcon, {
+    size: "24px",
+    name: "chevron-left",
+    className: "".concat(classPrefix, "-image-viewer__modal-prev-bt"),
+    onClick: prev,
+    disabled: index <= 0
+  }), /* @__PURE__ */React.createElement(ImageModelIcon, {
+    size: "24px",
+    name: "chevron-right",
+    className: "".concat(classPrefix, "-image-viewer__modal-next-bt"),
+    onClick: next,
+    disabled: index >= images.length - 1
+  })), /* @__PURE__ */React.createElement(ImageViewerUtils, {
+    onZoom: onZoom,
+    onZoomOut: onZoomOut,
+    scale: scale,
+    currentImage: currentImage,
+    onRotate: onRotate,
+    onMirror: onMirror,
+    onReset: onReset
+  }), closeNode, /* @__PURE__ */React.createElement(ImageModelItem, {
+    scale: scale,
+    rotateZ: rotateZ,
+    mirror: mirror,
+    preSrc: currentImage.thumbnail,
+    src: currentImage.mainImage
+  }));
+};
+
+export { ImageModal as I, ImageModelMiniContent as a, ImageModelMini as b, ImageModelItem as c, ImageViewerUtils as d };
+//# sourceMappingURL=dep-159e471d.js.map