@douyinfe/semi-ui 2.50.1 → 2.51.0

package/lib/es/image/preview.js

@@ -1,3 +1,4 @@
+import _omit from "lodash/omit";
 import _isEqual from "lodash/isEqual";
 import _isObject from "lodash/isObject";
 var __rest = this && this.__rest || function (s, e) {
@@ -145,6 +146,10 @@ export default class Preview extends BaseComponent {
         setDownloadName
       } = _a,
       restProps = __rest(_a, ["src", "className", "style", "lazyLoad", "setDownloadName"]);
+    const previewInnerProps = Object.assign(Object.assign({}, _omit(restProps, ['previewCls', 'previewStyle'])), {
+      className: restProps === null || restProps === void 0 ? void 0 : restProps.previewCls,
+      style: restProps === null || restProps === void 0 ? void 0 : restProps.previewStyle
+    });
     const {
       currentIndex,
       visible
@@ -173,7 +178,7 @@ export default class Preview extends BaseComponent {
       id: this.previewGroupId,
       style: style,
       className: cls(`${prefixCls}-preview-group`, className)
-    }, newChildren), /*#__PURE__*/React.createElement(PreviewInner, Object.assign({}, restProps, {
+    }, newChildren), /*#__PURE__*/React.createElement(PreviewInner, Object.assign({}, previewInnerProps, {
       ref: this.previewRef,
       src: finalSrcList,
       currentIndex: currentIndex,
@@ -207,6 +212,8 @@ Preview.propTypes = {
   lazyLoadMargin: PropTypes.string,
   preLoad: PropTypes.bool,
   preLoadGap: PropTypes.number,
+  previewCls: PropTypes.string,
+  previewStyle: PropTypes.object,
   disableDownload: PropTypes.bool,
   zIndex: PropTypes.number,
   renderHeader: PropTypes.func,
@@ -226,5 +233,6 @@ Preview.propTypes = {
 Preview.defaultProps = {
   src: [],
   lazyLoad: true,
-  lazyLoadMargin: "0px 100px 100px 0px"
+  lazyLoadMargin: "0px 100px 100px 0px",
+  closable: true
 };

package/lib/es/image/previewFooter.js

@@ -85,11 +85,13 @@ export default class Footer extends BaseComponent {
     // 根据 props 中的 showTooltip 决定是否使用 Tooltip 包一层
     this.getFinalIconElement = (element, content, key) => {
       const {
-        showTooltip
+        showTooltip,
+        zIndex
       } = this.props;
       return showTooltip ? /*#__PURE__*/React.createElement(Tooltip, {
         content: content,
-        key: `tooltip-${key}`
+        key: `tooltip-${key}`,
+        zIndex: zIndex + 1
       }, element) : element;
     };
     this.getLocalTextByKey = key => /*#__PURE__*/React.createElement(LocaleConsumer, {

package/lib/es/image/previewHeader.js

@@ -9,7 +9,8 @@ const Header = /*#__PURE__*/forwardRef((_ref, ref) => {
     onClose,
     titleStyle,
     className,
-    renderHeader
+    renderHeader,
+    closable
   } = _ref;
   return /*#__PURE__*/React.createElement(PreviewContext.Consumer, null, _ref2 => {
     let {
@@ -26,7 +27,7 @@ const Header = /*#__PURE__*/forwardRef((_ref, ref) => {
     }, /*#__PURE__*/React.createElement("section", {
       className: `${prefixCls}-title`,
       style: titleStyle
-    }, renderHeader ? renderHeader(title) : title), /*#__PURE__*/React.createElement("section", {
+    }, renderHeader ? renderHeader(title) : title), closable && /*#__PURE__*/React.createElement("section", {
       className: `${prefixCls}-close`,
       onMouseUp: onClose
     }, /*#__PURE__*/React.createElement(IconClose, null)));

package/lib/es/image/previewInner.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import BaseComponent from "../_base/baseComponent";
-import { PreviewProps as PreviewInnerProps, PreviewInnerStates } from "./interface";
+import { PreviewInnerProps, PreviewInnerStates } from "./interface";
 import PropTypes from "prop-types";
 import PreviewInnerFoundation, { PreviewInnerAdapter, RatioType } from '@douyinfe/semi-foundation/lib/es/image/previewInnerFoundation';
 import { PreviewContextProps } from "./previewContext";

package/lib/es/image/previewInner.js

@@ -3,7 +3,7 @@ import _isEqual from "lodash/isEqual";
 import React from "react";
 import BaseComponent from "../_base/baseComponent";
 import PropTypes from "prop-types";
-import { cssClasses } from '@douyinfe/semi-foundation/lib/es/image/constants';
+import { cssClasses, numbers } from '@douyinfe/semi-foundation/lib/es/image/constants';
 import cls from "classnames";
 import Portal from "../_portal";
 import { IconArrowLeft, IconArrowRight } from "@douyinfe/semi-icons";
@@ -263,6 +263,7 @@ export default class PreviewInner extends BaseComponent {
   render() {
     const {
       getPopupContainer,
+      closable,
       zIndex,
       visible,
       className,
@@ -309,13 +310,10 @@ export default class PreviewInner extends BaseComponent {
     const total = imgSrc.length;
     const showPrev = total !== 1 && (infinite || currentIndex !== 0);
     const showNext = total !== 1 && (infinite || currentIndex !== total - 1);
-    return /*#__PURE__*/React.createElement(Portal, {
+    return visible && /*#__PURE__*/React.createElement(Portal, {
       getPopupContainer: getPopupContainer,
       style: wrapperStyle
-    }, visible &&
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events,jsx-a11y/no-static-element-interactions
-    React.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       className: previewWrapperCls,
       style: style,
       onMouseDown: this.handleMouseDown,
@@ -326,7 +324,8 @@ export default class PreviewInner extends BaseComponent {
       ref: this.headerRef,
       className: cls(hideViewerCls),
       onClose: this.handlePreviewClose,
-      renderHeader: renderHeader
+      renderHeader: renderHeader,
+      closable: closable
     }), /*#__PURE__*/React.createElement(PreviewImage, {
       src: imgSrc[currentIndex],
       onZoom: this.handleZoomImage,
@@ -369,6 +368,7 @@ export default class PreviewInner extends BaseComponent {
       ratio: ratio,
       prevTip: prevTip,
       nextTip: nextTip,
+      zIndex: zIndex,
       zoomInTip: zoomInTip,
       zoomOutTip: zoomOutTip,
       rotateTip: rotateTip,
@@ -439,7 +439,7 @@ PreviewInner.defaultProps = {
   lazyLoad: false,
   preLoad: true,
   preLoadGap: 2,
-  zIndex: 1000,
+  zIndex: numbers.DEFAULT_Z_INDEX,
   maskClosable: true,
   viewerVisibleDelay: 10000,
   maxZoom: 5,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.50.1",
+    "version": "2.51.0",
     "description": "A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -20,12 +20,12 @@
         "@dnd-kit/core": "^6.0.8",
         "@dnd-kit/sortable": "^7.0.2",
         "@dnd-kit/utilities": "^3.2.1",
-        "@douyinfe/semi-animation": "2.50.1",
-        "@douyinfe/semi-animation-react": "2.50.1",
-        "@douyinfe/semi-foundation": "2.50.1",
-        "@douyinfe/semi-icons": "2.50.1",
-        "@douyinfe/semi-illustrations": "2.50.1",
-        "@douyinfe/semi-theme-default": "2.50.1",
+        "@douyinfe/semi-animation": "2.51.0",
+        "@douyinfe/semi-animation-react": "2.51.0",
+        "@douyinfe/semi-foundation": "2.51.0",
+        "@douyinfe/semi-icons": "2.51.0",
+        "@douyinfe/semi-illustrations": "2.51.0",
+        "@douyinfe/semi-theme-default": "2.51.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -75,7 +75,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "aa51082cdb589792e9224e02c29288991c442344",
+    "gitHead": "5a554bf517411b933e891ad51b874bd9eb6c87c6",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",