Skip to content

Commit dc97d33

Browse files
zombieJzombieJ
authored
Merge pull request #261 from linxianxi/fix-api-style
fix: adjust imageRender、toolbarRender api style
2 parents e1c034d + 939d193 commit dc97d33

File tree

9 files changed

+81
-71
lines changed

9 files changed

+81
-71
lines changed

‎README.md‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -83,8 +83,8 @@ export default () => (
8383
| maxScale | number | 50 | max scale |
8484
| forceRender | boolean | - | Force render preview |
8585
| getContainer | string \| HTMLElement \| (() => HTMLElement) \| false | document.body | Return the mount node for preview |
86-
| imageRender | { originalNode: React.ReactNode, transform: [TransformType](#TransformType) } => React.ReactNode | - | Customize image |
87-
| toolbarRender | (params: Omit<[ToolbarRenderType](#ToolbarRenderType), 'current' \| 'total'>) => React.ReactNode | - | Customize toolbar |
86+
| imageRender | (originalNode: React.ReactNode, info: { transform: [TransformType](#TransformType) }) => React.ReactNode | - | Customize image |
87+
| toolbarRender | (originalNode: React.ReactNode, info: Omit<[ToolbarRenderInfoType](#ToolbarRenderInfoType), 'current' \| 'total'>) => React.ReactNode | - | Customize toolbar |
8888
| onVisibleChange | (visible: boolean, prevVisible: boolean) => void | - | Callback when visible is changed |
8989
| onTransform | { transform: [TransformType](#TransformType), action: [TransformAction](#TransformAction) } | - | Callback when transform is changed |
9090

@@ -124,8 +124,8 @@ export default () => (
124124
| getContainer | string \| HTMLElement \| (() => HTMLElement) \| false | document.body | Return the mount node for preview |
125125
| items | (string \| { src: string, alt: string, crossOrigin: string, ... })[] | - | preview group |
126126
| countRender | (current: number, total: number) => string | - | Customize count |
127-
| imageRender | { originalNode: React.ReactNode, transform: [TransformType](#TransformType), current: number } => React.ReactNode | - | Customize image |
128-
| toolbarRender | (params: [ToolbarRenderType](#ToolbarRenderType)) => React.ReactNode | - | Customize toolbar |
127+
| imageRender | (originalNode: React.ReactNode, info: { transform: [TransformType](#TransformType), current: number }) => React.ReactNode | - | Customize image |
128+
| toolbarRender | (originalNode: React.ReactNode, info: [ToolbarRenderInfoType](#ToolbarRenderInfoType)) => React.ReactNode | - | Customize toolbar |
129129
| onVisibleChange | (visible: boolean, prevVisible: boolean, current: number) => void | - | Callback when visible is changed |
130130
| onTransform | { transform: [TransformType](#TransformType), action: [TransformAction](#TransformAction) } | - | Callback when transform is changed |
131131

@@ -161,7 +161,7 @@ type TransformAction =
161161
| 'dragRebound';
162162
```
163163

164-
### ToolbarRenderType
164+
### ToolbarRenderInfoType
165165

166166
```typescript
167167
{
@@ -176,13 +176,13 @@ type TransformAction =
176176
closeIcon: React.ReactNode;
177177
};
178178
actions: {
179-
flipY: () => void;
180-
flipX: () => void;
181-
rotateLeft: () => void;
182-
rotateRight: () => void;
183-
zoomOut: () => void;
184-
zoomIn: () => void;
185-
close: () => void;
179+
onFlipY: () => void;
180+
onFlipX: () => void;
181+
onRotateLeft: () => void;
182+
onRotateRight: () => void;
183+
onZoomOut: () => void;
184+
onZoomIn: () => void;
185+
onClose: () => void;
186186
};
187187
transform: {
188188
x: number;

‎docs/examples/imageRender.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Image from 'rc-image';
22
import React from 'react';
33
import '../../assets/index.less';
4+
import React from 'react';
45

56
export default function imageRender() {
67
return (

‎docs/examples/toolbarRender.tsx‎

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import Image from 'rc-image';
2+
import React from 'react';
23
import '../../assets/index.less';
34

45
export default function ToolbarRender() {
@@ -8,20 +9,31 @@ export default function ToolbarRender() {
89
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
910
width={200}
1011
preview={{
11-
toolbarRender: ({
12-
actions: { flipY, flipX, rotateLeft, rotateRight, zoomIn, zoomOut, close },
13-
}) => {
12+
toolbarRender: (
13+
_,
14+
{
15+
actions: {
16+
onFlipY,
17+
onFlipX,
18+
onRotateLeft,
19+
onRotateRight,
20+
onZoomIn,
21+
onZoomOut,
22+
onClose,
23+
},
24+
},
25+
) => {
1426
return (
1527
<div
1628
style={{ position: 'fixed', display: 'flex', bottom: 0, width: '100%', gap: 10 }}
1729
>
18-
<div onClick={flipY}>flipY</div>
19-
<div onClick={flipX}>flipX</div>
20-
<div onClick={rotateLeft}>rotateLeft</div>
21-
<div onClick={rotateRight}>rotateRight</div>
22-
<div onClick={zoomIn}>zoomIn</div>
23-
<div onClick={zoomOut}>zoomOut</div>
24-
<div onClick={close}>close</div>
30+
<div onClick={onFlipY}>flipY</div>
31+
<div onClick={onFlipX}>flipX</div>
32+
<div onClick={onRotateLeft}>rotateLeft</div>
33+
<div onClick={onRotateRight}>rotateRight</div>
34+
<div onClick={onZoomIn}>zoomIn</div>
35+
<div onClick={onZoomOut}>zoomOut</div>
36+
<div onClick={onClose}>close</div>
2537
</div>
2638
);
2739
},

‎src/Image.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { PreviewGroupContext } from './context';
99
import type { TransformType } from './hooks/useImageTransform';
1010
import useRegisterImage from './hooks/useRegisterImage';
1111
import type { ImageElementProps } from './interface';
12-
import type { PreviewProps, ToolbarRenderType } from './Preview';
12+
import type { PreviewProps, ToolbarRenderInfoType } from './Preview';
1313
import Preview from './Preview';
1414
import PreviewGroup from './PreviewGroup';
1515

@@ -28,12 +28,15 @@ export interface ImagePreviewType
2828
maskClassName?: string;
2929
icons?: PreviewProps['icons'];
3030
scaleStep?: number;
31-
imageRender?: (params: {
32-
originalNode: React.ReactNode;
33-
transform: TransformType;
34-
}) => React.ReactNode;
31+
imageRender?: (
32+
originalNode: React.ReactNode,
33+
info: { transform: TransformType },
34+
) => React.ReactNode;
3535
onTransform?: PreviewProps['onTransform'];
36-
toolbarRender?: (params: Omit<ToolbarRenderType, 'current' | 'total'>) => React.ReactNode;
36+
toolbarRender?: (
37+
originalNode: React.ReactNode,
38+
info: Omit<ToolbarRenderInfoType, 'current' | 'total'>,
39+
) => React.ReactNode;
3740
}
3841

3942
export interface ImageProps

‎src/Operations.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import * as React from 'react';
55
import { useContext } from 'react';
66
import { PreviewGroupContext } from './context';
77
import type { TransformType } from './hooks/useImageTransform';
8-
import type { PreviewProps, ToolbarRenderType } from './Preview';
8+
import type { PreviewProps, ToolbarRenderInfoType } from './Preview';
99

1010
interface OperationsProps
1111
extends Pick<
@@ -36,7 +36,8 @@ interface OperationsProps
3636
onFlipX: () => void;
3737
onFlipY: () => void;
3838
toolbarRender: (
39-
params: ToolbarRenderType | Omit<ToolbarRenderType, 'current' | 'total'>,
39+
originalNode: React.ReactNode,
40+
info: ToolbarRenderInfoType | Omit<ToolbarRenderInfoType, 'current' | 'total'>,
4041
) => React.ReactNode;
4142
}
4243

@@ -127,7 +128,7 @@ const Operations: React.FC<OperationsProps> = props => {
127128
</li>
128129
));
129130

130-
const toolbar = (
131+
const toolbarNode = (
131132
<ul className={`${prefixCls}-operations`}>
132133
{showProgress && (
133134
<li className={`${prefixCls}-operations-progress`}>
@@ -161,8 +162,7 @@ const Operations: React.FC<OperationsProps> = props => {
161162
</>
162163
)}
163164
{toolbarRender
164-
? toolbarRender({
165-
originalNode: toolbar,
165+
? toolbarRender(toolbarNode, {
166166
icons: {
167167
flipYIcon: toolsNode[0],
168168
flipXIcon: toolsNode[1],
@@ -173,18 +173,18 @@ const Operations: React.FC<OperationsProps> = props => {
173173
closeIcon: toolsNode[6],
174174
},
175175
actions: {
176-
flipY: onFlipY,
177-
flipX: onFlipX,
178-
rotateLeft: onRotateLeft,
179-
rotateRight: onRotateRight,
180-
zoomOut: onZoomOut,
181-
zoomIn: onZoomIn,
182-
close: onClose,
176+
onFlipY,
177+
onFlipX,
178+
onRotateLeft,
179+
onRotateRight,
180+
onZoomOut,
181+
onZoomIn,
182+
onClose,
183183
},
184184
transform,
185185
...(groupContext ? { current, total: count } : {}),
186186
})
187-
: toolbar}
187+
: toolbarNode}
188188
</>
189189
);
190190

‎src/Preview.tsx‎

Lines changed: 15 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,7 @@ import useImageTransform from './hooks/useImageTransform';
1212
import Operations from './Operations';
1313
import { BASE_SCALE_RATIO, WHEEL_MAX_SCALE_RATIO } from './previewConfig';
1414

15-
export type ToolbarRenderType = {
16-
originalNode: React.ReactNode;
15+
export type ToolbarRenderInfoType = {
1716
icons: {
1817
flipYIcon: React.ReactNode;
1918
flipXIcon: React.ReactNode;
@@ -24,13 +23,13 @@ export type ToolbarRenderType = {
2423
closeIcon: React.ReactNode;
2524
};
2625
actions: {
27-
flipY: () => void;
28-
flipX: () => void;
29-
rotateLeft: () => void;
30-
rotateRight: () => void;
31-
zoomOut: () => void;
32-
zoomIn: () => void;
33-
close: () => void;
26+
onFlipY: () => void;
27+
onFlipX: () => void;
28+
onRotateLeft: () => void;
29+
onRotateRight: () => void;
30+
onZoomOut: () => void;
31+
onZoomIn: () => void;
32+
onClose: () => void;
3433
};
3534
transform: TransformType;
3635
current: number;
@@ -59,14 +58,13 @@ export interface PreviewProps extends Omit<IDialogPropTypes, 'onClose'> {
5958
scaleStep?: number;
6059
minScale?: number;
6160
maxScale?: number;
62-
imageRender?: (params: {
63-
originalNode: React.ReactNode;
64-
transform: TransformType;
65-
current?: number;
66-
}) => React.ReactNode;
61+
imageRender?: (
62+
originalNode: React.ReactNode,
63+
info: { transform: TransformType; current?: number },
64+
) => React.ReactNode;
6765
onClose?: () => void;
68-
onTransform?: (params: { transform: TransformType; action: TransformAction }) => void;
69-
toolbarRender?: (params: ToolbarRenderType) => React.ReactNode;
66+
onTransform?: (info: { transform: TransformType; action: TransformAction }) => void;
67+
toolbarRender?: (originalNode: React.ReactNode, info: ToolbarRenderInfoType) => React.ReactNode;
7068
onChange?: (current, prev) => void;
7169
}
7270

@@ -344,11 +342,7 @@ const Preview: React.FC<PreviewProps> = props => {
344342
>
345343
<div className={`${prefixCls}-img-wrapper`}>
346344
{imageRender
347-
? imageRender({
348-
originalNode: imgNode,
349-
transform,
350-
...(groupContext ? { current } : {}),
351-
})
345+
? imageRender(imgNode, { transform, ...(groupContext ? { current } : {}) })
352346
: imgNode}
353347
</div>
354348
</Dialog>

‎src/PreviewGroup.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import type { TransformType } from './hooks/useImageTransform';
66
import usePreviewItems from './hooks/usePreviewItems';
77
import type { ImagePreviewType } from './Image';
88
import type { ImageElementProps, OnGroupPreview } from './interface';
9-
import type { PreviewProps, ToolbarRenderType } from './Preview';
9+
import type { PreviewProps, ToolbarRenderInfoType } from './Preview';
1010
import Preview from './Preview';
1111

1212
export interface PreviewGroupPreview
@@ -20,12 +20,11 @@ export interface PreviewGroupPreview
2020
*/
2121
current?: number;
2222
countRender?: (current: number, total: number) => string;
23-
toolbarRender?: (params: ToolbarRenderType) => React.ReactNode;
24-
imageRender?: (params: {
25-
originalNode: React.ReactNode;
26-
transform: TransformType;
27-
current: number;
28-
}) => React.ReactNode;
23+
toolbarRender?: (originalNode: React.ReactNode, info: ToolbarRenderInfoType) => React.ReactNode;
24+
imageRender?: (
25+
originalNode: React.ReactNode,
26+
info: { transform: TransformType; current: number },
27+
) => React.ReactNode;
2928
onVisibleChange?: (value: boolean, prevValue: boolean, current: number) => void;
3029
onChange?: (current: number, prevCurrent: number) => void;
3130
}

‎src/hooks/useImageTransform.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export default function useImageTransform(
4040
imgRef: React.MutableRefObject<HTMLImageElement>,
4141
minScale: number,
4242
maxScale: number,
43-
onTransform: (params: { transform: TransformType; action: TransformAction }) => void,
43+
onTransform: (info: { transform: TransformType; action: TransformAction }) => void,
4444
) {
4545
const frame = useRef(null);
4646
const queue = useRef<TransformType[]>([]);

‎tests/preview.test.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import ZoomInOutlined from '@ant-design/icons/ZoomInOutlined';
77
import ZoomOutOutlined from '@ant-design/icons/ZoomOutOutlined';
88
import { act, createEvent, fireEvent, render } from '@testing-library/react';
99
import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
10+
import React from 'react';
1011

1112
jest.mock('../src/Preview', () => {
1213
const MockPreview = (props: any) => {
@@ -784,7 +785,7 @@ describe('Preview', () => {
784785
<Image
785786
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
786787
preview={{
787-
toolbarRender: ({ icons }) => (
788+
toolbarRender: (_, { icons }) => (
788789
<>
789790
{icons.flipYIcon}
790791
{icons.flipXIcon}

0 commit comments

Comments
 (0)