feat(Image): preview-src prop

react-component · Dec 30, 2020 · d230eac · d230eac
1 parent 9383a49
commit d230eac
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 4 deletions.
diff --git a/examples/thumbnail.tsx 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 (
+    <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>
+  );
+}
diff --git 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<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' && (

diff --git 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(<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);
+  });
 });