fix: support PreviewGroup#items locating when clicking image (#344)

* fix: support PreviewGroup#items locating when clicking image

* fix: use fromItems boolean

* fix: types

* fix: boolean

* fix: update

Author: vagusX

docs/demo/previewgroup-items.md

@@ -0,0 +1,8 @@
+---
+title: previewGroupItems
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/previewgroup-items.tsx"></code>

docs/examples/controlledWithGroup.tsx

@@ -6,6 +6,7 @@ import { defaultIcons } from './common';
 
 export default function Base() {
   const [visible, setVisible] = React.useState(false);
+  const [current, setCurrent] = React.useState(1);
   return (
     <div>
       <div>
@@ -25,7 +26,8 @@ export default function Base() {
           onVisibleChange: value => {
             setVisible(value);
           },
-          current: 1,
+          current,
+          onChange: c => setCurrent(c),
         }}
       >
         <Image

docs/examples/previewgroup-items.tsx

@@ -0,0 +1,20 @@
+import Image from 'rc-image';
+import * as React from 'react';
+import '../../assets/index.less';
+
+export default function Base() {
+  return (
+    <Image.PreviewGroup
+      items={[
+        'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
+        'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
+        'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+      ]}
+    >
+      <Image
+        width={200}
+        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+      />
+    </Image.PreviewGroup>
+  );
+}

src/Image.tsx

@@ -168,7 +168,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
   const onPreview: React.MouseEventHandler<HTMLDivElement> = e => {
     const { left, top } = getOffset(e.target);
     if (groupContext) {
-      groupContext.onPreview(imageId, left, top);
+      groupContext.onPreview(imageId, src, left, top);
     } else {
       setMousePosition({
         x: left,

src/PreviewGroup.tsx

@@ -67,7 +67,7 @@ const Group: React.FC<GroupConsumerProps> = ({
   } = typeof preview === 'object' ? preview : ({} as PreviewGroupPreview);
 
   // ========================== Items ===========================
-  const [mergedItems, register] = usePreviewItems(items);
+  const [mergedItems, register, fromItems] = usePreviewItems(items);
 
   // ========================= Preview ==========================
   // >>> Index
@@ -91,15 +91,19 @@ const Group: React.FC<GroupConsumerProps> = ({
   const [mousePosition, setMousePosition] = useState<null | { x: number; y: number }>(null);
 
   const onPreviewFromImage = React.useCallback<OnGroupPreview>(
-    (id, mouseX, mouseY) => {
-      const index = mergedItems.findIndex(item => item.id === id);
+    (id, imageSrc, mouseX, mouseY) => {
+      const index = fromItems
+        ? mergedItems.findIndex(item => item.data.src === imageSrc)
+        : mergedItems.findIndex(item => item.id === id);
+
+      setCurrent(index < 0 ? 0 : index);
 
       setShowPreview(true);
       setMousePosition({ x: mouseX, y: mouseY });
-      setCurrent(index < 0 ? 0 : index);
+
       setKeepOpenIndex(true);
     },
-    [mergedItems],
+    [mergedItems, fromItems],
   );
 
   // Reset current when reopen

src/hooks/usePreviewItems.ts

@@ -15,7 +15,7 @@ export type Items = Omit<InternalItem, 'canPreview'>[];
  */
 export default function usePreviewItems(
   items?: GroupConsumerProps['items'],
-): [items: Items, registerImage: RegisterImage] {
+): [items: Items, registerImage: RegisterImage, fromItems: boolean] {
   // Context collection image data
   const [images, setImages] = React.useState<Record<number, PreviewImageElementProps>>({});
 
@@ -36,6 +36,7 @@ export default function usePreviewItems(
 
   // items
   const mergedItems = React.useMemo<Items>(() => {
+    // use `items` first
     if (items) {
       return items.map(item => {
         if (typeof item === 'string') {
@@ -51,6 +52,7 @@ export default function usePreviewItems(
       });
     }
 
+    // use registered images secondly
     return Object.keys(images).reduce((total: Items, id) => {
       const { canPreview, data } = images[id];
       if (canPreview) {
@@ -60,5 +62,5 @@ export default function usePreviewItems(
     }, []);
   }, [items, images]);
 
-  return [mergedItems, registerImage];
+  return [mergedItems, registerImage, !!items];
 }

src/interface.ts

@@ -26,4 +26,4 @@ export type InternalItem = PreviewImageElementProps & {
 
 export type RegisterImage = (id: string, data: PreviewImageElementProps) => VoidFunction;
 
-export type OnGroupPreview = (id: string, mouseX: number, mouseY: number) => void;
+export type OnGroupPreview = (id: string, imageSrc: string, mouseX: number, mouseY: number) => void;

tests/previewGroup.test.tsx

@@ -44,6 +44,28 @@ describe('PreviewGroup', () => {
     expect(onChange).toHaveBeenCalledWith(2, 1);
   });
 
+  it('items should works', () => {
+    const { rerender } = render(
+      <Image.PreviewGroup items={['src1', 'src2', 'src3']}>
+        <Image src="src2" className="first-img" />
+      </Image.PreviewGroup>,
+    );
+
+    fireEvent.click(document.querySelector('.first-img'));
+
+    expect(document.querySelector('.rc-image-preview-img')).toHaveAttribute('src', 'src2');
+
+    rerender(
+      <Image.PreviewGroup items={['src1', 'src2', 'src3']}>
+        <Image src="src3" className="first-img" />
+      </Image.PreviewGroup>,
+    );
+
+    fireEvent.click(document.querySelector('.first-img'));
+
+    expect(document.querySelector('.rc-image-preview-img')).toHaveAttribute('src', 'src3');
+  });
+
   it('Mount and UnMount', () => {
     const { container, unmount } = render(
       <Image.PreviewGroup>