feat(ImageViewer): add trigger source for close event (#811)

* feat(ImageViewer): add trigger source for close event

* docs: update

Author: anlyyao

src/image-viewer/_example/base.tsx

@@ -10,7 +10,12 @@ export default function BaseDemo() {
   const [visible, setVisible] = useState(false);
 
   const onIndexChange = (...args) => {
-    console.log('[onIndexChange]', args);
+    console.log('onIndexChange', args);
+  };
+
+  const handleClose = (...args) => {
+    console.log('onClose', args);
+    setVisible(false);
   };
 
   return (
@@ -19,7 +24,7 @@ export default function BaseDemo() {
         基础图片预览
       </Button>
 
-      <ImageViewer images={images} visible={visible} onClose={() => setVisible(false)} onIndexChange={onIndexChange} />
+      <ImageViewer images={images} visible={visible} onClose={handleClose} onIndexChange={onIndexChange} />
     </div>
   );
 }

src/image-viewer/image-viewer.en-US.md

@@ -13,13 +13,13 @@ deleteBtn | TNode | false | Typescript：`boolean \| TNode`。[see more ts defin
 images | Array | [] | Typescript：`Array<string \| ImageInfo>` `interface ImageInfo { url: string; align: 'start' \| 'center' \| 'end' }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/image-viewer/type.ts) | N
 index | Number | 0 | \- | N
 defaultIndex | Number | 0 | uncontrolled property | N
-maxZoom | Number | 3 | Typescript：`number` | N
+maxZoom | Number | 3 | \- | N
 showIndex | Boolean | false | \- | N
 visible | Boolean | false | hide or show image viewer | N
 defaultVisible | Boolean | false | hide or show image viewer。uncontrolled property | N
-onClose | Function |  | Typescript：`(context: { trigger: 'overlay' \| 'close-btn', visible: boolean, index: number }) => void`<br/> | N
+onClose | Function |  | Typescript：`(context: { trigger: ImageViewerCloseTrigger, visible: boolean, index: number }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/image-viewer/type.ts)。<br/>`type ImageViewerCloseTrigger = 'image' \| 'overlay' \| 'close-btn'`<br/> | N
 onDelete | Function |  | Typescript：`(index: number) => void`<br/> | N
-onIndexChange | Function |  | Typescript：`(index: number, context: { trigger: 'prev' \| 'next' }) => void`<br/> | N
+onIndexChange | Function |  | Typescript：`(index: number, context: { trigger: 'prev' \| 'next' \| 'current' }) => void`<br/> | N
 
 ### CSS Variables
 

src/image-viewer/image-viewer.md

@@ -13,13 +13,13 @@ deleteBtn | TNode | false | 是否显示删除操作，前提需要开启页码
 images | Array | [] | 图片数组。TS 类型：`Array<string \| ImageInfo>` `interface ImageInfo { url: string; align: 'start' \| 'center' \| 'end' }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/image-viewer/type.ts) | N
 index | Number | 0 | 当前预览图片所在的下标 | N
 defaultIndex | Number | 0 | 当前预览图片所在的下标。非受控属性 | N
-maxZoom | Number | 3 | 【开发中】最大放大比例。TS 类型：`number` | N
+maxZoom | Number | 3 | 【开发中】最大放大比例 | N
 showIndex | Boolean | false | 是否显示页码 | N
 visible | Boolean | false | 隐藏/显示预览 | N
 defaultVisible | Boolean | false | 隐藏/显示预览。非受控属性 | N
-onClose | Function |  | TS 类型：`(context: { trigger: 'overlay' \| 'close-btn', visible: boolean, index: number }) => void`<br/>关闭时触发 | N
+onClose | Function |  | TS 类型：`(context: { trigger: ImageViewerCloseTrigger, visible: boolean, index: number }) => void`<br/>关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/image-viewer/type.ts)。<br/>`type ImageViewerCloseTrigger = 'image' \| 'overlay' \| 'close-btn'`<br/> | N
 onDelete | Function |  | TS 类型：`(index: number) => void`<br/>点击删除操作按钮时触发 | N
-onIndexChange | Function |  | TS 类型：`(index: number, context: { trigger: 'prev' \| 'next' }) => void`<br/>预览图片切换时触发，`context.prev` 切换到上一张图片，`context.next` 切换到下一张图片 | N
+onIndexChange | Function |  | TS 类型：`(index: number, context: { trigger: 'prev' \| 'next' \| 'current' }) => void`<br/>预览图片切换时触发，`context.prev` 切换到上一张图片，`context.next` 切换到下一张图片 | N
 
 ### CSS Variables
 

src/image-viewer/image-viewer.tsx

@@ -2,7 +2,7 @@ import React, { MouseEvent, useRef, useEffect } from 'react';
 import { CloseIcon, DeleteIcon } from 'tdesign-icons-react';
 import { CSSTransition } from 'react-transition-group';
 import { CSSTransitionClassNames } from 'react-transition-group/CSSTransition';
-import { TdImageViewerProps, ImageInfo } from './type';
+import { TdImageViewerProps, ImageInfo, ImageViewerCloseTrigger } from './type';
 import { StyledProps } from '../common';
 import { usePrefixClass } from '../hooks/useClass';
 import useDefault from '../_util/useDefault';
@@ -64,11 +64,22 @@ const ImageViewer: React.FC<ImageViewerProps> = (props) => {
   }, [show]);
 
   const imageViewerClass = usePrefixClass('image-viewer');
-  const handleClose = (e: MouseEvent, trigger: 'overlay' | 'close-btn') => {
+  const handleClose = (e: MouseEvent, trigger: ImageViewerCloseTrigger) => {
     e.stopPropagation();
     setShow(false);
-    onClose?.({ trigger, visible: false, index });
+    onClose?.({ trigger, visible: false, index: currentIndex });
   };
+
+  // 通过(事件委托)将点击事件绑定到组件根，判断点击目标
+  const handleClick = (e: MouseEvent) => {
+    const target = e.target as HTMLElement;
+    if (target.tagName === 'IMG') {
+      handleClose(e, 'image');
+    } else {
+      handleClose(e, 'overlay');
+    }
+  };
+
   const handleDelete = () => {
     onDelete?.(currentIndex ?? 0);
   };
@@ -207,8 +218,8 @@ const ImageViewer: React.FC<ImageViewerProps> = (props) => {
       classNames={animationClassNames}
       nodeRef={rootRef}
     >
-      <div ref={rootRef} className={imageViewerClass}>
-        <div className={`${imageViewerClass}__mask`} onClick={(e) => handleClose(e, 'overlay')}></div>
+      <div ref={rootRef} className={imageViewerClass} onClick={handleClick}>
+        <div className={`${imageViewerClass}__mask`}></div>
         <TSwiper
           ref={swiperRootRef}
           autoplay={false}

src/image-viewer/type.ts

@@ -55,18 +55,20 @@ export interface TdImageViewerProps {
   /**
    * 关闭时触发
    */
-  onClose?: (context: { trigger: 'overlay' | 'close-btn'; visible: boolean; index: number }) => void;
+  onClose?: (context: { trigger: ImageViewerCloseTrigger; visible: boolean; index: number }) => void;
   /**
    * 点击删除操作按钮时触发
    */
   onDelete?: (index: number) => void;
   /**
    * 预览图片切换时触发，`context.prev` 切换到上一张图片，`context.next` 切换到下一张图片
    */
-  onIndexChange?: (index: number, context: { trigger: 'prev' | 'next' }) => void;
+  onIndexChange?: (index: number, context: { trigger: 'prev' | 'next' | 'current' }) => void;
 }
 
 export interface ImageInfo {
   url: string;
   align: 'start' | 'center' | 'end';
 }
+
+export type ImageViewerCloseTrigger = 'image' | 'overlay' | 'close-btn';