feat: support preview#defaultCurrent props

react-component · May 14, 2024 · 77a74c6 · 77a74c6
1 parent 66b57c2
commit 77a74c6
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -123,6 +123,7 @@ export default () => (
 | visible | boolean | - | Whether the preview is open or not |
 | movable | boolean | true | Enable drag |
 | current | number | - | Current index |
+| defaultCurrent | number | - | Default current index |
 | closeIcon | React.ReactNode | - | Custom close icon |
 | scaleStep | number | 0.5 | The number to which the scale is increased or decreased |
 | minScale | number | 1 | Min scale |

diff --git a/src/PreviewGroup.tsx b/src/PreviewGroup.tsx
@@ -19,6 +19,11 @@ export interface PreviewGroupPreview
  * @default 0
  */
  current?: number;
+ /**
+ * If Preview the show img default index
+ * @default 0
+ */
+ defaultCurrent?: number;
  countRender?: (current: number, total: number) => React.ReactNode;
  toolbarRender?: (
  originalNode: React.ReactElement,
@@ -54,6 +59,7 @@ const Group: React.FC<GroupConsumerProps> = ({
  onVisibleChange,
  getContainer,
  current: currentIndex,
+ defaultCurrent,
  movable,
  minScale,
  maxScale,
@@ -71,7 +77,7 @@ const Group: React.FC<GroupConsumerProps> = ({
 
  // ========================= Preview ==========================
  // >>> Index
- const [current, setCurrent] = useMergedState(0, {
+ const [current, setCurrent] = useMergedState(defaultCurrent || 0, {
  value: currentIndex,
  });
 

diff --git a/tests/controlled.test.tsx b/tests/controlled.test.tsx
@@ -57,6 +57,30 @@ describe('Controlled', () => {
  expect(document.querySelector('.rc-image-preview-img')).toHaveAttribute('src', 'src3');
  });
 
+ it('default current in group', () => {
+ const { rerender } = render(
+ <Image.PreviewGroup preview={{ defaultCurrent: 1 }}>
+ <Image src="src1" className="first-img" />
+ <Image src="src2" />
+ <Image src="src3" />
+ </Image.PreviewGroup>,
+ );
+
+ fireEvent.click(document.querySelector('.first-img'));
+
+ expect(document.querySelector('.rc-image-preview-img')).toHaveAttribute('src', 'src2');
+
+ rerender(
+ <Image.PreviewGroup preview={{ defaultCurrent: 2 }}>
+ <Image src="src1" className="first-img" />
+ <Image src="src2" />
+ <Image src="src3" />
+ </Image.PreviewGroup>,
+ );
+
+ expect(document.querySelector('.rc-image-preview-img')).toHaveAttribute('src', 'src3');
+ });
+
  // it('controlled visible and current with items in group', () => {
  // const { rerender } = render(
  // <Image.PreviewGroup items={['src2', 'src3', 'src4']} preview={{ current: 0, visible: true }}>