Skip to content

Commit

Permalink
feat: add imgInfo param for render function (#336)
Browse files Browse the repository at this point in the history
* 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>
  • Loading branch information
nova1751 and afc163 authored May 4, 2024
1 parent 42305e8 commit 2c00fe6
Show file tree
Hide file tree
Showing 5 changed files with 47 additions and 3 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ lib
coverage
yarn.lock
package-lock.json
pnpm-lock.yaml
es/
.storybook
.doc
Expand Down
16 changes: 16 additions & 0 deletions docs/examples/toolbarRender.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
11 changes: 10 additions & 1 deletion src/Image.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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?: (
Expand Down Expand Up @@ -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}
Expand Down
4 changes: 4 additions & 0 deletions src/Operations.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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<
Expand Down Expand Up @@ -42,6 +43,7 @@ interface OperationsProps
info: ToolbarRenderInfoType | Omit<ToolbarRenderInfoType, 'current' | 'total'>,
) => React.ReactNode;
zIndex?: number;
image?: ImgInfo;
}

const Operations: React.FC<OperationsProps> = props => {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -209,6 +212,7 @@ const Operations: React.FC<OperationsProps> = props => {
},
transform,
...(groupContext ? { current, total: count } : {}),
image,
})
: toolbarNode}
</div>
Expand Down
18 changes: 16 additions & 2 deletions src/Preview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -101,6 +105,8 @@ const Preview: React.FC<PreviewProps> = props => {
prefixCls,
src,
alt,
width,
height,
fallback,
movable = true,
onClose,
Expand Down Expand Up @@ -273,6 +279,13 @@ const Preview: React.FC<PreviewProps> = props => {
/>
);

const image = {
url: src,
alt,
width,
height,
};

return (
<>
<Dialog
Expand All @@ -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>
Expand Down Expand Up @@ -325,6 +338,7 @@ const Preview: React.FC<PreviewProps> = props => {
onFlipY={onFlipY}
onClose={onClose}
zIndex={restProps.zIndex !== undefined ? restProps.zIndex + 1 : undefined}
image={image}
/>
</>
);
Expand Down

0 comments on commit 2c00fe6

Please sign in to comment.