Skip to content

Commit

Permalink
feat(Image): preview-src prop
Browse files Browse the repository at this point in the history
  • Loading branch information
wangcch committed Dec 30, 2020
1 parent 9383a49 commit d230eac
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 4 deletions.
39 changes: 39 additions & 0 deletions examples/thumbnail.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
7 changes: 5 additions & 2 deletions src/Image.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -205,7 +208,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = ({
? {
src: fallback,
}
: { onLoad, onError, src })}
: { onLoad, onError, src: imgSrc })}
/>

{status === 'loading' && (
Expand Down
25 changes: 23 additions & 2 deletions tests/preview.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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();
Expand Down Expand Up @@ -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);
});
});

0 comments on commit d230eac

Please sign in to comment.