feat: ImagePreview add previewCls and previewStyle API

DouyinFE · Jan 8, 2024 · 3626826 · 3626826
1 parent 08937a8
commit 3626826
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 4 deletions.
diff --git a/cypress/e2e/image.spec.js b/cypress/e2e/image.spec.js
@@ -559,4 +559,17 @@ describe('image', () => {
                     });
             });
     });
+
+    // API：previewCls， previewStyle，测试 preview 的 className 和 style 是否生效
+    it.only("previewCls & previewStyle", () => {
+        cy.visit('http://127.0.0.1:6006/iframe.html?id=image--preview-cls-and-preview-style&args=&viewMode=storyi');
+        cy.wait(4000);
+        cy.get('.semi-image-img-preview').eq(0).click();
+        cy.get('.semi-image-preview').eq(0).should('have.class', 'test-preview');
+        cy.get('.semi-image-preview').eq(0).should('have.attr', 'style').should('contain', 'background: lightblue;');
+        cy.get('.semi-image-preview').click();
+        cy.get('.semi-image-img-preview').eq(1).click();
+        cy.get('.semi-image-preview').eq(0).should('have.class', 'test-imagePreview');
+        cy.get('.semi-image-preview').eq(0).should('have.attr', 'style').should('contain', 'background: lightgreen;');
+    });
 });
diff --git a/packages/semi-ui/image/_story/image.stories.jsx b/packages/semi-ui/image/_story/image.stories.jsx
@@ -734,4 +734,39 @@ export const SmallHeightImage = () => {
             src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg"
         />
     </>
+}
+
+export const previewClsAndPreviewStyle = () => {
+   return <>
+        <span>1.previewCls为 test-preview， previewStyle 的 background 为 lightblue </span>
+        <br />
+        <Image 
+            width={360}
+            height={200}
+            src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg"
+            preview={{
+                previewCls: 'test-preview',
+                previewStyle: { background: 'lightblue' }
+            }}
+        />
+        <br />
+        <span>2.previewCls为 test-imagePreview， previewStyle 的 background 为 lightgreen </span>
+        <br />
+        <ImagePreview
+            previewCls='test-imagePreview'
+            previewStyle={{ background: 'lightgreen' }}
+        >
+            {srcList1.map((src, index) => {
+                return (
+                    <Image 
+                        key={index} 
+                        src={src} 
+                        width={200} 
+                        alt={`lamp${index + 1}`} 
+                        style={{ marginRight: 5 }}
+                    />
+                );
+            })}
+        </ImagePreview> 
+    </>
 }
diff --git a/packages/semi-ui/image/image.tsx b/packages/semi-ui/image/image.tsx
@@ -10,7 +10,7 @@ import { PreviewContext, PreviewContextProps } from "./previewContext";
 import ImageFoundation, { ImageAdapter } from "@douyinfe/semi-foundation/image/imageFoundation";
 import LocaleConsumer from "../locale/localeConsumer";
 import { Locale } from "../locale/interface";
-import { isBoolean, isObject, isUndefined } from "lodash";
+import { isBoolean, isObject, isUndefined, omit } from "lodash";
 import Skeleton from "../skeleton";
 import "@douyinfe/semi-foundation/image/image.scss";
 
@@ -179,7 +179,11 @@ export default class Image extends BaseComponent<ImageProps, ImageStates> {
         const canPreview = loadStatus === "success" && preview && !this.isInGroup();
         const showPreviewCursor = preview && loadStatus === "success";
         const previewSrc = isObject(preview) ? ((preview as any).src ?? src) : src;
-        const previewProps = isObject(preview) ? preview : {};
+        const previewProps = isObject(preview) && canPreview ? { 
+            ...omit(preview, ['className', 'style', 'previewCls', 'previewStyle']), 
+            className: preview?.previewCls, 
+            style: preview?.previewStyle 
+        }: {} as any;
         return ( 
             <div
                 style={outerStyle}

diff --git a/packages/semi-ui/image/interface.tsx b/packages/semi-ui/image/interface.tsx
@@ -59,6 +59,8 @@ export interface PreviewProps extends BaseProps {
     crossOrigin?: "anonymous"| "use-credentials";
     maxZoom?: number;
     minZoom?: number;
+    previewCls?: string;
+    previewStyle?: React.CSSProperties;
     renderHeader?: (info: any) => ReactNode;
     renderPreviewMenu?: (props: MenuProps) => ReactNode;
     getPopupContainer?: () => HTMLElement;
@@ -75,6 +77,8 @@ export interface PreviewProps extends BaseProps {
     setDownloadName?: (src: string) => string
 }
 
+export interface PreviewInnerProps extends Omit<PreviewProps, "previewCls" | "previewStyle"> {}
+
 export interface MenuProps {
     min?: number;
     max?: number;

diff --git a/packages/semi-ui/image/preview.tsx b/packages/semi-ui/image/preview.tsx
@@ -10,6 +10,7 @@ import { cssClasses } from "@douyinfe/semi-foundation/image/constants";
 import { isObject, isEqual } from "lodash";
 import "@douyinfe/semi-foundation/image/image.scss";
 import cls from "classnames";
+import { omit } from "lodash";
 
 const prefixCls = cssClasses.PREFIX;
 
@@ -39,6 +40,8 @@ export default class Preview extends BaseComponent<PreviewProps, PreviewState> {
         lazyLoadMargin: PropTypes.string,
         preLoad: PropTypes.bool,
         preLoadGap: PropTypes.number,
+        previewCls: PropTypes.string,
+        previewStyle: PropTypes.object,
         disableDownload: PropTypes.bool,
         zIndex: PropTypes.number,
         renderHeader: PropTypes.func,
@@ -194,6 +197,11 @@ export default class Preview extends BaseComponent<PreviewProps, PreviewState> {
 
     render() {
         const { src, className, style, lazyLoad, setDownloadName, ...restProps } = this.props;
+        const previewInnerProps = { 
+            ...omit(restProps, ['previewCls', 'previewStyle']), 
+            className: restProps?.previewCls, 
+            style: restProps?.previewStyle 
+        };
         const { currentIndex, visible } = this.state;
         const { srcListInChildren, newChildren, titles } = this.loopImageIndex();
         const srcArr = Array.isArray(src) ? src : (typeof src === "string" ? [src] : []);
@@ -217,7 +225,7 @@ export default class Preview extends BaseComponent<PreviewProps, PreviewState> {
                     {newChildren}
                 </div>
                 <PreviewInner
-                    {...restProps}
+                    {...previewInnerProps}
                     ref={this.previewRef}
                     src={finalSrcList}
                     currentIndex={currentIndex}

diff --git a/packages/semi-ui/image/previewInner.tsx b/packages/semi-ui/image/previewInner.tsx
@@ -1,6 +1,6 @@
 import React, { CSSProperties } 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 { cssClasses } from "@douyinfe/semi-foundation/image/constants";
 import cls from "classnames";