) => void;
}
@@ -79,71 +77,77 @@ interface CompoundedComponent extends React.FC
{
const ImageInternal: CompoundedComponent = props => {
const {
- src: imgSrc,
- alt,
- onPreviewClose: onInitialPreviewClose,
+ // Misc
prefixCls = 'rc-image',
previewPrefixCls = `${prefixCls}-preview`,
- placeholder,
- fallback,
+
+ // Style
+ rootClassName,
+ className,
+ style,
+
+ classNames = {},
+ styles = {},
+
width,
height,
- style,
+
+ // Image
+ src: imgSrc,
+ alt,
+ placeholder,
+ fallback,
+
+ // Preview
preview = true,
- className,
+
+ // Events
onClick,
onError,
- wrapperClassName,
- wrapperStyle,
- rootClassName,
...otherProps
} = props;
- const isCustomPlaceholder = placeholder && placeholder !== true;
+ const groupContext = useContext(PreviewGroupContext);
+
+ // ========================== Preview ===========================
+ const canPreview = !!preview;
+
const {
src: previewSrc,
- visible: previewVisible = undefined,
- onVisibleChange: onPreviewVisibleChange = onInitialPreviewClose,
- getContainer: getPreviewContainer = undefined,
- mask: previewMask,
- maskClassName,
- classNames: imageClassNames,
- styles,
- movable,
- icons,
- scaleStep,
- minScale,
- maxScale,
- imageRender,
- toolbarRender,
- ...dialogProps
- }: ImagePreviewType = typeof preview === 'object' ? preview : {};
- const src = previewSrc ?? imgSrc;
- const [isShowPreview, setShowPreview] = useMergedState(!!previewVisible, {
- value: previewVisible,
- onChange: onPreviewVisibleChange,
- });
- const [getImgRef, srcAndOnload, status] = useStatus({
- src: imgSrc,
- isCustomPlaceholder,
- fallback,
+ open: previewOpen = undefined,
+ onOpenChange: onPreviewOpenChange,
+ cover,
+ classNames: previewClassNames = {},
+ styles: previewStyles = {},
+ ...restProps
+ }: PreviewConfig = preview && typeof preview === 'object' ? preview : {};
+
+ // ============================ Open ============================
+ const [isShowPreview, setShowPreview] = useMergedState(!!previewOpen, {
+ value: previewOpen,
});
- const [mousePosition, setMousePosition] = useState(null);
- const groupContext = useContext(PreviewGroupContext);
+ const [mousePosition, setMousePosition] = useState(null);
- const canPreview = !!preview;
+ const triggerPreviewOpen = (nextOpen: boolean) => {
+ setShowPreview(nextOpen);
+ onPreviewOpenChange?.(nextOpen);
+ };
const onPreviewClose = () => {
- setShowPreview(false);
- setMousePosition(null);
+ triggerPreviewOpen(false);
};
- const wrapperClass = cn(prefixCls, wrapperClassName, rootClassName, {
- [`${prefixCls}-error`]: status === 'error',
+ // ========================= ImageProps =========================
+ const isCustomPlaceholder = placeholder && placeholder !== true;
+
+ const src = previewSrc ?? imgSrc;
+ const [getImgRef, srcAndOnload, status] = useStatus({
+ src: imgSrc,
+ isCustomPlaceholder,
+ fallback,
});
- // ========================= ImageProps =========================
const imgCommonProps = useMemo(
() => {
const obj: ImageElementProps = {};
@@ -171,7 +175,10 @@ const ImageInternal: CompoundedComponent = props => {
// ========================== Preview ===========================
const onPreview: React.MouseEventHandler = e => {
- const { left, top } = getOffset(e.target as HTMLDivElement);
+ const rect = (e.target as HTMLDivElement).getBoundingClientRect();
+ const left = rect.x + rect.width / 2;
+ const top = rect.y + rect.height / 2;
+
if (groupContext) {
groupContext.onPreview(imageId, src, left, top);
} else {
@@ -179,7 +186,7 @@ const ImageInternal: CompoundedComponent = props => {
x: left,
y: top,
});
- setShowPreview(true);
+ triggerPreviewOpen(true);
}
onClick?.(e);
@@ -190,25 +197,29 @@ const ImageInternal: CompoundedComponent = props => {
<>
![]()
= props => {
)}
{/* Preview Click Mask */}
- {previewMask && canPreview && (
+ {cover !== false && canPreview && (
- {previewMask}
+ {cover}
)}
{!groupContext && canPreview && (
= props => {
alt={alt}
imageInfo={{ width, height }}
fallback={fallback}
- getContainer={getPreviewContainer}
- icons={icons}
- movable={movable}
- scaleStep={scaleStep}
- minScale={minScale}
- maxScale={maxScale}
- rootClassName={rootClassName}
- imageRender={imageRender}
imgCommonProps={imgCommonProps}
- toolbarRender={toolbarRender}
- classNames={imageClassNames}
- styles={styles}
- {...dialogProps}
+ classNames={previewClassNames}
+ styles={previewStyles}
+ rootClassName={rootClassName}
+ {...restProps}
/>
)}
diff --git a/src/Operations.tsx b/src/Operations.tsx
deleted file mode 100644
index ce6aa2c5..00000000
--- a/src/Operations.tsx
+++ /dev/null
@@ -1,297 +0,0 @@
-import Portal from '@rc-component/portal';
-import classnames from 'classnames';
-import CSSMotion from '@rc-component/motion';
-import KeyCode from '@rc-component/util/lib/KeyCode';
-import * as React from 'react';
-import { useContext } from 'react';
-import type { ImgInfo, SemanticName } from './Image';
-import type { PreviewProps, ToolbarRenderInfoType } from './Preview';
-import { PreviewGroupContext } from './context';
-import type { TransformType } from './hooks/useImageTransform';
-import classNames from 'classnames';
-
-type OperationType =
- | 'prev'
- | 'next'
- | 'flipY'
- | 'flipX'
- | 'rotateLeft'
- | 'rotateRight'
- | 'zoomOut'
- | 'zoomIn';
-
-interface RenderOperationParams {
- icon: React.ReactNode;
- type: OperationType;
- disabled?: boolean;
- onClick: (e: React.MouseEvent) => void;
-}
-
-interface OperationsProps
- extends Pick<
- PreviewProps,
- | 'visible'
- | 'maskTransitionName'
- | 'getContainer'
- | 'prefixCls'
- | 'rootClassName'
- | 'icons'
- | 'countRender'
- | 'closeIcon'
- | 'onClose'
- > {
- showSwitch: boolean;
- showProgress: boolean;
- current: number;
- transform: TransformType;
- count: number;
- scale: number;
- minScale: number;
- maxScale: number;
- onActive: (offset: number) => void;
- onZoomIn: () => void;
- onZoomOut: () => void;
- onRotateRight: () => void;
- onRotateLeft: () => void;
- onFlipX: () => void;
- onFlipY: () => void;
- onReset: () => void;
- toolbarRender: (
- originalNode: React.ReactElement,
- info: ToolbarRenderInfoType | Omit,
- ) => React.ReactNode;
- zIndex?: number;
- image?: ImgInfo;
- classNames?: Partial>;
- styles?: Partial>;
-}
-
-const Operations: React.FC = props => {
- const {
- visible,
- maskTransitionName,
- getContainer,
- prefixCls,
- rootClassName,
- icons,
- countRender,
- showSwitch,
- showProgress,
- current,
- transform,
- count,
- scale,
- minScale,
- maxScale,
- closeIcon,
- onActive,
- onClose,
- onZoomIn,
- onZoomOut,
- onRotateRight,
- onRotateLeft,
- onFlipX,
- onFlipY,
- onReset,
- toolbarRender,
- zIndex,
- image,
- classNames: imageClassNames,
- styles,
- } = props;
- const groupContext = useContext(PreviewGroupContext);
- const { rotateLeft, rotateRight, zoomIn, zoomOut, close, left, right, flipX, flipY } = icons;
- const toolClassName = `${prefixCls}-operations-operation`;
-
- React.useEffect(() => {
- const onKeyDown = (e: KeyboardEvent) => {
- if (e.keyCode === KeyCode.ESC) {
- onClose();
- }
- };
-
- if (visible) {
- window.addEventListener('keydown', onKeyDown);
- }
-
- return () => {
- window.removeEventListener('keydown', onKeyDown);
- };
- }, [visible]);
-
- const handleActive = (e: React.MouseEvent, offset: number) => {
- e.preventDefault();
- e.stopPropagation();
-
- onActive(offset);
- };
-
- const renderOperation = React.useCallback(
- ({ type, disabled, onClick, icon }: RenderOperationParams) => {
- return (
-
- {icon}
-
- );
- },
- [toolClassName, prefixCls],
- );
-
- const switchPrevNode = showSwitch
- ? renderOperation({
- icon: left,
- onClick: e => handleActive(e, -1),
- type: 'prev',
- disabled: current === 0,
- })
- : undefined;
-
- const switchNextNode = showSwitch
- ? renderOperation({
- icon: right,
- onClick: e => handleActive(e, 1),
- type: 'next',
- disabled: current === count - 1,
- })
- : undefined;
-
- const flipYNode = renderOperation({
- icon: flipY,
- onClick: onFlipY,
- type: 'flipY',
- });
-
- const flipXNode = renderOperation({
- icon: flipX,
- onClick: onFlipX,
- type: 'flipX',
- });
-
- const rotateLeftNode = renderOperation({
- icon: rotateLeft,
- onClick: onRotateLeft,
- type: 'rotateLeft',
- });
-
- const rotateRightNode = renderOperation({
- icon: rotateRight,
- onClick: onRotateRight,
- type: 'rotateRight',
- });
-
- const zoomOutNode = renderOperation({
- icon: zoomOut,
- onClick: onZoomOut,
- type: 'zoomOut',
- disabled: scale <= minScale,
- });
-
- const zoomInNode = renderOperation({
- icon: zoomIn,
- onClick: onZoomIn,
- type: 'zoomIn',
- disabled: scale === maxScale,
- });
-
- const toolbarNode = (
-
- {flipYNode}
- {flipXNode}
- {rotateLeftNode}
- {rotateRightNode}
- {zoomOutNode}
- {zoomInNode}
-
- );
-
- return (
-
- {({ className, style }) => (
-
-
- {closeIcon === null ? null : (
-
- )}
-
- {showSwitch && (
- <>
-
handleActive(e, -1)}
- >
- {left}
-
-
handleActive(e, 1)}
- >
- {right}
-
-
- )}
-
-
- {showProgress && (
-
- {countRender ? countRender(current + 1, count) : `${current + 1} / ${count}`}
-
- )}
-
- {toolbarRender
- ? toolbarRender(toolbarNode, {
- icons: {
- prevIcon: switchPrevNode,
- nextIcon: switchNextNode,
- flipYIcon: flipYNode,
- flipXIcon: flipXNode,
- rotateLeftIcon: rotateLeftNode,
- rotateRightIcon: rotateRightNode,
- zoomOutIcon: zoomOutNode,
- zoomInIcon: zoomInNode,
- },
- actions: {
- onActive,
- onFlipY,
- onFlipX,
- onRotateLeft,
- onRotateRight,
- onZoomOut,
- onZoomIn,
- onReset,
- onClose,
- },
- transform,
- ...(groupContext ? { current, total: count } : {}),
- image,
- })
- : toolbarNode}
-
-
![]()
{
- imgRef.current = ref;
- getImgRef(ref);
- }}
- {...props}
- {...srcAndOnload}
- />
- );
-};
-
-const Preview: React.FC = props => {
- const {
- prefixCls,
- src,
- alt,
- imageInfo,
- fallback,
- movable = true,
- onClose,
- visible,
- icons = {},
- rootClassName,
- closeIcon,
- getContainer,
- current = 0,
- count = 1,
- countRender,
- scaleStep = 0.5,
- minScale = 1,
- maxScale = 50,
- transitionName = 'zoom',
- maskTransitionName = 'fade',
- imageRender,
- imgCommonProps,
- toolbarRender,
- onTransform,
- onChange,
- classNames: imageClassNames,
- styles,
- ...restProps
- } = props;
-
- const imgRef = useRef();
- const groupContext = useContext(PreviewGroupContext);
- const showLeftOrRightSwitches = groupContext && count > 1;
- const showOperationsProgress = groupContext && count >= 1;
- const [enableTransition, setEnableTransition] = useState(true);
- const { transform, resetTransform, updateTransform, dispatchZoomChange } = useImageTransform(
- imgRef,
- minScale,
- maxScale,
- onTransform,
- );
- const { isMoving, onMouseDown, onWheel } = useMouseEvent(
- imgRef,
- movable,
- visible,
- scaleStep,
- transform,
- updateTransform,
- dispatchZoomChange,
- );
- const { isTouching, onTouchStart, onTouchMove, onTouchEnd } = useTouchEvent(
- imgRef,
- movable,
- visible,
- minScale,
- transform,
- updateTransform,
- dispatchZoomChange,
- );
- const { rotate, scale } = transform;
-
- const wrapClassName = classnames({
- [`${prefixCls}-moving`]: isMoving,
- });
-
- useEffect(() => {
- if (!enableTransition) {
- setEnableTransition(true);
- }
- }, [enableTransition]);
-
- const onAfterClose = () => {
- resetTransform('close');
- };
-
- const onZoomIn = () => {
- dispatchZoomChange(BASE_SCALE_RATIO + scaleStep, 'zoomIn');
- };
-
- const onZoomOut = () => {
- dispatchZoomChange(BASE_SCALE_RATIO / (BASE_SCALE_RATIO + scaleStep), 'zoomOut');
- };
-
- const onRotateRight = () => {
- updateTransform({ rotate: rotate + 90 }, 'rotateRight');
- };
-
- const onRotateLeft = () => {
- updateTransform({ rotate: rotate - 90 }, 'rotateLeft');
- };
-
- const onFlipX = () => {
- updateTransform({ flipX: !transform.flipX }, 'flipX');
- };
-
- const onFlipY = () => {
- updateTransform({ flipY: !transform.flipY }, 'flipY');
- };
-
- const onReset = () => {
- resetTransform('reset');
- };
-
- const onActive = (offset: number) => {
- const position = current + offset;
-
- if (!Number.isInteger(position) || position < 0 || position > count - 1) {
- return;
- }
-
- setEnableTransition(false);
- resetTransform(offset < 0 ? 'prev' : 'next');
- onChange?.(position, current);
- };
-
- const onKeyDown = (event: KeyboardEvent) => {
- if (!visible || !showLeftOrRightSwitches) return;
-
- if (event.keyCode === KeyCode.LEFT) {
- onActive(-1);
- } else if (event.keyCode === KeyCode.RIGHT) {
- onActive(1);
- }
- };
-
- const onDoubleClick = (event: React.MouseEvent) => {
- if (visible) {
- if (scale !== 1) {
- updateTransform({ x: 0, y: 0, scale: 1 }, 'doubleClick');
- } else {
- dispatchZoomChange(
- BASE_SCALE_RATIO + scaleStep,
- 'doubleClick',
- event.clientX,
- event.clientY,
- );
- }
- }
- };
-
- useEffect(() => {
- window.addEventListener('keydown', onKeyDown, false);
-
- return () => {
- window.removeEventListener('keydown', onKeyDown);
- };
- }, [visible, showLeftOrRightSwitches, current]);
-
- const imgNode = (
-
- );
-
- const image = {
- url: src,
- alt,
- ...imageInfo,
- };
-
- return (
- <>
-
-
-
- );
-};
-
-export default Preview;
diff --git a/src/Preview/CloseBtn.tsx b/src/Preview/CloseBtn.tsx
new file mode 100644
index 00000000..aacd6cc6
--- /dev/null
+++ b/src/Preview/CloseBtn.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+export interface CloseBtnProps {
+ prefixCls: string;
+ icon?: React.ReactNode;
+ onClick: React.MouseEventHandler;
+}
+
+export default function CloseBtn(props: CloseBtnProps) {
+ const { prefixCls, icon, onClick } = props;
+
+ return (
+
+ );
+}
diff --git a/src/Preview/Footer.tsx b/src/Preview/Footer.tsx
new file mode 100644
index 00000000..f93e66d5
--- /dev/null
+++ b/src/Preview/Footer.tsx
@@ -0,0 +1,212 @@
+import classnames from 'classnames';
+import * as React from 'react';
+import type { Actions, PreviewProps } from '.';
+import type { ImgInfo } from '../Image';
+import type { TransformType } from '../hooks/useImageTransform';
+
+export type FooterSemanticName = 'footer' | 'actions';
+
+type OperationType =
+ | 'prev'
+ | 'next'
+ | 'flipY'
+ | 'flipX'
+ | 'rotateLeft'
+ | 'rotateRight'
+ | 'zoomOut'
+ | 'zoomIn';
+
+interface RenderOperationParams {
+ icon: React.ReactNode;
+ type: OperationType;
+ disabled?: boolean;
+ onClick: (e: React.MouseEvent) => void;
+}
+
+export interface FooterProps extends Actions {
+ prefixCls: string;
+ showProgress: boolean;
+ countRender?: PreviewProps['countRender'];
+ actionsRender?: PreviewProps['actionsRender'];
+ current: number;
+ count: number;
+ showSwitch: boolean;
+ icons: PreviewProps['icons'];
+ scale: number;
+ minScale: number;
+ maxScale: number;
+ image: ImgInfo;
+ transform: TransformType;
+
+ // Style
+ classNames: Partial>;
+ styles: Partial>;
+}
+
+export default function Footer(props: FooterProps) {
+ // 修改解构，添加缺失的属性，并提供默认值
+ const {
+ prefixCls,
+ showProgress,
+ current,
+ count,
+ showSwitch,
+
+ // Style
+ classNames,
+ styles,
+
+ // render
+ icons,
+ image,
+ transform,
+ countRender,
+ actionsRender,
+
+ // Scale
+ scale,
+ minScale,
+ maxScale,
+
+ // Actions
+ onActive,
+ onFlipY,
+ onFlipX,
+ onRotateLeft,
+ onRotateRight,
+ onZoomOut,
+ onZoomIn,
+ onClose,
+ onReset,
+ } = props;
+
+ const { left, right, prev, next, flipY, flipX, rotateLeft, rotateRight, zoomOut, zoomIn } = icons;
+
+ // ========================== Render ==========================
+ // >>>>> Progress
+ const progressNode = showProgress && (
+
+ {countRender ? countRender(current + 1, count) : `${current + 1} / ${count}`}
+
+ );
+
+ // >>>>> Actions
+ const actionCls = `${prefixCls}-actions-action`;
+
+ const renderOperation = ({ type, disabled, onClick, icon }: RenderOperationParams) => {
+ return (
+
+ {icon}
+
+ );
+ };
+
+ const switchPrevNode = showSwitch
+ ? renderOperation({
+ icon: prev ?? left,
+ onClick: () => onActive(-1),
+ type: 'prev',
+ disabled: current === 0,
+ })
+ : undefined;
+
+ const switchNextNode = showSwitch
+ ? renderOperation({
+ icon: next ?? right,
+ onClick: () => onActive(1),
+ type: 'next',
+ disabled: current === count - 1,
+ })
+ : undefined;
+
+ const flipYNode = renderOperation({
+ icon: flipY,
+ onClick: onFlipY,
+ type: 'flipY',
+ });
+
+ const flipXNode = renderOperation({
+ icon: flipX,
+ onClick: onFlipX,
+ type: 'flipX',
+ });
+
+ const rotateLeftNode = renderOperation({
+ icon: rotateLeft,
+ onClick: onRotateLeft,
+ type: 'rotateLeft',
+ });
+
+ const rotateRightNode = renderOperation({
+ icon: rotateRight,
+ onClick: onRotateRight,
+ type: 'rotateRight',
+ });
+
+ const zoomOutNode = renderOperation({
+ icon: zoomOut,
+ onClick: onZoomOut,
+ type: 'zoomOut',
+ disabled: scale <= minScale,
+ });
+
+ const zoomInNode = renderOperation({
+ icon: zoomIn,
+ onClick: onZoomIn,
+ type: 'zoomIn',
+ disabled: scale === maxScale,
+ });
+
+ const actionsNode = (
+
+ {flipYNode}
+ {flipXNode}
+ {rotateLeftNode}
+ {rotateRightNode}
+ {zoomOutNode}
+ {zoomInNode}
+
+ );
+
+ // >>>>> Render
+ return (
+
+ {progressNode}
+ {actionsRender
+ ? actionsRender(actionsNode, {
+ icons: {
+ prevIcon: switchPrevNode,
+ nextIcon: switchNextNode,
+ flipYIcon: flipYNode,
+ flipXIcon: flipXNode,
+ rotateLeftIcon: rotateLeftNode,
+ rotateRightIcon: rotateRightNode,
+ zoomOutIcon: zoomOutNode,
+ zoomInIcon: zoomInNode,
+ },
+ actions: {
+ onActive,
+ onFlipY,
+ onFlipX,
+ onRotateLeft,
+ onRotateRight,
+ onZoomOut,
+ onZoomIn,
+ onReset,
+ onClose,
+ },
+ transform,
+ current,
+ total: count,
+ image,
+ })
+ : actionsNode}
+
+ );
+}
diff --git a/src/Preview/PrevNext.tsx b/src/Preview/PrevNext.tsx
new file mode 100644
index 00000000..adaad514
--- /dev/null
+++ b/src/Preview/PrevNext.tsx
@@ -0,0 +1,44 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import type { OperationIcons } from '.';
+
+export interface PrevNextProps {
+ prefixCls: string;
+ onActive: (offset: number) => void;
+ current: number;
+ count: number;
+ icons: OperationIcons;
+}
+
+export default function PrevNext(props: PrevNextProps) {
+ const {
+ prefixCls,
+ onActive,
+ current,
+ count,
+ icons: { left, right, prev, next },
+ } = props;
+
+ const switchCls = `${prefixCls}-switch`;
+
+ return (
+ <>
+ onActive(-1)}
+ >
+ {prev ?? left}
+
+ onActive(1)}
+ >
+ {next ?? right}
+
+
+ );
+}
diff --git a/src/Preview/index.tsx b/src/Preview/index.tsx
new file mode 100644
index 00000000..dd86ed5a
--- /dev/null
+++ b/src/Preview/index.tsx
@@ -0,0 +1,482 @@
+import CSSMotion from '@rc-component/motion';
+import Portal, { type PortalProps } from '@rc-component/portal';
+import { useEvent } from '@rc-component/util';
+import KeyCode from '@rc-component/util/lib/KeyCode';
+import classnames from 'classnames';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import type { ImgInfo } from '../Image';
+import { PreviewGroupContext } from '../context';
+import type { TransformAction, TransformType } from '../hooks/useImageTransform';
+import useImageTransform from '../hooks/useImageTransform';
+import useMouseEvent from '../hooks/useMouseEvent';
+import useStatus from '../hooks/useStatus';
+import useTouchEvent from '../hooks/useTouchEvent';
+import { BASE_SCALE_RATIO } from '../previewConfig';
+import CloseBtn from './CloseBtn';
+import Footer, { type FooterSemanticName } from './Footer';
+import PrevNext from './PrevNext';
+
+// Note: if you want to add `action`,
+// pls contact @zombieJ or @thinkasany first.
+export type InternalPreviewSemanticName = 'root' | 'mask' | 'body' | FooterSemanticName;
+
+export interface OperationIcons {
+ rotateLeft?: React.ReactNode;
+ rotateRight?: React.ReactNode;
+ zoomIn?: React.ReactNode;
+ zoomOut?: React.ReactNode;
+ close?: React.ReactNode;
+ prev?: React.ReactNode;
+ next?: React.ReactNode;
+ /** @deprecated Please use `prev` instead */
+ left?: React.ReactNode;
+ /** @deprecated Please use `next` instead */
+ right?: React.ReactNode;
+ flipX?: React.ReactNode;
+ flipY?: React.ReactNode;
+}
+
+export interface Actions {
+ onActive: (offset: number) => void;
+ onFlipY: () => void;
+ onFlipX: () => void;
+ onRotateLeft: () => void;
+ onRotateRight: () => void;
+ onZoomOut: () => void;
+ onZoomIn: () => void;
+ onClose: () => void;
+ onReset: () => void;
+}
+
+export type ToolbarRenderInfoType = {
+ icons: {
+ prevIcon?: React.ReactNode;
+ nextIcon?: React.ReactNode;
+ flipYIcon: React.ReactNode;
+ flipXIcon: React.ReactNode;
+ rotateLeftIcon: React.ReactNode;
+ rotateRightIcon: React.ReactNode;
+ zoomOutIcon: React.ReactNode;
+ zoomInIcon: React.ReactNode;
+ };
+ actions: Actions;
+ transform: TransformType;
+ current: number;
+ total: number;
+ image: ImgInfo;
+};
+
+export interface InternalPreviewConfig {
+ // Semantic
+ classNames?: Partial>;
+ styles?: Partial>;
+
+ // Image
+ src?: string;
+ alt?: string;
+
+ // Scale
+ scaleStep?: number;
+ minScale?: number;
+ maxScale?: number;
+
+ // Display
+ motionName?: string;
+ open?: boolean;
+ getContainer?: PortalProps['getContainer'];
+ zIndex?: number;
+
+ // Operation
+ movable?: boolean;
+ icons?: OperationIcons;
+ closeIcon?: React.ReactNode;
+
+ onTransform?: (info: { transform: TransformType; action: TransformAction }) => void;
+
+ // Render
+ countRender?: (current: number, total: number) => React.ReactNode;
+ imageRender?: (
+ originalNode: React.ReactElement,
+ info: { transform: TransformType; current?: number; image: ImgInfo },
+ ) => React.ReactNode;
+ actionsRender?: (
+ originalNode: React.ReactElement,
+ info: ToolbarRenderInfoType,
+ ) => React.ReactNode;
+}
+
+export interface PreviewProps extends InternalPreviewConfig {
+ // Misc
+ prefixCls: string;
+ rootClassName?: string;
+
+ // Origin image Info
+ imageInfo?: {
+ width: number | string;
+ height: number | string;
+ };
+ fallback?: string;
+
+ // Preview image
+ imgCommonProps?: React.ImgHTMLAttributes;
+ width?: string | number;
+ height?: string | number;
+
+ // Pagination
+ current?: number;
+ count?: number;
+ onChange?: (current: number, prev: number) => void;
+
+ // Events
+ onClose?: () => void;
+
+ // Display
+ mousePosition: null | { x: number; y: number };
+}
+
+interface PreviewImageProps extends React.ImgHTMLAttributes {
+ fallback?: string;
+ imgRef: React.MutableRefObject;
+}
+
+const PreviewImage: React.FC = ({ fallback, src, imgRef, ...props }) => {
+ const [getImgRef, srcAndOnload] = useStatus({
+ src,
+ fallback,
+ });
+
+ return (
+ ![]()
{
+ imgRef.current = ref;
+ getImgRef(ref);
+ }}
+ {...props}
+ {...srcAndOnload}
+ />
+ );
+};
+
+const Preview: React.FC = props => {
+ const {
+ prefixCls,
+ rootClassName,
+ src,
+ alt,
+ imageInfo,
+ fallback,
+ movable = true,
+ onClose,
+ open,
+ icons = {},
+ closeIcon,
+ getContainer,
+ current = 0,
+ count = 1,
+ countRender,
+ scaleStep = 0.5,
+ minScale = 1,
+ maxScale = 50,
+ motionName = 'fade',
+ imageRender,
+ imgCommonProps,
+ actionsRender,
+ onTransform,
+ onChange,
+ classNames = {},
+ styles = {},
+ mousePosition,
+ zIndex,
+ } = props;
+
+ const imgRef = useRef();
+ const groupContext = useContext(PreviewGroupContext);
+ const showLeftOrRightSwitches = groupContext && count > 1;
+ const showOperationsProgress = groupContext && count >= 1;
+
+ // ======================== Transform =========================
+ const [enableTransition, setEnableTransition] = useState(true);
+ const { transform, resetTransform, updateTransform, dispatchZoomChange } = useImageTransform(
+ imgRef,
+ minScale,
+ maxScale,
+ onTransform,
+ );
+ const { isMoving, onMouseDown, onWheel } = useMouseEvent(
+ imgRef,
+ movable,
+ open,
+ scaleStep,
+ transform,
+ updateTransform,
+ dispatchZoomChange,
+ );
+ const { isTouching, onTouchStart, onTouchMove, onTouchEnd } = useTouchEvent(
+ imgRef,
+ movable,
+ open,
+ minScale,
+ transform,
+ updateTransform,
+ dispatchZoomChange,
+ );
+ const { rotate, scale } = transform;
+
+ useEffect(() => {
+ if (!enableTransition) {
+ setEnableTransition(true);
+ }
+ }, [enableTransition]);
+
+ useEffect(() => {
+ if (!open) {
+ resetTransform('close');
+ }
+ }, [open]);
+
+ // ========================== Image ===========================
+ const onDoubleClick = (event: React.MouseEvent) => {
+ if (open) {
+ if (scale !== 1) {
+ updateTransform({ x: 0, y: 0, scale: 1 }, 'doubleClick');
+ } else {
+ dispatchZoomChange(
+ BASE_SCALE_RATIO + scaleStep,
+ 'doubleClick',
+ event.clientX,
+ event.clientY,
+ );
+ }
+ }
+ };
+
+ const imgNode = (
+
+ );
+
+ const image = {
+ url: src,
+ alt,
+ ...imageInfo,
+ };
+
+ // ======================== Operation =========================
+ // >>>>> Actions
+ const onZoomIn = () => {
+ dispatchZoomChange(BASE_SCALE_RATIO + scaleStep, 'zoomIn');
+ };
+
+ const onZoomOut = () => {
+ dispatchZoomChange(BASE_SCALE_RATIO / (BASE_SCALE_RATIO + scaleStep), 'zoomOut');
+ };
+
+ const onRotateRight = () => {
+ updateTransform({ rotate: rotate + 90 }, 'rotateRight');
+ };
+
+ const onRotateLeft = () => {
+ updateTransform({ rotate: rotate - 90 }, 'rotateLeft');
+ };
+
+ const onFlipX = () => {
+ updateTransform({ flipX: !transform.flipX }, 'flipX');
+ };
+
+ const onFlipY = () => {
+ updateTransform({ flipY: !transform.flipY }, 'flipY');
+ };
+
+ const onReset = () => {
+ resetTransform('reset');
+ };
+
+ const onActive = (offset: number) => {
+ const nextCurrent = current + offset;
+
+ if (nextCurrent >= 0 && nextCurrent <= count - 1) {
+ setEnableTransition(false);
+ resetTransform(offset < 0 ? 'prev' : 'next');
+ onChange?.(nextCurrent, current);
+ }
+ };
+
+ // >>>>> Effect: Keyboard
+ const onKeyDown = useEvent((event: KeyboardEvent) => {
+ if (open) {
+ const { keyCode } = event;
+
+ if (keyCode === KeyCode.ESC) {
+ onClose?.();
+ }
+
+ if (showLeftOrRightSwitches) {
+ if (keyCode === KeyCode.LEFT) {
+ onActive(-1);
+ } else if (keyCode === KeyCode.RIGHT) {
+ onActive(1);
+ }
+ }
+ }
+ });
+
+ useEffect(() => {
+ if (open) {
+ window.addEventListener('keydown', onKeyDown);
+
+ return () => {
+ window.removeEventListener('keydown', onKeyDown);
+ };
+ }
+ }, [open]);
+
+ // ======================= Lock Scroll ========================
+ const [lockScroll, setLockScroll] = useState(false);
+
+ React.useEffect(() => {
+ if (open) {
+ setLockScroll(true);
+ }
+ }, [open]);
+
+ const onVisibleChanged = (nextVisible: boolean) => {
+ if (!nextVisible) {
+ setLockScroll(false);
+ }
+ };
+
+ // ========================== Render ==========================
+ const bodyStyle: React.CSSProperties = {
+ ...styles.body,
+ };
+ if (mousePosition) {
+ bodyStyle.transformOrigin = `${mousePosition.x}px ${mousePosition.y}px`;
+ }
+
+ return (
+
+
+ {({ className: motionClassName, style: motionStyle }) => {
+ const mergedStyle = {
+ ...styles.root,
+ ...motionStyle,
+ };
+
+ if (zIndex) {
+ mergedStyle.zIndex = zIndex;
+ }
+
+ return (
+
+ {/* Mask */}
+
+
+ {/* Body */}
+
+ {/* Preview Image */}
+ {imageRender
+ ? imageRender(imgNode, {
+ transform,
+ image,
+ ...(groupContext ? { current } : {}),
+ })
+ : imgNode}
+
+
+ {/* Close Button */}
+ {closeIcon !== false && closeIcon !== null && (
+
+ )}
+
+ {/* Switch prev or next */}
+ {showLeftOrRightSwitches && (
+
+ )}
+
+ {/* Footer */}
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
,
-]
-`;
diff --git a/tests/__snapshots__/previewGroup.test.tsx.snap b/tests/__snapshots__/previewGroup.test.tsx.snap
deleted file mode 100644
index 17a37815..00000000
--- a/tests/__snapshots__/previewGroup.test.tsx.snap
+++ /dev/null
@@ -1,37 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PreviewGroup With Controlled 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-