feat(Image): preview-src prop

react-component · Dec 30, 2020 · 24831c6 · 24831c6
1 parent 38d4a27
commit 24831c6
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 10 deletions.
diff --git a/examples/thumbnail.tsx b/examples/thumbnail.tsx
@@ -7,8 +7,10 @@ export default function Thumbnail() {
     <div>
       <Image
         src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/auto-orient,1/resize,p_10/quality,q_10"
-        previewSrc="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
-        width={400}
+        preview={{
+          src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+        }}
+        width={200}
       />
 
       <br />
@@ -17,14 +19,19 @@ export default function Thumbnail() {
         <Image
           key={1}
           src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/auto-orient,1/resize,p_10/quality,q_10"
-          previewSrc="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
-          width={400}
+          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"
-          previewSrc="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/auto-orient,1/contrast,-100"
-          width={400}
+          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;
@@ -27,7 +28,6 @@ export interface ImageProps
   placeholder?: React.ReactNode;
   fallback?: string;
   preview?: boolean | ImagePreviewType;
-  previewSrc?: string;
   /**
    * @deprecated since version 3.2.1
    */
@@ -53,7 +53,6 @@ const ImageInternal: CompoundedComponent<ImageProps> = ({
   height,
   style,
   preview = true,
-  previewSrc,
   className,
   onClick,
   wrapperClassName,
@@ -69,7 +68,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = ({
   useMap,
   ...otherProps
 }) => {
-  const src = previewSrc ?? imgSrc;
+  const src = (preview as ImagePreviewType)?.src ?? imgSrc;
   const isCustomPlaceholder = placeholder && placeholder !== true;
   const {
     visible: previewVisible = undefined,

diff --git a/tests/preview.test.tsx b/tests/preview.test.tsx
@@ -431,7 +431,7 @@ describe('Preview', () => {
       '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} previewSrc={previewSrc} />);
+    const wrapper = mount(<Image src={src} preview={{ src: previewSrc }} />);
 
     expect(wrapper.find('.rc-image-img').prop('src')).toBe(src);