feat: add imgInfo param for render function (#336)

* feat: add imgInfo param for render function * Update src/Image.tsx Co-authored-by: afc163 <afc163@gmail.com> * chore: update param name --------- Co-authored-by: afc163 <afc163@gmail.com>
react-component · May 4, 2024 · 2c00fe6 · 2c00fe6
1 parent 42305e8
commit 2c00fe6
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 3 deletions.
diff --git a/.gitignore b/.gitignore
@@ -29,6 +29,7 @@ lib
 coverage
 yarn.lock
 package-lock.json
+pnpm-lock.yaml
 es/
 .storybook
 .doc

diff --git a/docs/examples/toolbarRender.tsx b/docs/examples/toolbarRender.tsx
@@ -41,6 +41,22 @@ export default function ToolbarRender() {
           },
         }}
       />
+
+      <Image
+        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        width="200px"
+        height="200px"
+        alt="test"
+        preview={{
+          icons: defaultIcons,
+          imageRender(_, { image }) {
+            return <div>{JSON.stringify(image)}</div>;
+          },
+          toolbarRender(_, { image }) {
+            return <div>{JSON.stringify(image)}</div>;
+          },
+        }}
+      />
     </div>
   );
 }
diff --git a/src/Image.tsx b/src/Image.tsx
@@ -15,6 +15,13 @@ import type { PreviewProps, ToolbarRenderInfoType } from './Preview';
 import Preview from './Preview';
 import PreviewGroup from './PreviewGroup';
 
+export interface ImgInfo {
+  url: string;
+  alt: string;
+  width: string | number;
+  height: string | number;
+}
+
 export interface ImagePreviewType
   extends Omit<
     IDialogPropTypes,
@@ -33,7 +40,7 @@ export interface ImagePreviewType
   movable?: boolean;
   imageRender?: (
     originalNode: React.ReactElement,
-    info: { transform: TransformType },
+    info: { transform: TransformType; image: ImgInfo },
   ) => React.ReactNode;
   onTransform?: PreviewProps['onTransform'];
   toolbarRender?: (
@@ -233,6 +240,8 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
           mousePosition={mousePosition}
           src={src}
           alt={alt}
+          width={width}
+          height={height}
           fallback={fallback}
           getContainer={getPreviewContainer}
           icons={icons}

diff --git a/src/Operations.tsx b/src/Operations.tsx
@@ -7,6 +7,7 @@ import { useContext } from 'react';
 import { PreviewGroupContext } from './context';
 import type { TransformType } from './hooks/useImageTransform';
 import type { PreviewProps, ToolbarRenderInfoType } from './Preview';
+import type { ImgInfo } from './Image';
 
 interface OperationsProps
   extends Pick<
@@ -42,6 +43,7 @@ interface OperationsProps
     info: ToolbarRenderInfoType | Omit<ToolbarRenderInfoType, 'current' | 'total'>,
   ) => React.ReactNode;
   zIndex?: number;
+  image?: ImgInfo;
 }
 
 const Operations: React.FC<OperationsProps> = props => {
@@ -73,6 +75,7 @@ const Operations: React.FC<OperationsProps> = props => {
     onFlipY,
     toolbarRender,
     zIndex,
+    image,
   } = props;
   const groupContext = useContext(PreviewGroupContext);
   const { rotateLeft, rotateRight, zoomIn, zoomOut, close, left, right, flipX, flipY } = icons;
@@ -209,6 +212,7 @@ const Operations: React.FC<OperationsProps> = props => {
                     },
                     transform,
                     ...(groupContext ? { current, total: count } : {}),
+                    image,
                   })
                 : toolbarNode}
             </div>

diff --git a/src/Preview.tsx b/src/Preview.tsx
@@ -12,6 +12,7 @@ import useTouchEvent from './hooks/useTouchEvent';
 import useStatus from './hooks/useStatus';
 import Operations from './Operations';
 import { BASE_SCALE_RATIO } from './previewConfig';
+import type { ImgInfo } from './Image';
 
 export type ToolbarRenderInfoType = {
   icons: {
@@ -33,12 +34,15 @@ export type ToolbarRenderInfoType = {
   transform: TransformType;
   current: number;
   total: number;
+  image: ImgInfo;
 };
 
 export interface PreviewProps extends Omit<IDialogPropTypes, 'onClose'> {
   imgCommonProps?: React.ImgHTMLAttributes<HTMLImageElement>;
   src?: string;
   alt?: string;
+  width?: number | string;
+  height?: number | string;
   fallback?: string;
   movable?: boolean;
   rootClassName?: string;
@@ -62,7 +66,7 @@ export interface PreviewProps extends Omit<IDialogPropTypes, 'onClose'> {
   maxScale?: number;
   imageRender?: (
     originalNode: React.ReactElement,
-    info: { transform: TransformType; current?: number },
+    info: { transform: TransformType; current?: number; image?: ImgInfo },
   ) => React.ReactNode;
   onClose?: () => void;
   onTransform?: (info: { transform: TransformType; action: TransformAction }) => void;
@@ -101,6 +105,8 @@ const Preview: React.FC<PreviewProps> = props => {
     prefixCls,
     src,
     alt,
+    width,
+    height,
     fallback,
     movable = true,
     onClose,
@@ -273,6 +279,13 @@ const Preview: React.FC<PreviewProps> = props => {
     />
   );
 
+  const image = {
+    url: src,
+    alt,
+    width,
+    height,
+  };
+
   return (
     <>
       <Dialog
@@ -293,7 +306,7 @@ const Preview: React.FC<PreviewProps> = props => {
       >
         <div className={`${prefixCls}-img-wrapper`}>
           {imageRender
-            ? imageRender(imgNode, { transform, ...(groupContext ? { current } : {}) })
+            ? imageRender(imgNode, { transform, image, ...(groupContext ? { current } : {}) })
             : imgNode}
         </div>
       </Dialog>
@@ -325,6 +338,7 @@ const Preview: React.FC<PreviewProps> = props => {
         onFlipY={onFlipY}
         onClose={onClose}
         zIndex={restProps.zIndex !== undefined ? restProps.zIndex + 1 : undefined}
+        image={image}
       />
     </>
   );