From aeaa01ca0c96d618a9ccb4e50d855d923c31a631 Mon Sep 17 00:00:00 2001
From: wangcch <wangcch.cc@gmail.com>
Date: Wed, 30 Dec 2020 17:04:08 +0800
Subject: [PATCH] feat(Image): preview-src prop

---
 examples/thumbnail.tsx | 39 +++++++++++++++++++++++++++++++++++++++
 src/Image.tsx          |  7 +++++--
 tests/preview.test.tsx | 25 +++++++++++++++++++++++--
 tsconfig.json          | 11 -----------
 4 files changed, 67 insertions(+), 15 deletions(-)
 create mode 100644 examples/thumbnail.tsx
 delete mode 100644 tsconfig.json

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 (
+    <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
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<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
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(<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);
+  });
 });
diff --git a/tsconfig.json b/tsconfig.json
deleted file mode 100644
index b6f727e2..00000000
--- a/tsconfig.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "esnext",
-    "moduleResolution": "node",
-    "baseUrl": "./",
-    "jsx": "preserve",
-    "declaration": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true
-  }
-}