fix: reset to first when close

react-component · Jun 17, 2023 · ea44fc6 · ea44fc6
1 parent e0ef69b
commit ea44fc6
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 57 deletions.
diff --git a/src/Image.tsx b/src/Image.tsx
@@ -4,7 +4,7 @@ import { getOffset } from 'rc-util/lib/Dom/css';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import type { GetContainer } from 'rc-util/lib/PortalWrapper';
 import * as React from 'react';
-import { useContext, useEffect, useRef, useState } from 'react';
+import { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { PreviewGroupContext } from './context';
 import type { TransformType } from './hooks/useImageTransform';
 import useRegisterImage from './hooks/useRegisterImage';
@@ -179,7 +179,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
   const mergedSrc = isError && fallback ? fallback : src;
 
   // ========================= ImageProps =========================
-  const imgCommonProps = React.useMemo(
+  const imgCommonProps = useMemo(
     () => {
       const obj: ImageElementProps = {};
       COMMON_PROPS.forEach((prop: any) => {
@@ -194,7 +194,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
   );
 
   // ========================== Register ==========================
-  const registerData: ImageElementProps = React.useMemo(
+  const registerData: ImageElementProps = useMemo(
     () => ({
       ...imgCommonProps,
       src,

diff --git a/src/Operations.tsx b/src/Operations.tsx
@@ -21,7 +21,7 @@ interface OperationsProps
   > {
   showSwitch: boolean;
   showProgress: boolean;
-  currentIndex: number;
+  current: number;
   transform: TransformType;
   count: number;
   scale: number;
@@ -51,7 +51,7 @@ const Operations: React.FC<OperationsProps> = props => {
     countRender,
     showSwitch,
     showProgress,
-    currentIndex,
+    current,
     transform,
     count,
     scale,
@@ -131,7 +131,7 @@ const Operations: React.FC<OperationsProps> = props => {
     <ul className={`${prefixCls}-operations`}>
       {showProgress && (
         <li className={`${prefixCls}-operations-progress`}>
-          {countRender?.(currentIndex + 1, count) ?? `${currentIndex + 1} / ${count}`}
+          {countRender?.(current + 1, count) ?? `${current + 1} / ${count}`}
         </li>
       )}
       {toolsNode}
@@ -144,15 +144,15 @@ const Operations: React.FC<OperationsProps> = props => {
         <>
           <div
             className={classnames(`${prefixCls}-switch-left`, {
-              [`${prefixCls}-switch-left-disabled`]: currentIndex === 0,
+              [`${prefixCls}-switch-left-disabled`]: current === 0,
             })}
             onClick={onSwitchLeft}
           >
             {left}
           </div>
           <div
             className={classnames(`${prefixCls}-switch-right`, {
-              [`${prefixCls}-switch-right-disabled`]: currentIndex === count - 1,
+              [`${prefixCls}-switch-right-disabled`]: current === count - 1,
             })}
             onClick={onSwitchRight}
           >
@@ -182,7 +182,7 @@ const Operations: React.FC<OperationsProps> = props => {
               close: onClose,
             },
             transform,
-            ...(groupContext ? { current: currentIndex, total: count } : {}),
+            ...(groupContext ? { current, total: count } : {}),
           })
         : toolbar}
     </>

diff --git a/src/Preview.tsx b/src/Preview.tsx
@@ -5,8 +5,8 @@ import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import KeyCode from 'rc-util/lib/KeyCode';
 import { warning } from 'rc-util/lib/warning';
 import React, { useContext, useEffect, useRef, useState } from 'react';
-import getFixScaleEleTransPosition from './getFixScaleEleTransPosition';
 import { PreviewGroupContext } from './context';
+import getFixScaleEleTransPosition from './getFixScaleEleTransPosition';
 import type { TransformAction, TransformType } from './hooks/useImageTransform';
 import useImageTransform from './hooks/useImageTransform';
 import Operations from './Operations';
@@ -67,7 +67,7 @@ export interface PreviewProps extends Omit<IDialogPropTypes, 'onClose'> {
   onClose?: () => void;
   onTransform?: (params: { transform: TransformType; action: TransformAction }) => void;
   toolbarRender?: (params: ToolbarRenderType) => React.ReactNode;
-  onChange?: (currentIndex, prevIndex) => void;
+  onChange?: (current, prev) => void;
 }
 
 const Preview: React.FC<PreviewProps> = props => {
@@ -93,6 +93,7 @@ const Preview: React.FC<PreviewProps> = props => {
     toolbarRender,
     onTransform,
     onChange,
+    afterClose,
     ...restProps
   } = props;
 
@@ -128,6 +129,7 @@ const Preview: React.FC<PreviewProps> = props => {
 
   const onAfterClose = () => {
     resetTransform('close');
+    afterClose?.();
   };
 
   const onZoomIn = () => {
@@ -363,7 +365,7 @@ const Preview: React.FC<PreviewProps> = props => {
         countRender={countRender}
         showSwitch={showLeftOrRightSwitches}
         showProgress={showOperationsProgress}
-        currentIndex={current}
+        current={current}
         count={count}
         scale={scale}
         minScale={minScale}

diff --git a/src/PreviewGroup.tsx b/src/PreviewGroup.tsx
@@ -1,13 +1,11 @@
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
-import omit from 'rc-util/lib/omit';
 import * as React from 'react';
 import { useState } from 'react';
 import { PreviewGroupContext } from './context';
 import type { TransformType } from './hooks/useImageTransform';
 import usePreviewItems from './hooks/usePreviewItems';
 import type { ImagePreviewType } from './Image';
-import type { ImageElementProps } from './interface';
-import { InternalItem, OnGroupPreview } from './interface';
+import type { ImageElementProps, OnGroupPreview } from './interface';
 import type { PreviewProps, ToolbarRenderType } from './Preview';
 import Preview from './Preview';
 
@@ -28,7 +26,7 @@ export interface PreviewGroupPreview
     transform: TransformType;
     current: number;
   }) => React.ReactNode;
-  onVisibleChange?: (value: boolean, prevValue: boolean, currentIndex: number) => void;
+  onVisibleChange?: (value: boolean, prevValue: boolean, current: number) => void;
   onChange?: (current: number, prevCurrent: number) => void;
 }
 
@@ -66,7 +64,7 @@ const Group: React.FC<GroupConsumerProps> = ({
     visible: previewVisible,
     onVisibleChange,
     getContainer,
-    current,
+    current: currentIndex,
     minScale,
     maxScale,
     countRender,
@@ -82,22 +80,17 @@ const Group: React.FC<GroupConsumerProps> = ({
 
   // ========================= Preview ==========================
   // >>> Index
-  const [currentIndex, setCurrentIndex] = useMergedState(0, {
-    value: current,
+  const [current, setCurrent] = useMergedState(0, {
+    value: currentIndex,
   });
 
   // >>> Image
-  const imgCommonProps = omit(mergedItems[currentIndex] || ({} as InternalItem), [
-    'id',
-    'canPreview',
-  ]);
-  const src = imgCommonProps.src;
-
+  const { src, ...imgCommonProps } = mergedItems[current]?.imgData || {};
   // >>> Visible
   const [isShowPreview, setShowPreview] = useMergedState(!!previewVisible, {
     value: previewVisible,
     onChange: (val, prevVal) => {
-      onVisibleChange?.(val, prevVal, currentIndex);
+      onVisibleChange?.(val, prevVal, current);
     },
   });
 
@@ -110,18 +103,18 @@ const Group: React.FC<GroupConsumerProps> = ({
 
       setShowPreview(true);
       setMousePosition({ x: mouseX, y: mouseY });
-      setCurrentIndex(
+      setCurrent(
         // `items` should always open the first one
         // We easy replace `-1` to `0` here
-        index < 0 ? 0 : index,
+        Math.max(0, index),
       );
     },
     [mergedItems],
   );
 
   // ========================== Events ==========================
   const onInternalChange: PreviewGroupPreview['onChange'] = (next, prev) => {
-    setCurrentIndex(next);
+    setCurrent(next);
 
     onChange?.(next, prev);
   };
@@ -131,6 +124,13 @@ const Group: React.FC<GroupConsumerProps> = ({
     setMousePosition(null);
   };
 
+  // if not controlled current, reset to first image when closed
+  const afterClose = () => {
+    if (currentIndex === undefined) {
+      setCurrent(0);
+    }
+  };
+
   // ========================= Context ==========================
   const previewGroupContext = React.useMemo(
     () => ({ register, onPreview: onPreviewFromImage }),
@@ -153,13 +153,14 @@ const Group: React.FC<GroupConsumerProps> = ({
         minScale={minScale}
         maxScale={maxScale}
         getContainer={getContainer}
-        current={currentIndex}
+        current={current}
         count={mergedItems.length}
         countRender={countRender}
         onTransform={onTransform}
         toolbarRender={toolbarRender}
         imageRender={imageRender}
         onChange={onInternalChange}
+        afterClose={afterClose}
         {...dialogProps}
       />
     </PreviewGroupContext.Provider>

diff --git a/src/hooks/usePreviewItems.ts b/src/hooks/usePreviewItems.ts
@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { InternalItem, PreviewImageElementProps, RegisterImage } from '../interface';
 import type { GroupConsumerProps } from '../PreviewGroup';
 
-export type Items = InternalItem[];
+export type Items = Omit<InternalItem, 'canPreview'>[];
 
 /**
  * Merge props provided `items` or context collected images
@@ -31,23 +31,18 @@ export default function usePreviewItems(
   // items
   const mergedItems = React.useMemo<Items>(() => {
     if (items) {
-      return items.map((item, index) => {
-        const itemObj = typeof item === 'string' ? { src: item } : item;
-
-        return {
-          ...itemObj,
-          // From `items` should always `id` not same as context registered one
-          id: `items_${index}`,
-        };
-      });
+      return items.map(item =>
+        typeof item === 'string' ? { imgData: { src: item } } : { imgData: item },
+      );
     }
 
-    return Object.keys(images)
-      .map(id => ({
-        ...images[id],
-        id,
-      }))
-      .filter(info => info.canPreview);
+    return Object.keys(images).reduce((total: Items, id) => {
+      const { canPreview, imgData } = images[id];
+      if (canPreview) {
+        total.push({ imgData, id });
+      }
+      return total;
+    }, []);
   }, [items, images]);
 
   return [mergedItems, registerImage];

diff --git a/src/hooks/useRegisterImage.ts b/src/hooks/useRegisterImage.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { ImageElementProps } from '../interface';
 import { PreviewGroupContext } from '../context';
+import type { ImageElementProps } from '../interface';
 
 let uid = 0;
 
@@ -12,7 +12,7 @@ export default function useRegisterImage(canPreview: boolean, imgData: ImageElem
   const groupContext = React.useContext(PreviewGroupContext);
 
   const registerData = {
-    ...imgData,
+    imgData,
     canPreview,
   };
 
@@ -23,13 +23,7 @@ export default function useRegisterImage(canPreview: boolean, imgData: ImageElem
     if (groupContext) {
       return groupContext.register(id, registerData);
     }
-  }, [canPreview]);
-
-  React.useEffect(() => {
-    if (groupContext) {
-      return groupContext.register(id, registerData);
-    }
-  }, [imgData]);
+  }, [canPreview, imgData]);
 
   return id;
 }
diff --git a/src/interface.ts b/src/interface.ts
@@ -15,12 +15,13 @@ export type ImageElementProps = Pick<
   | 'alt'
 >;
 
-export type PreviewImageElementProps = ImageElementProps & {
+export type PreviewImageElementProps = {
+  imgData: ImageElementProps;
   canPreview: boolean;
 };
 
 export type InternalItem = PreviewImageElementProps & {
-  id: string;
+  id?: string;
 };
 
 export type RegisterImage = (id: string, data: PreviewImageElementProps) => VoidFunction;