feat: support showTotal

Author: infeng

README.md

@@ -80,6 +80,7 @@ class App extends React.Component<any, any> {
 | disableMouseZoom   | boolean      |  false   | whether disable mouse zoom | false |
 | downloadInNewWindow | boolean | false | whether to download in a new window | false |
 | className   | string    |  -  | customized CSS class | false |
+| showTotal   | boolean    |  true  | whether to display the total number and range | false |
 
 ### ImageDecorator
 

src/ViewerCore.tsx

@@ -70,6 +70,7 @@ export default (props: ViewerProps) => {
     downloadable = false,
     noImgDetails = false,
     noToolbar = false,
+    showTotal = true,
    } = props;
 
   const initialState: ViewerCoreState = {
@@ -688,6 +689,9 @@ export default (props: ViewerProps) => {
               downloadable={downloadable}
               noImgDetails={noImgDetails}
               toolbars={customToolbar(defaultToolbars)}
+              activeIndex={state.activeIndex}
+              count={images.length}
+              showTotal={showTotal}
             />
           )}
           {props.noNavbar || (

src/ViewerProps.ts

@@ -105,6 +105,9 @@ interface ViewerProps {
   downloadInNewWindow?: boolean;
 
   className?: string;
+
+  // whether to display the total number and range
+  showTotal?: boolean;
 }
 
 export default ViewerProps;

src/ViewerToolbar.tsx

@@ -16,6 +16,9 @@ export interface ViewerToolbarProps {
   downloadable: boolean;
   noImgDetails: boolean;
   toolbars: ToolbarConfig[];
+  activeIndex: number;
+  count: number;
+  showTotal: boolean;
 }
 
 export const defaultToolbars: ToolbarConfig[] = [
@@ -99,6 +102,8 @@ export default function ViewerToolbar(props: ViewerToolbarProps) {
       {props.noImgDetails || <span className={`${props.prefixCls}-img-details`}>
         {`(${props.width} x ${props.height})`}
       </span>}
+      {props.showTotal
+        && <span className={`${props.prefixCls}-showTotal`}>{`${props.activeIndex + 1} of ${props.count}`}</span>}
     </p>
   ) : null;
   let toolbars = props.toolbars;

src/__tests__/viewer.test.tsx

@@ -739,4 +739,15 @@ describe('Viewer', () => {
 
     expect($$('.my-react-viewer')).toHaveLength(1);
   });
+
+  it('showTotal', () => {
+    viewerHelper.new({
+      className: 'my-react-viewer',
+    });
+    viewerHelper.open();
+
+    expect($$('.react-viewer-showTotal')[0].innerHTML).toBe('1 of 2');
+    triggerKeyboard(document, 'keydown', 39);
+    expect($$('.react-viewer-showTotal')[0].innerHTML).toBe('2 of 2');
+  });
 });

src/style/index.less

@@ -112,13 +112,17 @@
   }
 
   &-attribute {
-    margin: 0;
+    margin: 0 20px;
     margin-bottom: 6px;
     opacity: .8;
     color: #ccc;
     font-size: 15px;
   }
 
+  &-showTotal {
+    float: right;
+  }
+
   @toolbarHeight: 28px;
 
   &-toolbar {