Merge pull request #156 from ricardonas/127-total-name

#127 - add total name

README.md

@@ -101,6 +101,7 @@ I'm sorry, ssr is not currently supported in `3.x`, it will be fixed in `4.0`.
 | 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 |
+| totalName | string | 'of' | total image separator name | false | 
 | maxScale   | number    |  -  | maximum scaling | false |
 | minScale   | number    |  0.1  | minimum scaling | false |
 

src/ViewerCore.tsx

@@ -71,6 +71,7 @@ export default (props: ViewerProps) => {
     noImgDetails = false,
     noToolbar = false,
     showTotal = true,
+    totalName = 'of',
     minScale = 0.1,
    } = props;
 
@@ -704,6 +705,7 @@ export default (props: ViewerProps) => {
               activeIndex={state.activeIndex}
               count={images.length}
               showTotal={showTotal}
+              totalName={totalName}
             />
           )}
           {props.noNavbar || (

src/ViewerProps.ts

@@ -109,6 +109,9 @@ interface ViewerProps {
   // whether to display the total number and range
   showTotal?: boolean;
 
+  // total indicator name.
+  totalName?: string;
+
   // max scale
   maxScale?: number;
 

src/ViewerToolbar.tsx

@@ -19,6 +19,7 @@ export interface ViewerToolbarProps {
   activeIndex: number;
   count: number;
   showTotal: boolean;
+  totalName: string;
 }
 
 export const defaultToolbars: ToolbarConfig[] = [
@@ -103,7 +104,8 @@ export default function ViewerToolbar(props: ViewerToolbarProps) {
         {`(${props.width} x ${props.height})`}
       </span>}
       {props.showTotal
-        && <span className={`${props.prefixCls}-showTotal`}>{`${props.activeIndex + 1} of ${props.count}`}</span>}
+        && <span className={`${props.prefixCls}-showTotal`}>
+          {`${props.activeIndex + 1} ${props.totalName} ${props.count}`}</span>}
     </p>
   ) : null;
   let toolbars = props.toolbars;

src/__tests__/viewer.test.tsx

@@ -768,6 +768,18 @@ describe('Viewer', () => {
     expect($$('.react-viewer-showTotal')[0].innerHTML).toBe('2 of 2');
   });
 
+  it('showTotal', () => {
+    viewerHelper.new({
+      className: 'my-react-viewer',
+      totalName: 'de',
+    });
+    viewerHelper.open();
+
+    expect($$('.react-viewer-showTotal')[0].innerHTML).toBe('1 de 2');
+    triggerKeyboard(document, 'keydown', 39);
+    expect($$('.react-viewer-showTotal')[0].innerHTML).toBe('2 de 2');
+  });
+
   it('max scale and min scale', () => {
     viewerHelper.new({
       className: 'my-react-viewer',