From 3ae67d5dca3135a2c6baa4e099801beb0b38574f Mon Sep 17 00:00:00 2001
From: "Alex.huxiyang" <1872591453@qq.com>
Date: Fri, 10 May 2024 09:56:36 +0800
Subject: [PATCH] =?UTF-8?q?fix(imagePreview):=20=E9=98=BB=E6=AD=A2?=
 =?UTF-8?q?=E5=85=B3=E9=97=AD=E9=A2=84=E8=A7=88=E4=BA=8B=E4=BB=B6=E5=AF=B9?=
 =?UTF-8?q?=E7=88=B6=E7=BB=93=E6=9E=84=E7=9A=84=E9=9D=9E=E5=BF=85=E8=A6=81?=
 =?UTF-8?q?=E5=BD=B1=E5=93=8D=20(#2227)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(imagePreview): 阻止关闭预览事件对父结构对影响

* chore: ts
---
 src/packages/imagepreview/imagepreview.taro.tsx | 9 +++++----
 src/packages/imagepreview/imagepreview.tsx      | 7 ++++---
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/packages/imagepreview/imagepreview.taro.tsx b/src/packages/imagepreview/imagepreview.taro.tsx
index 33fa9505b2..744101c667 100644
--- a/src/packages/imagepreview/imagepreview.taro.tsx
+++ b/src/packages/imagepreview/imagepreview.taro.tsx
@@ -7,7 +7,7 @@ import React, {
   ReactNode,
 } from 'react'
 import Taro from '@tarojs/taro'
-import { Video as TaroVideo } from '@tarojs/components'
+import { ITouchEvent, Video as TaroVideo } from '@tarojs/components'
 import classNames from 'classnames'
 import { Close } from '@nutui/icons-react-taro'
 import Popup from '@/packages/popup/index.taro'
@@ -241,7 +241,8 @@ export const ImagePreview: FunctionComponent<Partial<ImagePreviewProps>> = (
     setActive(page + 1)
     props.onChange?.(page + 1)
   }
-  const onCloseInner = () => {
+  const onCloseInner = (e: ITouchEvent | React.MouseEvent) => {
+    e.stopPropagation()
     setShowPop(false)
     setActive(innerNo)
     scaleNow()
@@ -251,10 +252,10 @@ export const ImagePreview: FunctionComponent<Partial<ImagePreviewProps>> = (
       scale: 1,
     })
   }
-  const closeOnImg = () => {
+  const closeOnImg = (e: ITouchEvent | React.MouseEvent) => {
     // 点击内容区域的图片是否可以关闭弹层（视频区域由于nut-video做了限制，无法关闭弹层）
     if (closeOnContentClick) {
-      onCloseInner()
+      onCloseInner(e)
     }
   }
 
diff --git a/src/packages/imagepreview/imagepreview.tsx b/src/packages/imagepreview/imagepreview.tsx
index e0c93bec4c..8a9d061cd0 100644
--- a/src/packages/imagepreview/imagepreview.tsx
+++ b/src/packages/imagepreview/imagepreview.tsx
@@ -239,7 +239,8 @@ export const ImagePreview: FunctionComponent<Partial<ImagePreviewProps>> = (
     props.onChange?.(page + 1)
   }
 
-  const onCloseInner = () => {
+  const onCloseInner = (e: React.MouseEvent<Element, MouseEvent>) => {
+    e.stopPropagation()
     setShowPop(false)
     setActive(innerNo)
     scaleNow()
@@ -250,10 +251,10 @@ export const ImagePreview: FunctionComponent<Partial<ImagePreviewProps>> = (
     })
   }
 
-  const closeOnImg = () => {
+  const closeOnImg = (e: React.MouseEvent<Element, MouseEvent>) => {
     // 点击内容区域的图片是否可以关闭弹层（视频区域由于nut-video做了限制，无法关闭弹层）
     if (closeOnContentClick) {
-      onCloseInner()
+      onCloseInner(e)
     }
   }
   const duration = typeof autoPlay === 'string' ? parseInt(autoPlay) : autoPlay