diff --git a/src/image-viewer/ImageViewer.tsx b/src/image-viewer/ImageViewer.tsx index 1fc1330be4..480914a37f 100644 --- a/src/image-viewer/ImageViewer.tsx +++ b/src/image-viewer/ImageViewer.tsx @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import { createPortal } from 'react-dom'; import isFunction from 'lodash/isFunction'; import { TdImageViewerProps } from './type'; -import { ImageModal } from './ImageViewerModel'; +import { ImageModal } from './ImageViewerModal'; import { StyledProps, TNode } from '../common'; import { imageViewerDefaultProps } from './defaultProps'; import useImageScale from './hooks/useImageScale'; diff --git a/src/image-viewer/ImageViewerMini.tsx b/src/image-viewer/ImageViewerMini.tsx index 5d668cbc88..d1365702b0 100644 --- a/src/image-viewer/ImageViewerMini.tsx +++ b/src/image-viewer/ImageViewerMini.tsx @@ -2,10 +2,10 @@ import React, { KeyboardEvent, MouseEvent } from 'react'; import { TNode } from '../common'; import Dialog from '../dialog'; import { ImageInfo, ImageScale, ImageViewerScale } from './type'; -import { ImageModelItem, ImageViewerUtils } from './ImageViewerModel'; +import { ImageModalItem, ImageViewerUtils } from './ImageViewerModal'; import useConfig from '../hooks/useConfig'; -export interface ImageModelMiniProps { +export interface ImageModalMiniProps { visible: boolean; title?: TNode; draggable: boolean; @@ -34,12 +34,12 @@ export interface ImageModelMiniProps { }; } -export const ImageModelMiniContent: React.FC = (props) => { +export const ImageModalMiniContent: React.FC = (props) => { const { classPrefix } = useConfig(); return (
- = (props) => { ); }; -export const ImageModelMini: React.FC = (props) => { +export const ImageModalMini: React.FC = (props) => { const { visible, title, @@ -99,7 +99,7 @@ export const ImageModelMini: React.FC = (props) => { footer={footer} onClose={onClose} > - + ); }; diff --git a/src/image-viewer/ImageViewerModel.tsx b/src/image-viewer/ImageViewerModal.tsx similarity index 95% rename from src/image-viewer/ImageViewerModel.tsx rename to src/image-viewer/ImageViewerModal.tsx index 2a24e15696..98f520f962 100644 --- a/src/image-viewer/ImageViewerModel.tsx +++ b/src/image-viewer/ImageViewerModal.tsx @@ -15,7 +15,7 @@ import { useLocaleReceiver } from '../locale/LocalReceiver'; import { TNode } from '../common'; import { downloadFile } from './utils'; import { ImageInfo, ImageScale, ImageViewerScale } from './type'; -import { ImageModelMini } from './ImageViewerMini'; +import { ImageModalMini } from './ImageViewerMini'; import useMirror from './hooks/useMirror'; import usePosition from './hooks/usePosition'; import useIndex from './hooks/useIndex'; @@ -40,7 +40,7 @@ const ImageError = ({ errorText }: { errorText: string }) => { ); }; -interface ImageModelItemProps { +interface ImageModalItemProps { rotateZ: number; scale: number; mirror: number; @@ -50,7 +50,7 @@ interface ImageModelItemProps { } // 单个弹窗实例 -export const ImageModelItem: React.FC = ({ rotateZ, scale, src, preSrc, mirror, errorText }) => { +export const ImageModalItem: React.FC = ({ rotateZ, scale, src, preSrc, mirror, errorText }) => { const { classPrefix } = useConfig(); const [position, onMouseDown] = usePosition({ initPosition: [0, 0] }); @@ -113,7 +113,7 @@ export const ImageModelItem: React.FC = ({ rotateZ, scale, // 旋转角度单位 const ROTATE_COUNT = 90; -interface ImageModelIconProps { +interface ImageModalIconProps { name?: string; size?: string; label?: string; @@ -123,7 +123,7 @@ interface ImageModelIconProps { onClick?: (e: MouseEvent) => void; } -const ImageModelIcon = ({ onClick, className, disabled, isRange, name, label, size = '16px' }: ImageModelIconProps) => { +const ImageModalIcon = ({ onClick, className, disabled, isRange, name, label, size = '16px' }: ImageModalIconProps) => { const { classPrefix } = useConfig(); const Icons = useIconMap(); @@ -187,13 +187,13 @@ export const ImageViewerUtils: React.FC = ({ onRotate(-ROTATE_COUNT)} />
- - + - + = ({ {currentImage.download && ( - { @@ -250,7 +250,7 @@ const ImageViewerHeader = (props: ImageViewerHeaderProps) => { [`${classPrefix}-is-show`]: isExpand, })} > - setIsExpand(!isExpand)} @@ -385,7 +385,7 @@ export const ImageModal: React.FC = (props) => { if (isMini) { return ( - = (props) => { let closeNode: TNode = closeBtn; if (closeBtn === true) { closeNode = ( - = (props) => { {title} {`${index + 1}/${images.length}`} - - = (props) => { tipText={tipText} /> {closeNode} - { }); }); -describe('ImageViewerModel', () => { +describe('ImageViewerModal', () => { const triggerText = '预览单张图片'; test('base', async () => { const user = userEvent.setup(); diff --git a/src/image-viewer/hooks/useIndex.ts b/src/image-viewer/hooks/useIndex.ts index b1292e2555..63b45b0eef 100644 --- a/src/image-viewer/hooks/useIndex.ts +++ b/src/image-viewer/hooks/useIndex.ts @@ -1,7 +1,7 @@ import { useCallback } from 'react'; import useControlled from '../../hooks/useControlled'; -/** ImageViewerModel hooks * */ +/** ImageViewerModal hooks * */ // 选中下标控制 const useIndex = (resProps, images) => { const [index, setIndex] = useControlled(resProps, 'index', resProps.onIndexChange);