feat: display preview-src after loading

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

Hide file tree

Showing 5 changed files with 159 additions and 9 deletions.
diff --git a/src/Image.tsx b/src/Image.tsx
@@ -39,7 +39,7 @@ interface CompoundedComponent<P> extends React.FC<P> {
   PreviewGroup: typeof PreviewGroup;
 }
 
-type ImageStatus = 'normal' | 'error' | 'loading';
+export type ImageStatus = 'normal' | 'error' | 'loading';
 
 const ImageInternal: CompoundedComponent<ImageProps> = ({
   src: imgSrc,
@@ -77,6 +77,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = ({
     mask: previewMask,
   }: ImagePreviewType = typeof preview === 'object' ? preview : {};
   const src = previewSrc ?? imgSrc;
+  const thumbnail = previewSrc ? imgSrc : undefined;
   const isControlled = previewVisible !== undefined;
   const [isShowPreview, setShowPreview] = useMergedState(!!previewVisible, {
     value: previewVisible,
@@ -153,14 +154,13 @@ const ImageInternal: CompoundedComponent<ImageProps> = ({
       return () => {};
     }
 
-    const unRegister = registerImage(currentId, src);
-
+    const unRegister = registerImage(currentId, src, thumbnail);
     if (!canPreview) {
       unRegister();
     }
 
     return unRegister;
-  }, [src, canPreview]);
+  }, [thumbnail, src, canPreview]);
 
   const wrapperClass = cn(prefixCls, wrapperClassName, {
     [`${prefixCls}-error`]: isError,
@@ -228,6 +228,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = ({
           onClose={onPreviewClose}
           mousePosition={mousePosition}
           src={mergedSrc}
+          thumbnail={thumbnail}
           alt={alt}
           getContainer={getPreviewContainer}
         />

diff --git a/src/Preview.tsx b/src/Preview.tsx
@@ -14,13 +14,16 @@ import { warning } from 'rc-util/lib/warning';
 import useFrameSetState from './hooks/useFrameSetState';
 import getFixScaleEleTransPosition from './getFixScaleEleTransPosition';
 import { context } from './PreviewGroup';
+import { ImageStatus } from './Image';
 
 const { useState, useEffect } = React;
 
 interface PreviewProps extends Omit<IDialogPropTypes, 'onClose'> {
   onClose?: (e: React.SyntheticEvent<Element>) => void;
   src?: string;
   alt?: string;
+  /** thumbnail src value */
+  thumbnail?: string;
 }
 
 const initialPosition = {
@@ -29,7 +32,16 @@ const initialPosition = {
 };
 
 const Preview: React.FC<PreviewProps> = props => {
-  const { prefixCls, src, alt, onClose, afterClose, visible, ...restProps } = props;
+  const {
+    prefixCls,
+    src,
+    alt,
+    thumbnail: originalThumbnail,
+    onClose,
+    afterClose,
+    visible,
+    ...restProps
+  } = props;
   const [scale, setScale] = useState(1);
   const [rotate, setRotate] = useState(0);
   const [position, setPosition] = useFrameSetState<{
@@ -48,12 +60,38 @@ const Preview: React.FC<PreviewProps> = props => {
     deltaX: 0,
     deltaY: 0,
   });
+  const {
+    previewUrls,
+    thumbnailUrls,
+    current,
+    isPreviewGroup,
+    setCurrent,
+    setThumbnailUrls,
+  } = React.useContext(context);
+
+  const thumbnail = isPreviewGroup ? thumbnailUrls.get(current)?.url : originalThumbnail;
+  const containThumbnail = !!thumbnail;
+  const initCurThumbnailLoadState =
+    containThumbnail && (isPreviewGroup ? thumbnailUrls?.get(current)?.done : false);
+  const [fakeImgStatus, setFakeImgStatus] = React.useState<ImageStatus>(
+    containThumbnail && !initCurThumbnailLoadState ? 'loading' : 'normal',
+  );
+
+  const combinationSrc = (() => {
+    if (fakeImgStatus !== 'normal') {
+      return thumbnail;
+    }
+    if (isPreviewGroup) {
+      return previewUrls.get(current);
+    }
+
+    return src;
+  })();
+
   const [isMoving, setMoving] = React.useState(false);
-  const { previewUrls, current, isPreviewGroup, setCurrent } = React.useContext(context);
   const previewGroupCount = previewUrls.size;
   const previewUrlsKeys = Array.from(previewUrls.keys());
   const currentPreviewIndex = previewUrlsKeys.indexOf(current);
-  const combinationSrc = isPreviewGroup ? previewUrls.get(current) : src;
   const showLeftOrRightSwitches = isPreviewGroup && previewGroupCount > 1;
   const [lastWheelZoomDirection, setLastWheelZoomDirection] = React.useState({ wheelDirection: 0 });
 
@@ -184,6 +222,20 @@ const Preview: React.FC<PreviewProps> = props => {
     setLastWheelZoomDirection({ wheelDirection });
   };
 
+  const onFakeLoad: React.ReactEventHandler<HTMLImageElement> = () => {
+    setFakeImgStatus('normal');
+
+    if (isPreviewGroup && containThumbnail) {
+      setThumbnailUrls(oldThumbnailUrls => {
+        const url = oldThumbnailUrls.get(current)?.url;
+        return new Map(oldThumbnailUrls).set(current, { url, done: true });
+      });
+    }
+  };
+  const onFakeError: React.ReactEventHandler<HTMLImageElement> = () => {
+    setFakeImgStatus('error');
+  };
+
   useEffect(() => {
     const { wheelDirection } = lastWheelZoomDirection;
     if (wheelDirection > 0) {
@@ -227,6 +279,12 @@ const Preview: React.FC<PreviewProps> = props => {
     };
   }, [visible, isMoving]);
 
+  useEffect(() => {
+    if (isPreviewGroup && thumbnail && !initCurThumbnailLoadState) {
+      setFakeImgStatus('loading');
+    }
+  }, [initCurThumbnailLoadState, thumbnail, isPreviewGroup]);
+
   return (
     <Dialog
       {...restProps}
@@ -269,6 +327,15 @@ const Preview: React.FC<PreviewProps> = props => {
             transform: `scale3d(${scale}, ${scale}, 1) rotate(${rotate}deg)`,
           }}
         />
+        {containThumbnail && (
+          <img
+            className={`${prefixCls}-faker-img`}
+            src={src}
+            onLoad={onFakeLoad}
+            onError={onFakeError}
+            style={{ display: 'none' }}
+          />
+        )}
       </div>
       {showLeftOrRightSwitches && (
         <div

diff --git a/src/PreviewGroup.tsx b/src/PreviewGroup.tsx
@@ -10,11 +10,13 @@ export interface GroupConsumerValue extends GroupConsumerProps {
   isPreviewGroup?: boolean;
   previewUrls: Map<number, string>;
   setPreviewUrls: React.Dispatch<React.SetStateAction<Map<number, string>>>;
+  thumbnailUrls?: Map<number, { url: string; done: boolean }>;
+  setThumbnailUrls?: React.Dispatch<React.SetStateAction<Map<number, { url: string; done: boolean }>>>;
   current: number;
   setCurrent: React.Dispatch<React.SetStateAction<number>>;
   setShowPreview: React.Dispatch<React.SetStateAction<boolean>>;
   setMousePosition: React.Dispatch<React.SetStateAction<null | { x: number; y: number }>>;
-  registerImage: (id: number, url: string) => () => void;
+  registerImage: (id: number, url: string, thumbnail?: string) => () => void;
 }
 
 /* istanbul ignore next */
@@ -35,15 +37,24 @@ const Group: React.FC<GroupConsumerProps> = ({
   children,
 }) => {
   const [previewUrls, setPreviewUrls] = useState<Map<number, string>>(new Map());
+  const [thumbnailUrls, setThumbnailUrls] = useState<Map<number, { url: string; done: boolean }>>(
+    new Map(),
+  );
   const [current, setCurrent] = useState<number>();
   const [isShowPreview, setShowPreview] = useState(false);
   const [mousePosition, setMousePosition] = useState<null | { x: number; y: number }>(null);
 
-  const registerImage = (id: number, url: string) => {
+  const registerImage = (id: number, url: string, thumbnail?: string) => {
     setPreviewUrls(oldPreviewUrls => {
       return new Map(oldPreviewUrls).set(id, url);
     });
 
+    if (thumbnail) {
+      setThumbnailUrls(oldThumbnailUrls => {
+        return new Map(oldThumbnailUrls).set(id, { url: thumbnail, done: false });
+      });
+    }
+
     return () => {
       setPreviewUrls(oldPreviewUrls => {
         const clonePreviewUrls = new Map(oldPreviewUrls);
@@ -65,6 +76,8 @@ const Group: React.FC<GroupConsumerProps> = ({
         isPreviewGroup: true,
         previewUrls,
         setPreviewUrls,
+        thumbnailUrls,
+        setThumbnailUrls,
         current,
         setCurrent,
         setShowPreview,
@@ -80,6 +93,7 @@ const Group: React.FC<GroupConsumerProps> = ({
         onClose={onPreviewClose}
         mousePosition={mousePosition}
         src={previewUrls.get(current)}
+        thumbnail={thumbnailUrls.get(current)?.url}
       />
     </Provider>
   );

diff --git a/tests/preview.test.tsx b/tests/preview.test.tsx
@@ -444,6 +444,21 @@ describe('Preview', () => {
     });
 
     expect(wrapper.find('.rc-image-preview').get(0)).toBeTruthy();
+    expect(wrapper.find('.rc-image-preview-img').prop('src')).toBe(src);
+    expect(wrapper.find('.rc-image-preview-faker-img').prop('src')).toBe(previewSrc);
+
+    act(() => {
+      wrapper.find('.rc-image-preview-faker-img').simulate('load');
+      jest.runAllTimers();
+      wrapper.update();
+    });
     expect(wrapper.find('.rc-image-preview-img').prop('src')).toBe(previewSrc);
+
+    act(() => {
+      wrapper.find('.rc-image-preview-faker-img').simulate('error');
+      jest.runAllTimers();
+      wrapper.update();
+    });
+    expect(wrapper.find('.rc-image-preview-img').prop('src')).toBe(src);
   });
 });
diff --git a/tests/previewGroup.test.tsx b/tests/previewGroup.test.tsx
@@ -97,4 +97,57 @@ describe('Preview', () => {
       wrapper.find('.rc-image-preview .rc-image-preview-switch-left-disabled').get(0),
     ).toBeTruthy();
   });
+
+  it('previewSrc', () => {
+    const src1 = 'src1-thumbnail';
+    const src2 = 'src2-thumbnail';
+    const previewSrc1 = 'src1';
+    const previewSrc2 = 'src2';
+
+    const wrapper = mount(
+      <Image.PreviewGroup>
+        <Image src={src1} preview={{ src: previewSrc1 }} />
+        <Image src={src2} preview={{ src: previewSrc2 }} />
+      </Image.PreviewGroup>,
+    );
+
+    act(() => {
+      wrapper
+        .find('.rc-image')
+        .at(0)
+        .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(src1);
+    expect(wrapper.find('.rc-image-preview-faker-img').prop('src')).toBe(previewSrc1);
+
+    act(() => {
+      wrapper.find('.rc-image-preview-faker-img').simulate('load');
+      jest.runAllTimers();
+      wrapper.update();
+    });
+
+    expect(wrapper.find('.rc-image-preview-img').prop('src')).toBe(previewSrc1);
+
+    act(() => {
+      wrapper.find('.rc-image-preview .rc-image-preview-switch-right').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(src2);
+    expect(wrapper.find('.rc-image-preview-faker-img').prop('src')).toBe(previewSrc2);
+
+    act(() => {
+      wrapper.find('.rc-image-preview-faker-img').simulate('load');
+      jest.runAllTimers();
+      wrapper.update();
+    });
+
+    expect(wrapper.find('.rc-image-preview-img').prop('src')).toBe(previewSrc2);
+  });
 });