feature: add top progress when use PreviewGroup

README.md

@@ -55,7 +55,7 @@ ReactDOM.render(
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| preview | boolean \| {visible: boolean,onVisibleChange:function(value, prevValue),getContainer: string \| HTMLElement \| (() => HTMLElement) \| false } | true | Whether to show preview |
+| preview | boolean \| { visible: boolean, onVisibleChange: function(value, prevValue), getContainer: string \| HTMLElement \| (() => HTMLElement) \| false } | true | Whether to show preview |
 | prefixCls | string | rc-image | Classname prefix |
 | placeholder | boolean \| ReactElement | - | if `true` will set default placeholder or use `ReactElement` set customize placeholder |
 | fallback | string | - | Load failed src |
@@ -81,8 +81,9 @@ ReactDOM.render(
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| preview | boolean \| {visible: boolean,onVisibleChange:function(value, prevValue),getContainer: string \| HTMLElement \| (() => HTMLElement) \| false } | true | Whether to show preview |
-| current | number | 0 | If Preview the show img index |
+| preview | boolean \|<br> { visible: boolean, onVisibleChange: function(value, prevValue), getContainer: string \| HTMLElement \| (() => HTMLElement) \| false, countRender?: (current: number, total: number) => string, current: number } | true | Whether to show preview, <br> current: If Preview the show img index, default 0 |
+| previewPrefixCls | string | rc-image-preview | Preview classname prefix |
+| icons | { [iconKey]?: ReactNode } | - | Icons in the top operation bar, iconKey: 'rotateLeft' \| 'rotateRight' \| 'zoomIn' \| 'zoomOut' \| 'close' \| 'left' \| 'right' 
 
 ## Example
 

assets/index.less

@@ -149,6 +149,12 @@
       color: @text-color;
       background: fade(@preview-mask-bg, 45%);
 
+      &-progress {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
       &-operation {
         padding: 10px;
         cursor: pointer;

docs/examples/controlledWithGroup.tsx

@@ -31,6 +31,7 @@ export default function Base() {
           width={200}
         />
         <Image wrapperStyle={{ marginRight: 24, width: 200 }} src={require('./images/1.jpeg')} />
+        <Image wrapperStyle={{ marginRight: 24, width: 200 }} src={require('./images/2.jpeg')} />
       </Image.PreviewGroup>
     </div>
   );

docs/examples/placeholder.tsx

@@ -18,7 +18,7 @@ export default function Base() {
       <div>
         <Image
           // eslint-disable-next-line global-require
-          src={`${require('./demo1.png')}?random=${random}`}
+          src={`${require('./images/placeholder.png')}?random=${random}`}
           width={400}
           placeholder
         />
@@ -28,7 +28,7 @@ export default function Base() {
       <h1>Custom placeholder</h1>
       <Image
         // eslint-disable-next-line global-require
-        src={`${require('./demo1.png')}?random=${random + 1}`}
+        src={`${require('./images/placeholder.png')}?random=${random + 1}`}
         width={400}
         placeholder={
           <Image

docs/examples/previewgroup.tsx

@@ -6,7 +6,11 @@ import '../../assets/index.less';
 export default function PreviewGroup() {
   return (
     <div>
-      <Image.PreviewGroup>
+      <Image.PreviewGroup
+        preview={{
+          countRender: (current, total) => `第${current}张 / 总共${total}张`,
+        }}
+      >
         <Image wrapperStyle={{ marginRight: 24, width: 200 }} src={require('./images/1.jpeg')} />
         <Image
           wrapperStyle={{ marginRight: 24, width: 200 }}
@@ -15,7 +19,7 @@ export default function PreviewGroup() {
         />
         <Image wrapperStyle={{ marginRight: 24, width: 200 }} src={require('./images/2.jpeg')} />
         <Image wrapperStyle={{ marginRight: 24, width: 200 }} src={require('./images/3.jpeg')} />
-        <Image wrapperStyle={{ marginRight: 24, width: 200 }} src='error' alt="error" />
+        <Image wrapperStyle={{ marginRight: 24, width: 200 }} src="error" alt="error" />
         <Image wrapperStyle={{ marginRight: 24, width: 200 }} src={require('./images/1.jpeg')} />
       </Image.PreviewGroup>
     </div>

src/Preview.tsx

@@ -25,6 +25,7 @@ export interface PreviewProps extends Omit<IDialogPropTypes, 'onClose'> {
     left?: React.ReactNode;
     right?: React.ReactNode;
   };
+  countRender?: (current: number, total: number) => string;
 }
 
 const initialPosition = {
@@ -42,6 +43,7 @@ const Preview: React.FC<PreviewProps> = props => {
     visible,
     icons = {},
     rootClassName,
+    countRender,
     ...restProps
   } = props;
   const { rotateLeft, rotateRight, zoomIn, zoomOut, close, left, right } = icons;
@@ -287,6 +289,12 @@ const Preview: React.FC<PreviewProps> = props => {
       {...restProps}
     >
       <ul className={`${prefixCls}-operations`}>
+        {showLeftOrRightSwitches && (
+          <li className={`${prefixCls}-operations-progress`}>
+            {countRender?.(currentPreviewIndex + 1, previewGroupCount) ??
+              `${currentPreviewIndex + 1} / ${previewGroupCount}`}
+          </li>
+        )}
         {tools.map(({ icon, onClick, type, disabled }) => (
           <li
             className={classnames(toolClassName, {

src/PreviewGroup.tsx

@@ -12,6 +12,7 @@ export interface PreviewGroupPreview
    * @default 0
    */
   current?: number;
+  countRender?: (current: number, total: number) => string;
 }
 
 export interface GroupConsumerProps {
@@ -62,6 +63,7 @@ const Group: React.FC<GroupConsumerProps> = ({
     onVisibleChange: onPreviewVisibleChange = undefined,
     getContainer = undefined,
     current: currentIndex = 0,
+    countRender = undefined,
     ...dialogProps
   } = typeof preview === 'object' ? preview : {};
   const [previewUrls, setPreviewUrls] = useState<Map<number, PreviewUrl>>(new Map());
@@ -138,6 +140,7 @@ const Group: React.FC<GroupConsumerProps> = ({
         src={canPreviewUrls.get(current)}
         icons={icons}
         getContainer={getContainer}
+        countRender={countRender}
         {...dialogProps}
       />
     </Provider>

tests/__snapshots__/previewGroup.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Preview With Controlled 1`] = `
+exports[`PreviewGroup With Controlled 1`] = `
 <div
   class="rc-image-preview"
   role="document"

tests/previewGroup.test.tsx

@@ -4,7 +4,7 @@ import { act } from 'react-dom/test-utils';
 import KeyCode from 'rc-util/lib/KeyCode';
 import Image from '../src';
 
-describe('Preview', () => {
+describe('PreviewGroup', () => {
   beforeEach(() => {
     jest.useFakeTimers();
   });
@@ -26,9 +26,15 @@ describe('Preview', () => {
       jest.runAllTimers();
       wrapper.update();
     });
-
     expect(wrapper.find('.rc-image-preview').get(0)).toBeTruthy();
 
+    const previewProgressElement = wrapper.find(
+      '.rc-image-preview .rc-image-preview-operations-progress',
+    );
+
+    expect(previewProgressElement).toBeTruthy();
+    expect(previewProgressElement.text()).toEqual('1 / 2');
+
     expect(() => {
       wrapper.unmount();
     }).not.toThrow();
@@ -50,7 +56,35 @@ describe('Preview', () => {
     expect(wrapper.find('.rc-image-preview').get(0)).toBeFalsy();
   });
 
+  it('Preview with Custom Preview Property', () => {
+    const wrapper = mount(
+      <Image.PreviewGroup
+        preview={{
+          countRender: (current, total) => `current:${current} / total:${total}`,
+        }}
+      >
+        <Image src="src1" />
+        <Image src="src2" />
+        <Image src="src2" />
+      </Image.PreviewGroup>,
+    );
+
+    act(() => {
+      wrapper.find('.rc-image').at(0).simulate('click');
+      jest.runAllTimers();
+      wrapper.update();
+    });
+
+    const previewProgressElement = wrapper.find(
+      '.rc-image-preview .rc-image-preview-operations-progress',
+    );
+
+    expect(previewProgressElement).toBeTruthy();
+    expect(previewProgressElement.text()).toEqual('current:1 / total:3');
+  });
+
   it('Switch', () => {
+    const previewProgressElementPath = '.rc-image-preview .rc-image-preview-operations-progress';
     const wrapper = mount(
       <Image.PreviewGroup>
         <Image src="src1" />
@@ -68,6 +102,7 @@ describe('Preview', () => {
     expect(
       wrapper.find('.rc-image-preview .rc-image-preview-switch-left-disabled').get(0),
     ).toBeTruthy();
+    expect(wrapper.find(previewProgressElementPath).text()).toEqual('1 / 2');
 
     act(() => {
       wrapper.find('.rc-image-preview .rc-image-preview-switch-right').simulate('click');
@@ -78,6 +113,7 @@ describe('Preview', () => {
     expect(
       wrapper.find('.rc-image-preview .rc-image-preview-switch-right-disabled').get(0),
     ).toBeTruthy();
+    expect(wrapper.find(previewProgressElementPath).text()).toEqual('2 / 2');
 
     act(() => {
       wrapper.find('.rc-image-preview .rc-image-preview-switch-left').simulate('click');