Skip to content

Commit 7d3ad95

Browse files
betavsbetavs
authored
fix(image-viewer): update trigger prop to accept index parameter (#3827)
1 parent b0abf30 commit 7d3ad95

File tree

16 files changed

+44
-39
lines changed

16 files changed

+44
-39
lines changed

‎packages/components/image-viewer/ImageViewer.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useMemo, useState } from 'react';
22
import { createPortal } from 'react-dom';
3-
import { isFunction } from 'lodash-es';
3+
import { isFunction, isNumber } from 'lodash-es';
44
import { ImageModal } from './ImageViewerModal';
55
import { imageViewerDefaultProps } from './defaultProps';
66
import type { TdImageViewerProps } from './type';
@@ -13,6 +13,7 @@ import useControlled from '../hooks/useControlled';
1313
import useDefaultProps from '../hooks/useDefaultProps';
1414
import { canUseDocument } from '../_util/dom';
1515
import useAttach from '../hooks/useAttach';
16+
import useIndex from './hooks/useIndex';
1617

1718
export interface ImageViewerProps extends TdImageViewerProps, StyledProps {}
1819

@@ -27,6 +28,7 @@ const ImageViewer: React.FC<ImageViewerProps> = (originalProps) => {
2728

2829
const [visibled, setVisibled] = useState(false);
2930
const list = useList(images);
31+
const { index, setIndex } = useIndex(props, images);
3032
const imageScale = useImageScale(imageScaleD);
3133
const viewerScale = useViewerScale(viewerScaleD);
3234

@@ -37,8 +39,11 @@ const ImageViewer: React.FC<ImageViewerProps> = (originalProps) => {
3739
setTimeout(() => setVisibled(false), 196);
3840
};
3941

40-
const open = () => {
42+
const open = (index?: number) => {
4143
if (!images) return;
44+
if (isNumber(index)) {
45+
setIndex(index);
46+
}
4247
setVisible(true, null);
4348
setVisibled(true);
4449
};
@@ -71,8 +76,8 @@ const ImageViewer: React.FC<ImageViewerProps> = (originalProps) => {
7176
viewerScale={viewerScale}
7277
zIndex={props.zIndex}
7378
defaultIndex={props.defaultIndex}
74-
index={props.index}
75-
onIndexChange={props.onIndexChange}
79+
index={index}
80+
onIndexChange={setIndex}
7681
onDownload={props.onDownload}
7782
draggable={props.draggable}
7883
closeOnOverlay={props.closeOnOverlay}

‎packages/components/image-viewer/ImageViewerModal.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -399,14 +399,15 @@ export interface ImageModalProps {
399399
onClose: (context: { trigger: 'close-btn' | 'overlay' | 'esc'; e: MouseEvent<HTMLElement> | KeyboardEvent }) => void;
400400
onOpen: () => void;
401401
onDownload?: TdImageViewerProps['onDownload'];
402-
onIndexChange?: (index: number, context: { trigger: 'prev' | 'next' }) => void;
402+
onIndexChange?: (index: number, context: { trigger: 'prev' | 'next' | 'current' }) => void;
403403
}
404404

405405
// 弹窗基础组件
406406
export const ImageModal: React.FC<ImageModalProps> = (props) => {
407407
const {
408408
closeOnOverlay,
409409
showOverlay = true,
410+
index,
410411
zIndex,
411412
images,
412413
isMini,
@@ -421,13 +422,12 @@ export const ImageModal: React.FC<ImageModalProps> = (props) => {
421422
onOpen,
422423
onClose,
423424
onDownload,
424-
...resProps
425+
onIndexChange,
425426
} = props;
426427
const { classPrefix } = useConfig();
427428
const [locale, t] = useLocaleReceiver('imageViewer');
428429

429-
if (resProps.index === undefined) delete resProps.index;
430-
const { index, next, prev, setIndex } = useIndex(resProps, images);
430+
const { next, prev } = useIndex(props, images);
431431
const { rotateZ, onResetRotate, onRotate } = useRotate();
432432
const { scale, onZoom, onZoomOut, onResetScale } = useScale(imageScale, visible);
433433
const { mirror, onResetMirror, onMirror } = useMirror();
@@ -537,7 +537,7 @@ export const ImageModal: React.FC<ImageModalProps> = (props) => {
537537
<ImageViewerHeader
538538
images={images}
539539
currentIndex={index}
540-
onImgClick={setIndex}
540+
onImgClick={onIndexChange}
541541
imageReferrerpolicy={imageReferrerpolicy}
542542
/>
543543
<div className={`${classPrefix}-image-viewer__modal-index`}>

‎packages/components/image-viewer/__tests__/image-viewer.test.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ describe('ImageViewer', () => {
1414
test('base', async () => {
1515
const onClose = vi.fn();
1616
const BasicImageViewer = () => {
17-
const trigger = ({ onOpen }) => <span onClick={onOpen}>{triggerText}</span>;
17+
const trigger = ({ open }) => <span onClick={() => open()}>{triggerText}</span>;
1818
return <ImageViewer trigger={trigger} images={[imgUrl]} onClose={onClose} />;
1919
};
2020
const { getByText } = render(<BasicImageViewer />);
@@ -54,7 +54,7 @@ describe('ImageViewer', () => {
5454

5555
test('base:attach is default=body', async () => {
5656
const BasicImageViewer = () => {
57-
const trigger = ({ open }) => <span onClick={open}>{triggerText}</span>;
57+
const trigger = ({ open }) => <span onClick={() => open()}>{triggerText}</span>;
5858
return <ImageViewer trigger={trigger} images={[imgUrl]} />;
5959
};
6060
const { getByText } = render(<BasicImageViewer />);
@@ -75,7 +75,7 @@ describe('ImageViewer', () => {
7575

7676
test('base:attach is function', async () => {
7777
const BasicImageViewer = () => {
78-
const trigger = ({ open }) => <span onClick={open}>{triggerText}</span>;
78+
const trigger = ({ open }) => <span onClick={() => open()}>{triggerText}</span>;
7979
return <ImageViewer trigger={trigger} images={[imgUrl]} attach={() => document.body} />;
8080
};
8181
const { getByText } = render(<BasicImageViewer />);
@@ -103,7 +103,7 @@ describe('ImageViewerMini', () => {
103103
test('modeless', async () => {
104104
const onClose = vi.fn();
105105
const BasicImageViewer = () => {
106-
const trigger = ({ onOpen }) => <span onClick={onOpen}>{triggerText}</span>;
106+
const trigger = ({ open }) => <span onClick={() => open()}>{triggerText}</span>;
107107
return <ImageViewer trigger={trigger} images={[imgUrl]} onClose={onClose} mode="modeless" />;
108108
};
109109
const { getByText } = render(<BasicImageViewer />);
@@ -133,7 +133,7 @@ describe('ImageViewerModal', () => {
133133
const onClose = vi.fn();
134134
const onIndexChange = vi.fn();
135135
const BasicImageViewer = () => {
136-
const trigger = ({ onOpen }) => <span onClick={onOpen}>{triggerText}</span>;
136+
const trigger = ({ open }) => <span onClick={() => open()}>{triggerText}</span>;
137137
return (
138138
<ImageViewer
139139
trigger={trigger}
@@ -172,7 +172,7 @@ describe('ImageViewerModal', () => {
172172
test('single', async () => {
173173
const user = userEvent.setup();
174174
const BasicImageViewer = () => {
175-
const trigger = ({ onOpen }) => <span onClick={onOpen}>{triggerText}</span>;
175+
const trigger = ({ open }) => <span onClick={() => open()}>{triggerText}</span>;
176176
return <ImageViewer trigger={trigger} images={[imgUrl]} />;
177177
};
178178
const { getByText } = render(<BasicImageViewer />);
@@ -208,7 +208,7 @@ describe('ImageViewerModal', () => {
208208

209209
test('closeBtn', async () => {
210210
const BasicImageViewer = () => {
211-
const trigger = ({ onOpen }) => <span onClick={onOpen}>{triggerText}</span>;
211+
const trigger = ({ open }) => <span onClick={() => open()}>{triggerText}</span>;
212212
return <ImageViewer trigger={trigger} images={[imgUrl]} closeBtn={() => <span>closeBtn</span>} />;
213213
};
214214
const { getByText } = render(<BasicImageViewer />);
@@ -223,7 +223,7 @@ describe('ImageViewerModal', () => {
223223
test('closeOnEscKeydown is false', async () => {
224224
const user = userEvent.setup();
225225
const BasicImageViewer = () => {
226-
const trigger = ({ onOpen }) => <span onClick={onOpen}>{triggerText}</span>;
226+
const trigger = ({ open }) => <span onClick={() => open()}>{triggerText}</span>;
227227
return <ImageViewer trigger={trigger} images={[imgUrl, imgUrl2]} closeOnEscKeydown={false} />;
228228
};
229229
const { getByText } = render(<BasicImageViewer />);
@@ -242,7 +242,7 @@ describe('ImageViewerModal', () => {
242242

243243
test('imageScale defaultScale', async () => {
244244
const BasicImageViewer = () => {
245-
const trigger = ({ onOpen }) => <span onClick={onOpen}>{triggerText}</span>;
245+
const trigger = ({ open }) => <span onClick={() => open()}>{triggerText}</span>;
246246
return (
247247
<ImageViewer
248248
trigger={trigger}
@@ -273,7 +273,7 @@ describe('ImageViewerModal', () => {
273273

274274
test('imageScale defaultScale is larger than max', async () => {
275275
const BasicImageViewer = () => {
276-
const trigger = ({ onOpen }) => <span onClick={onOpen}>{triggerText}</span>;
276+
const trigger = ({ open }) => <span onClick={() => open()}>{triggerText}</span>;
277277
return (
278278
<ImageViewer
279279
trigger={trigger}
@@ -304,7 +304,7 @@ describe('ImageViewerModal', () => {
304304

305305
test('imageScale defaultScale is smaller than min', async () => {
306306
const BasicImageViewer = () => {
307-
const trigger = ({ onOpen }) => <span onClick={onOpen}>{triggerText}</span>;
307+
const trigger = ({ open }) => <span onClick={() => open()}>{triggerText}</span>;
308308
return (
309309
<ImageViewer
310310
trigger={trigger}
@@ -335,7 +335,7 @@ describe('ImageViewerModal', () => {
335335

336336
test('imageScale max is unexpectedly smaller than min', async () => {
337337
const BasicImageViewer = () => {
338-
const trigger = ({ onOpen }) => <span onClick={onOpen}>{triggerText}</span>;
338+
const trigger = ({ open }) => <span onClick={() => open()}>{triggerText}</span>;
339339
return (
340340
<ImageViewer
341341
trigger={trigger}
@@ -368,7 +368,7 @@ describe('ImageViewerModal', () => {
368368
const referrerPolicy = 'strict-origin-when-cross-origin';
369369

370370
const BasicImageViewer = () => {
371-
const trigger = ({ onOpen }) => <span onClick={onOpen}>{triggerText}</span>;
371+
const trigger = ({ open }) => <span onClick={() => open()}>{triggerText}</span>;
372372
return <ImageViewer trigger={trigger} images={[imgUrl, imgUrl2]} imageReferrerpolicy={referrerPolicy} />;
373373
};
374374
const { getByText } = render(<BasicImageViewer />);

‎packages/components/image-viewer/_example/album.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default function BasicImageViewer() {
1919
alignItems: 'center',
2020
justifyContent: 'center',
2121
}}
22-
onClick={open}
22+
onClick={() => open()}
2323
>
2424
<span>
2525
<BrowseIcon size="16px" name={'browse'} /> 预览

‎packages/components/image-viewer/_example/albumIcons.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export default function BasicImageViewer() {
4141

4242
const trigger: ImageViewerProps['trigger'] = ({ open }) => {
4343
const listCommon = (
44-
<ImageViewerIconList onClick={open} list={images.map((i, index) => ({ label: `图片${index}` }))} />
44+
<ImageViewerIconList onClick={() => open()} list={images.map((i, index) => ({ label: `图片${index}` }))} />
4545
);
4646

4747
const mask = (
@@ -54,7 +54,7 @@ export default function BasicImageViewer() {
5454
alignItems: 'center',
5555
justifyContent: 'center',
5656
}}
57-
onClick={open}
57+
onClick={() => open()}
5858
>
5959
<span>
6060
<BrowseIcon size="16px" name={'browse'} /> 预览
@@ -101,7 +101,7 @@ export default function BasicImageViewer() {
101101
>
102102
<span style={{ flex: 1 }}>相册封面标题</span>
103103
<span style={{ cursor: 'pointer' }}>
104-
<BrowseIcon size={16} onClick={open} />
104+
<BrowseIcon size={16} onClick={() => open()} />
105105
<Popup
106106
trigger="click"
107107
content={listCommon}

‎packages/components/image-viewer/_example/base.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export default function BasicImageViewer() {
1818
alignItems: 'center',
1919
justifyContent: 'center',
2020
}}
21-
onClick={open}
21+
onClick={() => open()}
2222
>
2323
<span>
2424
<BrowseIcon size="16px" name={'browse'} /> 预览

‎packages/components/image-viewer/_example/block.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default function BasicImageViewer() {
1919
alignItems: 'center',
2020
justifyContent: 'center',
2121
}}
22-
onClick={open}
22+
onClick={() => open()}
2323
>
2424
<span>
2525
<BrowseIcon size="16px" name={'browse'} /> 预览

‎packages/components/image-viewer/_example/button.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@ import type { ImageViewerProps } from 'tdesign-react';
66
const img = 'https://tdesign.gtimg.com/demo/demo-image-1.png';
77

88
export default function BasicImageViewer() {
9-
const trigger: ImageViewerProps['trigger'] = ({ open }) => <Button onClick={open}>预览单张图片</Button>;
9+
const trigger: ImageViewerProps['trigger'] = ({ open }) => <Button onClick={() => open()}>预览单张图片</Button>;
1010
return <ImageViewer trigger={trigger} images={[img]} zIndex={10000} />;
1111
}

‎packages/components/image-viewer/_example/error.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export default function BasicImageViewer() {
2828
alignItems: 'center',
2929
justifyContent: 'center',
3030
}}
31-
onClick={open}
31+
onClick={() => open(index)}
3232
>
3333
<span>
3434
<BrowseIcon size="16px" name={'browse'} /> 预览
@@ -54,7 +54,7 @@ export default function BasicImageViewer() {
5454
);
5555
};
5656

57-
return <ImageViewer key={imgSrc} trigger={trigger} images={images} defaultIndex={index} zIndex={10000} />;
57+
return <ImageViewer key={imgSrc} trigger={trigger} images={images} zIndex={10000} />;
5858
})}
5959
</Space>
6060
);

‎packages/components/image-viewer/_example/modeless.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export default function BasicImageViewer() {
1818
alignItems: 'center',
1919
justifyContent: 'center',
2020
}}
21-
onClick={open}
21+
onClick={() => open()}
2222
>
2323
<span>
2424
<BrowseIcon size="16px" name={'browse'} /> 预览

0 commit comments

Comments
 (0)