feat(Image): preview-src prop (#56)

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 (
+ <div>
+ <Image
+ src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/auto-orient,1/resize,p_10/quality,q_10"
+ preview={{
+ src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+ }}
+ width={200}
+ />
+
+ <br />
+ <h1>PreviewGroup</h1>
+ <Image.PreviewGroup>
+ <Image
+ key={1}
+ src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/auto-orient,1/resize,p_10/quality,q_10"
+ preview={{
+ src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+ }}
+ width={200}
+ />
+ <Image
+ key={2}
+ src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/auto-orient,1/resize,p_10/quality,q_10/contrast,-100"
+ preview={{
+ src:
+ 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/auto-orient,1/contrast,-100',
+ }}
+ width={200}
+ />
+ </Image.PreviewGroup>
+ </div>
+ );
+}

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<P> extends React.FC<P> {
 type ImageStatus = 'normal' | 'error' | 'loading';
 
 const ImageInternal: CompoundedComponent<ImageProps> = ({
- src,
+ src: imgSrc,
  alt,
  onPreviewClose: onInitialPreviewClose,
  prefixCls = 'rc-image',
@@ -69,11 +70,13 @@ const ImageInternal: CompoundedComponent<ImageProps> = ({
 }) => {
  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<ImageProps> = ({
  ? {
  src: fallback,
  }
- : { onLoad, onError, src })}
+ : { onLoad, onError, src: imgSrc })}
  />
 
  {status === 'loading' && (

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(<Image src={src} preview={{ src: previewSrc }} />);
+
+ 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);
+ });
 });