fix: Fix the problem that closeable API does not take effect

DouyinFE · Jan 5, 2024 · 08937a8 · 08937a8
1 parent 295bb9a
commit 08937a8
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 5 deletions.
diff --git a/packages/semi-ui/image/_story/image.stories.jsx b/packages/semi-ui/image/_story/image.stories.jsx
@@ -62,6 +62,7 @@ export const basicImage = () => {
     const [disableDownload, setDisableDownload] = useState(false);
     const [maskClosable, setMaskClosable] = useState(true);
     const [preview, setPreview] = useState(true);
+    const [closable, setClosable] = useState(true);
 
     const itemStyle = { display: 'flex', alignItems: 'center', flexShrink: 0, width: 'fit-content', margin: '10px 20px 0 0' };
     const menuStyle = { marginBottom: 20, display: 'flex', flexWrap: 'wrap' };
@@ -81,6 +82,10 @@ export const basicImage = () => {
                 <span >是否禁用下载：</span>
                 <Switch checked={disableDownload} checkedText="是" uncheckedText="否" onChange={setDisableDownload}/>
             </div>
+            <div style={itemStyle} id='closable'>
+                <span>是否显示预览关闭按钮：</span>
+                <Switch checked={closable} checkedText="是" uncheckedText="否" onChange={setClosable} />
+            </div>
             <div style={itemStyle} id='maskClosable'>
                 <span >点击遮罩层是否关闭预览：</span>
                 <Switch checked={maskClosable} checkedText="是" uncheckedText="否" onChange={setMaskClosable}/>
@@ -93,7 +98,8 @@ export const basicImage = () => {
             preview={preview ? {
                 closeOnEsc: escOut,
                 disableDownload,
-                maskClosable
+                maskClosable,
+                closable
             } : false}
         />
     </>

diff --git a/packages/semi-ui/image/interface.tsx b/packages/semi-ui/image/interface.tsx
@@ -116,6 +116,7 @@ export interface SliderProps {
 }
 
 export interface HeaderProps {
+    closable: boolean;
     renderHeader?: (info: any) => ReactNode;
     title?: string;
     titleStyle?: React.CSSProperties;

diff --git a/packages/semi-ui/image/preview.tsx b/packages/semi-ui/image/preview.tsx
@@ -60,6 +60,7 @@ export default class Preview extends BaseComponent<PreviewProps, PreviewState> {
         src: [],
         lazyLoad: true,
         lazyLoadMargin: "0px 100px 100px 0px",
+        closable: true
     };
 
     get adapter() {

diff --git a/packages/semi-ui/image/previewHeader.tsx b/packages/semi-ui/image/previewHeader.tsx
@@ -7,7 +7,7 @@ import { PreviewContext } from "./previewContext";
 
 const prefixCls = `${cssClasses.PREFIX}-preview-header`;
 
-const Header = forwardRef(({ onClose, titleStyle, className, renderHeader }: HeaderProps, ref: React.LegacyRef<HTMLElement>) => (
+const Header = forwardRef(({ onClose, titleStyle, className, renderHeader, closable }: HeaderProps, ref: React.LegacyRef<HTMLElement>) => (
     <PreviewContext.Consumer>
         {({ currentIndex, titles }) => {
             let title;
@@ -18,9 +18,9 @@ const Header = forwardRef(({ onClose, titleStyle, className, renderHeader }: Hea
                 <section ref={ref} className={cls(prefixCls, className)}>
                     <section className={`${prefixCls}-title`} style={titleStyle}>{renderHeader ? renderHeader(title) : title}</section>
                     {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
-                    <section className={`${prefixCls}-close`} onMouseUp={onClose}>
+                    {closable && <section className={`${prefixCls}-close`} onMouseUp={onClose}>
                         <IconClose />
-                    </section>
+                    </section>}
                 </section>
             );
         }}

diff --git a/packages/semi-ui/image/previewInner.tsx b/packages/semi-ui/image/previewInner.tsx
@@ -342,6 +342,7 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
     render() {
         const {
             getPopupContainer,
+            closable,
             zIndex,
             visible,
             className,
@@ -402,7 +403,7 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
                     ref={this.registryImageWrapRef}
                     onMouseMove={this.handleMouseMove}
                 >
-                    <Header ref={this.headerRef} className={cls(hideViewerCls)} onClose={this.handlePreviewClose} renderHeader={renderHeader} />
+                    <Header ref={this.headerRef} className={cls(hideViewerCls)} onClose={this.handlePreviewClose} renderHeader={renderHeader} closable={closable}/>
                     <PreviewImage
                         src={imgSrc[currentIndex]}
                         onZoom={this.handleZoomImage}