) => void;
72 | }
73 |
74 | interface CompoundedComponent extends React.FC
{
75 | PreviewGroup: typeof PreviewGroup;
76 | }
77 |
78 | const ImageInternal: CompoundedComponent = props => {
79 | const {
80 | // Misc
81 | prefixCls = 'rc-image',
82 | previewPrefixCls = `${prefixCls}-preview`,
83 |
84 | // Style
85 | rootClassName,
86 | className,
87 | style,
88 |
89 | classNames = {},
90 | styles = {},
91 |
92 | width,
93 | height,
94 |
95 | // Image
96 | src: imgSrc,
97 | alt,
98 | placeholder,
99 | fallback,
100 |
101 | // Preview
102 | preview = true,
103 |
104 | // Events
105 | onClick,
106 | onError,
107 | ...otherProps
108 | } = props;
109 |
110 | const groupContext = useContext(PreviewGroupContext);
111 |
112 | // ========================== Preview ===========================
113 | const canPreview = !!preview;
114 |
115 | const {
116 | src: previewSrc,
117 | open: previewOpen,
118 | onOpenChange: onPreviewOpenChange,
119 | cover,
120 | rootClassName: previewRootClassName,
121 | ...restProps
122 | }: PreviewConfig = preview && typeof preview === 'object' ? preview : {};
123 |
124 | // ============================ Open ============================
125 | const [isShowPreview, setShowPreview] = useMergedState(!!previewOpen, {
126 | value: previewOpen,
127 | });
128 |
129 | const [mousePosition, setMousePosition] = useState(null);
130 |
131 | const triggerPreviewOpen = (nextOpen: boolean) => {
132 | setShowPreview(nextOpen);
133 | onPreviewOpenChange?.(nextOpen);
134 | };
135 |
136 | const onPreviewClose = () => {
137 | triggerPreviewOpen(false);
138 | };
139 |
140 | // ========================= ImageProps =========================
141 | const isCustomPlaceholder = placeholder && placeholder !== true;
142 |
143 | const src = previewSrc ?? imgSrc;
144 | const [getImgRef, srcAndOnload, status] = useStatus({
145 | src: imgSrc,
146 | isCustomPlaceholder,
147 | fallback,
148 | });
149 |
150 | const imgCommonProps = useMemo(
151 | () => {
152 | const obj: ImageElementProps = {};
153 | COMMON_PROPS.forEach((prop: any) => {
154 | if (props[prop] !== undefined) {
155 | obj[prop] = props[prop];
156 | }
157 | });
158 |
159 | return obj;
160 | },
161 | COMMON_PROPS.map(prop => props[prop]),
162 | );
163 |
164 | // ========================== Register ==========================
165 | const registerData: ImageElementProps = useMemo(
166 | () => ({
167 | ...imgCommonProps,
168 | src,
169 | }),
170 | [src, imgCommonProps],
171 | );
172 |
173 | const imageId = useRegisterImage(canPreview, registerData);
174 |
175 | // ========================== Preview ===========================
176 | const onPreview: React.MouseEventHandler = e => {
177 | const rect = (e.target as HTMLDivElement).getBoundingClientRect();
178 | const left = rect.x + rect.width / 2;
179 | const top = rect.y + rect.height / 2;
180 |
181 | if (groupContext) {
182 | groupContext.onPreview(imageId, src, left, top);
183 | } else {
184 | setMousePosition({
185 | x: left,
186 | y: top,
187 | });
188 | triggerPreviewOpen(true);
189 | }
190 |
191 | onClick?.(e);
192 | };
193 |
194 | // =========================== Render ===========================
195 | return (
196 | <>
197 |
209 |
![]()
230 |
231 | {status === 'loading' && (
232 |
233 | {placeholder}
234 |
235 | )}
236 |
237 | {/* Preview Click Mask */}
238 | {cover !== false && canPreview && (
239 |
246 | {cover}
247 |
248 | )}
249 |
89 | {countRender ? countRender(current + 1, count) : {`${current + 1} / ${count}`}}
90 |
91 | );
92 |
93 | // >>>>> Actions
94 | const actionCls = `${prefixCls}-actions-action`;
95 |
96 | const renderOperation = ({ type, disabled, onClick, icon }: RenderOperationParams) => {
97 | return (
98 |
105 | {icon}
106 |
107 | );
108 | };
109 |
110 | const switchPrevNode = showSwitch
111 | ? renderOperation({
112 | icon: prev ?? left,
113 | onClick: () => onActive(-1),
114 | type: 'prev',
115 | disabled: current === 0,
116 | })
117 | : undefined;
118 |
119 | const switchNextNode = showSwitch
120 | ? renderOperation({
121 | icon: next ?? right,
122 | onClick: () => onActive(1),
123 | type: 'next',
124 | disabled: current === count - 1,
125 | })
126 | : undefined;
127 |
128 | const flipYNode = renderOperation({
129 | icon: flipY,
130 | onClick: onFlipY,
131 | type: 'flipY',
132 | });
133 |
134 | const flipXNode = renderOperation({
135 | icon: flipX,
136 | onClick: onFlipX,
137 | type: 'flipX',
138 | });
139 |
140 | const rotateLeftNode = renderOperation({
141 | icon: rotateLeft,
142 | onClick: onRotateLeft,
143 | type: 'rotateLeft',
144 | });
145 |
146 | const rotateRightNode = renderOperation({
147 | icon: rotateRight,
148 | onClick: onRotateRight,
149 | type: 'rotateRight',
150 | });
151 |
152 | const zoomOutNode = renderOperation({
153 | icon: zoomOut,
154 | onClick: onZoomOut,
155 | type: 'zoomOut',
156 | disabled: scale <= minScale,
157 | });
158 |
159 | const zoomInNode = renderOperation({
160 | icon: zoomIn,
161 | onClick: onZoomIn,
162 | type: 'zoomIn',
163 | disabled: scale === maxScale,
164 | });
165 |
166 | const actionsNode = (
167 |
168 | {flipYNode}
169 | {flipXNode}
170 | {rotateLeftNode}
171 | {rotateRightNode}
172 | {zoomOutNode}
173 | {zoomInNode}
174 |
175 | );
176 |
177 | // >>>>> Render
178 | return (
179 |
180 | {progressNode}
181 | {actionsRender
182 | ? actionsRender(actionsNode, {
183 | icons: {
184 | prevIcon: switchPrevNode,
185 | nextIcon: switchNextNode,
186 | flipYIcon: flipYNode,
187 | flipXIcon: flipXNode,
188 | rotateLeftIcon: rotateLeftNode,
189 | rotateRightIcon: rotateRightNode,
190 | zoomOutIcon: zoomOutNode,
191 | zoomInIcon: zoomInNode,
192 | },
193 | actions: {
194 | onActive,
195 | onFlipY,
196 | onFlipX,
197 | onRotateLeft,
198 | onRotateRight,
199 | onZoomOut,
200 | onZoomIn,
201 | onReset,
202 | onClose,
203 | },
204 | transform,
205 | current,
206 | total: count,
207 | image,
208 | })
209 | : actionsNode}
210 |
211 | );
212 | }
213 |
--------------------------------------------------------------------------------
/src/Preview/PrevNext.tsx:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import * as React from 'react';
3 | import type { OperationIcons } from '.';
4 |
5 | export interface PrevNextProps {
6 | prefixCls: string;
7 | onActive: (offset: number) => void;
8 | current: number;
9 | count: number;
10 | icons: OperationIcons;
11 | }
12 |
13 | export default function PrevNext(props: PrevNextProps) {
14 | const {
15 | prefixCls,
16 | onActive,
17 | current,
18 | count,
19 | icons: { left, right, prev, next },
20 | } = props;
21 |
22 | const switchCls = `${prefixCls}-switch`;
23 |
24 | return (
25 | <>
26 | onActive(-1)}
31 | >
32 | {prev ?? left}
33 |
34 | onActive(1)}
39 | >
40 | {next ?? right}
41 |
42 |
43 | );
44 | }
45 |
--------------------------------------------------------------------------------
/src/Preview/index.tsx:
--------------------------------------------------------------------------------
1 | import CSSMotion from '@rc-component/motion';
2 | import Portal, { type PortalProps } from '@rc-component/portal';
3 | import { useEvent } from '@rc-component/util';
4 | import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
5 | import KeyCode from '@rc-component/util/lib/KeyCode';
6 | import classnames from 'classnames';
7 | import React, { useContext, useEffect, useRef, useState } from 'react';
8 | import { PreviewGroupContext } from '../context';
9 | import type { TransformAction, TransformType } from '../hooks/useImageTransform';
10 | import useImageTransform from '../hooks/useImageTransform';
11 | import useMouseEvent from '../hooks/useMouseEvent';
12 | import useStatus from '../hooks/useStatus';
13 | import useTouchEvent from '../hooks/useTouchEvent';
14 | import type { ImgInfo } from '../Image';
15 | import { BASE_SCALE_RATIO } from '../previewConfig';
16 | import CloseBtn from './CloseBtn';
17 | import Footer, { type FooterSemanticName } from './Footer';
18 | import PrevNext from './PrevNext';
19 |
20 | // Note: if you want to add `action`,
21 | // pls contact @zombieJ or @thinkasany first.
22 | export type PreviewSemanticName = 'root' | 'mask' | 'body' | FooterSemanticName;
23 |
24 | export interface OperationIcons {
25 | rotateLeft?: React.ReactNode;
26 | rotateRight?: React.ReactNode;
27 | zoomIn?: React.ReactNode;
28 | zoomOut?: React.ReactNode;
29 | close?: React.ReactNode;
30 | prev?: React.ReactNode;
31 | next?: React.ReactNode;
32 | /** @deprecated Please use `prev` instead */
33 | left?: React.ReactNode;
34 | /** @deprecated Please use `next` instead */
35 | right?: React.ReactNode;
36 | flipX?: React.ReactNode;
37 | flipY?: React.ReactNode;
38 | }
39 |
40 | export interface Actions {
41 | onActive: (offset: number) => void;
42 | onFlipY: () => void;
43 | onFlipX: () => void;
44 | onRotateLeft: () => void;
45 | onRotateRight: () => void;
46 | onZoomOut: () => void;
47 | onZoomIn: () => void;
48 | onClose: () => void;
49 | onReset: () => void;
50 | }
51 |
52 | export type ToolbarRenderInfoType = {
53 | icons: {
54 | prevIcon?: React.ReactNode;
55 | nextIcon?: React.ReactNode;
56 | flipYIcon: React.ReactNode;
57 | flipXIcon: React.ReactNode;
58 | rotateLeftIcon: React.ReactNode;
59 | rotateRightIcon: React.ReactNode;
60 | zoomOutIcon: React.ReactNode;
61 | zoomInIcon: React.ReactNode;
62 | };
63 | actions: Actions;
64 | transform: TransformType;
65 | current: number;
66 | total: number;
67 | image: ImgInfo;
68 | };
69 |
70 | export interface InternalPreviewConfig {
71 | // Semantic
72 | /** Better to use `classNames.root` instead */
73 | rootClassName?: string;
74 |
75 | // Image
76 | src?: string;
77 | alt?: string;
78 |
79 | // Scale
80 | scaleStep?: number;
81 | minScale?: number;
82 | maxScale?: number;
83 |
84 | // Display
85 | motionName?: string;
86 | open?: boolean;
87 | getContainer?: PortalProps['getContainer'];
88 | zIndex?: number;
89 | afterOpenChange?: (open: boolean) => void;
90 |
91 | // Operation
92 | movable?: boolean;
93 | icons?: OperationIcons;
94 | closeIcon?: React.ReactNode;
95 |
96 | onTransform?: (info: { transform: TransformType; action: TransformAction }) => void;
97 |
98 | // Render
99 | countRender?: (current: number, total: number) => React.ReactNode;
100 | imageRender?: (
101 | originalNode: React.ReactElement,
102 | info: { transform: TransformType; current?: number; image: ImgInfo },
103 | ) => React.ReactNode;
104 | actionsRender?: (
105 | originalNode: React.ReactElement,
106 | info: ToolbarRenderInfoType,
107 | ) => React.ReactNode;
108 | }
109 |
110 | export interface PreviewProps extends InternalPreviewConfig {
111 | // Misc
112 | prefixCls: string;
113 |
114 | classNames?: Partial>;
115 | styles?: Partial>;
116 |
117 | // Origin image Info
118 | imageInfo?: {
119 | width: number | string;
120 | height: number | string;
121 | };
122 | fallback?: string;
123 |
124 | // Preview image
125 | imgCommonProps?: React.ImgHTMLAttributes;
126 | width?: string | number;
127 | height?: string | number;
128 |
129 | // Pagination
130 | current?: number;
131 | count?: number;
132 | onChange?: (current: number, prev: number) => void;
133 |
134 | // Events
135 | onClose?: () => void;
136 |
137 | // Display
138 | mousePosition: null | { x: number; y: number };
139 | }
140 |
141 | interface PreviewImageProps extends React.ImgHTMLAttributes {
142 | fallback?: string;
143 | imgRef: React.MutableRefObject;
144 | }
145 |
146 | const PreviewImage: React.FC = ({ fallback, src, imgRef, ...props }) => {
147 | const [getImgRef, srcAndOnload] = useStatus({
148 | src,
149 | fallback,
150 | });
151 |
152 | return (
153 | ![]()
{
155 | imgRef.current = ref;
156 | getImgRef(ref);
157 | }}
158 | {...props}
159 | {...srcAndOnload}
160 | />
161 | );
162 | };
163 |
164 | const Preview: React.FC = props => {
165 | const {
166 | prefixCls,
167 | rootClassName,
168 | src,
169 | alt,
170 | imageInfo,
171 | fallback,
172 | movable = true,
173 | onClose,
174 | open,
175 | afterOpenChange,
176 | icons = {},
177 | closeIcon,
178 | getContainer,
179 | current = 0,
180 | count = 1,
181 | countRender,
182 | scaleStep = 0.5,
183 | minScale = 1,
184 | maxScale = 50,
185 | motionName = 'fade',
186 | imageRender,
187 | imgCommonProps,
188 | actionsRender,
189 | onTransform,
190 | onChange,
191 | classNames = {},
192 | styles = {},
193 | mousePosition,
194 | zIndex,
195 | } = props;
196 |
197 | const imgRef = useRef();
198 | const groupContext = useContext(PreviewGroupContext);
199 | const showLeftOrRightSwitches = groupContext && count > 1;
200 | const showOperationsProgress = groupContext && count >= 1;
201 |
202 | // ======================== Transform =========================
203 | const [enableTransition, setEnableTransition] = useState(true);
204 | const { transform, resetTransform, updateTransform, dispatchZoomChange } = useImageTransform(
205 | imgRef,
206 | minScale,
207 | maxScale,
208 | onTransform,
209 | );
210 | const { isMoving, onMouseDown, onWheel } = useMouseEvent(
211 | imgRef,
212 | movable,
213 | open,
214 | scaleStep,
215 | transform,
216 | updateTransform,
217 | dispatchZoomChange,
218 | );
219 | const { isTouching, onTouchStart, onTouchMove, onTouchEnd } = useTouchEvent(
220 | imgRef,
221 | movable,
222 | open,
223 | minScale,
224 | transform,
225 | updateTransform,
226 | dispatchZoomChange,
227 | );
228 | const { rotate, scale } = transform;
229 |
230 | useEffect(() => {
231 | if (!enableTransition) {
232 | setEnableTransition(true);
233 | }
234 | }, [enableTransition]);
235 |
236 | useEffect(() => {
237 | if (!open) {
238 | resetTransform('close');
239 | }
240 | }, [open]);
241 |
242 | // ========================== Image ===========================
243 | const onDoubleClick = (event: React.MouseEvent) => {
244 | if (open) {
245 | if (scale !== 1) {
246 | updateTransform({ x: 0, y: 0, scale: 1 }, 'doubleClick');
247 | } else {
248 | dispatchZoomChange(
249 | BASE_SCALE_RATIO + scaleStep,
250 | 'doubleClick',
251 | event.clientX,
252 | event.clientY,
253 | );
254 | }
255 | }
256 | };
257 |
258 | const imgNode = (
259 |
282 | );
283 |
284 | const image = {
285 | url: src,
286 | alt,
287 | ...imageInfo,
288 | };
289 |
290 | // ======================== Operation =========================
291 | // >>>>> Actions
292 | const onZoomIn = () => {
293 | dispatchZoomChange(BASE_SCALE_RATIO + scaleStep, 'zoomIn');
294 | };
295 |
296 | const onZoomOut = () => {
297 | dispatchZoomChange(BASE_SCALE_RATIO / (BASE_SCALE_RATIO + scaleStep), 'zoomOut');
298 | };
299 |
300 | const onRotateRight = () => {
301 | updateTransform({ rotate: rotate + 90 }, 'rotateRight');
302 | };
303 |
304 | const onRotateLeft = () => {
305 | updateTransform({ rotate: rotate - 90 }, 'rotateLeft');
306 | };
307 |
308 | const onFlipX = () => {
309 | updateTransform({ flipX: !transform.flipX }, 'flipX');
310 | };
311 |
312 | const onFlipY = () => {
313 | updateTransform({ flipY: !transform.flipY }, 'flipY');
314 | };
315 |
316 | const onReset = () => {
317 | resetTransform('reset');
318 | };
319 |
320 | const onActive = (offset: number) => {
321 | const nextCurrent = current + offset;
322 |
323 | if (nextCurrent >= 0 && nextCurrent <= count - 1) {
324 | setEnableTransition(false);
325 | resetTransform(offset < 0 ? 'prev' : 'next');
326 | onChange?.(nextCurrent, current);
327 | }
328 | };
329 |
330 | // >>>>> Effect: Keyboard
331 | const onKeyDown = useEvent((event: KeyboardEvent) => {
332 | if (open) {
333 | const { keyCode } = event;
334 |
335 | if (keyCode === KeyCode.ESC) {
336 | onClose?.();
337 | }
338 |
339 | if (showLeftOrRightSwitches) {
340 | if (keyCode === KeyCode.LEFT) {
341 | onActive(-1);
342 | } else if (keyCode === KeyCode.RIGHT) {
343 | onActive(1);
344 | }
345 | }
346 | }
347 | });
348 |
349 | useEffect(() => {
350 | if (open) {
351 | window.addEventListener('keydown', onKeyDown);
352 |
353 | return () => {
354 | window.removeEventListener('keydown', onKeyDown);
355 | };
356 | }
357 | }, [open]);
358 |
359 | // ======================= Lock Scroll ========================
360 | const [lockScroll, setLockScroll] = useState(false);
361 |
362 | React.useEffect(() => {
363 | if (open) {
364 | setLockScroll(true);
365 | }
366 | }, [open]);
367 |
368 | const onVisibleChanged = (nextVisible: boolean) => {
369 | if (!nextVisible) {
370 | setLockScroll(false);
371 | }
372 | afterOpenChange?.(nextVisible);
373 | };
374 |
375 | // ========================== Portal ==========================
376 | const [portalRender, setPortalRender] = useState(false);
377 | useLayoutEffect(() => {
378 | if (open) {
379 | setPortalRender(true);
380 | }
381 | }, [open]);
382 |
383 | // ========================== Render ==========================
384 | const bodyStyle: React.CSSProperties = {
385 | ...styles.body,
386 | };
387 | if (mousePosition) {
388 | bodyStyle.transformOrigin = `${mousePosition.x}px ${mousePosition.y}px`;
389 | }
390 |
391 | return (
392 |
393 |
401 | {({ className: motionClassName, style: motionStyle }) => {
402 | const mergedStyle = {
403 | ...styles.root,
404 | ...motionStyle,
405 | };
406 |
407 | if (zIndex) {
408 | mergedStyle.zIndex = zIndex;
409 | }
410 |
411 | return (
412 |
418 | {/* Mask */}
419 |
424 |
425 | {/* Body */}
426 |
427 | {/* Preview Image */}
428 | {imageRender
429 | ? imageRender(imgNode, {
430 | transform,
431 | image,
432 | ...(groupContext ? { current } : {}),
433 | })
434 | : imgNode}
435 |
436 |
437 | {/* Close Button */}
438 | {closeIcon !== false && closeIcon !== null && (
439 |
444 | )}
445 |
446 | {/* Switch prev or next */}
447 | {showLeftOrRightSwitches && (
448 |
455 | )}
456 |
457 | {/* Footer */}
458 |
488 |
8 |
13 |
16 |
actions.onFlipY()}>
840 | {icons.flipYIcon}
841 |
842 | actions.onFlipX()}>
843 | {icons.flipXIcon}
844 |
845 | actions.onZoomIn()}>
846 | {icons.zoomInIcon}
847 |
848 | actions.onZoomOut()}>
849 | {icons.zoomOutIcon}
850 |
851 | actions.onRotateLeft()}>
852 | {icons.rotateLeftIcon}
853 |
854 | actions.onRotateRight()}>
855 | {icons.rotateRightIcon}
856 |
857 | actions.onReset()}>
858 | reset
859 |
860 |
861 | );
862 | },
863 | }}
864 | />,
865 | );
866 |
867 | fireEvent.click(container.querySelector('.rc-image'));
868 | act(() => {
869 | jest.runAllTimers();
870 | });
871 |
872 | expect(printImage).toHaveBeenCalledWith({
873 | alt: 'alt',
874 | height: 200,
875 | url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
876 | width: 200,
877 | });
878 | // flipY
879 | fireEvent.click(document.getElementById('flipY'));
880 | act(() => {
881 | jest.runAllTimers();
882 | });
883 | fireEvent.click(document.getElementById('flipX'));
884 | act(() => {
885 | jest.runAllTimers();
886 | });
887 | fireEvent.click(document.getElementById('zoomIn'));
888 | act(() => {
889 | jest.runAllTimers();
890 | });
891 | fireEvent.click(document.getElementById('rotateLeft'));
892 | act(() => {
893 | jest.runAllTimers();
894 | });
895 | expect(document.querySelector('.rc-image-preview-img')).toHaveStyle({
896 | transform: 'translate3d(-256px, -192px, 0) scale3d(-1.5, -1.5, 1) rotate(-90deg)',
897 | });
898 |
899 | // reset
900 | fireEvent.click(document.getElementById('reset'));
901 | act(() => {
902 | jest.runAllTimers();
903 | });
904 | expect(document.querySelector('.rc-image-preview-img')).toHaveStyle({
905 | transform: 'translate3d(0px, 0px, 0) scale3d(1, 1, 1) rotate(0deg)',
906 | });
907 | });
908 |
909 | it('switch', () => {
910 | const onChange = jest.fn();
911 | render(
912 | {
928 | return (
929 | <>
930 | {icons.prevIcon}
931 | {icons.nextIcon}
932 | actions.onActive(-1)}>
933 | Prev
934 |
935 | actions.onActive(1)}>
936 | Next
937 |
938 |
939 | );
940 | },
941 | onChange,
942 | }}
943 | />,
944 | );
945 |
946 | // Origin Node
947 | fireEvent.click(document.querySelector('.rc-image-preview-actions-action-prev'));
948 | expect(onChange).toHaveBeenCalledWith(0, 1);
949 | fireEvent.click(document.querySelector('.rc-image-preview-actions-action-next'));
950 | expect(onChange).toHaveBeenCalledWith(2, 1);
951 |
952 | // Customize
953 | onChange.mockReset();
954 | fireEvent.click(document.getElementById('left'));
955 | expect(onChange).toHaveBeenCalledWith(0, 1);
956 |
957 | fireEvent.click(document.getElementById('right'));
958 | expect(onChange).toHaveBeenCalledWith(2, 1);
959 | });
960 | });
961 |
962 | it('onTransform should be triggered when transform change', () => {
963 | const onTransform = jest.fn();
964 | const { container } = render(
965 | ,
969 | );
970 |
971 | fireEvent.click(container.querySelector('.rc-image'));
972 | act(() => {
973 | jest.runAllTimers();
974 | });
975 |
976 | expect(document.querySelector('.rc-image-preview')).toBeTruthy();
977 |
978 | fireEvent.click(document.querySelector('.rc-image-preview-actions-action-flipY'));
979 | act(() => {
980 | jest.runAllTimers();
981 | });
982 |
983 | expect(onTransform).toHaveBeenCalledTimes(1);
984 | expect(onTransform).toHaveBeenCalledWith({
985 | transform: {
986 | flipY: true,
987 | flipX: false,
988 | rotate: 0,
989 | scale: 1,
990 | x: 0,
991 | y: 0,
992 | },
993 | action: 'flipY',
994 | });
995 | });
996 |
997 | it('imageRender', () => {
998 | const { container } = render(
999 | (
1003 |
1008 | ),
1009 | }}
1010 | />,
1011 | );
1012 |
1013 | fireEvent.click(container.querySelector('.rc-image'));
1014 | act(() => {
1015 | jest.runAllTimers();
1016 | });
1017 |
1018 | expect(document.querySelector('video')).toBeTruthy();
1019 | });
1020 |
1021 | it('should be closed when press esc after click portal', () => {
1022 | const onOpenChange = jest.fn();
1023 | const afterOpenChange = jest.fn();
1024 | const { container } = render(
1025 | ,
1032 | );
1033 |
1034 | fireEvent.click(container.querySelector('.rc-image'));
1035 | act(() => {
1036 | jest.runAllTimers();
1037 | });
1038 |
1039 | expect(document.querySelector('.rc-image-preview')).toBeTruthy();
1040 |
1041 | expect(onOpenChange).toHaveBeenCalledWith(true);
1042 | expect(afterOpenChange).toHaveBeenCalledWith(true);
1043 |
1044 | fireEvent.click(document.querySelector('.rc-image-preview-actions'));
1045 |
1046 | fireEvent.keyDown(window, { key: 'Escape', keyCode: 27 });
1047 |
1048 | expect(onOpenChange).toHaveBeenCalledWith(false);
1049 | expect(afterOpenChange).toHaveBeenCalledWith(false);
1050 |
1051 | expect(onOpenChange).toHaveBeenCalledTimes(2);
1052 | expect(afterOpenChange).toHaveBeenCalledTimes(2);
1053 | });
1054 |
1055 | it('not modify preview image size', () => {
1056 | render(
1057 | ,
1065 | );
1066 |
1067 | act(() => {
1068 | jest.runAllTimers();
1069 | });
1070 |
1071 | const previewImg = document.querySelector('.rc-image-preview img');
1072 | expect(previewImg).not.toHaveAttribute('width');
1073 | expect(previewImg).not.toHaveAttribute('height');
1074 | });
1075 | it('support classnames and styles', () => {
1076 | const customClassnames = {
1077 | cover: 'custom-cover',
1078 | popup: {
1079 | mask: 'custom-mask',
1080 | actions: 'custom-actions',
1081 | root: 'custom-root',
1082 | },
1083 | };
1084 | const customStyles = {
1085 | cover: { color: 'red' },
1086 | popup: {
1087 | mask: { color: 'red' },
1088 | actions: { backgroundColor: 'blue' },
1089 | root: { border: '1px solid green' },
1090 | },
1091 | };
1092 | const { baseElement } = render(
1093 | ,
1103 | );
1104 |
1105 | const cover = document.querySelector('.rc-image-cover');
1106 | const mask = document.querySelector('.rc-image-preview-mask');
1107 | const actions = baseElement.querySelector('.rc-image-preview-actions');
1108 | expect(cover).toHaveClass(customClassnames.cover);
1109 | expect(cover).toHaveStyle(customStyles.cover);
1110 | expect(mask).toHaveClass(customClassnames.popup.mask);
1111 | expect(mask).toHaveStyle(customStyles.popup.mask);
1112 | expect(actions).toHaveClass(customClassnames.popup.actions);
1113 | expect(actions).toHaveStyle(customStyles.popup.actions);
1114 | expect(baseElement.querySelector('.rc-image-preview')).toHaveClass(customClassnames.popup.root);
1115 | expect(baseElement.querySelector('.rc-image-preview')).toHaveStyle(customStyles.popup.root);
1116 | });
1117 | });
1118 |
--------------------------------------------------------------------------------
/tests/previewGroup.test.tsx:
--------------------------------------------------------------------------------
1 | import KeyCode from '@rc-component/util/lib/KeyCode';
2 | import { act, fireEvent, render } from '@testing-library/react';
3 | import React from 'react';
4 | import Image from '../src';
5 |
6 | describe('PreviewGroup', () => {
7 | beforeEach(() => {
8 | jest.useFakeTimers();
9 | });
10 |
11 | afterEach(() => {
12 | jest.useRealTimers();
13 | });
14 |
15 | it('onChange should be called', () => {
16 | const onChange = jest.fn();
17 | const onOpenChange = jest.fn();
18 | const afterOpenChange = jest.fn();
19 | const { container } = render(
20 |
21 |
22 |
23 |
24 |
25 | ,
26 | );
27 |
28 | fireEvent.click(container.querySelector('.firstImg'));
29 | act(() => {
30 | jest.runAllTimers();
31 | });
32 | expect(onChange).not.toHaveBeenCalled();
33 | expect(onOpenChange).toHaveBeenCalledWith(true, { current: 0 });
34 | expect(afterOpenChange).toHaveBeenCalledWith(true);
35 |
36 | fireEvent.click(document.querySelector('.rc-image-preview-switch-next'));
37 | act(() => {
38 | jest.runAllTimers();
39 | });
40 | expect(onChange).toHaveBeenCalledWith(1, 0);
41 |
42 | fireEvent.click(document.querySelector('.rc-image-preview-switch-next'));
43 | act(() => {
44 | jest.runAllTimers();
45 | });
46 | expect(onChange).toHaveBeenCalledWith(2, 1);
47 | });
48 |
49 | it('items should works', () => {
50 | const { rerender } = render(
51 |
52 |
53 | ,
54 | );
55 |
56 | fireEvent.click(document.querySelector('.first-img'));
57 |
58 | expect(document.querySelector('.rc-image-preview-img')).toHaveAttribute('src', 'src2');
59 |
60 | rerender(
61 |
62 |
63 | ,
64 | );
65 |
66 | fireEvent.click(document.querySelector('.first-img'));
67 |
68 | expect(document.querySelector('.rc-image-preview-img')).toHaveAttribute('src', 'src3');
69 | });
70 |
71 | it('Mount and UnMount', () => {
72 | const { container, unmount } = render(
73 |
74 |
75 |
76 | ,
77 | );
78 |
79 | fireEvent.click(container.querySelector('.rc-image'));
80 |
81 | act(() => {
82 | jest.runAllTimers();
83 | });
84 | expect(document.querySelector('.rc-image-preview')).toBeTruthy();
85 |
86 | const previewProgressElement = document.querySelector('.rc-image-preview-progress');
87 |
88 | expect(previewProgressElement).toBeTruthy();
89 | expect(previewProgressElement.textContent).toEqual('1 / 2');
90 |
91 | expect(() => {
92 | unmount();
93 | }).not.toThrow();
94 | });
95 |
96 | it('Disable preview', () => {
97 | const { container } = render(
98 |
99 |
100 | ,
101 | );
102 |
103 | fireEvent.click(container.querySelector('.rc-image'));
104 | act(() => {
105 | jest.runAllTimers();
106 | });
107 |
108 | expect(document.querySelector('.rc-image-preview')).toBeFalsy();
109 | });
110 |
111 | it('Preview with Custom Preview Property', () => {
112 | const { container } = render(
113 | `current:${current} / total:${total}`,
116 | }}
117 | >
118 |
119 |
120 |
121 | ,
122 | );
123 |
124 | fireEvent.click(container.querySelector('.rc-image'));
125 | act(() => {
126 | jest.runAllTimers();
127 | });
128 |
129 | const previewProgressElement = document.querySelector('.rc-image-preview-progress');
130 |
131 | expect(previewProgressElement).toBeTruthy();
132 | expect(previewProgressElement.textContent).toEqual('current:1 / total:3');
133 | });
134 |
135 | it('Switch', () => {
136 | const previewProgressElementPath = '.rc-image-preview-progress';
137 | const { container } = render(
138 |
139 |
140 |
141 |
142 | ,
143 | );
144 |
145 | fireEvent.click(container.querySelector('.rc-image'));
146 | act(() => {
147 | jest.runAllTimers();
148 | });
149 |
150 | expect(
151 | document.querySelector('.rc-image-preview-switch-prev.rc-image-preview-switch-disabled'),
152 | ).toBeTruthy();
153 | expect(document.querySelector(previewProgressElementPath).textContent).toEqual('1 / 2');
154 |
155 | fireEvent.click(document.querySelector('.rc-image-preview-switch-next'));
156 | act(() => {
157 | jest.runAllTimers();
158 | });
159 |
160 | expect(
161 | document.querySelector('.rc-image-preview-switch-next.rc-image-preview-switch-disabled'),
162 | ).toBeTruthy();
163 | expect(document.querySelector(previewProgressElementPath).textContent).toEqual('2 / 2');
164 |
165 | fireEvent.click(document.querySelector('.rc-image-preview-switch-prev'));
166 | act(() => {
167 | jest.runAllTimers();
168 | });
169 |
170 | expect(
171 | document.querySelector('.rc-image-preview-switch-prev.rc-image-preview-switch-disabled'),
172 | ).toBeTruthy();
173 |
174 | fireEvent.keyDown(window, { keyCode: KeyCode.RIGHT });
175 | act(() => {
176 | jest.runAllTimers();
177 | });
178 |
179 | expect(
180 | document.querySelector('.rc-image-preview-switch-next.rc-image-preview-switch-disabled'),
181 | ).toBeTruthy();
182 |
183 | fireEvent.keyDown(window, { keyCode: KeyCode.LEFT });
184 | act(() => {
185 | jest.runAllTimers();
186 | });
187 |
188 | expect(
189 | document.querySelector('.rc-image-preview-switch-prev.rc-image-preview-switch-disabled'),
190 | ).toBeTruthy();
191 | });
192 |
193 | it('With Controlled', () => {
194 | const { rerender } = render(
195 |
196 |
197 | ,
198 | );
199 |
200 | expect(document.querySelector('.rc-image-preview')).toBeTruthy();
201 |
202 | rerender(
203 |
204 |
205 | ,
206 | );
207 | act(() => {
208 | jest.runAllTimers();
209 | });
210 |
211 | expect(document.querySelector('.rc-image-preview')).toBeFalsy();
212 | });
213 |
214 | it('should show error img', () => {
215 | render(
216 |
217 |
218 | ,
219 | );
220 | expect(document.querySelector('.rc-image-preview-img')).toHaveAttribute('src', 'errorsrc');
221 | });
222 |
223 | it('should reset transform when switch', () => {
224 | const { container } = render(
225 |
226 |
227 |
228 | ,
229 | );
230 |
231 | fireEvent.click(container.querySelector('.rc-image'));
232 | act(() => {
233 | jest.runAllTimers();
234 | });
235 |
236 | fireEvent.click(document.querySelectorAll('.rc-image-preview-actions-action')[3]);
237 | act(() => {
238 | jest.runAllTimers();
239 | });
240 |
241 | expect(document.querySelector('.rc-image-preview-img')).toHaveStyle({
242 | transform: 'translate3d(0px, 0px, 0) scale3d(1, 1, 1) rotate(90deg)',
243 | });
244 |
245 | fireEvent.click(document.querySelector('.rc-image-preview-switch-next'));
246 | act(() => {
247 | jest.runAllTimers();
248 | });
249 |
250 | expect(document.querySelector('.rc-image-preview-img')).toHaveStyle({
251 | transform: 'translate3d(0px, 0px, 0) scale3d(1, 1, 1) rotate(0deg)',
252 | });
253 | });
254 |
255 | it('pass img common props to previewed image', () => {
256 | const { container } = render(
257 |
258 |
259 |
260 | ,
261 | );
262 |
263 | fireEvent.click(container.querySelector('.rc-image'));
264 | act(() => {
265 | jest.runAllTimers();
266 | });
267 |
268 | expect(document.querySelector('.rc-image-preview-img')).toHaveAttribute(
269 | 'referrerPolicy',
270 | 'no-referrer',
271 | );
272 |
273 | fireEvent.click(document.querySelector('.rc-image-preview-switch-next'));
274 | act(() => {
275 | jest.runAllTimers();
276 | });
277 |
278 | expect(document.querySelector('.rc-image-preview-img')).toHaveAttribute(
279 | 'referrerPolicy',
280 | 'origin',
281 | );
282 | });
283 |
284 | it('album mode', () => {
285 | const { container } = render(
286 |
287 |
288 | ,
289 | );
290 |
291 | expect(container.querySelectorAll('.rc-image')).toHaveLength(1);
292 |
293 | fireEvent.click(container.querySelector('.rc-image'));
294 | act(() => {
295 | jest.runAllTimers();
296 | });
297 | expect(document.querySelector('.rc-image-preview-img')).toHaveAttribute('src', 'src1');
298 |
299 | fireEvent.click(document.querySelector('.rc-image-preview-switch-next'));
300 | expect(document.querySelector('.rc-image-preview-img')).toHaveAttribute('src', 'src2');
301 |
302 | fireEvent.click(document.querySelector('.rc-image-preview-switch-next'));
303 | expect(document.querySelector('.rc-image-preview-img')).toHaveAttribute('src', 'src3');
304 | });
305 |
306 | it('album mode: object item', () => {
307 | const { container } = render(
308 |
321 |
322 | ,
323 | );
324 |
325 | expect(container.querySelectorAll('.rc-image')).toHaveLength(1);
326 |
327 | fireEvent.click(container.querySelector('.rc-image'));
328 | act(() => {
329 | jest.runAllTimers();
330 | });
331 | expect(document.querySelector('.rc-image-preview-img')).toHaveAttribute('src', 'src1');
332 |
333 | fireEvent.click(document.querySelector('.rc-image-preview-switch-next'));
334 | expect(document.querySelector('.rc-image-preview-img')).toHaveAttribute('src', 'src2');
335 |
336 | fireEvent.click(document.querySelector('.rc-image-preview-switch-next'));
337 | expect(document.querySelector('.rc-image-preview-img')).toHaveAttribute('src', 'src3');
338 | });
339 |
340 | it('should keep order', async () => {
341 | const Demo = ({ firstUrl }: { firstUrl: string }) => {
342 | return (
343 |
344 |
345 |
346 |
347 | );
348 | };
349 |
350 | const { rerender } = render();
351 |
352 | // Open preview
353 | expect(document.querySelector('.rc-image-preview-progress').textContent).toEqual('1 / 2');
354 | expect(document.querySelector('.rc-image-preview img')!.src).toEqual(
355 | 'http://first/img.png',
356 | );
357 |
358 | // Modify URL should keep order
359 | rerender();
360 |
361 | expect(document.querySelector('.rc-image-preview-progress').textContent).toEqual('1 / 2');
362 | expect(document.querySelector('.rc-image-preview img')!.src).toEqual(
363 | 'http://second/img.png',
364 | );
365 | });
366 |
367 | it('onTransform should be triggered when switch', () => {
368 | const onTransform = jest.fn();
369 | render(
370 | ,
384 | );
385 | fireEvent.click(document.querySelector('.rc-image-preview-actions-action-flipY'));
386 | act(() => {
387 | jest.runAllTimers();
388 | });
389 | expect(onTransform).toHaveBeenCalledTimes(1);
390 | expect(onTransform).toHaveBeenLastCalledWith({
391 | transform: {
392 | flipY: true,
393 | flipX: false,
394 | rotate: 0,
395 | scale: 1,
396 | x: 0,
397 | y: 0,
398 | },
399 | action: 'flipY',
400 | });
401 | fireEvent.click(document.querySelector('.rc-image-preview-switch-next'));
402 | act(() => {
403 | jest.runAllTimers();
404 | });
405 | expect(onTransform).toHaveBeenCalledTimes(2);
406 | expect(onTransform).toHaveBeenLastCalledWith({
407 | transform: {
408 | flipY: false,
409 | flipX: false,
410 | rotate: 0,
411 | scale: 1,
412 | x: 0,
413 | y: 0,
414 | },
415 | action: 'next',
416 | });
417 | });
418 |
419 | it('preview.rootClassName should be correct', () => {
420 | render(
421 | ,
432 | );
433 |
434 | expect(document.querySelector('.rc-image-preview.custom-className')).toBeTruthy();
435 | });
436 | });
437 |
--------------------------------------------------------------------------------
/tests/previewTouch.test.tsx:
--------------------------------------------------------------------------------
1 | import { act, fireEvent, render } from '@testing-library/react';
2 | import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook';
3 | import React from 'react';
4 | import Image from '../src';
5 |
6 | describe('Touch Events', () => {
7 | beforeEach(() => {
8 | jest.useFakeTimers();
9 | });
10 |
11 | afterEach(() => {
12 | jest.useRealTimers();
13 | });
14 |
15 | it('touch move', () => {
16 | const { container } = render(
17 | ,
18 | );
19 |
20 | fireEvent.click(container.querySelector('.rc-image'));
21 |
22 | const previewImgDom = document.querySelector('.rc-image-preview-img');
23 |
24 | fireEvent.touchStart(previewImgDom, {
25 | touches: [{ clientX: 0, clientY: 0 }],
26 | });
27 | fireEvent.touchMove(previewImgDom, {
28 | touches: [{ clientX: 50, clientY: 50 }],
29 | });
30 |
31 | act(() => {
32 | jest.runAllTimers();
33 | });
34 |
35 | expect(previewImgDom).toHaveStyle({
36 | transform: 'translate3d(50px, 50px, 0) scale3d(1, 1, 1) rotate(0deg)',
37 | // Disable transition during image movement
38 | transitionDuration: '0s',
39 | });
40 |
41 | fireEvent.touchEnd(previewImgDom);
42 |
43 | act(() => {
44 | jest.runAllTimers();
45 | });
46 |
47 | // Correct the position when the image moves out of the current window
48 | expect(previewImgDom).toHaveStyle({
49 | transform: 'translate3d(0px, 0px, 0) scale3d(1, 1, 1) rotate(0deg)',
50 | transitionDuration: undefined,
51 | });
52 | });
53 |
54 | it('touch zoom', () => {
55 | const { container } = render(
56 | ,
57 | );
58 |
59 | fireEvent.click(container.querySelector('.rc-image'));
60 |
61 | const previewImgDom = document.querySelector('.rc-image-preview-img');
62 |
63 | fireEvent.touchStart(previewImgDom, {
64 | touches: [
65 | { clientX: 40, clientY: 40 },
66 | { clientX: 60, clientY: 60 },
67 | ],
68 | });
69 | fireEvent.touchMove(previewImgDom, {
70 | touches: [
71 | { clientX: 30, clientY: 30 },
72 | { clientX: 70, clientY: 70 },
73 | ],
74 | });
75 |
76 | act(() => {
77 | jest.runAllTimers();
78 | });
79 |
80 | expect(previewImgDom).toHaveStyle({
81 | transform: 'translate3d(-50px, -50px, 0) scale3d(2, 2, 1) rotate(0deg)',
82 | // Disable transition during image zooming
83 | transitionDuration: '0s',
84 | });
85 |
86 | fireEvent.touchEnd(previewImgDom);
87 |
88 | expect(previewImgDom).toHaveStyle({
89 | transform: 'translate3d(-50px, -50px, 0) scale3d(2, 2, 1) rotate(0deg)',
90 | transitionDuration: undefined,
91 | });
92 | });
93 |
94 | it('Calculation of the center point during image scaling', () => {
95 | const imgEleMock = spyElementPrototypes(HTMLImageElement, {
96 | width: { get: () => 375 },
97 | height: { get: () => 368 },
98 | offsetWidth: { get: () => 375 },
99 | offsetHeight: { get: () => 368 },
100 | offsetLeft: { get: () => 0 },
101 | offsetTop: { get: () => 149 },
102 | });
103 |
104 | const { container } = render(
105 | ,
106 | );
107 |
108 | fireEvent.click(container.querySelector('.rc-image'));
109 |
110 | const previewImgDom = document.querySelector('.rc-image-preview-img');
111 |
112 | fireEvent.touchStart(previewImgDom, {
113 | touches: [
114 | { clientX: 40, clientY: 40 },
115 | { clientX: 60, clientY: 60 },
116 | ],
117 | });
118 | fireEvent.touchMove(previewImgDom, {
119 | touches: [
120 | { clientX: 10, clientY: 10 },
121 | { clientX: 70, clientY: 70 },
122 | ],
123 | });
124 |
125 | act(() => {
126 | jest.runAllTimers();
127 | });
128 |
129 | expect(previewImgDom).toHaveStyle({
130 | transform: 'translate3d(265px, 556px, 0) scale3d(3, 3, 1) rotate(0deg)',
131 | });
132 |
133 | // Cover the test when the movement distance of both points is 0
134 | fireEvent.touchMove(previewImgDom, {
135 | touches: [
136 | { clientX: 10, clientY: 10 },
137 | { clientX: 70, clientY: 70 },
138 | ],
139 | });
140 |
141 | imgEleMock.mockRestore();
142 | });
143 |
144 | it('The scale needs to be reset when the image is scaled to less than minScale', () => {
145 | const { container } = render(
146 | ,
147 | );
148 |
149 | fireEvent.click(container.querySelector('.rc-image'));
150 |
151 | const previewImgDom = document.querySelector('.rc-image-preview-img');
152 |
153 | // The scale needs to be reset when the image is scaled to less than minScale
154 | fireEvent.touchStart(previewImgDom, {
155 | touches: [
156 | { clientX: 20, clientY: 40 },
157 | { clientX: 20, clientY: 60 },
158 | ],
159 | });
160 | fireEvent.touchMove(previewImgDom, {
161 | touches: [
162 | { clientX: 20, clientY: 45 },
163 | { clientX: 20, clientY: 55 },
164 | ],
165 | });
166 |
167 | act(() => {
168 | jest.runAllTimers();
169 | });
170 |
171 | fireEvent.touchEnd(previewImgDom);
172 |
173 | act(() => {
174 | jest.runAllTimers();
175 | });
176 |
177 | expect(previewImgDom).toHaveStyle({
178 | transform: 'translate3d(0px, 0px, 0) scale3d(1, 1, 1) rotate(0deg)',
179 | });
180 | });
181 | });
182 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "esnext",
4 | "moduleResolution": "node",
5 | "baseUrl": "./",
6 | "jsx": "react",
7 | "declaration": true,
8 | "skipLibCheck": true,
9 | "esModuleInterop": true,
10 | "paths": {
11 | "@/*": ["src/*"],
12 | "@@/*": [".dumi/tmp/*"],
13 | "@rc-component/image": ["src/index.ts"]
14 | }
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/typings.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.css';
2 | declare module '*.less';
3 |
--------------------------------------------------------------------------------
/update-example.js:
--------------------------------------------------------------------------------
1 | /*
2 | 用于 dumi 改造使用，
3 | 可用于将 examples 的文件批量修改为 demo 引入形式，
4 | 其他项目根据具体情况使用。
5 | */
6 |
7 | const fs = require('fs');
8 | const glob = require('glob');
9 |
10 | const suffix = '.tsx';
11 |
12 | const paths = glob.sync(`./docs/examples/*${suffix}`);
13 |
14 | paths.forEach(path => {
15 | const name = path.split('/').pop().split('.')[0];
16 | fs.writeFile(
17 | `./docs/demo/${name}.md`,
18 | `## ${name}
19 |
20 |
21 | `,
22 | 'utf8',
23 | function (error) {
24 | if (error) {
25 | console.log(error);
26 | return false;
27 | }
28 | console.log(`${name} 更新成功~`);
29 | },
30 | );
31 | });
32 |
--------------------------------------------------------------------------------