@yqg/slimfit 0.0.1 → 0.0.2

package/lib/esm/image/dialog-viewer.js

@@ -0,0 +1,226 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _excluded = ["className", "onCancel", "title", "closeIcon", "width", "centered"];
+import { Modal, Tooltip } from 'antd';
+import classNames from 'classnames';
+import React, { useCallback, useMemo, useState } from 'react';
+import { CloseOutlined, Download, IconFileMirror, IconFileRotate, ZoomInOutlined, ZoomOutOutlined } from "../icon";
+import i18n from "../locale";
+import { ImageComponent } from "./image-base";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var DEFAULT_TOOLBAR_CONFIG = {
+  flip: true,
+  rotate: true,
+  zoom: true,
+  download: true
+};
+var TOOLBAR_CONFIG = {
+  color: '#fff',
+  overlayInnerStyle: {
+    color: '#272847'
+  }
+};
+
+// 获取国际化文案
+var getLocaleText = function getLocaleText(key) {
+  return i18n.t("Image.preview.".concat(key));
+};
+var DialogViewer = function DialogViewer(_ref) {
+  var image = _ref.image,
+    thumbnail = _ref.thumbnail,
+    modalProps = _ref.modalProps,
+    toolbar = _ref.toolbar,
+    onDownload = _ref.onDownload;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var _useState3 = useState(100),
+    _useState4 = _slicedToArray(_useState3, 2),
+    scale = _useState4[0],
+    setScale = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    rotate = _useState6[0],
+    setRotate = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    flipX = _useState8[0],
+    setFlipX = _useState8[1];
+  var handleClose = useCallback(function () {
+    setVisible(false);
+    setScale(100);
+    setRotate(0);
+    setFlipX(false);
+  }, []);
+  var handleDownloadAction = useCallback(function () {
+    if (onDownload) {
+      onDownload(image.src);
+      return;
+    }
+    var link = document.createElement('a');
+    link.href = image.src;
+    link.download = typeof image.title === 'string' && image.title.trim() || 'image';
+    link.click();
+  }, [image.src, image.title, onDownload]);
+  var toolbarVisibility = useMemo(function () {
+    return _objectSpread(_objectSpread({}, DEFAULT_TOOLBAR_CONFIG), toolbar);
+  }, [toolbar]);
+  var toolbarItems = useMemo(function () {
+    var items = [];
+    var iconClass = 'slimfit-image-dialog-toolbar-icon';
+    if (toolbarVisibility.flip) {
+      items.push({
+        key: 'flip',
+        icon: /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
+          title: getLocaleText('flip')
+        }, TOOLBAR_CONFIG), {}, {
+          children: /*#__PURE__*/_jsx(IconFileMirror, {
+            className: iconClass
+          })
+        })),
+        onClick: function onClick() {
+          return setFlipX(function (prev) {
+            return !prev;
+          });
+        }
+      });
+    }
+    if (toolbarVisibility.rotate) {
+      items.push({
+        key: 'rotateRight',
+        icon: /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
+          title: getLocaleText('rotate')
+        }, TOOLBAR_CONFIG), {}, {
+          children: /*#__PURE__*/_jsx(IconFileRotate, {
+            className: iconClass
+          })
+        })),
+        onClick: function onClick() {
+          return setRotate(function (prev) {
+            return prev + 90;
+          });
+        }
+      });
+    }
+    if (toolbarVisibility.zoom) {
+      items.push({
+        key: 'zoomOut',
+        icon: /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
+          title: getLocaleText('zoomOut')
+        }, TOOLBAR_CONFIG), {}, {
+          children: /*#__PURE__*/_jsx(ZoomOutOutlined, {
+            className: iconClass
+          })
+        })),
+        onClick: function onClick() {
+          return setScale(function (prev) {
+            return Math.max(prev - 20, 20);
+          });
+        },
+        disabled: scale <= 20
+      });
+      items.push({
+        key: 'zoomIn',
+        icon: /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
+          title: getLocaleText('zoomIn')
+        }, TOOLBAR_CONFIG), {}, {
+          children: /*#__PURE__*/_jsx(ZoomInOutlined, {
+            className: iconClass
+          })
+        })),
+        onClick: function onClick() {
+          return setScale(function (prev) {
+            return Math.min(prev + 20, 200);
+          });
+        },
+        disabled: scale >= 200
+      });
+    }
+    if (toolbarVisibility.download) {
+      items.push({
+        key: 'download',
+        icon: /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
+          title: getLocaleText('download')
+        }, TOOLBAR_CONFIG), {}, {
+          children: /*#__PURE__*/_jsx(Download, {
+            className: iconClass
+          })
+        })),
+        onClick: handleDownloadAction
+      });
+    }
+    return items;
+  }, [toolbarVisibility, handleDownloadAction, scale]);
+  var _ref2 = modalProps !== null && modalProps !== void 0 ? modalProps : {},
+    modalClassName = _ref2.className,
+    modalOnCancel = _ref2.onCancel,
+    modalTitle = _ref2.title,
+    modalCloseIcon = _ref2.closeIcon,
+    _ref2$width = _ref2.width,
+    width = _ref2$width === void 0 ? 500 : _ref2$width,
+    _ref2$centered = _ref2.centered,
+    centered = _ref2$centered === void 0 ? true : _ref2$centered,
+    restModalProps = _objectWithoutProperties(_ref2, _excluded);
+  var mergedThumbnailProps = useMemo(function () {
+    var _thumbnail$src, _thumbnail$alt;
+    return _objectSpread(_objectSpread({
+      width: 160,
+      height: 160
+    }, thumbnail), {}, {
+      src: (_thumbnail$src = thumbnail === null || thumbnail === void 0 ? void 0 : thumbnail.src) !== null && _thumbnail$src !== void 0 ? _thumbnail$src : image.src,
+      alt: (_thumbnail$alt = thumbnail === null || thumbnail === void 0 ? void 0 : thumbnail.alt) !== null && _thumbnail$alt !== void 0 ? _thumbnail$alt : image.alt,
+      preview: false,
+      className: classNames('slimfit-image-dialog-thumbnail', thumbnail === null || thumbnail === void 0 ? void 0 : thumbnail.className),
+      style: _objectSpread({
+        cursor: 'pointer'
+      }, thumbnail === null || thumbnail === void 0 ? void 0 : thumbnail.style),
+      onClick: function onClick(event) {
+        var _thumbnail$onClick;
+        thumbnail === null || thumbnail === void 0 || (_thumbnail$onClick = thumbnail.onClick) === null || _thumbnail$onClick === void 0 || _thumbnail$onClick.call(thumbnail, event);
+        setVisible(true);
+      }
+    });
+  }, [thumbnail, image.src, image.alt]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(ImageComponent, _objectSpread({}, mergedThumbnailProps)), /*#__PURE__*/_jsxs(Modal, _objectSpread(_objectSpread({}, restModalProps), {}, {
+      width: width,
+      centered: centered,
+      className: classNames('slimfit-image-dialog', modalClassName),
+      closeIcon: modalCloseIcon !== null && modalCloseIcon !== void 0 ? modalCloseIcon : /*#__PURE__*/_jsx(CloseOutlined, {}),
+      footer: null,
+      onCancel: function onCancel(event) {
+        modalOnCancel === null || modalOnCancel === void 0 || modalOnCancel(event);
+        handleClose();
+      },
+      open: visible,
+      title: modalTitle !== null && modalTitle !== void 0 ? modalTitle : image.title,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "slimfit-image-dialog-viewer",
+        children: /*#__PURE__*/_jsx("img", {
+          alt: image.alt,
+          className: "slimfit-image-dialog-img",
+          src: image.src,
+          style: {
+            transform: "scale(".concat(scale / 100, ") rotate(").concat(rotate, "deg) scaleX(").concat(flipX ? -1 : 1, ")")
+          }
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: "slimfit-image-dialog-toolbar",
+        children: toolbarItems.map(function (item) {
+          return /*#__PURE__*/_jsx("button", {
+            type: "button",
+            className: "slimfit-image-dialog-toolbar-btn",
+            onClick: item.onClick,
+            disabled: item.disabled,
+            children: item.icon
+          }, item.key);
+        })
+      })]
+    }))]
+  });
+};
+export default DialogViewer;

package/lib/esm/image/enhanced-preview-group.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { ImagePreviewGroupProps } from './types';
+declare const EnhancedPreviewGroup: React.FC<ImagePreviewGroupProps>;
+export default EnhancedPreviewGroup;
+export type { AlbumCoverConfig } from './types';

package/lib/esm/image/enhanced-preview-group.js

@@ -0,0 +1,137 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["album", "preview", "items", "children"],
+  _excluded2 = ["src", "alt", "preview"];
+import { Image as AntdImage } from 'antd';
+import classNames from 'classnames';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { IconEye } from "../icon";
+import { ImageComponent } from "./image-base";
+import { createToolbarRender, defaultToolbarDownload } from "./preview-toolbar";
+import { getPreviewItemProps } from "./previewUtils";
+import ThumbnailList from "./thumbnail-list";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var EnhancedPreviewGroup = function EnhancedPreviewGroup(props) {
+  var album = props.album,
+    preview = props.preview,
+    items = props.items,
+    children = props.children,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    previewVisible = _useState2[0],
+    setPreviewVisible = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    currentIndex = _useState4[0],
+    setCurrentIndex = _useState4[1];
+  var previewItems = items !== null && items !== void 0 ? items : [];
+  var groupId = useRef("preview-group-".concat(Math.random().toString(36).slice(2, 11))).current;
+  var handleToolbarDownload = useCallback(defaultToolbarDownload, []);
+  var albumCoverNode = useMemo(function () {
+    var _album$cover;
+    if (!album || !previewItems.length) return null;
+    var _ref = (_album$cover = album.cover) !== null && _album$cover !== void 0 ? _album$cover : {},
+      src = _ref.src,
+      alt = _ref.alt,
+      coverPreview = _ref.preview,
+      restCoverConfig = _objectWithoutProperties(_ref, _excluded2);
+    var defaultProps = getPreviewItemProps(previewItems[0]);
+    return /*#__PURE__*/_jsxs("div", {
+      className: "slimfit-album-cover",
+      role: "presentation",
+      children: [/*#__PURE__*/_jsx(ImageComponent, _objectSpread({
+        src: src !== null && src !== void 0 ? src : defaultProps.src,
+        alt: alt !== null && alt !== void 0 ? alt : defaultProps.alt,
+        preview: _typeof(coverPreview) === 'object' ? coverPreview : {},
+        className: classNames('slimfit-album-cover-image', restCoverConfig.className)
+      }, restCoverConfig)), /*#__PURE__*/_jsxs("div", {
+        className: "slimfit-album-cover-info",
+        children: [album.title && /*#__PURE__*/_jsx("span", {
+          className: "slimfit-album-cover-title",
+          children: album.title
+        }), /*#__PURE__*/_jsx(IconEye, {
+          style: {
+            fontSize: 16
+          }
+        })]
+      })]
+    });
+  }, [album, previewItems]);
+  var handleIndexChange = useCallback(function (index) {
+    setCurrentIndex(index);
+  }, []);
+  var mergedPreview = useMemo(function () {
+    var _previewConfig$visibl, _previewConfig$curren;
+    if (preview === false) return false;
+    var previewConfig = _typeof(preview) === 'object' ? preview : {};
+    var _ref2 = previewConfig || {},
+      userImageRender = _ref2.imageRender,
+      userToolbarRender = _ref2.toolbarRender;
+    var toolbarRender = createToolbarRender(handleToolbarDownload, userToolbarRender);
+    var enhanceWithPosition = function enhanceWithPosition(node, info) {
+      if (!previewItems.length) return node;
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: "slimfit-preview-image-position",
+          children: [info.current + 1, "/", previewItems.length]
+        }), node]
+      });
+    };
+    var imageRender = previewItems.length ? function (originalNode, info) {
+      var _userImageRender;
+      var nodeWithPosition = enhanceWithPosition(originalNode, info);
+      return (_userImageRender = userImageRender === null || userImageRender === void 0 ? void 0 : userImageRender(nodeWithPosition, info)) !== null && _userImageRender !== void 0 ? _userImageRender : nodeWithPosition;
+    } : userImageRender;
+    return _objectSpread(_objectSpread({}, previewConfig), {}, {
+      visible: (_previewConfig$visibl = previewConfig.visible) !== null && _previewConfig$visibl !== void 0 ? _previewConfig$visibl : previewVisible,
+      current: (_previewConfig$curren = previewConfig.current) !== null && _previewConfig$curren !== void 0 ? _previewConfig$curren : currentIndex,
+      countRender: function countRender() {
+        return '';
+      },
+      // 隐藏底部默认的页码显示
+      onVisibleChange: function onVisibleChange(visible, prevVisible, current) {
+        var _previewConfig$onVisi;
+        if (visible) {
+          setTimeout(function () {
+            var wraps = document.querySelectorAll('.ant-image-preview-wrap');
+            var lastWrap = wraps[wraps.length - 1];
+            if (lastWrap && !lastWrap.getAttribute('data-preview-group')) {
+              lastWrap.setAttribute('data-preview-group', groupId);
+            }
+          }, 0);
+        } else {
+          setCurrentIndex(0);
+        }
+        setPreviewVisible(visible);
+        (_previewConfig$onVisi = previewConfig.onVisibleChange) === null || _previewConfig$onVisi === void 0 || _previewConfig$onVisi.call(previewConfig, visible, prevVisible, current);
+      },
+      onChange: function onChange(current, prevCurrent) {
+        var _previewConfig$onChan;
+        setCurrentIndex(current);
+        (_previewConfig$onChan = previewConfig.onChange) === null || _previewConfig$onChan === void 0 || _previewConfig$onChan.call(previewConfig, current, prevCurrent);
+      },
+      toolbarRender: toolbarRender
+    }, imageRender ? {
+      imageRender: imageRender
+    } : {});
+  }, [preview, previewVisible, currentIndex, groupId, handleToolbarDownload, previewItems]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(AntdImage.PreviewGroup, _objectSpread(_objectSpread({}, restProps), {}, {
+      preview: mergedPreview,
+      items: items,
+      children: [albumCoverNode, children]
+    })), /*#__PURE__*/_jsx(ThumbnailList, {
+      items: items,
+      currentIndex: currentIndex,
+      onIndexChange: handleIndexChange,
+      previewVisible: previewVisible,
+      groupId: groupId
+    })]
+  });
+};
+export default EnhancedPreviewGroup;

package/lib/esm/image/image-base.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const ImageComponent: React.ForwardRefExoticComponent<Omit<Omit<import("antd").ImageProps & React.RefAttributes<any>, "ref"> & React.RefAttributes<any> & import("../form-mode").WithFormModeProps, "ref"> & React.RefAttributes<any>>;
+export type ImageProps = React.ComponentProps<typeof ImageComponent>;
+export { ImageComponent };

package/lib/esm/image/image-base.js

@@ -0,0 +1,46 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["preview"];
+import { Image as AntdImage } from 'antd';
+import React, { useCallback, useMemo } from 'react';
+import { withFormMode } from "../form-mode";
+import { withCustomClassName } from "../hooks";
+import { IconEye } from "../icon/icons/interaction/Eye";
+import i18n from "../locale";
+import { createToolbarRender, defaultToolbarDownload } from "./preview-toolbar";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var BaseImage = withCustomClassName(AntdImage, 'slimfit-image');
+var ImageWithPreview = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var preview = props.preview,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var handleToolbarDownload = useCallback(defaultToolbarDownload, []);
+  var mergedPreview = useMemo(function () {
+    if (preview === false) return false;
+    var previewConfig = _typeof(preview) === 'object' ? preview : {};
+    var hasMaskProp = _typeof(preview) === 'object' && Object.prototype.hasOwnProperty.call(previewConfig, 'mask');
+    var mask = hasMaskProp ? previewConfig.mask : /*#__PURE__*/_jsxs("div", {
+      className: "slimfit-image-mask",
+      children: [/*#__PURE__*/_jsx(IconEye, {
+        style: {
+          fontSize: 16
+        }
+      }), /*#__PURE__*/_jsx("div", {
+        children: i18n.t("Image.preview.preview")
+      })]
+    });
+    return _objectSpread(_objectSpread({}, previewConfig), {}, {
+      mask: mask,
+      toolbarRender: createToolbarRender(handleToolbarDownload, previewConfig.toolbarRender)
+    });
+  }, [preview, handleToolbarDownload]);
+  return /*#__PURE__*/_jsx(BaseImage, _objectSpread(_objectSpread({
+    ref: ref
+  }, restProps), {}, {
+    preview: mergedPreview
+  }));
+});
+ImageWithPreview.displayName = 'SlimfitImage';
+var ImageComponent = withFormMode(ImageWithPreview, 'image');
+export { ImageComponent };

package/lib/esm/image/image.d.ts

@@ -0,0 +1,12 @@
+import DialogViewer from './dialog-viewer';
+import EnhancedPreviewGroup from './enhanced-preview-group';
+import { ImageComponent } from './image-base';
+import './style.less';
+import type { AlbumCoverConfig, DialogToolbarOptions, DialogViewerProps, ImagePreviewGroupProps, ImageProps } from './types';
+type CompoundImage = typeof ImageComponent & {
+    PreviewGroup: typeof EnhancedPreviewGroup;
+    DialogViewer: typeof DialogViewer;
+};
+declare const Image: CompoundImage;
+export type { AlbumCoverConfig, DialogToolbarOptions, DialogViewerProps, ImagePreviewGroupProps, ImageProps, };
+export default Image;

package/lib/esm/image/image.js

@@ -0,0 +1,8 @@
+import DialogViewer from "./dialog-viewer";
+import EnhancedPreviewGroup from "./enhanced-preview-group";
+import { ImageComponent } from "./image-base";
+import "./style.less";
+var Image = ImageComponent;
+Image.PreviewGroup = EnhancedPreviewGroup;
+Image.DialogViewer = DialogViewer;
+export default Image;

package/lib/esm/image/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Image } from './image';
+export type { AlbumCoverConfig, DialogToolbarOptions, DialogViewerProps, ImagePreviewGroupProps, ImageProps, } from './image';

package/lib/esm/image/index.js

@@ -0,0 +1 @@
+export { default as Image } from "./image";

package/lib/esm/image/preview-toolbar.d.ts

@@ -0,0 +1,6 @@
+import type { ToolbarRenderInfoType } from 'rc-image/es/Preview';
+import React from 'react';
+type ToolbarInfo = ToolbarRenderInfoType | Omit<ToolbarRenderInfoType, 'current' | 'total'>;
+export declare const createToolbarRender: <T extends ToolbarInfo>(handleDownload?: (info: T) => void, userToolbarRender?: ((originalNode: React.ReactElement, info: T) => React.ReactNode) | undefined) => (originalNode: React.ReactElement, info: T) => React.ReactNode;
+export declare const defaultToolbarDownload: (info: ToolbarInfo) => void;
+export {};

package/lib/esm/image/preview-toolbar.js

@@ -0,0 +1,87 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { Tooltip } from 'antd';
+import React from 'react';
+import { Download, IconFileMirror, IconFileRotate, ZoomInOutlined, ZoomOutOutlined } from "../icon";
+import i18n from "../locale";
+import { jsx as _jsx } from "react/jsx-runtime";
+var downloadImage = function downloadImage(info) {
+  var _info$image, _info$image2;
+  if (typeof document === 'undefined') return;
+  var url = (_info$image = info.image) === null || _info$image === void 0 ? void 0 : _info$image.url;
+  if (!url) return;
+  var link = document.createElement('a');
+  link.href = url;
+  var altText = (_info$image2 = info.image) === null || _info$image2 === void 0 || (_info$image2 = _info$image2.alt) === null || _info$image2 === void 0 ? void 0 : _info$image2.trim();
+  link.download = altText || 'image';
+  link.target = '_blank';
+  link.rel = 'noreferrer';
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
+var TOOLBAR_CONFIG = {
+  color: '#fff',
+  overlayInnerStyle: {
+    color: '#272847'
+  },
+  align: {
+    offset: [0, -18]
+  }
+};
+
+// 获取国际化文案
+var getLocaleText = function getLocaleText(key) {
+  return i18n.t("Image.preview.".concat(key));
+};
+var isElement = function isElement(node) {
+  return /*#__PURE__*/React.isValidElement(node);
+};
+export var createToolbarRender = function createToolbarRender() {
+  var handleDownload = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : downloadImage;
+  var userToolbarRender = arguments.length > 1 ? arguments[1] : undefined;
+  return function (originalNode, info) {
+    var _info$image3;
+    var icons = info.icons;
+    var operations = [];
+    var flipNode = isElement(icons === null || icons === void 0 ? void 0 : icons.flipXIcon) ? /*#__PURE__*/React.cloneElement(icons.flipXIcon, undefined, /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
+      title: getLocaleText('flip')
+    }, TOOLBAR_CONFIG), {}, {
+      children: /*#__PURE__*/_jsx(IconFileMirror, {})
+    }))) : null;
+    if (flipNode) operations.push(flipNode);
+    if (isElement(icons === null || icons === void 0 ? void 0 : icons.rotateRightIcon)) operations.push( /*#__PURE__*/React.cloneElement(icons.rotateRightIcon, undefined, /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
+      title: getLocaleText('rotate')
+    }, TOOLBAR_CONFIG), {}, {
+      children: /*#__PURE__*/_jsx(IconFileRotate, {})
+    }))));
+    if (isElement(icons === null || icons === void 0 ? void 0 : icons.zoomOutIcon)) operations.push( /*#__PURE__*/React.cloneElement(icons.zoomOutIcon, undefined, /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
+      title: getLocaleText('zoomOut')
+    }, TOOLBAR_CONFIG), {}, {
+      children: /*#__PURE__*/_jsx(ZoomOutOutlined, {})
+    }))));
+    if (isElement(icons === null || icons === void 0 ? void 0 : icons.zoomInIcon)) operations.push( /*#__PURE__*/React.cloneElement(icons.zoomInIcon, undefined, /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
+      title: getLocaleText('zoomIn')
+    }, TOOLBAR_CONFIG), {}, {
+      children: /*#__PURE__*/_jsx(ZoomInOutlined, {})
+    }))));
+    var templateElement = operations.find(function (node) {
+      return node;
+    });
+    var downloadNode = templateElement && (_info$image3 = info.image) !== null && _info$image3 !== void 0 && _info$image3.url ? /*#__PURE__*/React.cloneElement(templateElement, {
+      key: 'download',
+      className: typeof templateElement.props.className === 'string' ? templateElement.props.className.replace(/(operations-operation-)([\w-]+)/, '$1download') : templateElement.props.className,
+      onClick: function onClick(event) {
+        event.stopPropagation();
+        handleDownload(info);
+      }
+    }, /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
+      title: getLocaleText('download')
+    }, TOOLBAR_CONFIG), {}, {
+      children: /*#__PURE__*/_jsx(Download, {})
+    }))) : null;
+    var nextNodes = downloadNode ? [].concat(operations, [downloadNode]) : operations;
+    var mergedNode = /*#__PURE__*/React.cloneElement(originalNode, undefined, nextNodes);
+    return userToolbarRender ? userToolbarRender(mergedNode, info) : mergedNode;
+  };
+};
+export var defaultToolbarDownload = downloadImage;

package/lib/esm/image/previewUtils.d.ts

@@ -0,0 +1,5 @@
+import type { PreviewItem } from './types';
+export declare const getPreviewItemProps: (item: PreviewItem) => {
+    src: string;
+    alt: string;
+};

package/lib/esm/image/previewUtils.js

@@ -0,0 +1,7 @@
+export var getPreviewItemProps = function getPreviewItemProps(item) {
+  var _item$src, _item$alt;
+  return {
+    src: typeof item === 'string' ? item : (_item$src = item === null || item === void 0 ? void 0 : item.src) !== null && _item$src !== void 0 ? _item$src : '',
+    alt: typeof item === 'string' ? '' : (_item$alt = item === null || item === void 0 ? void 0 : item.alt) !== null && _item$alt !== void 0 ? _item$alt : ''
+  };
+};