diff --git a/examples/thumbnail.tsx b/examples/thumbnail.tsx new file mode 100644 index 00000000..6c2ca844 --- /dev/null +++ b/examples/thumbnail.tsx @@ -0,0 +1,39 @@ +import * as React from 'react'; +import Image from '../src'; +import '../assets/index.less'; + +export default function Thumbnail() { + return ( +
+ + +
+

PreviewGroup

+ + + + +
+ ); +} diff --git a/src/Image.tsx b/src/Image.tsx index c20c9927..04268165 100644 --- a/src/Image.tsx +++ b/src/Image.tsx @@ -8,6 +8,7 @@ import Preview from './Preview'; import PreviewGroup, { context } from './PreviewGroup'; export interface ImagePreviewType { + src?: string; visible?: boolean; onVisibleChange?: (value: boolean, prevValue: boolean) => void; getContainer?: GetContainer | false; @@ -41,7 +42,7 @@ interface CompoundedComponent

extends React.FC

{ type ImageStatus = 'normal' | 'error' | 'loading'; const ImageInternal: CompoundedComponent = ({ - src, + src: imgSrc, alt, onPreviewClose: onInitialPreviewClose, prefixCls = 'rc-image', @@ -69,11 +70,13 @@ const ImageInternal: CompoundedComponent = ({ }) => { const isCustomPlaceholder = placeholder && placeholder !== true; const { + src: previewSrc, visible: previewVisible = undefined, onVisibleChange: onPreviewVisibleChange = onInitialPreviewClose, getContainer: getPreviewContainer = undefined, mask: previewMask, }: ImagePreviewType = typeof preview === 'object' ? preview : {}; + const src = previewSrc ?? imgSrc; const isControlled = previewVisible !== undefined; const [isShowPreview, setShowPreview] = useMergedState(!!previewVisible, { value: previewVisible, @@ -205,7 +208,7 @@ const ImageInternal: CompoundedComponent = ({ ? { src: fallback, } - : { onLoad, onError, src })} + : { onLoad, onError, src: imgSrc })} /> {status === 'loading' && ( diff --git a/tests/preview.test.tsx b/tests/preview.test.tsx index 05e1ac69..58c05ca5 100644 --- a/tests/preview.test.tsx +++ b/tests/preview.test.tsx @@ -156,7 +156,7 @@ describe('Preview', () => { act(() => { const wheelEvent = new Event('wheel'); - wheelEvent.deltaY = -50; + (wheelEvent as any).deltaY = -50; global.dispatchEvent(wheelEvent); jest.runAllTimers(); wrapper.update(); @@ -167,7 +167,7 @@ describe('Preview', () => { act(() => { const wheelEvent = new Event('wheel'); - wheelEvent.deltaY = 50; + (wheelEvent as any).deltaY = 50; global.dispatchEvent(wheelEvent); jest.runAllTimers(); wrapper.update(); @@ -425,4 +425,25 @@ describe('Preview', () => { expect(wrapper.find('.rc-image-mask').text()).toEqual('Bamboo Is Light'); }); + + it('previewSrc', () => { + const src = + 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/auto-orient,1/resize,p_10/quality,q_10'; + const previewSrc = + 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'; + const wrapper = mount(); + + expect(wrapper.find('.rc-image-img').prop('src')).toBe(src); + + expect(wrapper.find('.rc-image-preview').get(0)).toBeFalsy(); + + act(() => { + wrapper.find('.rc-image').simulate('click'); + jest.runAllTimers(); + wrapper.update(); + }); + + expect(wrapper.find('.rc-image-preview').get(0)).toBeTruthy(); + expect(wrapper.find('.rc-image-preview-img').prop('src')).toBe(previewSrc); + }); });