fix: only one group item should have operation-process (#127)

react-component · Aug 31, 2022 · 7acbbfb · 7acbbfb · vercel · Aug 31, 2022
1 parent 0ff6289
commit 7acbbfb
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/Preview.tsx b/src/Preview.tsx
@@ -74,6 +74,7 @@ const Preview: React.FC<PreviewProps> = props => {
   const currentPreviewIndex = previewUrlsKeys.indexOf(current);
   const combinationSrc = isPreviewGroup ? previewUrls.get(current) : src;
   const showLeftOrRightSwitches = isPreviewGroup && previewGroupCount > 1;
+  const showOperationsProgress = isPreviewGroup && previewGroupCount >= 1;
   const [lastWheelZoomDirection, setLastWheelZoomDirection] = useState({ wheelDirection: 0 });
 
   const onAfterClose = () => {
@@ -302,7 +303,7 @@ const Preview: React.FC<PreviewProps> = props => {
       {...restProps}
     >
       <ul className={`${prefixCls}-operations`}>
-        {showLeftOrRightSwitches && (
+        {showOperationsProgress && (
           <li className={`${prefixCls}-operations-progress`}>
             {countRender?.(currentPreviewIndex + 1, previewGroupCount) ??
               `${currentPreviewIndex + 1} / ${previewGroupCount}`}
@@ -317,7 +318,7 @@ const Preview: React.FC<PreviewProps> = props => {
             key={type}
           >
             {React.isValidElement(icon)
-              ? React.cloneElement(icon, { className: iconClassName })
+              ? React.cloneElement<{ className?: string }>(icon, { className: iconClassName })
               : icon}
           </li>
         ))}

diff --git a/tests/__snapshots__/previewGroup.test.tsx.snap b/tests/__snapshots__/previewGroup.test.tsx.snap
@@ -20,6 +20,11 @@ exports[`PreviewGroup With Controlled 1`] = `
       <ul
         class="rc-image-preview-operations"
       >
+        <li
+          class="rc-image-preview-operations-progress"
+        >
+          1 / 1
+        </li>
         <li
           class="rc-image-preview-operations-operation"
         />