feat: support onChange when current change (#141)

* feat: support onChange when current change

* feat: support onChange when current change

* feat: optimize code

* feat: styles

* feat: update snapshots

docs/examples/previewgroup.tsx

@@ -9,6 +9,7 @@ export default function PreviewGroup() {
       <Image.PreviewGroup
         preview={{
           countRender: (current, total) => `第${current}张 / 总共${total}张`,
+          onChange: (current, prev) => console.log(`当前第${current}张，上一次第${prev === undefined ? '-' : prev}张`)
         }}
       >
         <Image wrapperStyle={{ marginRight: 24, width: 200 }} src={require('./images/1.jpeg')} />

src/Preview.tsx

@@ -44,6 +44,7 @@ const Preview: React.FC<PreviewProps> = (props) => {
     scaleStep = 0.5,
     transitionName = 'zoom',
     maskTransitionName = 'fade',
+    onChange,
     ...restProps
   } = props;
 

src/PreviewGroup.tsx

@@ -1,6 +1,6 @@
+import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import * as React from 'react';
 import { useState } from 'react';
-import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import type { ImagePreviewType } from './Image';
 import type { PreviewProps } from './Preview';
 import Preview from './Preview';
@@ -13,6 +13,7 @@ export interface PreviewGroupPreview
    */
   current?: number;
   countRender?: (current: number, total: number) => string;
+  onChange?: (current: number, prevCurrent: number) => void;
 }
 
 export interface GroupConsumerProps {
@@ -65,14 +66,25 @@ const Group: React.FC<GroupConsumerProps> = ({
     getContainer = undefined,
     current: currentIndex = 0,
     countRender = undefined,
+    onChange = undefined,
     ...dialogProps
   } = typeof preview === 'object' ? preview : {};
   const [previewUrls, setPreviewUrls] = useState<Map<number, PreviewUrl>>(new Map());
-  const [current, setCurrent] = useState<number>();
+  const prevCurrent = React.useRef<number | undefined>();
+  const [current, setCurrent] = useMergedState<number>(undefined, {
+    onChange: (val, prev) => {
+      onChange?.(val, prev);
+      prevCurrent.current = prev;
+    }
+  });
   const [isShowPreview, setShowPreview] = useMergedState(!!previewVisible, {
     value: previewVisible,
-    onChange: onPreviewVisibleChange,
+    onChange: (val, prevVal) => {
+      onPreviewVisibleChange?.(val, prevVal);
+      onChange?.(current, prevCurrent.current);
+    },
   });
+
   const [mousePosition, setMousePosition] = useState<null | { x: number; y: number }>(null);
   const isControlled = previewVisible !== undefined;
   const previewUrlsKeys = Array.from(previewUrls.keys());

tests/previewGroup.test.tsx

@@ -12,6 +12,40 @@ describe('PreviewGroup', () => {
     jest.useRealTimers();
   });
 
+  it('onChange should be called', () => {
+    const onChange = jest.fn();
+    const { container } = render(
+      <Image.PreviewGroup preview={{ onChange }}>
+        <Image src="src1" className='firstImg' />
+        <Image
+          preview={false}
+          src="src2"
+        />
+        <Image src="src3" />
+        <Image src="errorsrc" alt="error" />
+      </Image.PreviewGroup>,
+    );
+
+    fireEvent.click(container.querySelector('.firstImg'));
+    act(() => {
+      jest.runAllTimers();
+    });
+    expect(onChange).toHaveBeenCalledWith(1, undefined);
+
+    fireEvent.click(document.querySelector('.rc-image-preview-switch-right'));
+    act(() => {
+      jest.runAllTimers();
+    });
+    expect(onChange).toHaveBeenCalledWith(3, 1);
+
+    fireEvent.click(document.querySelector('.rc-image-preview-switch-right'));
+    act(() => {
+      jest.runAllTimers();
+    });
+    expect(onChange).toHaveBeenCalledWith(4, 3);
+
+  });
+
   it('Mount and UnMount', () => {
     const { container, unmount } = render(
       <Image.PreviewGroup>
@@ -160,11 +194,12 @@ describe('PreviewGroup', () => {
   });
 
   it('should show error img', () => {
-    const { rerender } = render(
+    render(
       <Image.PreviewGroup preview={{ visible: true }}>
         <Image src="errorsrc" />
       </Image.PreviewGroup>,
     );
     expect(document.querySelector('.rc-image-preview-img')).toHaveAttribute('src', 'errorsrc');
-  })
+  });
+
 });