fix: 修复只有一张图片开启loop为true的bug #141

Author: big-camel

packages/react-photo-view/src/PhotoSlider.tsx

@@ -463,7 +463,7 @@ export default function PhotoSlider(props: IPhotoSliderProps) {
           </div>
         </div>
       )}
-      {adjacentImages.map((item: DataType, currentIndex) => {
+      {adjacentImages.map((item, currentIndex) => {
         // 截取之前的索引位置
         const nextIndex =
           !enableLoop && index === 0
@@ -493,7 +493,7 @@ export default function PhotoSlider(props: IPhotoSliderProps) {
             loadingElement={loadingElement}
             brokenElement={brokenElement}
             onPhotoResize={handleResize}
-            isActive={(currentImage && currentImage.key) === item.key}
+            isActive={!item.isCloned && (currentImage && currentImage.key) === item.key}
             expose={updateState}
             enableMouseZoom={enableMouseZoom}
           />

packages/react-photo-view/src/hooks/useAdjacentImages.ts

@@ -1,15 +1,42 @@
 import { useMemo } from 'react'
 import type { DataType } from '../types'
 
+interface AdjacentDataType extends DataType {
+  /**
+   * 是否是克隆的
+   */
+  isCloned?: boolean
+}
+
 /**
  * 截取相邻三张图片
  */
-export default function useAdjacentImages(images: DataType[], index: number, loop: boolean) {
+export default function useAdjacentImages(
+  images: DataType[],
+  index: number,
+  loop: boolean,
+): AdjacentDataType[] {
   return useMemo(() => {
     const imageLength = images.length
     if (loop) {
       const connected = images.concat(images).concat(images)
-      return connected.slice(imageLength + index - 1, imageLength + index + 2)
+      const currentImage = connected[imageLength + index]
+      const sliceImages: AdjacentDataType[] = connected.slice(
+        imageLength + index - 1,
+        imageLength + index + 2,
+      )
+
+      const adjacentImages: AdjacentDataType[] = []
+
+      for (let i = 0; i < sliceImages.length - 1; i++) {
+        const image = sliceImages[i]
+        if (i !== 1 && image.key === currentImage.key) {
+          adjacentImages.push({ ...image, isCloned: true })
+        } else {
+          adjacentImages.push(image)
+        }
+      }
+      return adjacentImages
     }
     return images.slice(Math.max(index - 1, 0), Math.min(index + 2, imageLength + 1))
   }, [images, index, loop])