fix: [ImagePreview] Fix the ratio of the new picture is incorrect after switching the ratio state of the preview picture and switching the picture (#1496)

cypress/integration/image.spec.js

@@ -498,4 +498,21 @@ describe('image', () => {
         cy.get('.semi-tooltip-wrapper').contains('Download');
         cy.get('.semi-image-preview-footer').children('.semi-icon-download').trigger('mouseout');
     });
+
+    // 测试在预览状态下，图片改变 ratio 状态后，切换图片，ratio 状态是否正确
+    //（在未受控 ratio ，无默认 ratio 情况下，切换后的图片ratio 应该为适应页面）
+    it.only('ratio status after change pic', () => {
+        cy.visit('http://127.0.0.1:6006/iframe.html?id=image--basic-preview&args=&viewMode=story');
+        cy.wait(2000);
+        // 进入预览状态
+        cy.get('.semi-image-img-preview').eq(0).click();
+        cy.get('.semi-image-preview').should('exist');
+        // 图片默认 ratio 为适应页面，调整为 1:1
+        cy.get('.semi-image-preview-footer').children('.semi-icon-real_size_stroked').click();
+        // 切换图片到下一张
+        cy.get('.semi-image-preview-footer').children('.semi-icon-chevron_right').click();
+        cy.wait(1000);
+        // 当前 ratio 状态应该为适应页面
+        cy.get('.semi-icon-real_size_stroked').should('exist');
+    });
 });

packages/semi-foundation/image/previewImageFoundation.ts

@@ -77,8 +77,7 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
     }
 
     handleWindowResize = (): void => {
-        const { setRatio } = this.getProps();
-        const { ratio } = this.getProps();
+        const { ratio, setRatio } = this.getProps();
         const { originImageWidth, originImageHeight } = this._adapter.getOriginImageSize();
         if (originImageWidth && originImageHeight) {
             if (ratio !== "adaptation") {

packages/semi-foundation/image/previewInnerFoundation.ts

@@ -41,12 +41,6 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
         this._adapter.enabledBodyScroll();
     }
 
-    handleRatio(type: string) {
-        this.setState({
-            ratio: type,
-        } as any);
-    }
-
     handleViewVisibleChange = () => {
         const nowTime = new Date().getTime();
         const mouseActiveTime = this._adapter.getMouseActiveTime();

packages/semi-ui/image/previewInner.tsx

@@ -211,6 +211,9 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
         }
         if ("currentIndex" in props && props.currentIndex !== state.currentIndex) {
             willUpdateStates.currentIndex = props.currentIndex;
+            // ratio will set to adaptation when change picture, 
+            // attention: If the ratio is controlled, the ratio should not change as the index changes
+            willUpdateStates.ratio = 'adaptation';
         }
         return willUpdateStates;
     }
@@ -223,7 +226,6 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
     }
 
     componentDidMount() {
-
         this.scrollBarWidth = PreviewInner.getScrollbarWidth();
         this.originBodyWidth = document.body.style.width;
         if (this.props.visible) {
@@ -311,10 +313,6 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
         this.foundation.handleMouseDown(e);
     }
 
-    handleRatio = (type: RatioType): void => {
-        this.foundation.handleRatio(type);
-    }
-
     render() {
         const {
             getPopupContainer,
@@ -385,7 +383,7 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
                         src={imgSrc[currentIndex]}
                         onZoom={this.handleZoomImage}
                         disableDownload={disableDownload}
-                        setRatio={this.handleRatio}
+                        setRatio={this.handleAdjustRatio}
                         zoom={zoom}
                         ratio={ratio}
                         zoomStep={zoomStep}