feat(Imageviewer): Imageviewer support attach

src/image-viewer/ImageViewer.tsx

@@ -1,21 +1,23 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 import isFunction from 'lodash/isFunction';
-import { TdImageViewerProps } from './type';
 import { ImageModal } from './ImageViewerModal';
-import { StyledProps, TNode } from '../common';
 import { imageViewerDefaultProps } from './defaultProps';
+import type { TdImageViewerProps } from './type';
+import type { ImageModalProps } from './ImageViewerModal';
+import type { StyledProps, TNode } from '../common';
 import useImageScale from './hooks/useImageScale';
 import useList from './hooks/useList';
 import useViewerScale from './hooks/useViewerScale';
 import useControlled from '../hooks/useControlled';
 import useDefaultProps from '../hooks/useDefaultProps';
+import { canUseDocument } from '../_util/dom';
 
 export interface ImageViewerProps extends TdImageViewerProps, StyledProps {}
 
 const ImageViewer: React.FC<ImageViewerProps> = (originalProps) => {
   const props = useDefaultProps<ImageViewerProps>(originalProps, imageViewerDefaultProps);
-  const { mode, trigger, images, title, imageScale: imageScaleD, viewerScale: viewerScaleD } = props;
+  const { attach, mode, trigger, images, title, imageScale: imageScaleD, viewerScale: viewerScaleD } = props;
 
   const [visible, setVisible] = useControlled(props, 'visible', (visible, context) => {
     isFunction(props.onClose) && props.onClose(context);
@@ -28,7 +30,7 @@ const ImageViewer: React.FC<ImageViewerProps> = (originalProps) => {
 
   const isMini = mode === 'modeless';
 
-  const close = (context) => {
+  const close: ImageModalProps['onClose'] = (context) => {
     setVisible(false, context);
     setTimeout(() => setVisibled(false), 196);
   };
@@ -42,6 +44,21 @@ const ImageViewer: React.FC<ImageViewerProps> = (originalProps) => {
   // @ts-ignore TODO 待类型完善后移除
   const uiImage: TNode = isFunction(trigger) ? trigger({ open, close, onOpen: open, onClose: close }) : trigger;
 
+  const attachElement = useMemo(() => {
+    if (!canUseDocument || !attach) return null;
+
+    if (attach === 'body') {
+      return document.body;
+    }
+
+    if (typeof attach === 'string') {
+      return document.querySelector(attach);
+    }
+    if (isFunction(attach)) {
+      return attach();
+    }
+  }, [attach]);
+
   return (
     <>
       {uiImage}
@@ -67,7 +84,7 @@ const ImageViewer: React.FC<ImageViewerProps> = (originalProps) => {
             onOpen={open}
             imageReferrerpolicy={props.imageReferrerpolicy}
           />,
-          document.body,
+          attachElement,
         )}
     </>
   );

src/image-viewer/ImageViewerModal.tsx

@@ -371,7 +371,7 @@ const ImageViewerHeader = (props: ImageViewerHeaderProps) => {
   );
 };
 
-interface ImageModalProps {
+export interface ImageModalProps {
   title?: TNode;
   visible: boolean;
   closeOnOverlay: boolean;

src/image-viewer/__tests__/image-viewer.test.tsx

@@ -51,6 +51,50 @@ describe('ImageViewer', () => {
     const { getByText } = render(<BasicImageViewer />);
     expect(getByText(triggerText)).toBeTruthy();
   });
+
+  test('base:attach is default=body', async () => {
+    const BasicImageViewer = () => {
+      const trigger = ({ open }) => <span onClick={open}>{triggerText}</span>;
+      return <ImageViewer trigger={trigger} images={[imgUrl]} />;
+    };
+    const { getByText } = render(<BasicImageViewer />);
+
+    // 点击前，没有元素存在
+    const imgContainer = document.body.querySelector('.t-image-viewer-preview-image');
+    expect(imgContainer).toBeNull();
+
+    // 模拟鼠标点击
+    act(() => {
+      fireEvent.click(getByText(triggerText));
+    });
+
+    // 鼠标点击后，有元素
+    const imgModal = document.body.querySelector('.t-image-viewer__modal-pic');
+    expect(imgModal).toBeTruthy();
+  });
+
+  test('base:attach is function', async () => {
+    const BasicImageViewer = () => {
+      const trigger = ({ open }) => <span onClick={open}>{triggerText}</span>;
+      return <ImageViewer trigger={trigger} images={[imgUrl]} attach={() => document.body} />;
+    };
+    const { getByText } = render(<BasicImageViewer />);
+
+    // 点击前，没有元素存在
+    const imgContainer = document.body.querySelector('.t-image-viewer-preview-image');
+    expect(imgContainer).toBeNull();
+
+    // 模拟鼠标点击
+    act(() => {
+      fireEvent.click(getByText(triggerText));
+    });
+
+    act(() => {
+      // 鼠标点击后，有元素
+      const imgModal = document.body.querySelector('.t-image-viewer__modal-pic');
+      expect(imgModal).toBeTruthy();
+    });
+  });
 });
 
 describe('ImageViewerMini', () => {

src/image-viewer/defaultProps.ts

@@ -5,6 +5,7 @@
 import { TdImageViewerProps } from './type';
 
 export const imageViewerDefaultProps: TdImageViewerProps = {
+  attach: 'body',
   closeBtn: true,
   closeOnEscKeydown: true,
   draggable: undefined,

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

@@ -8,6 +8,7 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 className | String | - | className of component | N
 style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+attach | String / Function | 'body' | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 closeBtn | TNode | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 closeOnEscKeydown | Boolean | true | trigger image viewer close event on `ESC` keydown | N
 closeOnOverlay | Boolean | - | \- | N

src/image-viewer/image-viewer.md

@@ -8,6 +8,7 @@
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+attach | String / Function | 'body' | 制定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 closeBtn | TNode | true | 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以完全自定义关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 closeOnEscKeydown | Boolean | true | 按下 ESC 时是否触发图片预览器关闭事件 | N
 closeOnOverlay | Boolean | - | 是否在点击遮罩层时，触发预览关闭 | N

src/image-viewer/type.ts

@@ -4,10 +4,15 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { TNode } from '../common';
+import { TNode, AttachNode } from '../common';
 import { MouseEvent, KeyboardEvent } from 'react';
 
 export interface TdImageViewerProps {
+  /**
+   * 制定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body
+   * @default 'body'
+   */
+  attach?: AttachNode;
   /**
    * 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以完全自定义关闭按钮
    * @default true